Podcast CSS – 012: Propriétés logiques
Un modèle d'interface utilisateur très courant est un libellé de texte avec une icône de soutien intégrée.
L'icône se trouve à gauche du texte, avec un petit espace entre les deux, fourni par margin-right sur l'icône.
Il y a toutefois un problème, car cela ne fonctionne que lorsque l'orientation du texte est de gauche à droite.
Si le texte est lu de droite à gauche (comme c'est le cas pour l'arabe), l'icône sera positionnée contre le texte.
Comment en tenir compte dans les CSS ? Les propriétés logiques vous permettent de résoudre ces situations. Ils offrent, entre autres avantages, une assistance automatique et sans frais pour l'internationalisation. Elles vous aident à créer un frontal plus résilient et inclusif.
Terminologie
Les propriétés physiques en haut, à droite, en bas et à gauche font référence aux dimensions physiques de la fenêtre d'affichage. Vous pouvez les considérer comme une rose des vents sur une carte. En revanche, les propriétés logiques font référence aux bords d'une boîte en relation avec le flux de contenu. Par conséquent, ils peuvent changer si l'orientation du texte ou le mode d'écriture change. Il s'agit d'un grand changement par rapport aux styles directionnels, et cela nous offre beaucoup plus de flexibilité pour styliser nos interfaces.
Flux en bloc
Le flux de blocs correspond à la direction dans laquelle les blocs de contenu sont placés. Par exemple, s'il y a deux paragraphes, le flux de bloc est l'endroit où le deuxième paragraphe ira. Dans un document en anglais, le flux de bloc est de haut en bas. Pensez-y dans le contexte de paragraphes de texte qui se suivent, de haut en bas.
Flux intégré
Le flux intégré correspond à la circulation du texte dans une phrase.
Dans un document en anglais, le flux intégré s'effectue de gauche à droite.
Si vous modifiez la langue du document de votre page Web en arabe (<html lang="ar">), le flux intégré s'effectuera de droite à gauche.
Le texte s'écoule dans la direction déterminée par le mode d'écriture du document.
Vous pouvez modifier l'orientation du texte à l'aide de la propriété writing-mode.
Il peut s'appliquer à l'ensemble du document ou à des éléments individuels.
Flux relatif
Auparavant, dans les CSS, nous ne pouvions appliquer que des propriétés telles que la marge en fonction de la direction de leurs côtés.
Par exemple, margin-top est appliqué à la partie supérieure physique de l'élément.
Avec les propriétés logiques, margin-top devient margin-block-start.
Cela signifie que, quelle que soit la langue et l'orientation du texte, le flux de blocs dispose de règles de marge appropriées.
Taille
Pour éviter qu'un élément ne dépasse une certaine largeur ou hauteur, écrivez une règle comme celle-ci:
.my-element {
max-width: 150px;
max-height: 100px;
}
Les équivalents relatifs au flux sont max-inline-size et max-block-size.
Vous pouvez également utiliser min-block-size et min-inline-size au lieu de min-height et min-width.
Avec les propriétés logiques, cette règle de largeur et de hauteur maximales ressemblerait à ceci:
.my-element {
max-inline-size: 150px;
max-block-size: 100px;
}
Début et fin
Au lieu d'utiliser des directions comme le haut, la droite, le bas et la gauche, utilisez le début et la fin. Vous obtenez ainsi un bloc "block-start", "inline-end", "block-end" et "inline-start". Elles vous permettent d'appliquer des propriétés CSS qui réagissent aux changements du mode d'écriture.
Par exemple, pour aligner le texte à droite, vous pouvez utiliser le code CSS suivant:
p {
text-align: right;
}
Si votre objectif n'est pas de vous aligner sur la droite physique, mais plutôt sur le début de la direction de lecture, cette option n'est pas utile.
Avec les valeurs logiques, il existe des valeurs start et end plus utiles qui correspondent à l'orientation du texte.
La règle d'alignement du texte se présente maintenant comme suit:
p {
text-align: end;
}
Espacement et positionnement
Les propriétés logiques de margin, padding et inset facilitent le positionnement des éléments, et permettent de déterminer la manière dont ils interagissent les uns avec les autres sur les différents modes d'écriture.
Les propriétés liées à la marge et à la marge intérieure sont toujours des mappages directs avec les directions, mais la principale différence est que lorsqu'un mode d'écriture change, ils changent en même temps.
.my-element {
padding-top: 2em;
padding-bottom: 2em;
margin-left: 2em;
position: relative;
top: 0.2em;
}
Cela permet d'ajouter un espace intérieur vertical avec padding et de le repousser de la gauche avec margin.
La propriété top la déplace également vers le bas.
Avec des équivalents de propriété logiques, cela ressemblerait plutôt à ceci:
.my-element {
padding-block-start: 2em;
padding-block-end: 2em;
margin-inline-start: 2em;
position: relative;
inset-block-start: 0.2em;
}
Cela permet d'intégrer l'espace dans l'espace avec padding et de le repousser à partir du début de la ligne avec margin.
La propriété inset-block la déplace vers l'intérieur à partir du début du bloc.
La propriété inset-block n'est pas la seule option abrégée avec des propriétés logiques.
Cette règle peut être condensée à l'aide de versions abrégées des propriétés de marge et de marge intérieure.
.my-element {
padding-block: 2em;
margin-inline: 2em 0;
position: relative;
inset-block: 0.2em 0;
}
Bordures
Vous pouvez également ajouter border et border-radius à l'aide de propriétés logiques.
Pour ajouter une bordure en bas et à droite, avec un rayon vers la droite, vous pouvez écrire une règle comme celle-ci:
.my-element {
border-bottom: 1px solid red;
border-right: 1px solid red;
border-bottom-right-radius: 1em;
}
Vous pouvez également utiliser des propriétés logiques comme celles-ci:
.my-element {
border-block-end: 1px solid red;
border-inline-end: 1px solid red;
border-end-end-radius: 1em;
}
Le end-end dans border-end-end-radius est la fin du bloc et la fin intégrée.
Unités
Les propriétés logiques apportent deux nouvelles unités: vi et vb.
Une unité vi correspond à 1% de la taille de la fenêtre d'affichage dans le sens de l'intégration.
L'équivalent de propriété non logique est vw.
L'unité vb correspond à 1% de la fenêtre d'affichage dans le sens du bloc.
L'équivalent de propriété non logique est vh.
Ces unités seront toujours mappées avec la direction de lecture.
Par exemple, si vous souhaitez qu'un élément occupe 80% de l'espace intégré disponible d'une fenêtre d'affichage, l'utilisation de l'unité vi définit automatiquement cette taille de haut en bas si le mode d'écriture est vertical.
Utiliser les propriétés logiques de manière pragmatique
Les propriétés logiques et les modes d'écriture ne sont pas réservés à l'internationalisation. Vous pouvez les utiliser pour créer une interface utilisateur plus polyvalente.
Si vous disposez d'un graphique comportant des étiquettes sur l'axe X et l'axe Y, vous pouvez souhaiter que le texte de l'étiquette Y soit lu verticalement.
Étant donné que l'writing-mode de l'étiquette de l'axe Y de la démonstration est vertical-rl, vous pouvez utiliser les mêmes valeurs margin sur les deux étiquettes.
La valeur margin-block-start s'applique aux deux étiquettes, car le début du bloc se trouve à droite pour l'axe Y et en haut pour l'axe X.
Les côtés de début de bloc ont une bordure rouge pour vous permettre de les voir.
Résoudre le problème d'icône
Maintenant que nous avons abordé les propriétés logiques, ces connaissances peuvent être appliquées au problème de conception avec lequel nous avons commencé.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-right: 0.5em;
flex: none;
}
La marge a été appliquée à droite de l'élément de l'icône.
Pour que l'espacement entre l'icône et le texte soit pris en charge dans tous les sens de lecture, la propriété margin-inline-end doit être utilisée à la place.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-inline-end: 0.5em;
flex: none;
}
Maintenant, quelle que soit la direction de lecture, l'icône se positionnera et s'espacera de manière appropriée.
Testez vos connaissances
Tester vos connaissances sur les propriétés logiques
Lorsque vous écrivez avec votre main, votre poignet se déplace le long de quel axe logique ?
inlineblockSélectionner tous ceux qui peuvent bénéficier des propriétés logiques
flex-start, block-end et inline-startblock-start et inline.inline-size et max-block-size.border-end-end-radius.Quel côté logique d'un mot est souligné ?