FR, CH, Q, FADE: novedades en Css 1.12.15
¿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
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:
@Kseso @fantasai V&U catalogs things that apply across CSS, and so don't fit into any one spec. The 'fr' unit is Grid-specific.
— Ⓣab Ⓐtkins-Ⓑittner (@tabatkins) diciembre 1, 2015La 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'
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.
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
Hay que ser malo para criticar algo que aún no está terminado. Pero todos sabemos que soy malo.
ResponderEliminarPaso de la "fr" porque casi ni sé nada de flexbox, la "ch" puede ser práctica para compensar tamaños de fuentes psicopatonas, donde el diseñador no se ocupó de hacer todos los números del mismo ancho (por eso del encolumnado de cifras), aunque tengo serias dudas de que lo usen para eso.
Ahora, ¿"q" sirve para algo? Si al menos fuera una excusa para estandarizar la manera en que los navegadores calculan fracciones ... Pero para eso tendría que ser "cuarto de pixel".
Cuando leí "fade" me imaginé que habían blanqueado la burrada ésa que tiene webkit para hacer transition de una imagen de fondo a otra. Pero no. Era para el overflow. Y hay que pulirlo demasiado por el comportamiento en elementos que no sean texto, o si es sólo para última línea en bloques, o algo que de momento no se me ocurra.
Me parece un comienzo para otros formatos, como un título que empiece con caracteres de un color y vaya degradando a otro hasta el final.
Habrá que ver cómo queda.
Bueno. creo que la mayoría serían de esas "curiosidades Css". No acabo de encontrar casos de usos antes imposibles y ahora ya sí para la mayoría excepto para fr
EliminarPero ésta queda, al menos de momento, restringida al uso en el grid item (display: grid;) como bien aclara @tab Atkins
Y fade también es sólo un valor permitido en text-overflow. Al menos también de momento. Así que otras propiedades que gestionan "el sobrante" como overflow no la admiten.
Llegado el tiempo en que forman parte del "css productivista" ya veremos si hay quien nos sorprenda con algún uso creativo de alguna de ellas.