Catégories
Astuces et Design

Améliorations de la disposition logique avec des raccourcis relatifs au flux

Nouvelles raccourcis de propriété logique et nouvelles propriétés d'encart pour Chromium.

Depuis Chromium 69 (3 septembre 2018),
les propriétés logiques et les valeurs ont aidé
les développeurs gardent le contrôle de leurs mises en page internationales grâce à des
que les styles physiques, de direction et de cote. Dans Chromium 87, shorthands et
des offsets ont été livrés pour rendre ces propriétés et valeurs logiques un peu plus faciles à écrire.
Cela rattrape Chromium à Firefox, qui a pris en charge les raccourcis
depuis 66.
Safari les a prêts dans leur aperçu technique.

Le latin, l'hébreu et le japonais sont affichés avec le texte d'espace réservé de rendu dans un
    cadre de l'appareil. Les flèches et les couleurs suivent le texte pour aider à associer les 2 directions
    de bloc et en ligne.

Flux de documents #

Si vous êtes déjà familiarisé avec les propriétés logiques, les axes en ligne et en bloc, et que vous ne
voulez un rappel, vous pouvez passer à l’avant. Sinon, voici un petit rappel.

En anglais, les lettres et les mots s'écoulent de gauche à droite tandis que les paragraphes sont empilés de haut en bas.
En chinois traditionnel, les lettres et les mots sont de haut en bas tandis que les paragraphes sont empilés
de droite à gauche. Dans ces 2 cas seulement, si nous écrivons du CSS qui met "margin top" sur un paragraphe,
nous n'espérons qu'un style de langue de manière appropriée. Si la page est traduite en traditionnel
Chinois de l'anglais, la marge pourrait bien ne pas avoir de sens dans le nouveau mode d'écriture verticale.

Par conséquent, le côté physique de la boîte n'est pas très utile au niveau international. Ainsi commence le
processus de prise en charge de plusieurs langues; apprendre les côtés physiques et logiques du modèle de boîte.

Terme clé:
UNE propriété logique est celui qui référence un côté, un coin ou un axe du modèle de boîte en contexte
de la direction linguistique applicable. C'est comme faire référence à quelqu'un strong bras,
plutôt que de supposer que c'est leur right bras. «Right» est une référence de bras physique, «fort» est
une référence de bras logique, contextuel à l'individu.

Avez-vous déjà inspecté le p élément dans Chrome DevTools? Si oui, vous pourriez avoir
remarqué que les styles d'agent utilisateur par défaut
ne sont pas physiques, mais logiques.

p {
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}

CSS de la feuille de style de l'agent utilisateur de Chromium

La marge n'est ni en haut ni en bas comme pourrait le croire un lecteur anglais.
Ses block-start et block-end! Ces propriétés logiques s'apparentent à celles d'un lecteur anglais
haut et bas, mais aussi semblable à un lecteur japonais comme à droite et à gauche. Écrit une fois, fonctionne partout.

Le flux normal est lorsque la page Web fait intentionnellement partie de cette multidirectionnalité.
Lorsque le contenu de la page est mis à jour en fonction de l'orientation du document, la mise en page et son
les éléments sont considérés dans le flux. En savoir plus sur "in" et "out" of flow
sur MDN ou dans le
Spécifications du module d'affichage CSS. Alors que les propriétés logiques
ne sont pas obligés d'être en flux, ils font une grande partie du gros du travail à votre place lorsque la directionnalité change.
Le flux implique une direction dans laquelle les lettres, les mots et le contenu doivent voyager.
Cela nous amène à bloquer et à insérer des directions logiques.

La direction des blocs est la direction que suivent les nouveaux blocs de contenu, comme se demander,
"où mettre le paragraphe suivant?". Vous pourriez le considérer comme un "bloc de contenu" ou un "bloc de texte".
Chaque langue organise ses blocs et les ordonne
leur respective block-axis. block-start est le côté où un paragraphe est placé en premier,
tandis que block-end est le côté vers lequel coulent les nouveaux paragraphes.

Terme clé:
le direction du bloc est défini par le writing-mode propriété. Par exemple, horizontal-tb
(la valeur initiale) a un axe de bloc vertical qui coule de haut en bas (tb). Autres valeurs
avoir un axe de bloc horizontal, qui peut s'écouler de gauche à droite (comme dans vertical-lr) ou
de droite à gauche (comme dans vertical-rl).

