Comprendre les propriétés et les valeurs logiques

Dans le passé, CSS s'est lié aux dimensions et aux directions physiques, cartographiant physiquement le placement des éléments à gauche, à droite, en haut et en bas. On fait float un élément left ou right , on utilise les propriétés de décalage de positionnement top , left , bottom et right . Nous définissons les marges, le rembourrage et les bordures comme margin-top et padding-left . Ces propriétés et valeurs physiques ont un sens si vous travaillez dans un mode et une direction d'écriture horizontaux, de haut en bas, de gauche à droite.

Ils ont moins de sens si vous utilisez un mode d'écriture vertical, que ce soit pour l'ensemble de votre mise en page ou pour certains éléments. Dans cet article, je vais expliquer comment CSS change 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.

Lorsque j'ai commencé à travailler avec CSS Grid et à expliquer la nouvelle spécification aux gens, j'ai remarqué que la propriété grid-area pouvait être utilisée comme un raccourci d'une ligne pour définir les quatre lignes. Par conséquent, les trois exemples ci-dessous entraîneraient le même placement d'élément. Le premier utilise les propriétés longues, le second spécifie les lignes de début et de fin pour chaque dimension et le troisième utilise grid-area .

 .item { grid-row-start: 1; grid-column-start: 2; grid-row-end: 3; grid-column-end: 4; }

 .item { grid-row: 1 / 3; grid-column: 2 / 4; }

 .item { grid-area: 1 / 2 / 3 / 4; }

L'ordre des lignes lorsque nous utilisons grid-area est le suivant :

• grille-ligne-début
• grille-colonne-début
• fin de ligne de grille
• grille-colonne-fin

La première question que j'ai (et beaucoup de gens dans mon public) a été, "pourquoi ne suivent-ils pas l'ordre Haut, Droite, Bas, Gauche auquel nous sommes habitués à partir de tout le reste en CSS ?" En fait, ils vont 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 selon laquelle le contenu sur le Web correspond aux dimensions physiques de l'écran, le premier mot d'une phrase étant en haut à gauche de la boîte dans laquelle il se trouve. L'ordre des lignes dans grid-area 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 mode vertical, la position d'un bloc reste relative au mode d'écriture du document, plutôt qu'aux propriétés physiques de l'écran. Vous pouvez essayer cela dans l'exemple ci-dessous, changer la valeur du mode d'écriture pour notre mise en page et voir toute la grille tourner.

Connaître ce fait sur les modes d'écriture explique également pourquoi CSS Grid et Flexbox font référence aux lignes de start et de end plutôt que de mapper la grille aux dimensions physiques du haut, de la droite, du bas et de la gauche comme nous l'utiliserions avec un positionnement absolu. Dans l'exemple ci-dessus, le premier élément est positionné à l'aide d'un positionnement par grid-area et par ligne.

 grid-area: 1 / 2 / 3 / 4;

Si nous devions utiliser le longhand cela ressemblerait à ceci:

 grid-row-start: 1; grid-column-start: 2; grid-row-end: 3; grid-column-end: 4;

Nous définissons les deux lignes de départ, l'axe du bloc en premier, l'axe en ligne ensuite, 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.

Dimensions en bloc et en ligne

J'ai déjà mentionné quelque chose qui est essentiel pour comprendre la nouvelle mise en page, le concept des dimensions Block et Inline. Ces termes continueront d'apparaître au fur et à mesure que vous travaillerez avec le nouveau CSS. Les deux dimensions sont relativement faciles à comprendre dans le contexte de Grid Layout, car nous travaillons toujours avec un bloc et un axe en ligne lorsque nous travaillons dans Grid Layout. Je vais donc utiliser une démo Grid pour expliquer.

La dimension Bloc correspond à 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 du bloc, et donc dans la disposition en grille, c'est l'axe du bloc.

Dans CSS Grid Layout, l'axe de bloc est également appelé axe de ligne, c'est pourquoi les propriétés de l'axe de bloc sont grid-row-start et grid-row-end .

L'axe en ligne traverse donc l'axe du bloc, dans la direction dans laquelle les mots sont disposés dans une phrase. En anglais, cet axe va de gauche à droite. Dans Grid Layout, l'axe en ligne est l'axe de colonne avec les propriétés grid-column-start et grid-column-end .

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'étend verticalement et l'axe en ligne le long des lignes (de haut en bas).

Donc, si nous parlons de la dimension 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.

Propriétés logiques

Une fois que vous vous êtes habitué à travailler avec les dimensions Block et Inline, les lignes de début et de fin, le lien vers les dimensions physiques dans le reste du CSS commence à vous sembler gênant. Il existe cependant une spécification qui définit les versions logiques de toutes les propriétés physiques existantes - la spécification CSS Logical Properties and Values ​​qui est un premier projet de travail public. Actuellement, le seul navigateur qui prend bien en charge ces propriétés est Firefox, mais comprendre comment elles fonctionnent peut être un bon moyen de penser à de nouveaux CSS, alors jetons un coup d'œil.

J'ai illustré chaque section avec des exemples de CodePen, pour les voir fonctionner, vous devrez utiliser Firefox !

Dimensions logiques

