CSS : Positionnement et mise en page

Comprendre le travail en régions

Testez gratuitement nos 1257 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Explorez les champs d'application d'une nouvelle approche du positionnement. Il est intéressant de comprendre sa mise en place, sa portabilité et son utilisation.
06:33

Transcription

Au cours des deux prochaines étapes, on va voir que le fait de travailler avec des régions va nous demander de repenser la manière dont on met en page et la manière dont on peut mettre en page. Alors toujours avant de commencer à explorer de nouvelles possibilités puisque c’est vraiment du brouillon pour l’instant, de travailler toujours, encore une fois, je ne le répèterai jamais assez, à proximité du W3C, et ensuite de se rapprocher de « Can I use » parce que par exemple, on va voir comment va fonctionner sur Edge cette utilisation. Donc ici avec le préfixage MS, puis attention c’est limité en utilisant Iframe comme source de contenu. Donc on va voir en exemple ce que cela veut dire. On s’aperçoit que sur Safari c’est supporté avec Webkit, sur IOS Safari, mais toujours pas supporté sur Firefox et Chrome. Ce qui veut dire qu’il va falloir se rapprocher de polyfill, donc de CSS région polyfill qui pourra être utilisé pour pallier aux lacunes d’utilisation, bien entendu avec la possibilité de regarder, d’activer les prises en compte expérimentales sur les navigateurs, ce qu’on avait fait au tout début de cette formation, donc pas besoin de venir le refaire. Alors qu’est-ce qu’il en est de cette histoire de iframe, au niveau de Internet Explorer et Edge. Alors ici on a une page body qui contient un iframe avec une source de contenu, cette source de contenu provient d’un fichier html classique. Tout simplement un body qui contient un div avec un identifiant texte. Ensuite on a un header et deux sections, colonne 1 et colonne 2 qui sont stylées, prêtes à recevoir du contenu mais qui n’ont pas de contenu, tout est vide à l’intérieur. Donc si je le visualise d’un point de vue navigateur ici, sur Chrome, on s’aperçoit que le iframe est représenté, le contenu texte est bien là. On a notre header ici, nos deux colonnes supposent qu’elles doivent être dessous, on peut le voir d’un point de vue code. Si on passe ici dans le body, on a bien notre iframe qui contient son contenu et les trois éléments, le header et les deux sections sont bien prêtes à recevoir du contenu mais aucun contenu n'est en place. Par contre si on va du côté de Edge, on s’aperçoit qu’une partie est prise en compte. Effectivement, on n’a plus le div on a bien le header qui est peuplé, les deux sections qui sont peuplées, par contre on n’a pas de stylage à cet élément- là qui était prévu dans le CSS, puisqu'on voit bien qu’on a un color white, qu’on a un font size de 24, un line-height de 30 qui n’est pas respecté ici, mais le flux est bien passé. Comment faire pour faire passer ce flux ici ? Parce qu’en réalité, si j’actualise mon contenu on s’aperçoit qu’on est exactement dans la même situation. En fait pour faire passer le contenu, il suffit de dire tout simplement dans la partie iframe, rappelez-vous, avec le pré fixage ms, on va dire on flow-into. Tu vas envoyer le flux dans key et on va créer une variable de flux de texte, par exemple on pourrait l’appeler comme on souhaite. Donc ici on va appeler ça fluxdetexte et on va dire que ce flux de texte va aller à la fois dans header et dans section. Donc on va lui dire toujours pré fixage ici, Microsoft et flow, mais ici ce n’est plus into mais from. Le flux va venir de qui ? Il va venir de cette fameuse variable, ce qui fait qu’on peut avoir plusieurs flux, on n’est pas obligé d’avoir un seul flux ici pour alimenter chacune de ces régions, et ici si j’actualise, on voit bien que ça bascule, que ça se place dans les éléments. Alors juste pour information, ici on peut actualiser tant qu’on voudra, ça passera pas car cela ne sera pas pris en compte. Alors pour le prendre en compte, il suffit de rajouter le css-regions-polyfill.min.js qu’on aura téléchargé directement sur le Github ici. On le lit, alors vous pouvez regarder si vous avez la possibilité de trouver des polyfill avec des cdn si cela vous intéresse, maintenant celui-là fait très bien l’affaire. On va penser quand même à redistribuer ici, mais là c’est juste pour la css qu’on l’utilise sur le box-sizing au niveau du border-box, et là qu’est-ce qu’il va falloir faire, tout simplement réorienter, mais cette-fois-ci sans utiliser de préfixage puisqu’on a un polyfill dessus. On va dire on flow-into et donc là on va donner fluxdetexte, et je vais volontairement le donner dans ce sens-là au départ, fluxdetexte, on verra qu’on a des possibilités de pouvoir donner des informations complémentaires, on le verra dans les étapes suivantes, et ici un flow-from. Et ce flow-from on va le reprendre, toujours pareil sur fluxdetexte. Ctrl S, donc cette fois-ci je vais partir dans le deuxième document. On voit bien qu’on a le div, alors juste une petite précision, du fait qu’on n’a pas de iframe, ici le contenu est directement placé dans la page. Donc ici sous forme de div base, et on a nos headers et cette fois-ci quatre colonnes de réception, qui sont prévues et en attente de contenu, qui sont stylées par contre déjà, et ici tout le contenu fait partie de la page. Alors on verra dans les prochaines étapes comment optimiser tout ça, parce qu’il n’y a pas vraiment d’intérêt, quoi que cela peut être discutable. Et ici si j’actualise, on voit bien que tout se repeuple. On part bien dans les colonnes comme il faut. Ici on a notre texte qui est stylé, et si je redimensionne cet élément-là, vous voyez que la quatrième colonne apparait. Il y avait une quatrième colonne qui était prévue et qui apparait, puisque dès qu’on va passer dans une largeur plus étroite de document, tout le contenu ne va pas pouvoir être affiché, et cette quatrième colonne vient de s’activer maintenant. Par contre dès qu’on en a plus besoin, vous voyez que la quatrième colonne disparait. Donc déjà on commence à avoir un balbutiement d’intérêt, qu’est-ce que pourrait être l’intérêt de ces éléments, travaillés en forme de région. Alors, revenons sur Edge maintenant, en sachant qu’Edge n’avait pas besoin de polyfill, pouvait travailler en iframe, vous voyez que maintenant qu’avec le polyfill, Edge est pris en compte également et cela accroit la portabilité de nos navigateurs. On voit bien ici que la quatrième région se génère automatiquement quand c’est nécessaire, et on va pouvoir commencer à travailler avec des régions. Je vous invite à passer à l’étape suivante et à voir justement comment on peut exploiter ces régions en production.

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 !