Tamaño en línea - Trucos CSS

Tabla de contenido

inline-sizees una propiedad lógica que define el ancho de un elemento cuando el modo de escritura es horizontal, o la altura del elemento cuando writing-modees vertical.

.element ( inline-size: 700px; 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. Hay dos razones principales por las que querrías hacer eso.

Primero, como opción de diseño, es posible que desee mostrar texto vertical en un elemento, por ejemplo, un encabezado:

La segunda razón, y probablemente la más importante, por la que podría querer usar una propiedad lógica como el tamaño en línea es para adaptarse a 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.

¿Por qué no podemos simplemente usar la widthpropiedad de confianza ?

¡Usted puede! Sin embargo, es posible que desee buscar inline-sizeen su lugar si le preocupa que el contexto de su contenido cambie según el idioma de un usuario. 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 inline-size, pueden responder a esos cambios y aplicar el ancho en la dirección adecuada.

Por ejemplo, si un elemento de párrafo tiene 400 px de ancho usando el ancho, cuando el modo de escritura está configurado en vertical-lr, el contenido rotará, cambiando el diseño, pero ese párrafo seguirá teniendo 400 px de ancho en lugar de 400 px de alto.

¿Mira eso? ¡Bueno, inline-sizees inteligente! Cambia de ancho a alto, según el writing-modevalor.

Sintaxis

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 */ inline-size: 250px; inline-size: 5rem; 
 /* Percentage values */ inline-size: 75%; 
 /* Keyword values */ inline-size: auto; inline-size: fit-content(5rem); inline-size: max-content; inline-size: min-content; 
 /* Global values */ inline-size: inherit; inline-size: initial; inline-size: unset;
  • auto: El tamaño en línea del elemento se adherirá al tamaño de su elemento padre.
  • fit-content(): Esta función permite que un contenedor crezca hasta un tamaño deseado, luego hace que el texto se ajuste, sujetando efectivamente el contenido al valor de tamaño proporcionado. Se puede usar en contenedores Grid, así como en el tamaño de las cajas, y aunque caniuse muestra un fuerte apoyo a la función con el tamaño en línea, nuestras pruebas fueron menos concluyentes. Eso podría deberse al estado de Borrador de trabajo de la especificación de nivel 3 del módulo de tamaño de caja.
  • max-content: El ancho preferido intrínseco, lo que significa que el elemento estira el texto tanto como sea posible y hará que el cuadro sea tan largo como el texto.
  • min-content: El ancho mínimo intrínseco, lo que significa que la caja del elemento se reduce al tamaño mínimo de su contenido. El cuadro tendrá el tamaño de la cadena de texto más grande.

Manifestación

Soporte de navegador

ES DECIR Borde Firefox Cromo Safari Ópera
No 79+ 41+ 57 12.1+ 44+
Android Chrome Android Firefox Navegador de Android Safari de iOS Opera Mobile
85+ 79+ 81+ 12,2+ 59+
Fuente: caniuse

Tenga en cuenta que la compatibilidad con el uso de las siguientes funciones puede diferir de la compatibilidad con la propiedad:

  • fit-content()
  • max-content()
  • min-content()

Más información

  • Especificación de nivel 1 de valores y propiedades lógicas de CSS (borrador del editor)
  • Documentación MDN
  • Propiedades lógicas CSS` (Trucos CSS)
  • Comprensión de valores y propiedades lógicas (Revista Smashing)
  • Propiedades lógicas CSS (Adrian Roselli)
  • Tamaño de contenido mínimo y máximo en CSS Grid (Jen Simmons, video)
  • Reglas horizontales bidireccionales en CSS (Hussein Al Hammad)

Articulos interesantes...