soy Kseso y esto EsCSS

Las nuevas reglas CSS @when y @else

Presentación y explicación de las nuevas reglas condicionales CSS de reciente presentación @when y @else

Las nuevas reglas CSS @when y @else

·Por Kseso ✎ 3
Las nuevas reglas CSS @when y @else

Hace escasas fechas (26 de Mayo 2016) Tab Atkins publicaba en su espacio de Github A Collection of Interesting Ideas una nueva idea CSS: CSS When/Else Rules.

Armó bastantes revuelo.

Tanto es así que de forma casi instantánea (en términos de tiempos en el desarrollo de CSS) el 8 de Junio en el siguiente Minutes Telecon del CSSWG (grupo de trabajo de CSS del W3c) resolvía añadir la regla @else para su discusión en el próximo nivel de "condicionales":

@else rule - glazou had strong concerns that this rule would be very hard for editors to implement, but TabAtkins felt that the benefit to authors was greater than the trouble caused to editors.
- There were concerns that having all @else rues ignored after one is found as true isn't consistent with other media queries, however it is consistent with most programming languages so it was felt it wouldn't give authors too much of a problem.
- RESOLVED: Add @else to the next level of conditionals pending review by dbaron.

En los días posteriores al "Minutes Telecon" la lista de Correos del CSSWG ha reflejado el interés y expectación por estas reglas (discusiones los días 10 y 11). Este tema ha acaparado, prácticamente, todo el tráfico y participación.

Y la lógica indica que su discusión seguirá algún tiempo más.

Las regla CSS @when

Según la propuesta original de Tab Atkins en su espacio Collection of Interesting Ideas.

AVISO: cabe esperar que en su desarrollo se produzcan cambios en su definición.

La regla de reglas (at-rule) @when se enmarca en el grupo de las reglas CSS condicionales y generaliza el uso de dichas reglas condicionales como @supports o @media.

Se define como:

@when <boolean-condition> { <stylesheet> }

En el código anterior el valor <boolean-condition> se refiere a cualquiera de los valores boleanos utilizados en la sintaxis CSS de la función de las reglas media() (media queries) y supports().

Recuerda que en CSS la expresión valor de la función (funtion en el original) se suele referir a lo que va entre paréntesis tras alguna palabra clave.

Condiciones encadenadas: la regla CSS @else

Por lo general, las reglas del grupo de las condicionales son independientes. Cada una tiene una condición independiente de las demás, que se evalua sin referencia directa a cualquier otra regla, y define si se aplica o no el CSS contenido en ella en base exclusivamente a su condición.

Esto está bien para condiciones simples, pero hace que sea difícil escribir un grupo de condicionales que estén destinados a ser mutuamente excluyentes.

En la práctica, cuando se utilizan múltiples reglas condicionales hay que tener un cuidado extremo para que no haya interferencias indeseadas entre unas y otras.

La regla @else permite evaluar conjuntamente una serie de reglas CSS condicionales y facilitar y garantizar que sólo una de ellas resultará de aplicación.

Sí. En el fondo es el mismo mecanismo que el if/else de otros lenguajes.

@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) { /* A */ } @else supports(caret-color: pink) or supports(background: double-rainbow()) { /* B */ } @else { /* C */ }

Exactamente sólo una de las reglas anteriores se aplicará, pese a que la segunda regla no excluye grandes anchuras, ni punteros finos o soporte al Flexbox, y que la última regla no especifica ninguna condición en absoluto.

Para que te hagas una idea de lo que supone el uso de las reglas @when y @else, para lograr lo mismo del código CSS previo con las reglas condicionales actuales sería necesario el siguiente CSS:

@media (width >= 400px) and (pointer: fine) { @supports (display: flex) { /* A */ } @supports not (display: flex) { @supports (caret-color: pink) and (background: double-rainbow()) { /* B */ } @supports not ((caret-color: pink) and (background: double-rainbow())) { /* C */ } } } @media not ((width >= 400px) and (pointer: fine)) { @supports (caret-color: pink) and (background: double-rainbow()) { /* B */ } @supports not ((caret-color: pink) and (background: double-rainbow())) { /* C */ } }

Notoriamente más complicado de escribir y comprender amén de las redundancias (condiciones duplicadas)

avatar del Editor del blog

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