Cómo beneficiarse del contenido y los contadores generados por CSS

Durante varios años, relativamente pocos autores web utilizaron el contenido generado debido a la compatibilidad inconsistente del navegador. Pero en 2009, se redescubrió la característica y se adoptaron por primera vez muchas implementaciones interesantes. En este artículo Gabriele Romanato nos mostrará algunos posibles usos del contenido generado.

El contenido generado se introdujo por primera vez en la especificación CSS2. Durante varios años, relativamente pocos autores web utilizaron la función debido a la compatibilidad inconsistente del navegador. Con el lanzamiento de Internet Explorer 8 en 2009, se redescubrió el contenido generado y se adoptaron por primera vez muchas implementaciones interesantes. En este artículo, analizaremos algunos usos posibles del contenido generado .

¿Qué es el contenido generado?

En términos técnicos, el contenido generado es una abstracción simple creada por CSS en el árbol del documento. Como tal, en términos prácticos, el contenido generado sólo existe en el diseño del documento web.

Acceder al contenido generado a través de JavaScript es posible leyendo el valor textual de la contentpropiedad:

var test = document.querySelector('#test');var result   = getComputedStyle(test, ':before').content;var output = document.querySelector('#output');output.innerHTML = result;

• ver ejemplo

Insertar contenido generado

El contenido generado puede insertarse antes y después del contenido real de un elemento, utilizando los pseudoelementos :beforey , respectivamente. :afterPara representar los pseudoelementos, podemos utilizar el siguiente pseudomarcado.

p   beforeStart/before      Actual content   afterEnd/after/p

Y nuestro CSS sería:

p:before {   content: "Start";}p:after {   content: "End";}

• ver ejemplo

Tenga en cuenta que si está validando el archivo CSS con las especificaciones CSS3 , los pseudoelementos :beforey deben escribirse como y . De lo contrario, el validador de CSS indicará un error.:after::before::after

Como puedes ver, la propiedad que inserta las dos cadenas es content. Esta propiedad acepta los siguientes valores:

• none, normalEl pseudocontenido no se generaría.
• stringEsta sería una cadena de texto entre comillas.
• url()Esta función nos permite insertar un recurso externo (normalmente una imagen), como ocurre con la background-imagepropiedad.
• counter(), counters()Estas funciones insertan contadores (consulte los detalles a continuación).
• attr(attribute)Esta función nos permite insertar el valor de attributeun elemento determinado.
• open-quote, close-quote, no-open-quote, no-close-quoteEstos valores automatizan la generación de comillas.

Tenga en cuenta que el contenido generado ocupa espacio en la página y su presencia afecta el cálculo del elemento principal por parte del navegador.

Insertar cadenas

En el ejemplo anterior, insertamos dos cadenas simples antes y después del contenido real del elemento. El contenido generado también nos permite insertar símbolos más complejos mediante el escape:

p:before {   content: "0A7";   padding-right: 0.2em;}

• ver ejemplo

La secuencia de escape entre las comillas dobles es el valor Unicode hexadecimal del símbolo de párrafo. También podemos combinar cadenas simples con símbolos Unicode:

p:before {   content: "( " "0A7" " )";   padding-right: 0.2em;}

• ver ejemplo

En caso de que lo necesite, hay disponible una lista completa de todos los caracteres Unicode en el sitio web de Alan Wood .

Tenga en cuenta que todo el contenido textual dentro de la contentpropiedad se trata literalmente. Por lo tanto, los espacios y tabulaciones insertados mediante el teclado también se insertarán en la página.

Insertar iconos usando fuentes web

Las fuentes web se pueden utilizar para insertar iconos gráficos a través del contenido generado. Dependiendo de la familia de fuentes Web, puede insertar letras simples o secuencias Unicode:

