Krypton Solid

Comprensión de la sintaxis del valor de propiedad CSS

Comprensión de la sintaxis del valor de propiedad CSS

La Consorcio Mundial de la red usa una sintaxis particular para definir los posibles valores que se pueden usar para todas las propiedades CSS. Es posible que haya visto esta sintaxis en acción si alguna vez ha mirado una especificación CSS.

La Consorcio Mundial de la red usa una sintaxis particular para definir los posibles valores que se pueden usar para todas las propiedades CSS. Es posible que haya visto esta sintaxis en acción si alguna vez ha mirado una especificación CSS, como en el sintaxis para border-image-slice. Vamos a ver:

<'border-­image-­slice'> = [<number> | <percentage>]{1,4} && fill?

Esta sintaxis puede ser difícil de entender si no conoce los distintos símbolos y cómo funcionan. Sin embargo, vale la pena tomarse el tiempo para aprender. Si comprende cómo el W3C define los valores de propiedad, podrá comprender cualquiera de los Especificaciones CSS.

Forma Backus-Naur

Comenzaremos con un vistazo al formulario Backus-Naur, porque esto nos ayudará a comprender la sintaxis del valor de propiedad del W3C.

Forma Backus – Naur (BNF) es una notación formal que se utiliza para describir la sintaxis de los lenguajes informáticos. Está diseñado para ser inequívoco, de modo que no haya desacuerdo o ambigüedad en cuanto a cómo se puede expresar el lenguaje.

Otras lecturas en SmashingMag:

Actualmente se utiliza una amplia gama de extensiones y variantes de la notación Backus – Naur original, que incluyen Formulario extendido Backus-Naur (EBNF) y Forma Backus-Naur aumentada (ABNF).

Una especificación BNF es un conjunto de reglas escritas de la siguiente manera:

<symbol>  ::=  __expression__

A la izquierda siempre hay un símbolo no terminal, seguido de un ::= símbolo, que significa «puede ser reemplazado por». A la derecha está el expression, que consta de una o más secuencias de símbolos que se utilizan para derivar el significado del símbolo de la izquierda.

Las especificaciones de BNF básicamente dicen: «Lo que esté a la izquierda puede ser reemplazado por lo que esté a la derecha».

Símbolos no terminales y terminales

Los símbolos que no son terminales son símbolos que se pueden reemplazar o desglosar aún más. En BNF, los símbolos no terminales aparecen entre paréntesis angulares, < y >. En el siguiente ejemplo, <integer> y <digit> son símbolos no terminales.

<integer>  ::=  <digit> | <digit><integer>

Un símbolo de terminal indica que el valor no se puede reemplazar ni desglosar más. En el siguiente ejemplo, todos los valores digitales son símbolos de terminal.

<digit>  ::=  0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

La sintaxis del valor de propiedad CSS

Si bien la sintaxis del valor de propiedad CSS del W3C se basa en el concepto de BNF, tiene algunas diferencias. Como BNF, comienza con un símbolo no terminal. A diferencia de BNF, describe los símbolos utilizados dentro de la expresión como «valores de componentes».

En el siguiente ejemplo, <line-width> es un símbolo no terminal, y <length>, thin, medium y thick son valores de componentes.

<line-­width>  =  <length> | thin | medium | thick

Valores de los componentes

Hay cuatro tipos de valores de componentes: palabras clave, tipos de datos básicos, tipos de datos de propiedad y tipos de datos que no son de propiedad.

1. Valores de palabras clave

Los valores de las palabras clave aparecen sin comillas ni corchetes angulares. Se utilizan tal cual, como valores de propiedad. Debido a que no se pueden reemplazar ni descomponer más, son terminales. En el siguiente ejemplo, thin, medium y thick son todos valores de palabras clave. Esto significa que se pueden usar tal cual, como valores en nuestro CSS.

<line-­width>  =  <length> | thin | medium | thick

2. Tipos de datos básicos

