soy Kseso y esto EsCSS

FR, CH, Q, FADE: novedades en Css

¿Conoces las nuevas unidades de Css 'fr', 'ch', 'q'?
¿Y el nuevo valor 'fade' y qué propiedad lo admite?

FR, CH, Q, FADE: novedades en Css

·Por Kseso ✎ 2
FR, CH, Q, FADE... novedades en Css

Todo cambia y a nada que te despistes, si no estas pendientes de las novedades, quedas obsoleto en menos de lo que sale un nuevo documento del consorcio.

Hay novedades que por su potencial y los cambios (facilidad para hacer de forma sencilla realizaciones tradicionalmente complejas o diréctamente imposibles con Css) son ámpliamente difundidas. Y suelen llegar a todos y devenir en prácticas comunes en muy poco tiempo. Como el flexbox. O el Css Grid Layout [1 / 2 / 3] dentro de nada.

Sin embargo otras pasan de lo más desapercibidas hasta que con algo de suerte (o mucha) algún evento las convierte en trending y son celebradas y por todos conocidas y usadas. Pero otras van directas al limbo de Css: ahí están, ni vivas ni muertas, esperando una oportunidad que no llega.

Así que aquí te traigo algunas de estas novedades que quizás no conozcas.

La unidad 'fr': longitud flexible

La nueva unidad de longitud fr es definida en el documento CSS Grid Layout Module Level 1 como:

Una longitud flexible o <flex> es una longitud con la unidad fr, la cual representa una fracción del espacio libre en el grid container.

Si recuerdas una de las muchas novedades que trajo consigo el flexbox fue la posibilidad de repartir el espacio libre del flex entre uno o varios de sus ítems. Para ello hace uso de la propiedad flex-grow que admite como valores un número entero (sin unidad).

Y si te preguntas, como yo, por el porqué esta nueva unidad no está incluida en el documento sobre los valores y unidades de Css la respuesta por uno de sus editores:

La unidad 'ch': relativa a la tipografía

La unidad ch se engloba entre las relativas. Esta unidad es relativa a la tipografía usada por el elemento al que se declare y toma como base al '0' (cero).

El ancho del carácter "0" (cero, U+0030) en la fuente del elemento.
En los casos en los que sea imposible determinar la medida del glifo '0', debe asumirse un valor de 0.5em.

La unidad 'q': unidad física absoluta

La unidad q queda englobada entre las absolutas. Y es una unidad física porque se basa en las unidades del sistema métrico decimal, como los milímetro mm o centímetros cm

'1q' es igual o equivale a un cuarto de milímetro. Por lo tanto todas las advertencias que conlleva el uso de medidas absolutas deben tenerse en cuenta con la unidad q

1q = 0,025cm = 0,25mm

El valor 'fade'

css es awesome

Esto parece la respuesta de algún redactor al chiste aquel (hoy tan cansino) de CSS IS AWESOME y a todos los que aún en 2015 siguen contándolo y descubriendo al hacerlo todo su desconocimiento sobre el control del texto sobrante (overflow, hyphens, ellipsis...).

Así que en el nuevo documento CSS Basic User Interface Module Level 4 podemos encontrar el nuevo valor fade para la propiedad text-overflow

¿Y qué hace (o hará cuando sea implementado por los navegadores)? Sencillo. Lo mismo que el siguiente pen pero con una sola declaración:

See the Pen CSS IS AWESOME, YES by Kseso (@Kseso) on CodePen.

avatar del Editor del blog

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 Don Kseso Kseso