Propiedades personalizadas (variables), consultas de contenedor, dirección de escritura y alguna herramienta general.
--nombre (variables): Propiedades personalizadas o variables.
Propiedades personalizadas (variables), consultas de contenedor, dirección de escritura y alguna herramienta general.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. Propiedades personalizadas o variables: se declaran con dos guiones y se usan con var(--nombre). Declaradas en :root, valen para toda la página; se heredan y se pueden cambiar en un componente o en una media query.
Valores: --acento: #e63946; … color: var(--acento); var(--x, 1rem) (con valor por defecto)
Convierte el elemento en contenedor para las consultas de contenedor (@container): sus hijos cambian según el ancho de la caja, no el de la ventana.
Valores: normal, inline-size, size
Un nombre para el contenedor, para consultar uno concreto: @container tarjeta (min-width: 30rem).
Valores: none, tarjeta
Abreviada de nombre y tipo de contenedor.
Valores: tarjeta / inline-size
Restablece todas las propiedades de una vez (salvo la dirección del texto y las variables).
Valores: initial, inherit, unset, revert
La dirección de las líneas: horizontal o vertical (titulares verticales, lomos de libro).
Valores: horizontal-tb, vertical-rl, vertical-lr
En texto vertical, si las letras van giradas o de pie.
Valores: mixed, upright, sideways
La dirección del texto: de izquierda a derecha o al revés. Para idiomas como el árabe, mejor el atributo dir en el HTML.
Valores: ltr, rtl
Con exact, al imprimir se mantienen los fondos y los colores en lugar de ahorrar tinta.
Valores: economy, exact
Propiedades personalizadas (variables), consultas de contenedor, dirección de escritura y alguna herramienta general.
Código del tema: :root { --acento: #e63946; --radio: 12px; }
Propiedades personalizadas (variables), consultas de contenedor, dirección de escritura y alguna herramienta general.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. Propiedades personalizadas o variables: se declaran con dos guiones y se usan con var(--nombre). Declaradas en :root, valen para toda la página; se heredan y se pueden cambiar en un componente o en una media query.
Valores: --acento: #e63946; … color: var(--acento); var(--x, 1rem) (con valor por defecto)
Convierte el elemento en contenedor para las consultas de contenedor (@container): sus hijos cambian según el ancho de la caja, no el de la ventana.
Valores: normal, inline-size, size
Un nombre para el contenedor, para consultar uno concreto: @container tarjeta (min-width: 30rem).
Valores: none, tarjeta
Abreviada de nombre y tipo de contenedor.
Valores: tarjeta / inline-size
Restablece todas las propiedades de una vez (salvo la dirección del texto y las variables).
Valores: initial, inherit, unset, revert
La dirección de las líneas: horizontal o vertical (titulares verticales, lomos de libro).
Valores: horizontal-tb, vertical-rl, vertical-lr
En texto vertical, si las letras van giradas o de pie.
Valores: mixed, upright, sideways
La dirección del texto: de izquierda a derecha o al revés. Para idiomas como el árabe, mejor el atributo dir en el HTML.
Valores: ltr, rtl
Con exact, al imprimir se mantienen los fondos y los colores en lugar de ahorrar tinta.
Valores: economy, exact