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

Approfondir la propriété display

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
La propriété display, utilisée à plusieurs reprises, possède différentes valeurs. Rapprochez-vous du W3C et de Mozilla pour approfondir vos connaissances.
02:43

Transcription

Cela fait plusieurs fois que l'on a recours à la propriété display, en lui attribuant des valeurs tour à tour de inline-box ou de table. Donc, je vous invite à vous rapprocher directement du W3C pour voir cette fameuse propriété display en détail. Donc, je vous invite à venir consulter l'intégralité de ses propriétés et surtout les valeurs qu'elles peuvent obtenir. Vous avez un wiki ici, sur W3C qui est un peu plus lisible, plus digeste on va dire, qui va les présenter une par une et vous voyez on a un peu fait le tour de tout ce qui était en recommandation auprès du W3C sauf une qui est le fameux run-in ici. Alors justement, au sujet du run-in, si vous venez du côté de Mozilla alors là il y a énormément de valeurs supplémentaires qui peuvent être attribuées par Mozilla qui ne sont pas du tout encore en travail sur W3C mais vous avez une liste plus longue qui peut être intéressante de travailler surtout si vous distribuez que vers du Firefox. Par contre si vous regardez dans la partie basse sur la portabilité de chacune de ces propriétés, si vous regardez au niveau de run-in elle a été retirée de Chrome version 32. Elle a été retirée de Safari, forcément, Webkit oblige. Par contre elle n'est pas supportée par Firefox et au niveau d'Internet Explorer et Opera, on ne sait pas trop où ça en est. Alors c'est fabuleux parce que si je regarde sur Chrome ici, donc on a le code source ici d'une simple partie d'un bloc de type h1 et une série de p qui suivent comme ça, et dès l'instant où on va faire un h1 par un in on va demander en gros au bloc qui suit de venir se placer à la fin un peu comme s'il venait flotter derrière l'élément h1, comme s'il était en display-inline-block sans le petit espace, et il se passe rien du tout, on le voit au niveau de Chrome. Alors au niveau d'Opera où c'était un peu le flou, on voit qu'il se passe rien de ce côté-là. Et par contre du côté de Edge on voit qu'il n'y a aucune prise en compte et du côté d'Internet Explorer 11 eh bien voilà ici le run-in fonctionne, on n'a pas ce petit espace, vous vous rappelez comme le display-inline-block on n'a pas de flotaison car l'élément qui suit ne vient pas flotter derrière dans la suite, donc on se retrouve avec un élément qui fonctionne uniquement sur Internet Explorer 11 et pas sur les autres navigateurs. Donc venez explorer quand même la propriété display en détail pour voir toutes les possibilités que ça vous ouvre grâce au W3C et les particularités propres à Firefox. Et mettez plus ou moins de côté la valeur run-in qui ne va pas être supportée par grand nombre de navigateurs ces prochains temps.

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
Date de parution :31 août 2016

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 !