Los tipos de datos básicos definen valores fundamentales como <length> y <color>. No son terminales porque se pueden reemplazar con valores de longitud o color reales. En el siguiente ejemplo, el <color> El símbolo es un tipo de datos básico.

<'background-color'>  =  <color>

Esto <color> El valor puede ser reemplazado en nuestro CSS con un valor de color real, usando una palabra clave, una palabra clave extendida, un valor RGB, RGBA, HSL o HSLA, o el transparent palabra clave.

.example { background-color: red; }
.example { background-color: honeydew; }
.example { background-color: rgb(50%,50%,50%); }
.example { background-color: rgba(100%,100%,100%,.5); }
.example { background-color: hsl(280,100%,50%); }
.example { background-color: hsla(280,100%,50%,0.5); }
.example { background-color: transparent; }

3. Tipos de datos de propiedad

Un tipo de datos de propiedad es un símbolo no terminal que define el nombre real de la propiedad. Se define utilizando el nombre de la propiedad (completo con comillas) entre paréntesis angulares (<>). En el siguiente ejemplo, el <‘border-width’> símbolo es un tipo de datos de propiedad.

<'border-­width'>  =  <line-­width>{1,4}

Los tipos de datos de propiedad pueden aparecer directamente en nuestro CSS como propiedades. En el siguiente ejemplo, el border-width La propiedad se utiliza para definir un borde de 2 píxeles para el .example clase.

.example { border-width: 2px; }

4. Tipos de datos ajenos a la propiedad

Un tipo de datos que no es de propiedad es un símbolo no terminal que no comparte el mismo nombre que una propiedad. Sin embargo, define aspectos de una propiedad u otra. Por ejemplo, <line-­width> no es una propiedad, pero es un tipo de datos que define los distintos <border> propiedades.


<line-­width>  =  <length> | thin | medium | thick

<'border-­width'>  =  <line-­width>{1,4}

Combinadores de valor de componente

Los valores de los componentes se pueden organizar en combinadores de valores de propiedad utilizando uno de los cinco métodos siguientes.

1. Valores adyacentes

Los valores de los componentes que se escriben uno tras otro significa que todos estos valores deben ocurrir en el orden dado. En el siguiente ejemplo, la sintaxis enumera tres valores diferentes: value1, value2 y value3. En la regla CSS, estos tres valores deben aparecer en el orden correcto para que la sintaxis de la propiedad sea válida.

/* Component arrangement: all in given order */
<'property'> = value1 value2 value3

/* Example */
.example { property: value1 value2 value3; }

2. Ampersand doble

Un doble ampersand (&&) separar dos o más valores significa que todos deben aparecer, en cualquier orden. En el siguiente ejemplo, la sintaxis enumera dos valores, separados por un doble ampersand. Las reglas de CSS muestran que ambos valores deben aparecer, pero pueden aparecer en cualquier orden.

/* Component arrangement: all, in any order */
<'property'> = value1 && value2

/* Examples */
.example { property: value1 value2; }
.example { property: value2 value1; }

3. Tubo único

Un solo tubo (|) separar dos o más valores significa que solo debe aparecer uno de ellos. En el siguiente ejemplo, la sintaxis enumera tres valores, separados por conductos simples. Las siguientes reglas de CSS muestran tres opciones posibles:

/* Component arrangement: one of them must occur */
<'property'> = value1 | value2 | value3

/* Examples */
.example { property: value1; }
.example { property: value2; }
.example { property: value3; }

4. Tubo doble

Un tubo doble||) separar dos o más opciones significa que deben aparecer una o más, en cualquier orden. En el siguiente ejemplo, la sintaxis enumera tres valores, separados por conductos dobles. Hay numerosas opciones disponibles cuando escribe reglas CSS para que coincidan con esta sintaxis; puede usar uno, dos o tres valores, en cualquier orden.

/* Component arrangement: one or more in any order */
<'property'> = value1 || value2 || value3

/* Examples */
.example { property: value1; }
.example { property: value2; }
.example { property: value3; }
.example { property: value1 value2; }
.example { property: value1 value2 value3; }
...etc