@import url(https://weloveiconfonts.com/api/?family=brandico);p:before {   content: "f303";   padding-right: 0.3em;   font-family: 'brandico', sans-serif;   font-size: 22px;}

• ver ejemplo

En este ejemplo, hemos insertado un ícono de Twitter. Nuestro código podría reescribirse de la siguiente manera:

.icon-twitter:before {   content: "f303";   padding-right: 0.3em;   font-family: 'brandico', sans-serif;   font-size: 22px;}

Insertar imágenes

Podemos insertar imágenes a través de la url()función.

a:before {   content: url(link.png);   padding-right: 0.2em;}

• ver ejemplo

Como puede ver, esta función tiene la misma sintaxis que la background-imagepropiedad.

Insertar valores de atributos

Se puede insertar un valor de atributo de un elemento a través de la attr()función.

a[href]:after {   content: "( " attr(href) " )";   padding-left: 0.2em;   color: #000;   font: small "Courier New", Courier, monospace;}

• ver ejemplo

Acabamos de insertar el valor del hrefatributo, que es una cadena de texto simple.

Insertar contadores

La numeración automática de CSS está controlada por dos propiedades: counter-resety counter-increment. Los contadores definidos por estas propiedades se utilizan luego con las funciones counter()y counters()de la contentpropiedad.

La counter-resetpropiedad puede contener uno o más nombres de contadores (es decir, "identificadores"), seguidos opcionalmente de un número entero. El número entero establece el valor que la propiedad incrementará counter-incrementcuando ocurra cualquier elemento dado. El valor predeterminado es 0. Se permiten valores negativos.

La counter-incrementpropiedad es similar. La diferencia básica es que éste incrementa un contador. Su incremento predeterminado es 1. Se permiten valores negativos.

Ahora estamos listos para un ejemplo. Tome el siguiente marcado:

dl   dtterm/dt   dddescription/dd   dtterm/dt   dddescription/dd   dtterm/dt   dddescription/dd/dl

Queremos agregar numeración progresiva (1, 2, 3, etc.) a cada término de definición ( dt) en la lista. Aquí está el CSS:

dl {   counter-reset: term;}dt:before {   counter-increment: term;   content: counter(term);}

• ver ejemplo

La primera regla aquí establece un contador para la lista de definiciones. Esto se llama "alcance". El nombre (o identificador) del contador es term. Cualquier nombre que elijamos para nuestro contador debe ser idéntico al de la counter-incrementpropiedad (por supuesto, el nombre debe ser significativo).

En la segunda regla , adjuntamos el :beforepseudoelemento al dtelemento, porque queremos insertar el contador precisamente antes del contenido real del elemento. Echemos un vistazo más de cerca a la segunda declaración de la segunda regla. La counter()función acepta nuestro identificador ( term) como argumento y la contentpropiedad genera el contador.

No hay espacio entre el número y el contenido del elemento. Si queremos agregar un espacio y, digamos, un punto después del número, podríamos insertar la siguiente cadena en la contentpropiedad:

dt:before {   content: counter(term) ". ";}

• ver ejemplo

Tenga en cuenta que la cadena entre comillas se trata literalmente; es decir, el espacio después del punto se inserta tal y como lo hemos escrito en el teclado. De hecho, la contentpropiedad puede considerarse como la contraparte CSS del document.write()método JavaScript, excepto que no agrega contenido real al documento. En pocas palabras, la contentpropiedad crea una mera abstracción en el árbol del documento pero no la modifica.

En caso de que se lo pregunte, podemos agregar más estilos a los contadores aplicando otras propiedades al pseudoelemento adjunto. Por ejemplo:

dt:before {   content: counter(term);   padding: 1px 2px;   margin-right: 0.2em;   background: #ffc;   color: #000;   border: 1px solid #999;   font-weight: bold;}

• ver ejemplo

Acabamos de establecer un color de fondo, agregamos algo de relleno y un margen derecho, pusimos la fuente en negrita y delineamos los contadores con un borde delgado y sólido. Ahora nuestros mostradores son un poco más atractivos.

Además, los contadores pueden ser negativos. Cuando tratamos con contadores negativos, debemos ceñirnos a un poco de matemática, es decir, la parte sobre sumar y restar números negativos y positivos. Por ejemplo, si necesitamos una numeración progresiva a partir del 0, podríamos escribir lo siguiente:

dl {   counter-reset: term -1;}dt:before {   counter-increment: term;   content: counter(term) ". ";}

• ver ejemplo

Al establecer la counter-resetpropiedad en -1 e incrementarla en 1, el valor resultante es 0 y la numeración comenzará a partir de ese valor. Los contadores negativos se pueden combinar con contadores positivos para lograr un efecto interesante. Considere este ejemplo:

dl {   counter-reset: term -1;}dt:before {   counter-increment: term 3;   content: counter(term) ". ";}

• ver ejemplo

Como puede ver, sumar y restar números negativos y positivos produce una amplia gama de combinaciones entre contadores. Con tan solo un simple conjunto de cálculos, obtenemos un control total sobre la numeración automática .

Otra característica interesante de los contadores CSS radica en su capacidad de anidarse. De hecho, la numeración también puede ordenarse por subniveles progresivos, como 1.1, 1.1.1, 2.1, etc. Para añadir un subnivel a los elementos de nuestra lista escribiríamos lo siguiente:

dl {   counter-reset: term definition;}dt:before {   counter-increment: term;   content: counter(term) ". ";}dd:before {   counter-increment: definition;   content: counter(term) "." counter(definition) " ";}

• ver ejemplo

Este ejemplo es similar al primero, pero en este caso tenemos dos contadores termy definition. El alcance de ambos contadores está establecido por la primera regla y "vive" en el dlelemento. La segunda regla inserta el primer contador antes de cada término de definición de la lista. Esta regla no es particularmente interesante porque su efecto ya se conoce. En cambio, la última regla es el corazón de nuestro código porque hace lo siguiente:

1. incrementa el segundo contador ( definition) en ddelementos;
2. inserta el primer contador ( term), seguido de un punto;
3. inserta el segundo contador ( definition), seguido de un espacio.

Tenga en cuenta que los pasos 2 y 3 los realiza la contentpropiedad utilizada en el :beforepseudoelemento adjunto al término de definición.

Otro punto interesante es que los contadores se “autoanidan”, en el sentido de que restablecer un contador en un elemento descendiente (o pseudoelemento) crea automáticamente una nueva instancia del contador. Esto es útil en el caso de listas (X)HTML, donde los elementos pueden anidarse con una profundidad arbitraria. Sin embargo, no siempre es posible especificar un contador diferente para cada lista porque podría producir código bastante redundante. Por este motivo, la counters()función es útil. Esta función crea una cadena que contiene todos los contadores con el mismo nombre del contador dado en el alcance. Luego, los contadores se separan por una cadena. Tome el siguiente marcado:

ol   liitem/li   liitem      ol         liitem/li         liitem/li         liitem            ol               liitem/li               liitem/li            /ol         /li      /ol   /li/ol

El siguiente CSS numerará los elementos de la lista anidada como 1, 1.1, 1.1.1, etc.

ol {   counter-reset: item;   list-style: none;}li {   display: block;}li:before {   counter-increment: item;   content: counters(item, ".") " ";}

• ver ejemplo

En este ejemplo, solo tenemos el itemcontador para cada nivel anidado. En lugar de escribir tres contadores diferentes (como item1,,, ) y así crear tres ámbitos diferentes para cada elemento anidado item2, podemos confiar en la función para lograr este objetivo. La segunda regla es importante y merece una explicación más detallada. Debido a que las listas ordenadas tienen marcadores predeterminados (es decir, números), nos desharíamos de estos marcadores convirtiendo los elementos de la lista en elementos a nivel de bloque. Recuerda que sólo los elementos con tienen marcadores.item3olcounters()display: list-items

Ahora podemos observar detenidamente la tercera regla , que es la que realmente hace el trabajo. La primera declaración incrementa el contador previamente establecido en la lista más externa. Luego, en la segunda declaración, la counters()función crea todas las instancias del contador para las listas más internas. La estructura de esta función es la siguiente:

1. Su primer argumento es el nombre del contador dado, seguido inmediatamente por una coma.
2. Su segundo argumento es un punto entre comillas dobles.

Tenga en cuenta que hemos insertado un espacio después de la counters()función para mantener los números separados del contenido real de los elementos de la lista.

Los contadores tienen el formato predeterminado con números decimales. Sin embargo, los estilos de la list-style-typepropiedad también están disponibles para mostradores. La notación predeterminada es counter(name)(es decir, sin estilo) o counter(name, ‘list-style-type’)para cambiar el formato predeterminado. En la práctica, los estilos recomendados son estos:

• decimal
• decimal-leading-zero
• lower-roman
• upper-roman
• lower-greek
• lower-latin
• upper-latin
• lower-alpha
• upper-alpha

No olvides que estamos trabajando con sistemas numéricos. Recuerde también que la especificación no define cómo representar un sistema alfabético más allá del final de un alfabeto. Por ejemplo, la representación de lower-latinmás de 26 elementos de la lista no está definida. Por tanto, se recomiendan los números para listas largas:

dl {   counter-reset: term definition;}dt:before {   counter-increment: term;   content: counter(term, upper-latin) ". ";}dd:before {   counter-increment: definition;   content: counter(definition, lower-latin) ". ";}

• ver ejemplo

También podemos agregar estilos a la counters()función:

li:before {   counter-increment: item;   content: counters(item, ".", lower-roman) " ";}

• ver ejemplo

Tenga en cuenta que la counters()función también acepta un tercer argumento ( lower-roman) como último elemento de su lista de argumentos, separado del punto anterior por una segunda coma. Sin embargo, la counters()función no nos permite especificar diferentes estilos para cada nivel de anidamiento.

Conclusión

Con la nueva generación de navegadores, podemos utilizar contenido generado por CSS para embellecer nuestros diseños con cadenas y gráficos. El contenido generado, entonces, es seguramente una excelente herramienta que todo desarrollador debería aprender.

Otros recursos

• " Aprendiendo a utilizar los pseudoelementos :antes y :después en CSS ", Louis Lazaris, Smashing Magazine
• “ Elementos de estilo con glifos, sprites y pseudoelementos ”, Thierry Koblentz, Smashing Magazine

Fuente de la imagen en portada: Riebart

Otras lecturas

• Una guía definitiva para pseudoclases y pseudoelementos CSS
• Aprender a utilizar los pseudoelementos :before y :after en CSS
• !Declaraciones CSS importantes: cómo y cuándo usarlas
• Especificidad y herencia de CSS

(al, señor)Explora más en

• Codificación
• CSS
• javascript
• Técnicas