Dans l'écriture japonaise traditionnelle, par exemple, la direction du bloc s'écoule de droite à gauche:

La direction en ligne est la direction dans laquelle les lettres et les mots vont. Considérez la direction
votre bras et votre main voyagent lorsque vous écrivez; ils voyagent le long du inline-axis.
inline-start est le côté où vous commencez à écrire, tandis que inline-end est le côté
là où l'écriture se termine ou s'achève. La vidéo ci-dessus, le inline-axis est de haut en bas,
mais dans cette prochaine vidéo le inline-axis s'écoule de droite à gauche.

Terme clé:
le direction en ligne est défini par les deux writing-mode et direction. Par exemple,
il coule de gauche à droite avec horizontal-tb et ltr, de droite à gauche avec horizontal-tb
et rtl, de haut en bas avec vertical-lr et ltr, et de bas en haut avec vertical-rl et rtl.

Étant flow-relative
signifie que les styles écrits pour une langue seront contextuels et appropriés
appliqué dans d’autres langues. Le contenu circulera en fonction de la langue pour laquelle il est livré.

Nouveaux raccourcis #

Certains des raccourcis suivants ne sont pas de nouvelles fonctionnalités pour le navigateur, mais plutôt plus faciles
façons d'écrire des styles en profitant de la possibilité de définir des valeurs sur les deux blocs
ou des bords en ligne à la fois. le inset-* propriétés logiques faire apporter de nouvelles capacités,
car il n'y avait pas de moyens à long terme pour spécifier des positions absolues avec des propriétés logiques
avant cela. Les encarts et les raccourcis coulent (hehe) si bien ensemble, je vais
vous présenter toutes les nouvelles fonctionnalités de propriétés logiques qui débarquent dans Chromium 87 à la fois.

Shorthands de marge #

Aucune nouvelle capacité livrée, mais certains raccourcis très pratiques l'ont fait:
margin-block et
margin-inline.

Mise en garde:
Si les éléments ci-dessus n'ont pas d'espace entre eux, alors margin-block Le raccourci n'est pas pris en charge dans votre navigateur.

Écriture normale

margin-block-start: 2ch;
margin-block-end: 2ch;

Nouvelle sténographie

margin-block: 2ch;
margin-block: 2ch 2ch;

Il n'y a pas de raccourci pour «haut et bas» ou «gauche et droite»… jusqu'à présent!
Vous faites probablement référence aux 4 côtés en utilisant le raccourci de margin: 10px;, et maintenant toi
peut facilement référencer 2 côtés complémentaires en utilisant le raccourci de propriété logique.

Écriture normale

margin-inline-start: 4ch;
margin-inline-end: 2ch;

Nouvelle sténographie

margin-inline: 4ch 2ch;

Rembourrage shorthands #

Aucune nouvelle capacité n'a été livrée, mais plus de raccourcis super pratiques l'ont fait:
padding-block et
padding-inline.

Écriture normale

padding-block-start: 2ch;
padding-block-end: 2ch;

Nouvelle sténographie

padding-block: 2ch;
padding-block: 2ch 2ch;

Et le inline ensemble gratuit de shorthands:

Écriture normale

padding-inline-start: 4ch;
padding-inline-end: 2ch;

Nouvelle sténographie

padding-inline: 4ch 2ch;

Encart et shorthands #

Les propriétés physiques top, right, bottom et left tout peut être écrit
comme valeurs pour le inset propriété. Toute valeur de position peut bénéficier de
mise sur les côtés avec encart.

.cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0;
}

Main physique

position: absolute;
top: 1px;
right: 2px;
bottom: 3px;
left: 4px;

Nouvelle sténographie physique

position: absolute;
inset: 1px 2px 3px 4px;

Cela devrait sembler immédiatement pratique! L'encart est un raccourci pour les côtés physiques,
et cela fonctionne comme la marge et le remplissage.

Nouvelles fonctionnalités #

Aussi excitant que soit la sténographie physique, il y a encore plus
fonctionnalités logiques apportées par des inset shorthands. Ces shorthands apportent
la commodité de création des développeurs (ils sont plus courts à taper) mais augmentent également
la portée potentielle de la mise en page, car ils sont relatifs au flux.

Main physique

position: absolute;
top: 10px;
bottom: 10px;

Sténographie logique

position: absolute;
inset-block: 10px;

Main physique

position: absolute;
left: 10px;
right: 20px;

Sténographie logique

