CSS Logical Properties
Propiedades Lógicas de CSS
Las propiedades lógicas de CSS describen los lados según el flujo de escritura, como bloque y línea. Reemplazan direcciones fijas como arriba, derecha, abajo y izquierda. Esto ayuda a que los diseños sigan la dirección de escritura del idioma.
Otro ejemplo
Una caja utiliza `margin-inline-start` para el espacio al lado de un ícono y `border-inline-end` para un divisor. Las mismas reglas los colocan en los lados previstos en inglés, árabe RTL y japonés vertical, sin anulaciones por idioma.
Partes principales
- 01Modo de escritura
- 02Eje de bloque
- 03Eje en línea
Úsalo cuando
Prefiera espaciado, tamaños, bordes y posiciones lógicos para componentes que funcionen en más de una dirección de escritura.
No lo uses cuando
Usa arriba, derecha, abajo o izquierda solo cuando el lado físico exacto sea la verdadera necesidad. El flujo de texto no debe cambiar esa necesidad.
Nombre usado en código
margin-inline, padding-block, inline-size, inset-inline, border-block Antes de lanzarlo
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 Propiedades Lógicas de CSS (CSS Logical Properties). User context: Una caja utiliza `margin-inline-start` para el espacio al lado de un ícono y `border-inline-end` para un divisor. Las mismas reglas los colocan en los lados previstos en inglés, árabe RTL y japonés vertical, sin anulaciones por idioma. Design concept to apply: Propiedades Lógicas de CSS (CSS Logical Properties). Why it fits: Prefiera espaciado, tamaños, bordes y posiciones lógicos para componentes que funcionen en más de una dirección de escritura. Do not use it when: Usa arriba, derecha, abajo o izquierda solo cuando el lado físico exacto sea la verdadera necesidad. El flujo de texto no debe cambiar esa necesidad. 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 documento formal aún puede ser un borrador, un release candidate o una versión final. Revisa su estado y la compatibilidad con tu navegador o plataforma. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Revisa esta petición
Review how Propiedades Lógicas de CSS (CSS Logical Properties) is used now. Definition: Las propiedades lógicas de CSS describen los lados según el flujo de escritura, como bloque y línea. Reemplazan direcciones fijas como arriba, derecha, abajo y izquierda. Esto ayuda a que los diseños sigan la dirección de escritura del idioma. 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.