CSS, algunos valores y unidades no tan conocidos 20.6.17

CSS, algunos valores y unidades no tan conocidos

Para el presente artículo sobre valores y sus unidades usados en las declaraciones de CSS voy a tomar como referente el último documento al respecto:CSS Values and Units Module Level 4 de fecha 19 de Junio de 2017 y status Editor’s Draft.

Pero antes de adentrarnos en ellos recordar que CSS define 3 palabras claves universales que pueden ser usadas como valor de cualquier propiedad: initial, inherit y unset y del otro lado de la declaración, en el lado de la propiedad, tenemos también la propiedad universal all que equivale a todas y cada una de las propiedades presentes y futuras definidas por el corpus de CSS. Cumple la misma función que es selector universal * {} respecto a todos los elementos del documento.

Unidades de tamaño basadas en la tipografía

Dejemos de lado los em y su variación rem así como las viejas conocidas como ex y vayamos con alguna un tanto desconocida o poco usada y otras completamente nuevas que aparecen en este level 4 y que toman al tamaño de la tipografía (fuente) como base o referente.

ch

La unidad ch toma como base la anchura del carácter del número 0 (cero). Muy útil, por ejemplo, para controlar el número de caracteres por línea especialmente con familias tipográficas monospace

See the Pen mwmdpp by Kseso (@Kseso) on CodePen.

cap

La unidad cap toma como base la altura de las letras mayúsculas (capital letters) de la tipografía en uso.

lh

1lh equivale a la altura de línea (line-height) computada del elemento.

rlh

O root line-height. rlh es lo mismo que lh pero de la altura de línea del elemento raíz o root. La relación entre rlh y lh es la misma que entre rem y em

ic

Sólo la nombro porque es nueva ya que su referente no son los caracteres latinos si no ideogramas. De la unidad tipográfica ic dice la especificación:
average character advance of a fullwidth glyph in the element’s font, as represented by the “水” (CJK water ideograph, U+6C34) glyph
Esto es: el avance promedio de caracteres de un glifo de ancho completo en la fuente del elemento, representado por el glifo "水" (ideograma de agua CJK, U+6C34).

Tamaños según espacio sobrante o libre

Una de las novedades que trajo el flexbox fue la posibilidad de que uno o varios de sus ítems se repartiesen el espacio sobrante (el no ocupado por los ítems del flex) entre ellos a voluntad. En el flexbox se optó por una propiedad, flex-grow que admite números positivos para indicar qué parte de ese sobrante se asigna al ítem.

fr

Sin embargo esta forma, vía una propiedad, se reveló poco práctica e insuficiente en el desarrollo del CSS Grid Layout. Y en su desarrollo se introdujo la unidad fr o fracción del espacio disponible asignado.

Para un conocimiento en profundidad tienes el artículo de Robin Rendle An Introduction to the `fr´ CSS unit en CSS-tricks, entre otros muchos.

De momento la unidad fr sólo admite ser usada en el flexbox o el Grid Layout. Esto es, en elementos cuyo display sea flex o grid o alguna de sus variaciones inline-flex, inline-grid, o que lo hereden, como puedes ser vía subgrid.

Valores de tamaños de elementos de bloque según su contenido

Dejo a un lado las unidades porcentuales relativas a la pantalla o viewport porque ya pueden considerarse "veteranas" y suficientemente conocidas y utilizadas.

Sabemos que un elemento de bloque por su naturaleza tiende a ocupar como mínimo toda la anchura que tenga disponible.

Sin embargo esto es posible modificarlo haciendo uso en la propiedad width de los Intrinsic Sizes: El "Tamaño Intrínseco" determina tamaños basados ​​en el contenido de un elemento, sin tener en cuenta su contexto.

Esto es, que la anchura final de un elemento de bloque la determine alguno de los tamaños de sus contenidos.

Los valores posibles para las propiedades width min-width max-width height min-height max-height son las palabras clave recogidas en el documento CSS Intrinsic & Extrinsic Sizing Module Level 3 a las que dediqué el artículo CSS Intrinsic Sizes: tamaños en función del contenido

• fill-available
• max-content
• min-content
• fit-content

Valores provenientes de los atributos (en el html) del elemento

La función attr() referente al valor del atributo

En el último documento estable (level 3, status W3c CR) ya está recogido un valor un tanto especial por su origen: el valor de un atributo en la etiqueta de apertura del elemento.

La función attr() es similar a la utilizada en el valor de la propiedad content. Pero la gran diferencia es que mientras que en content lo que devuelve la función `attr()´ es una cadena textual que no admite ser computada, al ser usada en otras propiedades devuelve el valor del atributo que sí puede ser computado como un valor (siempre que lo devuelto sea un valor permitido para dicha propiedad).

Su sintaxis es sencilla, dentro del paréntesis se indica el nombre del atributo que deseamos y separado por un espacio en blanco el tipo de unidad. Y opcionalmente un fallback precedido por una coma.

<el data-width='50'> .el { width: attr(data-width vw, auto); }

En este artículo tienes una extensa explicación y guía de uso de la función CSS attr().

Pese a estar ya incluida en el documento de nivel 3 (status W3c CR) a día de hoy (junio de 2017) no está soportada por ningún navegador.

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso