CSS : Positionnement et mise en page

Préserver les exclusions

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Microsoft Internet Explorer et Edge proposent les exclusions en mode natif, moyennant le préfixage -ms-. Il n'existe pas de polyfill pour les autres navigateurs, mais il y a un fort rapprochement avec les shapes.
03:55

Transcription

Pour l’instant les exclusions sont toujours en mode brouillon, en mode de travail. Il se peut que peut qu’elles soient retirées, revues ou corrigées, on ne sait pas pour l’instant. Quoi qu’il en soit on va explorer cette portabilité, l’ensemble des navigateurs ne le supporte pas, il n’y a pas de polyfill non plus qui tournent autour. Par contre Edge, Microsoft et Internet Explorer 11 le supportent avec le préfixe Microsoft. Donc on va faire quelques tests sur Microsoft et voir que cela peut avoir de l’intérêt, et il se peut fortement que cela soit fusionné par la suite, avec les shapes qui est un peu déjà le cas également, on verra cela juste après. Et donc, ici je vous invite également à vous rapprocher de la formation CSS 3 et sur la formation Mozilla ici, parce qu’on voit un peu ce qu’il en est au niveau des exclusions, des shapes des régions, de tous ces travaux qui sont en cours de certification, de recommandation. Donc juste pour mettre en place cette possibilité d’exclusion, voyons comment ce travail avec le seul navigateur qui pour l’instant ne sait jamais gérer ce genre d’approches, c’est internet explorer, là je suis sur Edge. Et donc on va pouvoir travailler pour faire flotter notre élément, et un contrôle de la manière dont le texte va pouvoir habiller cet élément qui est exclu. Alors ici on a un article qui contient diverses balises dont une balise figure qui contient une image et un fig-caption, qui se place par défaut dans le flux du navigateur, juste la fin. Pour pouvoir rendre cet élément flottant on ne va pas le faire flotter on va utiliser une position absolute directement, ça fonctionne bien avec IE à ce niveau là aussi. Donc on va lui mettre un top qui pourrait être de 100 pixels et un left ou un right de 0. Donc on va le faire flotter sur la position absolute, pour ça on va quand même venir placer en position relative pour être sûr que la figure se positionne par rapport à ce container parent, dans l’article. Et voilà l’élément a été placé ici. Par contre on s’aperçoit bien que le texte continue à courir derrière, on pourrait donner une opacité ici sur la figure. Histoire de voir ce qu’il en est, et vous voyez que le texte continue à flotter derrière. Alors ici je vais lui donner quelque chose d’un peu plus costaud, j’ai été fort là-dessus. Donc vous voyez que le texte continue à courir normalement. Pour pouvoir le faire exclure de cette région-là, on va lui dire 1 ms on va créer ms et, on va l'appeler au travers de la propriété wrap-flow, qui peut prendre plusieurs valeurs. Donc ici je vais prendre une valeur classique qui sera donc maximum, et si je lui dis tu passes par le côté maximum quand j’enregistre, il va passer du côté maximum ici. On aurait pu lui demander minimum, both start, end , on peut avoir plusieurs propriétés je vous inviterai à les travailler dans une étape ultérieure. Pour l’instant on va dire qu’il passe du côté maximum, alors c’est vrai que de ce côté-là ce n’est pas trop lisible, pour cela ce qu’on peut faire c’est un text-align ici et on va lui demander un right. Quand on actualise on a bien nos éléments qui se positionnent, qui ont évité. Alors là vous voyez que ce n’est pas tout à fait plein pot ici, ça peut passer par le start, pour lui demander s’il gère mieux cette propriété, donc vous voyez que quelque part, Internet Explorer le gère, mais pas aussi fortement qu’on pourrait le souhaiter. Par exemple ici voyons s’il prend une marge, si je lui mets un margin de 1em. J’enregistre, oui le 1em se place là mais il n’est pas placé de ce côté, ça le joue mais ça ne le joue pas forcément de manière bien cohérente. Alors je vous invite à passer à une étape suivante et à explorer toutes ces possibilités, tous ces paramètres que l’on va pouvoir travailler autour de ces exclusions.

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 !