Nouveaux raccourcis de propriétés logiques et nouvelles propriétés d'encart pour Chromium.
Depuis Chromium 69 (3 septembre 2018), propriétés logiques et valeurs ont permis les développeurs gardent le contrôle de leurs mises en page internationales grâce à des que les styles physiques, de direction et de dimension. Dans Chromium 87, les raccourcis et des décalages ont été livrés pour rendre ces propriétés et valeurs logiques un peu plus faciles à écrire. Cela permet d'ajouter Chromium à Firefox, qui a pris en charge les raccourcis clavier depuis l'an 66. Safari les propose dans leur version preview.
Flux du document
Si vous connaissez déjà les propriétés logiques, les axes alignés et les blocs, et que vous ne Si vous souhaitez vous rafraîchir la mémoire, vous pouvez passer à l'étape suivante. Sinon, voici un bref rappel.
En français, 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 placés de haut en bas, tandis que les paragraphes sont empilés. de droite à gauche. Dans ces deux cas seulement, si nous écrivons du code CSS sur un paragraphe, nous n'espacement qu'un espacement approprié pour un style de langue. Si la page est traduite dans des langues traditionnelles En chinois et en anglais, la marge risque de ne pas avoir de sens dans le nouveau mode d'écriture verticale.
Par conséquent, l'aspect physique de la boîte n'est pas très utile à l'international. C'est ainsi que commence prise en charge de plusieurs langues ; les côtés physiques et logiques du modèle de boîte.
Avez-vous déjà inspecté l'élément p dans les outils pour les développeurs Chrome ? Si c’est le cas, il se peut que
vous avez remarqué que les styles user-agent 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 user-agent de Chromium
La marge n'est pas située en haut ou en bas, comme le croit un lecteur anglophone.
C'est block-start et block-end ! Ces propriétés logiques sont comparables à celles d'un lecteur
en haut et en bas, mais également semblable à un lecteur japonais comme à droite et à gauche. Rédigé une seule fois, il fonctionne partout.
On parle de "flux normal" lorsque la page Web fait intentionnellement partie de cette multidirectionnelle. Lorsque le contenu d'une page change en fonction de l'orientation du document, la mise en page et ses sont considérés comme étant dans le flux. En savoir plus sur "dans" et "sortir" de flux sur MDN ou dans le Spécifications du module d'affichage CSS Si les propriétés logiques ne sont pas obligés d'être dans le flux, ils font la majeure partie du travail à votre place à mesure que l'orientation change. Le flux implique une direction, c'est-à-dire les lettres, les mots et le contenu qui doivent suivre. Cela nous amène à bloquer et à intégrer des directions logiques.
Les blocs de type "direction" correspond à la direction dans laquelle
les blocs de contenu suivent. Par exemple,
"où placer le paragraphe suivant ?". Vous pouvez considérer cela comme un "bloc de contenu" ou un "bloc de texte".
Chaque langue organise ses blocs et les ordonne
leur block-axis respectif. block-start est le côté où un paragraphe est placé en premier ;
tandis que block-end est le versant vers lequel les nouveaux paragraphes latéraux sont dirigés.
Dans l'écriture manuscrite traditionnelle japonaise, par exemple, le sens des blocs s'exécute de droite à gauche:
L'orientation intégrée correspond à la direction des lettres et des mots. Tenir compte de l'orientation
voyager bras et main lorsque vous écrivez ; il emprunte le inline-axis.
inline-start est le côté où vous commencez à écrire, tandis que inline-end est le côté
où l'écriture se termine ou se termine. Dans la vidéo ci-dessus, le inline-axis est affiché de haut en bas.
mais dans la vidéo suivante, inline-axis s'exécute de droite à gauche.
Être flow-relative
Cela signifie que les styles écrits pour une langue s'adaptent au contexte
appliquées dans d'autres langues. Le flux du contenu dépendra de la langue dans laquelle il est diffusé.
Nouveaux raccourcis
Certains des raccourcis suivants ne sont pas de nouvelles fonctionnalités pour le navigateur, mais plutôt des
d'écrire des styles grâce à la possibilité de définir des valeurs sur les deux blocs
ou aligner les arêtes en même temps. Les propriétés logiques inset-* apportent de nouvelles capacités,
car il n'existait aucun moyen de spécifier des positions absolues avec des propriétés logiques.
avant celle-ci. Les encarts et les raccourcis (hehe)
s'enchaînent si bien,
vous présenter toutes les nouvelles propriétés logiques
qui arrivent dans Chromium 87 en même temps.
Raccourcis de marge
Aucune nouvelle fonctionnalité n'a été expédiée, mais quelques raccourcis très pratiques l'ont fait:
margin-block et
margin-inline
margin-block-start: 2ch; margin-block-end: 2ch;
margin-block: 2ch; /* or */ margin-block: 2ch 2ch;
Il n'existe pas de raccourci pour "haut et bas". ou "gauche et droite"... jusqu'à présent !
Vous faites probablement référence aux quatre côtés en utilisant le raccourci de margin: 10px;, et maintenant vous
peut facilement faire référence à deux côtés complémentaires en utilisant le raccourci de propriété logique.
margin-inline-start: 4ch; margin-inline-end: 2ch;
margin-inline: 4ch 2ch;
Raccourcis de remplissage
Aucune nouvelle fonctionnalité n'a été ajoutée, mais des raccourcis plus pratiques ont été ajoutés:
padding-block et
padding-inline
padding-block-start: 2ch; padding-block-end: 2ch;
padding-block: 2ch; /* or */ padding-block: 2ch 2ch;
Et l'ensemble de raccourcis complémentaires inline:
padding-inline-start: 4ch; padding-inline-end: 2ch;
padding-inline: 4ch 2ch;
Encart et raccourcis
Les propriétés physiques top, right, bottom et left peuvent toutes être écrites.
en tant que valeurs pour la propriété inset. N'importe quelle valeur de position peut bénéficier des avantages suivants :
définir les côtés avec un encart.
.cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0;
}
position: absolute; top: 1px; right: 2px; bottom: 3px; left: 4px;
position: absolute; inset: 1px 2px 3px 4px;
Ça devrait vous sembler pratique tout de suite ! L’encart est un raccourci pour les côtés physiques, et cela fonctionne comme la marge et la marge intérieure.
Nouvelles fonctionnalités
Aussi excitant que soit le raccourci physique de l'aspect, vous en tirerez encore plus parti
caractéristiques logiques fournies par des raccourcis inset supplémentaires. Ces raccourcis apportent
pour faciliter la rédaction par les développeurs (ils sont plus courts à saisir),
la couverture potentielle de la mise en page,
car elles sont liées au flux.
position: absolute; top: 10px; bottom: 10px;
position: absolute; inset-block: 10px;
position: absolute; left: 10px; right: 20px;
position: absolute; inset-inline: 10px 20px;
Documentation complémentaire et liste complète des encarts courts et longs est disponible sur MDN.
Raccourcissement des bordures
La bordure et ses propriétés imbriquées color, style et width ont toutes reçu
de nouveaux raccourcis logiques.
border-top-color: hotpink; border-bottom-color: hotpink;
border-block-color: hotpink; /* or */ border-block-color: hotpink hotpink;
border-left-style: dashed; border-right-style: dashed;
border-inline-style: dashed; /* or */ border-inline-style: dashed dashed;
border-left-width: 1px; border-right-width: 1px;
border-inline-width: 1px; /* or */ border-inline-width: 1px 1px;
Complément d'informations et liste complète des raccourcis et des abréviations de bordures est disponible sur MDN.
Exemple de propriété logique <figure>
Récapitulons tout cela dans un petit exemple. Les propriétés logiques peuvent mettre en page une image avec une légende pour gérer différentes directions d'écriture et de document.
Ou essayez !
Vous n'avez rien à faire pour rendre une carte responsive à l'international avec une
<figure> et quelques propriétés logiques. Si vous vous demandez comment tout cela
le CSS attentionné fonctionne ensemble. J'espère que cette introduction sera utile.
Polyfilling et compatibilité multinavigateur
Les outils Cascade ou Build Build sont des options viables pour avoir des navigateurs aussi bien anciens que nouveaux, correctement espacées avec des propriétés logiques mises à jour. Pour les créations de remplacement Cascade, suivez une propriété physique avec une logique et le navigateur utilisera le "dernier" qu'elle a trouvée dans l'attribut style la résolution de problèmes.
p {
/* for unsupporting browsers */
margin-top: 1ch;
margin-bottom: 2ch;
/* for supporting browsers to use */
/* and unsupporting browsers to ignore and go 🤷♂️ */
margin-block: 1ch 2ch;
}
Cependant, cette solution n'est pas
tout à fait pour tout le monde. Voici une création de remplacement manuscrite
qui exploite le pseudo-sélecteur :lang() pour cibler des langues spécifiques, ajuste
leur espacement physique de manière appropriée, puis à la fin, la logique
espacement pour les navigateurs compatibles:
/* physical side styles */
p {
margin-top: 1ch;
margin-bottom: 2ch;
}
/* adjusted physical side styles per language */
:lang(ja) {
p {
/* zero out styles not useful for traditional Japanese */
margin-top: 0;
margin-bottom: 0;
/* add appropriate styles for traditional Japanese */
margin-right: 1ch;
margin-left: 2ch;
}
}
/* add selectors and adjust for languages all supported */
:lang(he) {…}
:lang(mn) {…}
/* Logical Sides */
/* Then, for supporting browsers to use */
/* and unsupporting browsers to ignore #TheCascade */
p {
/* remove any potential physical cruft.. */
margin: 0;
/* explicitly set logical value */
margin-block: 1ch 2ch;
}
Vous pouvez également utiliser @supports pour déterminer s'il faut ou non fournir des données
propriétés de remplacement:
p {
margin-top: 1ch;
margin-bottom: 2ch;
}
@supports (margin-block: 0) {
p {
margin-block: 1ch 2ch;
}
}
Sass, PostCSS Emotion et d'autres utilisent un bundler automatisé et/ou un build offres temporelles qui proposent un large éventail de solutions de remplacement ou de solutions. Découvrez-les tous pour identifier celle qui correspond à votre chaîne d'outils et à votre stratégie globale pour votre site.
Étape suivante
Davantage de propriétés CSS proposeront des propriétés logiques, ce n'est pas encore fait ! Il manque un gros Toutefois, une solution est toujours en attente pour ce problème GitHub. Il existe une solution temporaire dans un brouillon. Et si vous voulez appliquer un style à tous côtés logiques d'une boîte avec un raccourci ?
margin: 1px 2px 3px 4px; margin: 1px 2px; margin: 2px;
margin: logical 1px 2px 3px 4px; margin: logical 1px 2px; margin: logical 2px;
Avec le brouillon actuel de la proposition, vous deviez écrire logical dans tous les
raccourci pour obtenir l'équivalent logique
appliqué, ce qui ne semble pas
très DRY pour certains.
Il existe d'autres propositions pour le modifier au niveau du bloc ou de la page, mais cela pourrait entraîner une fuite d’utilisations logiques dans les styles en supposant toujours des côtés physiques.
html {
flow-mode: physical;
/* or */
flow-mode: logical;
/* now all margin/padding/etc references are logical */
}
/* hopefully no 3rd/1st party code is hard coded to top/left/etc ..? */
C'est une question difficile. Votez, exprimez votre opinion : votre avis nous intéresse.
Vous souhaitez en savoir plus ou étudier les propriétés logiques ? Voici une référence détaillée, ainsi que des guides et des exemples, sur MDN 🤓
Commentaires
- Pour proposer des modifications de la syntaxe CSS des raccourcis à débit relatif, Commencez par vérifier les problèmes existants dans le dépôt csswg-drafts. Si aucun des problèmes existants ne correspond à votre proposition, créez-en un autre.
- Pour signaler des bugs dans l'implémentation de Chromium des raccourcis relatifs au flux, commencez par vérifier les problèmes existants dans l'outil de suivi des bugs Chromium. Si aucun des problèmes existants ne correspond à votre bug, créez-en un autre.