Les propriétés logiques définissent une propriété de début et de fin pour le bloc et la dimension en ligne. Pour les propriétés de hauteur et de largeur, nous utilisons à la place block-size et inline-size . Nous pouvons également définir max-block-size , min-block-size , max-inline-size et min-inline-size . Si vous travaillez en anglais, une langue horizontale de haut en bas, block-size fait référence à la height physique du bloc sur votre écran, la inline-size la width physique de l'élément. Si vous travaillez dans une langue où les blocs s'exécutent verticalement, lorsque vous regardez votre écran block-size apparaîtra pour contrôler la width et la inline-size la hauteur.

Vous pouvez voir cela en action dans la démo ci-dessous. Mon bloc a une block-size de 150 pixels et une inline-size de 250 pixels. Modifiez la propriété writing-mode pour voir comment la mise en page s'ajuste.

Frontières logiques

On a alors des propriétés pour contrôler les bordures qui fonctionnent de la même manière. Les propriétés physiques des bordures sont :

• border-top
• border-top-width
• border-top-style
• border-top-color
• border-right
• border-right-width
• border-right-style
• border-right-color
• border-bottom
• border-bottom-width
• border-bottom-style
• border-bottom-color
• border-left
• border-left-width
• border-left-style
• border-left-color

Ceux-ci ont alors des mappages logiques qui deviennent un peu verbeux comme des longs, mais sont :

• border-block-start
• border-block-start-width
• border-block-start-style
• border-block-start-color
• border-inline-start
• border-inline-start-width
• border-inline-start-style
• border-inline-start-color
• border-block-end
• border-block-end-width
• border-block-end-style
• border-block-end-color
• border-inline-end
• border-inline-end-width
• border-inline-end-style
• border-inline-end-color

Dans l'exemple suivant, il y a deux blocs, le premier utilisant des propriétés logiques pour définir un border-block-start-color de vert et un border-inline-end-style de pointillé. Le deuxième bloc utilise les propriétés physiques de border-top-color et border-right . Changez le mode d'écriture pour voir comment ils se comportent.

Marges et remplissage

Les marges et le rembourrage ont des caractères longs similaires à nos propriétés de bordure, les propriétés physiques étant :

• margin-top
• margin-left
• margin-bottom
• margin-right
• padding-top
• padding-right
• padding-bottom
• padding-left

Ceux-ci ont les propriétés logiques suivantes :

• margin-block-start
• margin-inline-start
• margin-inline-start
• margin-inline-end
• padding-block-start
• padding-inline-start
• padding-inline-start
• padding-inline-end

Dans cet exemple suivant, j'ai défini padding-block-start sur le premier bloc et padding-top sur le second, changez le mode d'écriture pour voir la différence lorsque les axes Block et Inline sont commutés.

Décalages de positionnement

Un autre endroit où les propriétés physiques sont utilisées est lors du positionnement d'objets à l'aide de la propriété position . Après avoir défini position: absolute ou une autre valeur de position autre que la valeur par défaut de static , nous pouvons alors positionner un élément à l'aide de décalages, soit à partir de la fenêtre, soit à partir d'un parent qui a créé un nouveau contexte de positionnement.

Les propriétés physiques du décalage sont :

• top
• right
• bottom
• left

En suivant le modèle de nos autres propriétés logiques, nous avons alors :

• offset-block-start
• offset-inline-start
• offset-block-end
• offset-inline-end

Essayez-les dans l'exemple ci-dessous. La boîte avec une bordure a la position: relative et la position: absolute . Dans l'exemple physique le carré est positionné en top: 50px et right: 20px . La version logique a offset-block-start: 50px et offset-inline-end: 20px .

Valeurs logiques

Un autre endroit où nous sommes habitués à utiliser des dimensions physiques est lorsque nous flottons ou nettoyons des choses. Pour float , clear nous avons des versions logiques des valeurs left et right .

• inline-start
• inline-end

Dans la démo, je fais flotter le bloc violet dans la version logique inline-start . 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 à droite du bloc, plutôt que d'être appliquée dans la direction -end .

Il existe également des valeurs de start et de end pour text-align . Aligner quelque chose pour commencer l'alignera sur le début de l'axe en ligne, pour end sur la fin de l'axe en ligne, que le mode d'écriture soit horizontal ou vertical.

Utiliser des propriétés et des valeurs logiques aujourd'hui

Comme déjà mentionné, il y a peu de support de navigateur pour le moment pour les propriétés et les valeurs logiques. Cependant, si vous voulez commencer à travailler avec eux maintenant, l'option serait d'écrire votre CSS en les utilisant, puis d'utiliser un plugin PostCSS pour convertir les propriétés et valeurs logiques en leurs homologues physiques. Ce plugin de Jonathan Neal couvre toutes les propriétés et valeurs que j'ai décrites dans cet article.

Vous pouvez également aider à encourager l'adoption de ces propriétés par les fournisseurs de navigateurs en mettant en vedette le bogue Chrome et en les votant sur le site Edge Developer Feedback.

Même si vous décidez de ne pas utiliser ces propriétés maintenant, comprendre comment elles fonctionnent est un élément clé de compréhension pour travailler avec une nouvelle mise en page. En décrivant votre mise en page Grid ou Flex comme ayant des lignes de début et de fin, en pensant aux dimensions de bloc et en ligne, ces choses faciliteront la compréhension du fonctionnement de la mise en page.

Lectures complémentaires

• Les documents Web MDN ont toutes les propriétés et valeurs logiques répertoriées avec des exemples supplémentaires.
• Grille CSS, valeurs logiques et modes d'écriture, MDN
• Modes d'écriture CSS, Jen Simmons, 24 façons