5. Soportes

Soportes ([ ]) rodear dos o más alternativas significa que los componentes internos pertenecen a una sola agrupación. En el siguiente ejemplo, la sintaxis enumera tres valores, pero dos de ellos aparecen entre corchetes, por lo que pertenecen a un solo grupo. Hay dos opciones disponibles en las reglas CSS: value1 y value3 o value2 y value3.

/* Component arrangement: a single grouping */
<'property'> = [ value1 | value2 ] value3

/* Examples */
.example { property: value1 value3; }
.example { property: value2 value3; }

Multiplicadores de valor de componente

Los valores de los componentes también se pueden multiplicar utilizando uno de los ocho métodos siguientes.

1. El ? Símbolo

Un signo de interrogación (?) indica que el tipo, palabra o grupo anterior es opcional y ocurre cero o una vez. En el siguiente ejemplo, el segundo valor se coloca entre corchetes junto con una coma. El signo de interrogación colocado después de este grupo significa que value1 debe ocurrir, pero también podríamos usar value1 y value2, cada uno separado por una coma.

/* Component multiplier: zero or one time */
<'property'> = value1 [, value2 ]?

/* Examples */
.example { property: value1; }
.example { property: value1, value2; }

2. El * Símbolo

Un asterisco (*) indica que el tipo, palabra o grupo anterior aparece cero o más veces. En el siguiente ejemplo, el segundo valor se coloca entre corchetes junto con una coma. El asterisco colocado después de este grupo significa que value1 debe ocurrir, pero también podríamos usar <value2> tantas veces como queramos, con cada instancia separada por una coma.

/* Component multiplier: zero or more times */
<'property'> = value1 [, <value2> ]*

/* Examples */
.example { property: value1; }
.example { property: value1, <value2>; }
.example { property: value1, <value2>, <value2>; }
.example { property: value1, <value2>, <value2>, <value2>; }
...etc

3. El + Símbolo

Un plus (+) indica que el tipo, palabra o grupo anterior aparece una o más veces. En el siguiente ejemplo, el símbolo más colocado después del valor significa que el valor se puede usar más de una vez, sin necesidad de comas.

/* Component multiplier: one or more times */
<'property'> = <value>+

/* Examples */
.example { property: <value>; }
.example { property: <value> <value>; }
.example { property: <value> <value> <value>; }
...etc

4. El {A} Símbolo

Un solo número entre llaves ({A}) indica que el tipo, palabra o grupo anterior aparece A veces. En el siguiente ejemplo, deben estar presentes dos instancias del valor para que la declaración sea válida.

/* Component multiplier: occurs A times */
<'property'> = <value>{2}

/* Examples */
.example { property: <value> <value>; }

5. El {A,B} Símbolo

Un par de números separados por comas entre llaves ({A,B}) indica que el tipo, palabra o grupo anterior aparece al menos A y como mucho B veces. En el siguiente ejemplo, se puede usar un mínimo de un valor y un máximo de tres valores para definir la propiedad. Ninguno de estos valores se separaría con una coma.

/* Component multiplier: at least A and at most B */
<'property'> = <value>{1,3}

/* Examples */
.example { property: <value>; }
.example { property: <value> <value>; }
.example { property: <value> <value> <value>; }

6. El {A,} Símbolo

La B puede omitirse en {A,} para indicar que debe haber al menos A repeticiones, sin límite superior en el número de repeticiones. En el ejemplo siguiente, se debe usar un mínimo de un valor, pero también se puede usar cualquier número de valores adicionales. Ninguno de estos valores se separaría con una coma.

/* Component multiplier: at least A, with no upper limit */
<'property'> = <value>{1,}

/* Examples */
.example { property: <value>; }
.example { property: <value> <value>; }
.example { property: <value> <value> <value>; }
...etc

7. El # Símbolo

