Max-inline-size - Trucos CSS | Almanaque CSS 2024

max-inline-sizees una propiedad lógica en CSS que define el ancho máximo de un elemento cuando writing-modees horizontal, o la altura máxima del elemento cuando writing-modees vertical.

.element ( max-inline-size: 500px; writing-mode: vertical-lr; )

Como puede haber adivinado por el ejemplo anterior, la writing-modepropiedad cambia la orientación del texto y el flujo de diseño en 90 grados.

La principal razón para cambiar la orientación, además de crear diseños elegantes, es acomodar la internacionalización en un sitio. Muchas escrituras de Asia oriental, como el chino, el japonés y el coreano, se pueden escribir de forma horizontal o vertical. Utilizando propiedades lógicas, podemos proporcionar la dirección de tamaño correcta de los elementos según el modo de escritura del usuario.

Jen Simmons tiene un artículo y una presentación que profundizan en los modos de escritura CSS.

¿No podemos simplemente usar la `max-width`propiedad?

¡Sí! Pero si no es compatible con Internet Explorer, no hay razón para no utilizarlo max-inline-size. max-widthes una dimensión física, por lo que cuando cambia el modo de escritura, un elemento mantiene su tamaño de ancho horizontal, rompiendo un diseño cuando está configurado para ser vertical. Las propiedades lógicas, como max-inline-size, pueden responder a esos cambios y aplicar el tamaño en la orientación adecuada.

Sintaxis

max-inline-size: ;

Inicial: auto
Se aplica a: igual que heightywidth
Heredado: no
Porcentajes: en cuanto a la propiedad física correspondiente
Valor calculado: igual que heightywidth
Tipo de animación: por tipo de valor calculado

Valores

/* Length values */ max-inline-size: 250px; max-inline-size: 5rem;   /* Percentage values */ max-inline-size: 75%;   /* Keyword values */ max-inline-size: auto; max-inline-size: fit-content(5rem); max-inline-size: max-content; max-inline-size: min-content;   /* Global values */ max-inline-size: inherit; max-inline-size: initial; max-inline-size: unset;

Manifestación

Cuando writing-modese establece en vertical-rl, el contenido rotará, cambiando el diseño. El ancho de la max-widthcaja rotará con el contenido. ¡Pero max-inline-sizees inteligente! Deja intacto su ancho, independientemente del writing-modevalor. Alternar writing-modeen la siguiente demostración para ver la diferencia entre los dos.