7 novedades Css. Últimos documentos del @W3c sobre la UI, Page Floats, Round Display y Text Module 4 24.9.15

7 novedades Css. Últimos documentos del @W3c sobre la UI, Page Floats, Round Display y Text Module 4

Parece que este mes de Septiembre ha pillado a los distintos grupos y editores Css del Consorcio W3c trabajadores y prolíficos.

En lo que va de mes son varios los documentos publicados. Unos nuevos y otros evolución de viejos conocidos. Esto es, alguno aparecen por primera vez (level 1) y otros añaden un nuevo nivel (el 3º o 4º) al ya existente.

Así que vamos a echar un vistazo a las novedades incluidas en ellos, pese a que aún ha de pasar tiempo hasta que estén disponibles (aunque sólo sea para jugar con ellas) en algún navegador.

Ya te adelanto que alguno promete lo suyo y otros como el dedicado a los aparatos no rectangulares dependerá muy mucho de factores externos.

Estos son los documentos aparecidos durante Septiembre:

Nuevos documentos del W3c publicados en Septiembre

1. CSS Round Display Level 1
2. CSS Text Module Level 4
3. CSS Basic User Interface Module Level 4
4. CSS Grid Layout Module Level 1
5. CSS Inline Layout Module Level 3
6. CSS Page Floats
7. CSS Cascading and Inheritance Level 4

CSS Round Display Level 1

Documento para adaptar los layouts a dispositivos con pantallas no rectangulares (tipo relojes).

Entre las novedades incluidas en el documento CSS Round Display Level 1 están:

• Nueva @media query: device-radius
• Position: polar Un nuevo sistema de coordenadas para posicionar elementos en pantalla circulares y varias propiedades relacionadas con ella: polar-angle y polar-distance
• shape-inside propiedad para alinear contenidos a lo largo del borde curvo del dispositivo.
• border-boundary propiedad para dibujar los bordes alrededor del borde del dispositivo.

CSS Text Module Level 4

Este nuevo documento CSS Text Module Level 4 en palabras de su editor Alan Stearns (de Adobe):

Este módulo define propiedades adicionales para la manipulación de texto.

El documento de nivel 3 aún estña en desarrollo, así que hasta que el estabilice, CSS Text Level 4 es una especificación "diff" que contiene sólo el nuevo material.

Este nivel convierte la propiedad white-space en la forma abreviada de nuevas propiedades text-space-collapse text-wrap text-space-trim que controlan los espacios en blanco, su colapso y recorte.

Este nivel introduce nuevas propiedades para controlar los saltos de línea, incluyendo saltos de línea forzados, equilibrar longitudes de línea y consejos para dónde para evitar saltos de línea cuando sea posible.

También se incluyen propiedades para la separación silábica, alineación de textos basada en carácteres y otras que quedaron pendientes (fuera) del nivel 3.

CSS Basic User Interface Module Level 4

El nuevo documento que desarrolla la interfaz básica del usuario (UI) añade las siguientes propiedades:

• Propiedad user-select
• Propiedad appearance
• Los valores fade y fade() en la propiedad text-overflow.
• La propiedad acortada caret y las propiedades caret-shape y caret-animation

En este blog tienes varios artículos dedicados a la UI y cursores, la propiedad acortada outline, el modelo de caja boz-sizing, étc:

la Interfaz básica de Usuario

CSS Grid Layout Module Level 1

Para conocer este nuevo documento Css y todo el mundo de nuevas posibilidades a la hora de construir nuevos layouts complejos sólo con Css nada como remitirte al artículo de invitado publicado hace escasas fechas en el blog:

CSS Grid Layout: la revolución que esperas y que ya ha comenzado

CSS Inline Layout Module Level 3

CSS Inline Layout Module Level 3: Documento dedicado a la alineación de elementos en línea (altura de línea, alineación vertical...) y al manejo de las letras iniciales principalmente.

Sobre estás últimas (initial letters) y cuando este documento estaba en sus estadios iniciales (noviembre de 2014) le dediqué el artículo:

Letras capitulares en Css: ::first-letter e "initial-letter"

Sin tiempo para revisarlo a fondo y comparar y hallar posibles cambio, creo que sigue siendo válido su contenido.

CSS Page Floats

La razón de ser y propósito del nuevo documento CSS Page Floats lo recoge el mismo:

Este documento describe elementos flotados que se mueven a la parte superior o inferior del contenido.

Esta característica se ha utilizado tradicionalmente en las publicaciones impresas en el que las figuras y fotos se trasladaron a la parte superior o inferior de las columnas o páginas junto con sus pie de foto.

Este documento describe cómo lograr estos efectos dentro de las páginas, columnas, regiones y elementos.

Y para lograr todo lo anterior ha sido necesario y obligado ampliar y mucho la veterana propiedad float. Sólo para hacernos una idea de lo que se avecina, los valores específicos posibles para ella pasan de los tres conocidos (left | right | none) a nada menos que 11:
block-start | block-end | inline-start | inline-end | snap-block | snap-inline | left | right | top | bottom | none

Y si float crece es obligado que junto a ella lo haga su "asociada" clear en sus valores específicos:
inline-start | inline-end | block-start | block-end | left | right | top | bottom | none

Y a ello suma las nuevas propiedades: float-reference, float-defer, float-offset entre otras novedades para intentar hacer posible y sencillo lo que promete.

CSS Cascading and Inheritance Level 4

Y para terminar con las novedades Css del Consorcio W3c llegadas este Septiembre el documento CSS Cascading and Inheritance Level 4 del que me hice eco y publiqué en el blog sus novedades más significativas hace escasas fechas:

Revert: la nueva palabra clave como valor para revertir la cascada

Además de las palabras claves también tienes explicado en ese post el condicional supports() en la regla @import().

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