position: absolute;
inset-inline: 10px 20px;

Lectures complémentaires et liste complète de la sténographie en médaillon et de la longue main
est disponible sur MDN.

Shorthands à la frontière #

Bordure, plus son imbriqué color, style, et width les propriétés ont toutes
de nouveaux raccourcis logiques également.

Main physique

border-top-color: hotpink;
border-bottom-color: hotpink;

Sténographie logique

border-block-color: hotpink;
border-block-color: hotpink hotpink;

Main physique

border-left-style: dashed;
border-right-style: dashed;

Sténographie logique

border-inline-style: dashed;
border-inline-style: dashed dashed;

Main physique

border-left-width: 1px;
border-right-width: 1px;

Sténographie logique

border-inline-width: 1px;
border-inline-width: 1px 1px;

Lectures complémentaires et liste complète de la sténographie et de la longue main
est disponible sur MDN.

Propriété logique

exemple #

Mettons tout cela ensemble dans un petit exemple. Les propriétés logiques peuvent être mises en page
une image avec une légende pour gérer différentes directions d'écriture et de document.

Ou essayez-le!

Vous n'avez pas besoin de faire grand-chose pour rendre une carte réactive à l'international avec un

et quelques propriétés logiques. Si vous êtes curieux de savoir comment tout cela à l'international
attentionné CSS fonctionne ensemble, j'espère que c'est une petite introduction significative.

Prise en charge du polyfilling et de plusieurs navigateurs #

Les outils Cascade ou build sont des options viables pour avoir les anciens et les nouveaux navigateurs,
correctement espacé avec des propriétés logiques mises à jour. Pour les solutions de secours Cascade, suivez une propriété physique
avec une logique et le navigateur utilisera la "dernière" propriété trouvée pendant le style
résolution.

p {
margin-top: 1ch;
margin-bottom: 2ch;


margin-block: 1ch 2ch;
}

Ce n'est cependant pas une solution complète pour tout le monde. Voici une solution de secours manuscrite
qui tire parti du :lang() pseudo-sélecteur pour cibler des langues spécifiques, ajuste
leur espacement physique de manière appropriée, puis à la fin offre la logique
espacement pour les navigateurs pris en charge:


p {
margin-top: 1ch;
margin-bottom: 2ch;
}


:lang(ja) {
p {
margin-top: 0;
margin-bottom: 0;


margin-right: 1ch;
margin-left: 2ch;
}
}


:lang(he) {}
:lang(mn) {}


p {
margin: 0;
margin-block: 1ch 2ch;
}

Vous pouvez également utiliser @supports pour déterminer s'il faut ou non fournir
propriétés de secours:

p {
margin-top: 1ch;
margin-bottom: 2ch;
}

@supports (margin-block: 0) {
p {
margin-block: 1ch 2ch;
}
}

Sass, PostCSS,
Emotion et d'autres ont automatisé le bundler et / ou le build
des offres de temps qui ont un large éventail de solutions de repli ou de solutions. Découvrez chacun
pour voir ce qui correspond à votre chaîne d'outils et à la stratégie globale du site.

Et après #

Plus de CSS offrira des propriétés logiques, ce n'est pas encore fait! Il manque un gros
un ensemble de raccourcis cependant, et une résolution est toujours en attente dans ce problème Github.
Il existe une solution temporaire dans un projet. Et si vous voulez tout coiffer
côtés logiques d'une boîte avec une sténographie?

Sténographie physique

margin: 1px 2px 3px 4px;
margin: 1px 2px;
margin: 2px;

Sténographie logique

margin: logical 1px 2px 3px 4px;
margin: logical 1px 2px;
margin: logical 2px;

Le projet de proposition actuel signifierait que vous devez écrire logical dans chaque
sténographie afin d'obtenir l'équivalent logique appliqué, ce qui ne sonne pas
très SEC pour certains.

Il existe d'autres propositions pour le modifier au niveau du bloc ou de la page,
mais cela pourrait laisser échapper des utilisations logiques dans des styles assumant toujours des aspects physiques.

html {
flow-mode: physical;
flow-mode: logical;
}

C'est difficile! Votez, exprimez votre opinion, nous voulons vous entendre.

Vous voulez en savoir plus ou étudier davantage les propriétés logiques? Voici une référence détaillée,
accompagnés de guides et d'exemples, sur MDN 🤓

Retour d'information #

Dernière mise à jour:

Améliorer l'article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *