CSS4: Novedades de la versión que nunca llegará

Mi

¿Por qué CSS4 es la versión que nunca llegará?

Las versiones de CSS 1 y 2 han sido construidas a partir de documentos unitarios. Se recogían las características que se necesitaban para una nueva versión y una vez todo estaba aprobado, la versión salía a la luz.

 

A partir de CSS 2.1 esto cambió y los desarrollos empezaron a hacerse de manera modular. Cada nueva funcionalidad se dividió en un grupo de trabajo independiente y a su vez la forma de aprobar las futuras mejoras cambió.

Cambio modular en CSS3

Cambio modular en CSS3

Conclusión:

CSS4 Son los padres

Nuevo sistema para la aprobación de reglas CSS

Basado en...

  1. Editor’s Draft (ED)
  2. Working Draft (WD)
  3. Candidate Recommendation (CR)
  4. Proposed Recommendation (PR)
  5. WC3 Recommendation (REC)

1. Editor’s Draft (ED)

Se hace un borrador de las posibles propuestas en las que se quiere trabajar.

2. Working Draft (WD)

Se eligen las mejores propuestas del borrador y se empieza a trabajar en ellas.

3. Candidate Recommendation (CR)

Una vez el documento ha sido exhaustivamente revisado la W3C publica una recomendación con la experiencia de la revisión recogida.

4. Proposed Recommendation (PR)

Si todo ha ido correctamente se redacta un reporte maduro que despues de amplias revisiones técnicas y de implementación se envia al "W3C Advisory Committee" para su final aprobación.

5. W3C Recommendation (REC)

Finalmente la especificación se aprueba por lo miembros y el director de la W3C. W3C ahora sí, recomendará el desarrollo de dicha especificación.

Para ver el estado de las especificaciones visita: https://www.w3.org/Style/CSS/current-work#translations

Lo último de CSS

Funciones y Reglas

var()

Un imprescindible a la hora de profundizar un poco en CSS. Con esta nueva funcionalidad podemos crear variables casi en cualquier navegador actual 

Cuidado: var() no pueden se usado en media queries.

Ref: list.blocks.css, card.blocks.css

Además, permite crear fallbacks o incluso podemos acceder a ellas mediante javascript.

 

// Obtener la variable desde el estilo inline
element.style.getPropertyValue("--my-var");
// Obtener variable desde cualquier lugar
getComputedStyle(element).getPropertyValue("--my-var");

env()

Teóricamente se ha creado para suplir los problemas del famoso Notch, teniendo 4 valores por defecto que te proporciona su tamaño:

  • env(safe-area-inset-top)
  • env(safe-area-inset-right)
  • env(safe-area-inset-bottom)
  • env(safe-area-inset-left)

A parte puede usarse como var() con la ventaja de poder usarse dentro de las media queries

 

 

Cuidado: Es una funcionalidad muy experimental (tanto que a niveles prácticos no la he podido probar a pesar de supuestamente ser soportada por Google Chrome)

 

Más info:

https://benfrain.com/css-environment-variables-iphonex/

https://drafts.csswg.org/css-env-1/#env-function

calc()

Si has usado SASS alguna vez seguro que conoces esta función. Ahora también podemos hacer operaciones sin necesidad de preprocesador.

Ref: list.blocks.css

attr()

Función utilizada para poder coger el valor de un atributo en el html y poner utilizarlo en el CSS (Actualmente solo funciona en la propiedad CSS "content").

 

Más info: https://developer.mozilla.org/en-US/docs/Web/CSS/attr

Ref: budget-icon.blocks.css

@supports

Permite aplicar estilos según la compatibilidad que el navegador usado tenga con específicas propiedades.

 

Más info: https://www.creativebloq.com/css3/how-use-supports-rule-your-css-11410545

 

Ref: gallery.blocks.css

@namespace

Con esta regla podremos nombrar de manera única elementos dentro de un XML. Muy útil a la hora de modificar SVG dentro de un XHTML.

 

Más info: https://tympanus.net/codrops/css_reference/namespace/​

 

Veamos también algunas propiedades interesantes

Flex

Seguro que ya lo utilizas. Esta propiedad sirve para posicionar elementos de forma flexible. Cabe destacar que su compatibilidad actual con los navegadores es total. ¡¡Así que a usarlo!!

 

Más info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Grid

Nuevo método de posicionamiento de elementos en un diseño de cuadricula. Con filas y columnas. En ocasiones en las que tengas que crear un tablero por ejemplo viene bastante útil.

 

Más info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Filter

Sencillo. Agrega filtros a imágenes, fondos o bordes mediante CSS. Instagram ha llegado a tu navegador!

 

Más info: https://css-tricks.com/almanac/properties/f/filter/

