Share
Dans ce tutoriel, nous allons explorer les exclusions CSS. Au premier coup d'œil, les exclusions CSS peuvent ressembler aux formes CSS en ce sens qu'elles enveloppent le contenu autour d'un élément. Techniquement, cependant, ils servent un but différent.
Le module CSS Shapes définit la forme réelle d'un élément, mais le contenu n'enroule pas autour de cette forme tant que l'élément n'est pas flottant. Le module Exclusions CSS, d’autre part, est spécialement conçu pour cela; permettant au contenu en ligne d'envelopper un élément sans pour autant le faire flotter, quelle que soit la position de l'élément-absolu, relatif, ou fixé.
Le module Exclusions CSS introduit quelques nouvelles propriétés et valeurs, à savoir:
Accentsconagua
flux enveloppant: définit la zone d'exclusion, ainsi que la manière dont le contenu doit envelopper.marge enveloppante: est assez explicite, définissant la marge ou le décalage entourant la zone d'exclusion.Il est à noter que les exclusions CSS ne fonctionnent actuellement que dans Internet Explorer 10 et supérieur, et Edge, démontrant une nouvelle fois comment Microsoft repousse les frontières des navigateurs Web (nous les remercions également pour le développement de CSS Grid). Pour le moment, nous devons préfixer les nouvelles propriétés avec -Mme- quand utilisé.
Et la mer de rouge continue à droite… Pour mieux comprendre le fonctionnement de CSS Exclusions, nous avons préparé une page de démarrage simple comprenant quelques lignes de contenu et une image d'avatar à la fin..
Mise en page sans exclusions CSS C'est un modèle assez courant sur le Web, voyons donc si nous pouvons le peaufiner un peu en utilisant CSS Exclusions. En supposant que votre navigateur prenne en charge Excludes, nous visons ce résultat:
Commençons par organiser le contenu en deux colonnes et positionner l'image de l'avatar au centre. Peu importe la manière dont vous organisez la mise en page, vous pouvez utiliser CSS Flexbox, CSS Grid ou l’approche «traditionnelle» à l’aide de la flotte propriété.
Beau texte en colonne (non obligatoire pour cette démo)L’image ci-dessus montre que l’image de l’avatar a été supprimée du flux de documents et qu’elle est placée au-dessus du contenu, ce qui l’obscurcit. À l'aide des exclusions CSS, nous pouvons forcer le contenu à se déplacer autour de l'image d'avatar..
Pour ce faire, nous définissons la flux enveloppant propriété de l'avatar et définissez la valeur sur tous les deux.
.avatar -ms-wrap-flow: les deux; // Fonctionne dans IE et Edge. flux enveloppant: les deux; // Ne fonctionne dans aucun navigateur.
le flux enveloppant propriété définit le .avatar en tant que "zone d'exclusion"; une zone où aucun contenu ne doit passer. Comme vous pouvez le voir ci-dessous, le contenu est maintenant affiché à droite et à gauche de l'image de l'avatar..
Les autres valeurs acceptables sont début, fin, maximum, le minimum, et clair.
La première valeur, début, enveloppera le contenu au début de la zone d'exclusion, mais laissera la fin de la zone vide.
.avatar -ms-wrap-flow: début;
Compte tenu du contenu de notre page, le résultat serait le suivant.
Le contenu coule à gauche de l'image. le fin la valeur, comme son nom l'indique, fonctionne à l'inverse; le contenu sera enroulé autour de la fin de la zone d'exclusion.
.avatar -ms-wrap-flow: end;
Cela nous donne le résultat suivant:
Enrouler à droiteRemarque: le début et la fin de la zone d'exclusion sont déterminés par le sens d'écriture du contenu. Lorsque les scripts sont écrits de droite à gauche, comme c'est souvent le cas avec l'arabe et l'hébreu, le contenu commence à droite et se termine à gauche de la zone d'exclusion..
En japonais, lorsque le texte est écrit du haut vers le bas, le contenu est renvoyé au début et se termine au bas..
Le contenu circule dans différentes directions d'écriture. Image de (W3C)La troisième valeur acceptable est maximum.
.avatar -ms-wrap-flow: maximum;
Cela encapsulera le contenu autour de la zone d'exclusion partout où il trouvera l'espace le plus large dans la zone du conteneur..
le le minimum la valeur fonctionne dans le sens opposé.
.avatar -ms-wrap-flow: minimum;
Ici, le contenu circulera dans l'espace le plus étroit disponible autour de la zone d'exclusion..
La dernière valeur est clair.
.avatar -ms-wrap-flow: clair;
Ceci est assez similaire à la clair vous êtes déjà familiarisé avec les flotteurs, en ce sens que cela effacera la droite et la gauche de la zone d'exclusion. Il ne laisse donc que le contenu s'écouler vers le haut et le bas de la zone d'exclusion.
De même que pour les formes CSS, le module Exclusions CSS est également fourni avec une propriété permettant de définir la marge de la zone d'exclusion, à savoir: marge enveloppante. Contrairement à la marge propriété, la valeur de marge enveloppante doit être une valeur positive.
.avatar -ms-wrap-flow: end; -ms-wrap-margin: -10px; // Invalide. -ms-wrap-margin: 10px; // valide.
En outre, le marge enveloppante properties ne nous permet pas de définir la marge de chaque côté (droite, gauche, haut et bas) individuellement. Reste à savoir si cette fonctionnalité sera introduite dans le futur.
.avatar -ms-wrap-flow: end; -ms-wrap-margin: 10px 20px 10px 30px; // Invalide. -ms-wrap-margin: 10px; // valide.
Une fois défini, nous devrions voir plus d'espaces autour de la zone d'exclusion.
Étant donné que nous avons positionné notre avatar par rapport au contenu, sans la prise en charge de CSS Excludes, nous nous retrouvons avec une mise en page désordonnée. Par conséquent, il est sage d’envisager le repli et d’envelopper les styles pertinents dans un @les soutiens règle, comme si:
.contenu du site .avatar width: 180px; hauteur: 180px; marge droite: auto; marge gauche: auto; text-align: center; marge supérieure: 80px; / * encapsule les règles pertinentes dans une déclaration @supports, juste par sécurité * / @supports (-ms-wrap-flow: les deux) .site-content .avatar position: absolute; en haut: 300 pixels; à gauche: 50%; marge gauche: -90px; -ms-wrap-margin: 50px; -ms-wrap-flow: les deux
Maintenant, nos styles d'exclusion CSS ne seront appliqués que s'ils sont pris en charge par le navigateur..
Les exclusions CSS, ainsi que les formes CSS et d’autres spécifications de pointe, nous permettront d’explorer des structures de site Web bien au-delà de ce à quoi nous nous sommes habitués. Espérons que nous assisterons à des avancées rapides dans la prise en charge des navigateurs et à un dépassement des limites de l'équipe Microsoft Edge.!
