Construire des mises en page complexes et flexibles n’a jamais été facile, mais CSS3 a certainement beaucoup de soucis.
CSS3 fonctionnalités comme Flexbox et Colonnes ont fait de certaines mises en page complexes une réelle possibilité et maintenant elles sont rejointes par l’un des plus récents ajouts à la boîte à outils du concepteur de sites Web: les régions CSS.
Les régions CSS vous permettent de transférer du contenu dans une série de conteneurs sur une seule page. C'est l'équivalent de lier des zones de texte dans une application comme InDesign. Cela rend possible certaines mises en page auparavant uniquement possibles en brouillant la ligne entre les données et les styles.
Comme toujours, la prise en charge du navigateur est loin d’être parfaite.
CSS Regions est toujours un projet, ce qui signifie qu'il est expérimental. Au départ, le seul navigateur à le prendre en charge était Internet Explorer 10 (non, je ne plaisante pas); bien que IE10 utilise un iframe comme source de contenu.
Safari prétend offrir un support avec un préfixe.
Dans Chrome, vous pouvez tester la fonctionnalité en ouvrant votre navigateur, en tapant "about: flags" et en activant "enable-experimental-webkit-features", puis en redémarrant votre navigateur.
Heureusement, il y a aussi un JavaScript polyfill créé par Adobe qui apporte la fonctionnalité des régions CSS aux navigateurs qui ne le supportent pas actuellement, vous pouvez le trouver sur github.
Puisque le but des régions CSS est de permettre à notre texte de circuler dans différents conteneurs, la première chose dont vous avez besoin est du texte:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc cursus imperdiet purus ac eleifend. Vivamus posuere pellentesque nibh vel laoreet. Donec et sem odio. Donec sit amet lorem hendrerit, faucibus libero et, mattis lacus. Suspendisse dapibus rutrum felis quis interdum. Integer tincidunt, orci at condimentum placerat, est nulla sollicitudin velit, vitae gravida nisi odio ac ligula. Sed hendrerit ac massa vel ultricies. Vestibulum commodo, orci et tincidunt laoreet, enim tellus aliquet orci, quis dapibus sapien tellus eu felis. Etiam non arcu at eros luctus consectetur vitae eget nunc. In felis ipsum, vehicula ac mauris vel, porttitor gravida neque.Quisque orci turpis, aliquam vel tortor convallis, ullamcorper molestie nisl. Sed aliquet dignissim lorem non fringilla. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue erat ac hendrerit ullamcorper. Morbi facilisis urna nunc, eget pretium lectus congue vitae.Et puis des conteneurs:
Maintenant que le contenu de base est configuré, nous pouvons lier les conteneurs en utilisant flow-into et flow-from, vous remarquerez dans l'exemple que j'ai ajouté le préfixe -webkit- .
.text {-webkit-flow-into: text-flow;padding: 0;margin: 0;color: #F2F2F2;font-family: helvetica, arial;font-size: 16px;line-height: 22px;}.containers{-webkit-flow-from: text-flow;background: #333333;padding: 5px;margin-top: 100px;width: 200px;height: 300px;float: left;margin-right: 20px;}Si vous cochez cette case dans un navigateur, vous verrez que le texte va simplement passer d’une boîte à une autre. Si vous positionnez maintenant ces conteneurs, le texte continuera à circuler correctement.
-webkit-flow-into: text-flow;Cette propriété accepte un identifiant comme valeur. Lorsque vous transmettez une valeur à cette propriété, elle devient partie intégrante d'un flux nommé et arrête le rendu dans le cadre du flux de pages. Vous pouvez annuler cela en définissant la propriété sur none.
Le nom du flux que vous utilisez est arbitraire, assurez-vous simplement que vous êtes cohérent. Nous pouvons également avoir plusieurs éléments avec le même flux nommé que dans notre exemple ci-dessus.
Cela ne se limite pas au texte, nous pouvons également diffuser des images, des listes et de nombreux autres types de contenu HTML.
-webkit-flow-from: text-flow;Nous utilisons cette propriété pour spécifier les éléments devant recevoir le flux spécifié.
La valeur est le nom du flux que nous avons spécifié pour la propriété de flux entrant .
N'oubliez pas que tous les styles de contenu que vous appliquez au texte d'origine seront conservés dans le flux. Donc, si vous colorez le texte en bleu, il restera bleu sur tous les conteneurs.
Pour voir un exemple de régions CSS en action, consultez Ce stylo J'ai crée.
La prise en charge du navigateur pour CSS Regions est actuellement faible et le chemin à parcourir est long. Mais la flexibilité qu’elle offre est fantastique, et une fois que le support complet sera en place, je pense que les régions CSS seront la technique de référence pour les années à venir.
Êtes-vous excité par les régions CSS? Combien de temps pensez-vous que nous serons en mesure de les utiliser? Faites le nous savoir dans les commentaires.
Image / vignette en vedette, image de cascade via cuatrok77.