Ref: gallery.blocks.css

clip-path

Te permite cortar un elemento con diferentes formas geométricas o incluso mediante el patrón de un svg

 

Cuidado: en chrome hay que activar la opción "Experimental Web Platform Features" accediendo a chrome://flags/

 

Más info: https://css-tricks.com/clipping-masking-css/

http://bennettfeely.com/clippy/

Ref: gallery.blocks.css

mask

Es otra técnica creada para recortar elementos basada en una mascara en escala de grises. Los tonos blancos mostrarán parte de la mascara y los negros del elemento recortado.

Esto tiene la ventaja de poder crear, por ejemplo, degradados.

 

Más info: https://css-tricks.com/masking-vs-clipping-use/​

 

Valores

currentColor

Valor que hace referencia al color heredado de componentes padre.

 

Más info: https://css-tricks.com/currentcolor/​

Ref: budget-icon.blocks.css, card.blocks.css

Pseudo clases

:default

Aplica estilos a un elemento por defecto. Como por ejemplo el estado por defecto de un checkbox.

 

 

Ref: checkbox.blocks.css

:matches

Agrupa elementos con padres comunes en un mismo selector.

 

Cuidado: en chrome hay que activar la opción "Experimental Web Platform Features" accediendo a chrome://flags/

Ref: gallery.blocks.css

:not

Como su nombre indica aplica estilos a los elementos que no sean los que especifiquemos

:valid / :invalid

Mediante formularios HTML5 podemos aplicar estilos automáticamente a partes del formulario que sean validas, invalidas o requeridas

Ref: input.blocks.css

:read-only / :read-write

Aplica estilos a un elemento solo de lectura con el atributo "readonly" / ni "readonly" ni "disabled".

Ref: input.blocks.css

:in-range / :out-of-range

Aplica estilos a un elemento cuando esta dentro de rango o fuera. Siempre teniendo en cuenta el atributo min y max.

Ref: input.blocks.css

:required / :optional

Aplica estilos a un elemento que tenga la propiedad de HTML5 "required"

Ref: input.blocks.css

case-insensivite

Aplica estilos a un elemento que coincida con los atributos especificados.

 

EJ:  [b="xyz" i] coincide con <a b="xyz"> y <a b="XYZ">.

Ref: input.blocks.css

Compra el pack completo de pseudo clases en:

http://css4.rocks/

Enserio.

Ten cuidado.

No seas milhouse.

Uso de navegadores

Lo que no llegará (de momento)

Mixins

Aunque todos disfrutemos crear funciones en CSS. El último draft que hacia referencia a esta funcionalidad, llamada @apply, ha sido finalmente rechazado.

 

Incluso Google Chrome se habia puesto a trabajar en esta funcionalidad...

 

Más info:

http://tabatkins.github.io/specs/css-apply-rule/

https://www.xanthir.com/b4o00

https://www.chromestatus.com/feature/5753701012602880

Nesting

Aunque todos queramos un anidado como el que nos proporciona SASS, lo cierto es que la tendencia oficial esta optando por incorporar alternativas como los seudo clases :matches y :any.

 

Tal vez en un futuro...esperemos :(

 

Más info: https://caniuse.com/#search=nesting

https://tabatkins.github.io/specs/css-nesting/

 

Alternativas

Sass es un lenguaje de hoja de estilos inicialmente diseñado por Hampton Catlin y desarrollado por Nathan Weizenbaum.​​Después de sus versiones iniciales, Nathan Weizenbaum y Chris Eppstein han continuado extendiendo Sass con SassScript, un lenguaje de script simple, usado en los ficheros Sass.

 

Tiene la ventaja de permitirnos crear variables, funciones, hacer cálculos y una de las funciones más utilizadas, la anidación (nesting).

Más info:

https://sass-lang.com/

SASS

Es una herramienta que nos brinda la posibilidad de utilizar el CSS del futuro, hoy. Mediante javascript convierte el código CSS que escribamos, en un código entendible por la mayoría de navegadores.

 

 

Más info:

https://postcss.org/

PostCSS

 

Sus principales funciones son:

  • Prefija el código
  • Transforma el código en código legible por la mayoria de navegadores
  • Crea clases más especificas dependiendo del scope para evitar pisar estilos entre unas y otras
  • Te avisa de posibles errores
  • Te brinda un intuitivo grid

 

Lo realmente potente de esta herramienta es que existen muchos plugins que expanden las posibilidades. Como la utilización de SASS o la inclusión de un sistema de Nesting.

No utilices polyfills

Enlaces de interés global

Mis redes

 

CSS4

By Abel Cabeza Román

Made with Slides.com

CSS4

  • 494

More from Abel Cabeza Román