Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

CSS : Positionnement et mise en page

Adapter les colonnes aux navigateurs

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Pour chaque fonctionnalité, il est nécessaire de vous assurer du portage sur l'ensemble des navigateurs. Vous verrez que tous les navigateurs ne sont pas réglés de la même façon.
04:32

Transcription

En regardant pour porter cette possibilité d'ajouter des colonnes à un bloc sur l'ensemble d'un navigateur, et bien en fait on a besoin du préfixage, tout simplement pour Firefox, et donc on va mettre le -moz devant chacune des propriétés affectant la gestion des colonnes. Donc on a réduit tout simplement au nombre de colonnes, à la gouttière, à la règle, l'étendue d'un titre sur plusieurs colonnes, et puis les fameux break-inside, nouveautés qui vont permettre de pouvoir ne pas couper un bloc de paragraphes, préparer un dernier de colonne et un premier de colonne. La largeur a été mise à 80% globale et puis on a centré la section tout simplement. Donc, si je regarde du côté de Chrome ça fonctionne, on l'avait vu jusqu'à présent. Donc même si on réduit dans de petits espaces tout va fonctionner. Et si j'étends, bien entendu que cela fonctionne, on a bien aucune coupure dans les paragraphes, on a bien un dernier de colonne, et un premier de colonne, 3 colonnes, la gouttière qui va bien, et la règle, le titre qui s'étend tout le long. Parfait ! Si je passe du côté de Firefox... alors Firefox, lui, on voit que le paragraphe ici, donc les lettrines, nous permettent de voir qu'on est bien, rapidement, dans un paragraphe nouveau. Là on s'aperçoit que le break-inside n'a pas lieu, le dernierdecol n'a pas lieu, le premierdecol n'a pas lieu, la gouttière oui, la règle oui, le titre étendu non. Donc en fait, tout n'est pas forcément pris en compte, on n'a pas besoin de tester plus loin. Opera ici, tout est pris en compte, on a bien le dernier et le premierdecol, les gouttières, l'étendue, et si je réduis, on s'aperçoit qu'à aucun moment, on n'a un paragraphe qui se coupe, qui se passe au milieu ou quoi que ce soit. Donc tout s'étend, tout fonctionne normalement dans Opera, comme expecté. Si je regarde du côté d'Internet Explorer 11, on s'aperçoit d'entrée de jeu que tout est respecté sauf qu'ici lui n'est pas en dernierdecol, il est isolé tout seul, il passe pas à la suite, il est automatiquement sorti parce que c'est un premier de colonne donc automatiquement, une quatrième colonne implicite a été créée, le titre est bien étendu, et si je réduis, on a toujours notre histoire de 4 colonnes qui se met en place. Alors avant de voir d'où ça vient on va regarder du côté d'Edge. Ici Edge, même résultat, même combat. Donc, si je retourne dans le code ici maintenant, et que je vais rajouter une hauteur de 100 vh par exemple, en disant voilà, je veux un viewer-height plein pot sur la hauteur. J'enregistre, je viens dans Edge d'entrée de jeu, j'actualise, et on voit bien qu'à ce moment-là l'élément passe en dernier, c'était qu'une question de place. Donc Edge, comme Internet Explorer n'ont pas cette faculté de se dire, eh bien lui, je vais le pousser il faut vraiment le forcer à passer. Par contre dès que je réduis, même comportement que tout le monde, on a dépassé la hauteur et ici, même comportement que tout le monde... non pas comme Opera, par exemple, qui lui gardait l'extérieur. Bon bien entendu, s'il y a bien sûr Internet Explorer 11, et qu'on actualise notre page, et bien on se retrouve dans le même comportement donc on a cette étendue qui se passe. Pour les prises en compte, je vous invite à vous rapprocher de www.developper.mozilla.org sur lequel vous avez toutes les propriétés attenantes aux colonnes ici, et surtout ce qu'il y a d'intéressant c'est qu'en bas, vous avez dans la partie compatibilité des navigateurs quelques chose qui est assez généralement représentatif. Prenons par exemple, le break-after ici. Donc on a toutes les propriétés, donc descriptions globales, donc c'est plus lisible que le W3C, donc c'est pour ça que je vous ai orientés vers cette page-là. et dans la partie basse ici, vous avez vraiment la compatibilité et le support, avec toutefois le petit astérisque qui indique en gros ce qu'on retrouve ici dans le "Can I use" par exemple pour le page-break properties, en disant, attention, le page-break alias est pris en compte moyennant l'utilisation en gros des CSS2.1, mais ça supporte pas les éléments qui sont arrivés par la suite avec break*, break-inside, break-after, break-before, ou alors, partiellement. Explorez assez régulièrement, parce que c'est vrai que les navigateurs commencent à se positionner sur cette utilisation des colonnes et vous voyez que globalement dans ce dont on a besoin sans partir dans trop de fioritures, on arrive à utiliser sur l'ensemble des navigateurs presque ce qui nous permettrait de pouvoir distribuer sur au moins 2 colonnes un bloc de texte.

CSS : Positionnement et mise en page

Exploitez le positionnement en CSS et tirez parti des techniques pour mettre en forme votre site. Utilisez la flottaison des éléments, les propriétés de positionnement, etc.

5h01 (55 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :31 août 2016
Durée :5h01 (55 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !