L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Comprendre les propriétés et les valeurs logiques
Dans le passé, CSS s'est lié aux dimensions et aux directions physiques, en cartographiant physiquement le placement des éléments à gauche, à droite et en haut et en bas. Nous flottons un élément à gauche ou à droite nous utilisons les propriétés de décalage de positionnement haut left left, ] en bas et à droite . Nous définissons les marges, le remplissage et les bordures comme margin-top et padding-left . Ces propriétés physiques et ces valeurs ont du sens si vous travaillez dans un mode et une direction horizontaux, de haut en bas, de gauche à droite.
Elles ont moins de sens si vous utilisez un mode d'écriture vertical, que ce soit éléments. Dans cet article, je vais expliquer comment CSS est en train de changer pour prendre en charge les modes d'écriture, et ce faisant, je vais clarifier certaines des choses qui pourraient vous dérouter à propos de Flexbox et Grid.
Quand j'ai commencé à travailler avec CSS Grid et en expliquant la nouvelle spécification aux gens, j'ai noté que la propriété de la zone de grille pouvait être utilisée comme raccourci d'une ligne pour définir les quatre lignes. Par conséquent, les trois exemples ci-dessous aboutiraient au même placement d'article. La première utilise les propriétés longhand, la seconde spécifie les lignes de début et de fin pour chaque dimension, et la troisième utilise la zone de grille .
L'ordre des lignes lorsque nous utilisons zone de grille est la suivante:
- début de grille-début
- début de grille-début
- fin de grille-fin
- fin de grille-fin
La première question I (et beaucoup de gens dans mon auditoire) avait, "pourquoi ne suivent-ils pas l'ordre Haut, Droit, Bas, Gauche auquel nous sommes habitués depuis tout le reste dans CSS ?" Ils vont en fait dans l'ordre inverse de ces valeurs: Haut, Gauche, Bas, Droite! Le groupe de travail CSS essaie-t-il activement de rendre les choses difficiles?
La réponse est que ces valeurs se sont éloignées de l'hypothèse sous-jacente que le contenu sur le web correspond aux dimensions physiques de l'écran, le premier mot étant une phrase. En haut à gauche de la boîte, elle se trouve. L'ordre des lignes dans la zone de grille prend tout son sens si vous n'aviez jamais rencontré la manière existante de définir ces valeurs dans un raccourci. Nous définissons d'abord les deux lignes de départ, puis les deux lignes de fin.
Cela signifie que si nous changeons le mode d'écriture de notre document en un vertical, la position d'un bloc reste relative au mode d'écriture du document. que les propriétés physiques de l'écran. Vous pouvez essayer ceci dans l'exemple ci-dessous, changer la valeur en mode écriture pour notre disposition et voir la grille entière tourner
Voir le stylo Grille et modes d'écriture par Rachel Andrew ( @racheland ) le CodePen .
Connaître ce fait sur les modes d'écriture explique aussi pourquoi CSS Grid et Flexbox se réfèrent aux lignes start et fin plutôt que mapping la grille aux dimensions physiques du haut, du droit, du bas et du gauche comme nous le ferions avec le positionnement absolu. Dans l'exemple ci-dessus, le premier élément est positionné en utilisant le grid-area et le positionnement par ligne
grid-area: 1/2/3/4; Si nous devions utiliser le Cela ressemblerait à ceci:
grid-row-start: 1;
grille-début de colonne: 2;
grille-rangée-fin: 3;
grid-column-end: 4; Nous définissons les deux lignes de départ, l'axe de bloc en premier, l'axe en ligne en second lieu, puis suivons le même modèle pour les lignes de fin dans chaque dimension. Quelle que soit la disposition de la grille, les lignes de début et de fin restent relatives à la grille et au mode d'écriture du document
Block and Inline Dimensions
J'ai déjà mentionné quelque chose qui est essentiel pour comprendre la nouvelle mise en page. des dimensions Block et Inline. Ces termes vont continuer à venir que vous travaillez avec de nouveaux CSS. Les deux dimensions sont raisonnablement faciles à comprendre dans le contexte de la disposition de la grille car nous travaillons toujours avec un bloc et un axe en ligne lorsque nous travaillons en Grid Layout, donc j'utiliserai une démo de Grid pour expliquer
à l'ordre dans lequel les blocs sont disposés sur la page. Si vous pensez à un paragraphe de texte en anglais. Chaque paragraphe est disposé l'un en dessous de l'autre, la direction dans laquelle ils sont disposés est la dimension de bloc, et donc dans la disposition de la grille, c'est l'axe du bloc
Dans la grille CSS, l'axe des blocs est aussi appelé l'axe des lignes, ce qui explique pourquoi les propriétés de l'axe des blocs sont grille-début de ligne et grille-fin de rangée .
L'axe en ligne parcourt donc l'axe du bloc, dans la direction que les mots tracent dans une phrase. En anglais, cet axe va de gauche à droite. Dans la disposition de grille, l'axe en ligne est l'axe de colonne avec les propriétés grille-colonne-début et grille-colonne-fin .
Si nous changeons le mode d'écriture de notre exemple en vertical-lr le mode d'écriture est maintenant vertical, ce qui signifie que l'axe du bloc s'exécute verticalement et l'axe en ligne le long des lignes.
Donc, si nous parlons de la dimension de bloc, nous décrivons la direction dans laquelle les paragraphes de texte seraient disposés dans un flux de document normal, la dimension Inline étant la direction dans laquelle une phrase s'exécute
S'habituer à travailler avec les cotes Block et Inline, les lignes de début et de fin, le lien vers les dimensions physiques dans le reste du CSS commence à être gênant. Il y a, cependant, une spécification qui définit les versions logiques de toutes les propriétés physiques existantes - La spécification CSS Propriétés et valeurs logiques qui est un premier brouillon de travail public. Firefox est actuellement le seul navigateur avec un bon support pour ces propriétés, cependant comprendre comment ils fonctionnent peut être un bon moyen de penser à de nouvelles CSS, alors jetons un coup d'oeil.
J'ai illustré chaque section avec des exemples CodePen, pour voir ceux-ci fonctionnant vous devrez employer Firefox!
Dimensions logiques
Les propriétés logiques définissent une propriété de début et de fin pour la dimension de bloc et d'en-ligne. Pour les propriétés height et width, nous utilisons à la place block-size et inline-size . Nous pouvons également définir taille de bloc max taille de bloc mini taille max inline et taille mini inline Si vous travaillez en anglais, une langue horizontale de haut en bas, block-size fait référence à la hauteur physique du bloc sur votre écran, inline-size la largeur physique de l'objet. Si vous travaillez dans une langue où les blocs s'exécutent verticalement, alors que vous regardez votre écran block-size apparaîtra pour contrôler la largeur et inline-size la hauteur
Vous pouvez le voir en action dans la démo ci-dessous. Mon bloc a une taille de bloc de de 150 pixels et une taille de de 250 pixels. Modifier la propriété écriture-mode pour voir comment la mise en page ajuste
Voir le Pen Démonstration Block et Inline Size par Rachel Andrew ( @rachelandrew ) sur CodePen .
Frontières logiques
Nous avons alors des propriétés pour contrôler les frontières qui fonctionnent de la même manière. Les propriétés physiques des frontières sont les suivantes:
-
border-top -
border-top-size -
border-top-style -
border-top-color -
bordure-droite -
bordure-droite-taille -
bordure-droite-style -
frontière-droite-couleur -
bordure-inférieure -
border-bottom-size -
border-bottom de style -
border-bottom-color -
frontière-gauche -
border-left-size -
border-left-style -
border-left-color
Ceux-ci ont alors des mappings logiques qui deviennent un peu verbeux comme des longhands, mais sont:
-
début de bloc -
border-block-start-size -
border-block -start-style -
border-block-start-couleur -
border-en-ligne-début -
border-inline-start-size -
bordure-en-ligne-début-style -
bordure-en-ligne-début-couleur -
bordure-bloc-extrémité[19659006]bordure-bloc-fin-taille -
bordure-bloc-fin-style -
bordure-bloc-fin-couleur -
frontière-en-ligne-arrière -
bordure-en-ligne-arrière -
bordure-en-ligne-arrière -
-inline-end-color
Dans l'exemple suivant, il existe deux blocs, le premier utilisant des propriétés logiques pour définir un border-block-start-color de couleur verte, et un border-inline-end-style de pointillé. Le second bloc utilise les propriétés physiques de border-top-color et border-right . Changer le mode d'écriture pour voir comment ils se comportent
Voir le stylo Bordures logiques par Rachel Andrew ( @rachelandrew ) le CodePen .
Marges et bourrelets
Les marges et les bourrelets ont des longines similaires à nos propriétés frontalières, avec les propriétés physiques suivantes:
-
margin-top -
marge-gauche -
marge-inférieure -
marge-droite -
capitonnage -
rembourrage-droit -
padding-bottom -
padding-left
Ceux-ci ont les propriétés logiques suivantes:
-
margin-block-start -
-inline-start -
marge-en-ligne-début -
marge-fin-de-ligne -
padding-block-start[19659006]remplissage-inline-sta rt -
début de remplissage -
padding-inline-end
Dans cet exemple suivant, j'ai défini padding-block- commencer sur le premier bloc, et padding-top sur le second, changer le mode d'écriture pour voir la différence quand les axis Block et Inline sont commutés.
Voir le Pen Logical Propriétés - Rembourrage par Rachel Andrew ( @rachelandrew ) le CodePen .
Positionnement des décalages
Un autre endroit où les propriétés physiques sont utilisées est celui du positionnement des objets à l'aide de la propriété position . Après avoir défini la position : absolue ou une autre valeur de position autre que la valeur par défaut de statique nous pouvons positionner un élément en utilisant des décalages, depuis la fenêtre ou depuis un parent qui a créé un nouveau contexte de positionnement
Les propriétés physiques de décalage sont:
Suivant le modèle de nos autres propriétés logiques nous avons alors:
-
offset-block-start -
décalage-en-ligne-début -
offset-bloc-fin -
offset-inline-fin
Essayez-les dans l'exemple ci-dessous. La boîte avec une bordure a position: relative et la petite place pourpre position: absolue . Dans l'exemple physique, le carré est positionné en haut: 50px et à droite: 20px . La version logique a offset-block-start: 50px et offset-inline-end: 20px .
Voir le Pen Offsets logiques de Rachel Andrew ( @rachelandrew ) le CodePen .
Valeurs logiques
Un autre endroit où nous sommes habitués à utiliser des dimensions physiques est quand nous flottons ou que nous nettoyons des choses. Pour float clear nous avons quelques versions logiques des valeurs left et right
See the Pen Flottant avec des valeurs logiques par Rachel Andrew ( @rachelandrew ) le CodePen .
Dans la démo, je suis en train de flotter le bloc violet dans la version logique inline- commencer . J'utilise également des propriétés logiques pour la marge; cela garantit que la marge vient toujours après le bloc, et avant le contenu qui l'entoure. En sélectionnant la valeur vertical-rl dans la liste déroulante, vous pouvez voir comment, dans l'exemple physique, la marge se termine à la droite du bloc, plutôt que d'être appliquée dans la -end direction
Il y a aussi début et fin valeurs pour text-align . Aligner quelque chose pour commencer l'alignera sur le début de l'axe en ligne, jusqu'à la fin de jusqu'à la fin de l'axe en ligne, que le mode d'écriture soit horizontal ou vertical.
Utilisation des propriétés et valeurs logiques Today
Comme déjà mentionné, il y a peu de support de navigateur pour le moment pour les propriétés logiques et les valeurs. Cependant, si vous voulez commencer à travailler avec eux maintenant, vous pouvez écrire votre CSS en utilisant ces derniers, puis utiliser un plugin PostCSS pour convertir les propriétés logiques et les valeurs en leurs homologues physiques. Ce plugin de Jonathan Neal couvre toutes les propriétés et les valeurs que j'ai décrites dans cet article.
Vous pouvez également encourager les vendeurs de ces propriétés à adopter ces propriétés en mettant en vedette le bug Chrome. et sur le site Edge Developer Feedback .
Même si vous décidez de ne pas utiliser ces propriétés maintenant, comprendre leur fonctionnement est un élément clé de compréhension pour travailler avec une nouvelle mise en page . Décrire votre mise en page Grille ou Flex comme ayant des lignes de début et de fin, en pensant aux dimensions en bloc et en ligne, cela facilitera grandement la compréhension du fonctionnement de la mise en page.
Autres lectures
(il) [19659124]Source link