CSS Logical Properties
Propriétés logiques CSS
Les propriétés logiques CSS décrivent les côtés selon le flux d'écriture, comme bloc et en ligne. Elles remplacent les directions fixes comme haut, droite, bas et gauche. Cela aide les mises en page à suivre la direction d'écriture de la langue.
Un autre exemple
Une caisse utilise `margin-inline-start` pour l'espace à côté d'une icône et `border-inline-end` pour un séparateur. Les mêmes règles les placent du côté prévu en anglais, arabe RTL et japonais vertical, sans ajustements par langue.
Parties principales
- 01mode écriture
- 02Axe de bloc
- 03Axe en ligne
Utilisez-le lorsque
Préférez un espacement logique, des tailles, des bordures et des positions pour les composants qui fonctionnent dans plus d'une direction d'écriture.
Ne l'utilisez pas lorsque
Utilisez haut, droite, bas ou gauche uniquement lorsque le côté physique exact est réellement nécessaire. Le flux du texte ne doit pas modifier ce besoin.
Nom utilisé dans le code
margin-inline, padding-block, inline-size, inset-inline, border-block Avant d'expédier
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome: Complete the task with Propriétés logiques CSS (CSS Logical Properties). User context: Une caisse utilise `margin-inline-start` pour l'espace à côté d'une icône et `border-inline-end` pour un séparateur. Les mêmes règles les placent du côté prévu en anglais, arabe RTL et japonais vertical, sans ajustements par langue. Design concept to apply: Propriétés logiques CSS (CSS Logical Properties). Why it fits: Préférez un espacement logique, des tailles, des bordures et des positions pour les composants qui fonctionnent dans plus d'une direction d'écriture. Do not use it when: Utilisez haut, droite, bas ou gauche uniquement lorsque le côté physique exact est réellement nécessaire. Le flux du texte ne doit pas modifier ce besoin. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary): Un document officiel peut quand même être un brouillon, un release candidate, ou la version finale. Vérifie son statut et sa compatibilité avec le navigateur ou la plateforme. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Vérifiez cette demande
Review how Propriétés logiques CSS (CSS Logical Properties) is used now. Definition: Les propriétés logiques CSS décrivent les côtés selon le flux d'écriture, comme bloc et en ligne. Elles remplacent les directions fixes comme haut, droite, bas et gauche. Cela aide les mises en page à suivre la direction d'écriture de la langue. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.