Un hash#) indica que el tipo, palabra o grupo anterior aparece una o más veces, separados por comas. En el siguiente ejemplo, se pueden usar uno o más valores, cada uno separado por una coma.

/* Component multiplier: one or more, separated by commas */
<'property'> = <value>#

/* Examples */
.example { property: <value>; }
.example { property: <value>, <value>; }
.example { property: <value>, <value>, <value>; }
...etc

8. El ! Símbolo

Un signo de exclamación ! después de que un grupo indica que el grupo es necesario y debe producir al menos un valor. En el siguiente ejemplo, value1 es obligatorio, junto con un valor del grupo que comprende value2 y value3. Puede haber solo dos valores en total; entonces, las opciones son value1 y value2 o value1 y value3.

/* Component multiplier: required group, at least one value */
<'property'> = value1 [ value2 | value3 ]!

/* Examples */
.example { property: value1 value2; }
.example { property: value1 value3; }

La <'text-shadow'> Sintaxis: un ejemplo

Echemos un vistazo al <‘text-shadow’> propiedad como ejemplo. Así es como se define la propiedad en el especificación:

<'text-shadow'> = none | [ <length>{2,3} && <color>? ]#

Podemos desglosar los distintos símbolos:

  • La | indica que podemos usar la palabra clave none o un grupo [].
  • La # multiplicador significa que podemos usar uno o más de estos grupos, separados por comas.
  • Dentro del grupo, el {2,3} indica que podemos usar dos o tres valores de longitud.
  • La && indica que debemos incluir todos los valores, pero se pueden incluir en cualquier orden.
  • Solo para ser engañoso, el <color> el valor incluye un ? multiplicador, lo que significa que puede ocurrir cero o una vez.

En lenguaje sencillo, esto podría escribirse de la siguiente manera:

No especificar ninguno o uno o más grupos separados por comas que contienen de dos a tres valores de longitud y un valor de color opcional. Los valores de longitud y el valor de color opcional se pueden escribir en cualquier orden.

Esto significa que podríamos escribir el text-shadow propiedad en una amplia gama de diferentes formas. Por ejemplo, podríamos establecer el text-shadow valor para ser none:

.example { text-shadow: none; }

Podríamos escribir solo dos valores de longitud, lo que significaría que estaríamos configurando el desplazamiento horizontal y vertical de la sombra, pero que no tendría un radio de desenfoque o valor de color.

Dado que no se ha definido ningún radio de desenfoque, el valor inicial de 0 Sería usado; entonces, la sombra sería de bordes duros. Sin color definido, el color del texto se usaría para el color de la sombra.

.example { text-shadow: 10px 10px; }

Si usáramos tres valores de longitud, estaríamos definiendo el radio de desenfoque, así como los desplazamientos horizontal y vertical de la sombra.

.example { text-shadow: 10px 10px 10px; }

Podríamos incluir un color, y podría ir antes o después de los dos o tres valores de longitud. En los ejemplos siguientes, el valor rojo se puede colocar en cualquier extremo del conjunto de valores.

.example { text-shadow: 10px 10px 10px red; }
.example { text-shadow: red 10px 10px 10px; }

Finalmente, podríamos incluir múltiples sombras de texto, escritas como grupos separados por comas. Los efectos de sombra se aplicarían de adelante hacia atrás: la primera sombra en la parte superior y las otras en capas detrás. Las sombras no pueden superponerse al texto en sí. En el siguiente ejemplo, la sombra roja se colocaría encima de la sombra lima.

.example {
    text-shadow:
        10px 10px red,
        -20px -20px 5px lime;
}

Conclusión

Si escribe CSS para ganarse la vida, es importante que comprenda cómo escribir correctamente los valores de propiedad CSS válidos. Una vez que comprenda cómo se pueden combinar o multiplicar diferentes valores, la sintaxis del valor de la propiedad CSS se vuelve mucho más fácil de comprender. Entonces será más fácil leer las distintas especificaciones y escribir CSS válido.

Para obtener más información, consulte los siguientes sitios web:

Deja un comentario