soy Kseso y esto EsCSS

Apuntes para una regla @IF en Css

Apuntes para una regla @IF en Css

·Por Kseso ✎ 4

Apuntes para una regla @IF en Css La finalidad es contar en Css con una vía para modificar las propiedades de un elemento en función del valor computado en una propiedad de un tercer elemento.

Así, por ejemplo, el valor de la tipografía de un elemento dado podrá modificarse al cambiar el valor de la visibilidad de otro, sin que el primero sea descendiente o hermano posterior.

Todo lo que sigue no deja de ser una ocurrencia de un "enredique de Css". Meras conjeturas sin evaluar sus riesgos, problemática, colisión con otras especificaciones css o simplemente su posibilidades reales de ser tenida en cuenta por quien corresponda.

Pese a que lo que sigue sólo es un ejercicio mental, agradeceré tus opiniones. Desde cuestionar el todo por no ser necesaria o no encontrarle uso, pasando por poner de manifiesto los errores o incongruencias que haya cometido o sugerir ideas.

Estructura y Sintaxis de la regla @if

En un principio creo que en Css la regla @if no necesitaría complementos del tipo "else" como en otros lenguajes, ya que en caso de no cumplirse la condición indicada en ella aplicarían los estilos que correspondan por estar ya declarados en las hojas de estilos.

La sitaxis de la regla @if sería como sigue:

@IF (<selector> (<property> <Comparative operators> <value>)) { /* set de rules */ }

Significado de cada parámetro de la regla @if

La regla @if
Se conforma con el identificador del tipo de "at rule" /@if/ seguido de su expresión y a continuación entre corchetes el bloque de reglas.
La expresión
Conformada por un único argumento o varios como ocurre con otras reglas arroba como las medias queries. Cada uno de estos argumentos de la regla @if estaría formado por dos partes: el selector del elemento y la condición lógica a cumplir. Esta condición es el par propiedad y su valor unidos por un operador lógico de comparación.
<selector>
Indica el elemento del html base de la regla @if. Puede ser cualquiera de los recogidos en las especificaciones, tanto simples (.clase) como selectores complejos, incluidos los formados con pseudoclases y pseudoelementos.
condición lógica contenida entre paréntesis. Ver Nota 1.
Esta condición lógica estaría formada por una propiedad css, seguida de un operador lógico de comparación y un valor de los admitidos por dicha propiedad.

Aspectos de la condición lógica:

<property>
cualquiera de las propiedades recogidas en las definiciones de Css.
<Comparative operators> Operadores lógicos de comparación
  • == igual a
  • != no igual a
  • > mayor que
  • < menor que
  • >= mayor o igual que
  • <= menor o igual que
Como es lógico, los dos primeros (igual y no igual) serían aplicables a cualquier tipo de valor y los cuatro últimos sólo a valores mensurables o numéricos.
<value>
El valor de la propiedad indicada en el argumento lógico una vez computado. Esto es, el valor a tener en cuenta para evaluar si se cumple la condición lógica debería ser no el declarado en algún momento en los estilos sino el resultante de aplicar al declarado en los estilos (si estuviera) la herencia y/o cascada.
El bloque de reglas
Como en cualquier otra at rule o regla de reglas se incluyen entre corchete de apertura y cierre las reglas que se han de aplicar en caso de cumplirse el argumento de la regla @if

Nota 1: Por descarte. No sería aconsejable usar el corchete [ ] pues es empleado en los selectores de atributo. El anidado de paréntesis no sería una novedad, pues ya ocurre en otros argumentos como en los gradientes con colores en rgba o en toggle con variables toggle(var(a),var(b),var(c)). Por ejemplo.

Ejemplo de la regla @if con la mínima expresión lógica

El caso más sencillo de regla @if sería aquel que sólo evalúa una condición para un solo selector. Esto es, su expresión lógica sólo tiene un argumento:

@if (.post-1 img:nth-of-type(1) (width >= 800px)) { .post-1 img:nth-of-type(1) { float: none; clear: both; display: block; margin: 1rem auto; /* No permitido declarar la misma propiedad usada en el argumento: Dependencia circular */ } .post-1 { width: auto; float: none; margin-right: 0; } nav li { display: inline-block; } }

Expresión lógica compleja en la regla @if

A modo y semejanza de lo que ocurre con otras at rules (como las medias queries) en la expresión lógica de la regla @if se podrá evaluar más de una comparación lógica. Dos son los casos:

  1. Un único selector con varias comparaciones lógicas. La expresión lógica estará formada por un argumento único complejo.
  2. Evaluar más de un selector. Tendríamos una expresión lógica (compleja) formada por múltiples argumentos.

En ambos casos, en el argumento único complejo o múltiples argumentos, cada uno de sus valores podrá ser una lista de ellos separados por comas |,| o estar enlazados por los operadores lógicos |not| y |and|

Argumento único complejo

Evaluamos en el mismo y único selector varias condiciones, sean de la misma o distinta propiedad.

@if (.mi_lista (height >= 10rem) and (display == block)) { /* reglas */ }

Múltiples argumentos

En este segundo caso se avalúan varios selectores distintos, cada uno con sus condiciones lógicas:

@if (.mi_lista (height >= 10rem)), (.otro (width < 300px)) and (.beta ()) { /* reglas */ }

En este último ejemplo se contempla la mera existencia en el html del elemento con clase 'beta' indicada por la comparación lógica vacía.

¿En el caso de evaluase la misma condición lógica (sencilla o múltiple) para varios selectores podrían incluirse todos ellos en un argumento único separados por comas y/o los operadores not/and tal como sucede en los selectores múltiples de las reglas normales en Css?

@if (.mi_lista, .otro (height >= 10rem) not (display == none)) { /* reglas */ }

¿O sería más apropiado conformar múltiples argumentos como en el ejemplo anterior?

Conflictos y no permitido

El primer conflicto, y por lo tanto no permitido y que daría lugar a invalidad la regla @if, serían las dependencias circulares o recursividad entre la condición lógica de la expresión y el contenido en el bloque de reglas. Un ejemplo sería evaluar el tamaño de un elemento (width/height) relativa a su ancestro en la condición lógica e incluir una declaración para esta misma propiedad de su ancestro en el set de reglas.

Tu opinión al respecto

Como te decía al inicio me gustaría saber tu opinión, sea cual sea y sobre el aspecto que creas conveniente. Quizás si entre todos pulimos lo suficiente la idea de la regla @if en Css la veamos algún día entre los documentos de trabajo del consorcio :-))

avatar del Editor del blog

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 Don Kseso Kseso