Accentsconagua

Plonger dans les régions CSS

Code
Share

Ce tutoriel couvrira les bases des régions CSS, ce qui nous permet de diffuser du contenu dans différentes sections de la page. Confus? Vous êtes probablement; continuer à lire!

Démo Voir en ligne

Prise en charge de la région CSS

Au moment de la rédaction de ce document, la spécification CSS Regions est un brouillon de travail et les choses peuvent changer! Les techniques mentionnées dans ce tutoriel peuvent changer d’implémentation. Le but de ce tutoriel est de donner une compréhension de base des régions CSS et de ce qui pourrait arriver à un navigateur près de chez vous..

Consultez le site caniuse.com pour obtenir une liste des navigateurs prenant en charge les régions CSS. Ce tutoriel utilisera uniquement des exemples webkit / non préfixés par le fournisseur pour des raisons de simplicité..

Si vous trouvez que la démo ne fonctionne pas pour vous, c'est peut-être parce que les régions CSS doivent être activées, voici les instructions pour Chrome (devrait fonctionner pour Chrome, Chrome Canary et Chrome)

  1. Accédez à chrome: // flags / (ou about: flags)
  2. Trouver "Activer les régions CSS" et l'activer.
  3. Redémarrez votre navigateur et vérifiez que la démo fonctionne.

Un exemple simple

La démonstration simple des régions CSS nécessite en réalité très peu de code.!

Entrer dans le couler des choses permet de passer à travers un exemple rapide de la façon d'utiliser les régions CSS.

Premièrement, nous avons besoin d’un texte factice qui est contenu dans la balise de paragraphe. Vous remarquerez ci-dessous deux div vides, chacun avec une classe de "régions". En utilisant les régions CSS, nous autoriserons notre "exemple de texte" à couler dans la région divs.

"Lorem ipsum dolor sit amet, consectetur elit adipisicing, a fait une incursion temporaire et prolifique et dolore magna aliqua."
 
 
.example-text -webkit-flow-into: example-text-flow; rembourrage: 0; marge: 0;  .regions -webkit-flow-from: exemple-text-flow; bordure: 1px noir uni; rembourrage: 2px; marge: 5px; largeur: 200px; hauteur: 50px;

Si vous essayez d'afficher le code ci-dessus dans un navigateur Webkit prenant en charge les régions CSS, vous devriez voir quelque chose comme:

