Las nuevas reglas CSS @when y @else 12.6.16
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
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)
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
Hola! Disculpa, me gustaría hacer un botón que permita subir hasta la parte superior de la página solo utilizando html y css, pero quiero que dicho botón aparezca solo cuando haya bajado un poco la página y que desaparezca al subir nuevamente, y de ser posible que el desplazamiento hacia arriba (al pulsar el botón) no sea tan repentino como un simple < a href = "#titulo" > subir < / a >...
ResponderEliminarSe podría hacer? o necesariamente necesito emplear JS?
Nada de tus "extras", Yubizol, es encomienda de CSS.
EliminarY pese que alguno se pudiese emular (position: sticky por ejemplo) lo más lógico y práctico es utilizar el lenguaje "natural" para ello.
En tu caso ese lenguaje es Javascript.
Y pese a que este blog y su autor (yo) seamos ignorantes totales en esa materia tenemos la suerte de contar con Furoya como colaborador asiduo.
Entre otros artículos de Furoya en este blog hay algunos que te serán de ayuda:
Scroll suave del documento con CSS (y 12 líneas de javascript)
y
Control del scroll. Eventos y efectos al desplazar la página
Un saludo.
Hola todos.
EliminarComo que la consulta no tiene mucho que ver con el tema del artículo, ¿no?.
Gracias por recomendar la lectura de mis inventos, Kseso (sobre todo, después de la charla que tuvimos este fin de semana [digresión para dos, porque fue una discusión privada]).
De cualquier forma, te cuento, Yubizol ᅝ ᅝ, que justo el ejemplo que puse y más se acerca a tu tema es bastante experimental. Hay que pulirlo mucho y será tu trabajo.
Aún así, me sigue pareciendo un método más práctico que el de javascript puro (vanilla). Y ni hablar de uno con frameworks, que es muy cómodo de implementar, pero que en la mayoría de los casos no entendemos cómo funciona.
Saludos.