Tous les styles (à l'exception de -webkit-flow-from) appliqués à la classe "régions" ne sont là que pour montrer clairement où se trouvent les régions. Les deux lignes de CSS qui nous intéressent sont les suivantes:

-webkit-flow-into: exemple-text-flow; -webkit-flow-from: exemple-text-flow;

Celles-ci seront discutées plus en détail ci-dessous

le écouler dans Flux de propriété et nommés

La propriété flow-into accepte un identifiant en tant que valeur. Dès que nous appliquons la propriété flow-into à un élément et lui transmettons un identifiant, cet élément devient alors partie intégrante d'un "flux nommé". Dès qu'un élément devient partie d'un flux nommé, il est retiré de son flux habituel. Cela signifie essentiellement que l'élément ne sera pas rendu sur la page, par exemple: 

Je ne serai pas rendu sur la page
.example-text -webkit-flow-into: example-text-flow;

Il existe cependant quelques exceptions à cela. Si la propriété flow-into reçoit la valeur "none", l'élément ne fera pas partie d'un flux nommé et sera donc soumis au rendu habituel sur la page. Comme vous l'avez peut-être deviné, un autre cas dans lequel un élément faisant partie du flux nommé sera affiché est celui auquel une région valide est associée..

Plusieurs éléments peuvent être placés dans le même flux nommé:

# exemple-1 -webkit-flow-into: my-named-flow;  # exemple-2 -webkit-flow-into: my-named-flow;

S'il existe une région associée à "my-named-flow", une tentative sera faite pour gérer les deux éléments (#Exemple 1 Et # exemple-2) dans leur chaîne de régions correspondante.

Ce ne sont pas que de simples morceaux de texte qui peuvent être placés dans un flux nommé, nous pouvons aussi mettre des images! Avoir la possibilité de mettre toutes sortes d'éléments HTML dans des flux nommés est une chose puissante. Par exemple, supposons que nous ayons deux listes individuelles, mais du point de vue de la présentation, nous voulions les afficher ensemble. Une solution consiste à utiliser les sélecteurs CSS pour cibler uniquement les parties dont nous avons besoin et les placer dans un flux nommé, exemple (extrait de code): 

 
CSS3
 
     
  • Requêtes de médias
    •  
  • Ombres du texte
    •  
  • Transformations 3D
    •  
 
 
 
HTML5
 
     
  • Toile
    •  
  • Glisser déposer
    •  
  • Espace archivage sur le Web
    •  
 
 
/ * Ne place la liste de l'article dans un flux nommé * / # css3> ul -webkit-flow-into: buzzwords-flow;  # html5> ul -webkit-flow-into: buzzwords-flow;  # buzzwords-region -webkit-flow-from: buzzwords-flow; bordure: 1px vert solide;

(Démo de ce qui précède.) Si vous regardez le code source, vous remarquerez que nos listes HTML5 et CSS3 ont été fusionnées dans une nouvelle liste. Notez que les en-têtes de ces listes n'étaient pas ciblés dans les sélecteurs CSS et ne faisaient donc pas partie d'un flux nommé, ils sont donc toujours restitués sur la page et ne sont pas contenus dans une région..

le couler de Propriété

La propriété flow-from peut prendre un conteneur, par exemple un div vide et le transformer en région. Pour qu’il devienne une région valide, il faut qu’un flux nommé soit associé. Comme discuté, les flux nommés sont créés en utilisant la propriété flow-into puis en utilisant un identifiant comme valeur..

.région -webkit-flow-from: my-named-flow;

Semblable à la propriété flow-into, nous pouvons attribuer la valeur "none" à la propriété flow-from, l’élément correspondant n’est plus qu’un conteneur, par ex. il ne fera pas office de région.

Lors de l'application de la propriété flow-from sur un élément, celui-ci n'aura pas de hauteur ni de largeur, raison pour laquelle vous devrez les définir afin d'afficher le contenu de la région. Les régions ne peuvent agir que comme des chaînes de régions pour un seul flux nommé. Par conséquent, plusieurs éléments peuvent être intégrés dans un seul flux nommé. Toutefois, une région ne peut provenir que d'un seul flux nommé. Une région conservera les styles de son élément source; cela signifie que si l'élément source a la valeur de couleur rouge, le texte continue à apparaître rouge lorsqu'il est restitué dans une région..

La spécification de la région CSS envisage d’utiliser des règles @region pour un style spécifique de région..

"Un @Région Cette règle contient des déclarations de style spécifiques à des régions particulières. "

Cela pourrait permettre une syntaxe CSS (similaire à celle des requêtes multimédia), telle que:

/ * Un style régulier sur toutes les balises de paragraphe * / p font-weight: normal;  @region # my-region / * Lorsque le texte de l'élément p coule dans # my-region, utilisez le style ci-dessous * / p font-weight: bold;

Cela vous permettrait d'appliquer un style spécifique à une région sur la source. Régler par exemple "épaisseur de police: gras" sur une région n'entraînera pas une mise en gras du contenu affiché. Le style doit être appliqué sur le élément source.

API JavaScript

Au moment d'écrire ces lignes, les navigateurs Webkit prennent en charge l'accès aux informations de la région CSS via JavaScript. En utilisant JavaScript, nous pouvons sélectionner un flux en fonction de son identifiant et savoir quelles régions lui sont associées. Nous pouvons même connaître le statut d'une région particulière, il peut y avoir un cas d'utilisation où des régions vides nécessitent un traitement spécifique, en utilisant JavaScript, nous pouvons accomplir cela..

Accéder à un flux par nom

Vous pouvez accéder à un flux nommé en JavaScript à l’aide de document.getFlowByName ('identificateur') (vous pouvez l’essayer dans la console du développeur de la démo.)

var flow = document.webkitGetFlowByName ('example-1-text');

L'objet renvoyé est ce qu'on appelle un WebkitNamedFlow. flow.contentNodes contiendra un tableau d'éléments HTML utilisés comme source du flux auquel on accède.

Découvrir quelles régions appartiennent à quel nœud de contenu

La capacité de détecter quel contenu appartient à quelles régions peut s'avérer utile dans diverses situations.

var flow = document.webkitGetFlowByName ('example-4-text'); var main_content = document.querySelector ('# exemple-4 .main_content'); flow.getRegionsByContentNode (main_content);

Dans le code ci-dessus, nous trouvons d’abord notre flux sur la page en utilisant le nom du flux, puis, à l’aide de l’API Selectors, nous accédons à un élément de contenu de la page et le transmettons en tant qu’argument à getRegionsByContentNode (). sont utilisés comme régions pour ce morceau de contenu particulier.

Savoir si un élément de contenu est adapté ou non à une région

Nous pouvons déterminer très rapidement le statut d’une région en ce qui concerne l’adéquation du contenu à l’intérieur..

// Ce sélecteur n'est pas très efficace, voir https://developers.google.com/speed/docs/best-practices/rendering#UseEfficientCSSSelectors var region7 = document.querySelector ('# exemple-4 .regions> div: nth -child (7) '); region7.webkitRegionOverflow // "fit"

element.regionOverflow renverra des valeurs différentes en fonction de la manière dont il gère le contenu source. Il y a quatre valeurs possibles: 'overflow', 'fit', 'empty' et 'undefined'

  • débordement: Le contenu ne rentre pas dans la région spécifiée et débordera à la région suivante s'il est disponible
  • en forme: La région a réussi à contenir le contenu et aucun débordement n'est nécessaire..
  • vide: Il n'y a pas de contenu à l'intérieur de la région sélectionnée et, par conséquent, elle est vide (comme ce sera normalement le cas avec une région dont la région précédente renvoie 'fit' pour regionOverflow)
  • indéfini: L'élément n'est pas une région valide.

Vous pouvez essayer cela en utilisant les outils de développement dans Chrome. Sur la page de démonstration, cliquez avec le bouton droit de la souris sur l'une des cases bleues (une région) et sélectionnez "Inspecter l'élément". Vous pouvez trouver que l'élément source est sélectionné plutôt que la région div. Essayez de trouver le div le plus proche avec la classe de 'régions' et sélectionnez l’un des divs enfants (ils devraient apparaître vides). À ce stade, vous pouvez appuyer sur la touche Échap de votre clavier, ce qui devrait faire apparaître la console. Maintenant, en tant que raccourci pratique, vous pouvez taper $ 0 dans la console pour accéder à l'élément sélectionné. Maintenant, essayez de taper: 

$ 0.webkitRegionOverflow // 'débordement', 'ajustement', 'vide' ou 'non défini'

Quelques notes et opinions

salut! Merci d'avoir lu ce tutoriel, voici quelques informations supplémentaires qui pourraient vous intéresser.

  • L'implémentation de navigateur pour les régions CSS n'est pas excellente pour le moment et même si l'amélioration est améliorée, la mise en œuvre de navigateur peut varier. Par exemple, Internet Explorer permet uniquement de définir le flux entrant dans un iframe..
  • Les régions CSS peuvent permettre aux développeurs et aux concepteurs d’offrir une expérience améliorée sur le Web, en particulier sur les appareils mobiles / tablettes..
  • Modernizr peut détecter le support des régions CSS, c'est ce que la démo utilise.
  • Adobe a pris une excellente initiative sur les régions CSS. Assurez-vous de vérifier leurs démos!
  • .
Code
×