Krypton Solid

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

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

El contenido generado se introdujo por primera vez en la especificación CSS2. Durante varios años, la función fue utilizada por relativamente pocos autores web debido a la compatibilidad inconsistente del navegador.

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

Otras lecturas en SmashingMag:

¿Qué es el contenido generado?

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

Es posible acceder al contenido generado a través de JavaScript leyendo el valor textual del content propiedad:


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

Insertar contenido generado

El contenido generado se puede insertar antes y después del contenido real de un elemento, utilizando el :before y :after pseudo-elementos, respectivamente. Para representar los pseudo-elementos, podemos usar el siguiente pseudo-marcado.


<p>
   <before>Start</before>
      Actual content
   <after>End</after>
</p>

Y nuestro CSS sería:


p:before {
   content: "Start";
}

p:after {
   content: "End";
}

Tenga en cuenta que si está validando el archivo CSS con las especificaciones CSS3, la :before y :after los pseudo-elementos deben escribirse como ::before y ::after. De lo contrario, el validador de CSS llamará a un error.

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

  • none, normal No se generaría el pseudocontenido.
  • <string> Esta sería una cadena textual entre comillas.
  • url() Esta función nos permite insertar un recurso externo (generalmente una imagen), como con el background-image propiedad.
  • counter(), counters() Estas funciones insertan contadores (consulte los detalles a continuación).
  • attr(attribute) Esta función nos permite insertar el valor de attribute de un elemento dado.
  • open-quote, close-quote, no-open-quote, no-close-quote Estos 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 navegador del elemento padre.

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;
}

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;
}

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

Tenga en cuenta que todo el contenido textual dentro del content la propiedad se trata literalmente. Por lo tanto, los espacios y pestañas insertados a través del teclado también se insertarán en la página.

Insertar iconos mediante 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(http://weloveiconfonts.com/api/?family=brandico);

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

En este ejemplo, hemos insertado un icono 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 del url() función.


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

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

Insertar valores de atributo

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


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

Acabamos de insertar el valor de la href atributo, que es una cadena de texto simple.

Insertar contadores

La numeración automática de CSS está controlada por dos propiedades,
counter-reset y counter-increment. Los contadores definidos por estas propiedades se utilizan luego con el counter() y counters() funciones de la content propiedad.

La counter-reset La propiedad puede contener uno o más nombres de contadores (es decir, «identificadores»), opcionalmente seguidos de un número entero. El entero establece el valor que será incrementado por el counter-increment propiedad para cualquier ocurrencia del elemento dado. El valor predeterminado es 0. Se permiten valores negativos.

La counter-increment la propiedad 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. Toma el siguiente marcado:


<dl>
   <dt>term</dt>
   <dd>description</dd>
   <dt>term</dt>
   <dd>description</dd>
   <dt>term</dt>
   <dd>description</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);
}

La primera regla aquí establece un contador para la lista de definiciones. A esto se le llama «alcance». El nombre (o identificador) del contador es term. Cualquiera que sea el nombre que elijamos para nuestro contador debe ser idéntico al del counter-increment propiedad (por supuesto, el nombre debe ser significativo).

En la segunda regla, adjuntamos el :before pseudo-elemento a la dt elemento, 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() La función acepta nuestro identificador (term) como su argumento, y el content La propiedad 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 el content propiedad:


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

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

En caso de que te lo preguntes podemos agregar más estilos a los contadores aplicando otras propiedades al pseudo-elemento 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;
}

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

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


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

Al establecer el counter-reset propiedad a -1 e incrementándolo 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 obtener un efecto interesante. Considere este ejemplo:


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

Como puede ver, sumar y restar números negativos y positivos produce una amplia gama de combinaciones entre contadores. Con 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 para anidarse. De hecho, la numeración también se puede ordenar por subniveles progresivos, como 1.1, 1.1.1, 2.1, etc. Para agregar 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) " ";
}

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

  1. incrementa el segundo contador (definition) en dd elementos;
  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 el content propiedad utilizada en el :before pseudoelemento que se adjunta 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 HTML (X), donde los elementos pueden estar anidados con profundidad arbitraria. Sin embargo, no siempre es posible especificar un contador diferente para cada lista porque podría producir un código bastante redundante. Por esta razón, la counters() la 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 están separados por una cadena. Toma el siguiente marcado:


<ol>
   <li>item</li>
   <li>item
      <ol>
         <li>item</li>
         <li>item</li>
         <li>item
            <ol>
               <li>item</li>
               <li>item</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, ".") " ";
}

En este ejemplo, solo tenemos el item contador para cada nivel anidado. En lugar de escribir tres contadores diferentes (como item1, item2, item3) y así crear tres ámbitos diferentes para cada anidado ol elemento, podemos confiar en el counters() 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 solo los elementos con display: list-items tener marcadores.

Ahora podemos mirar atentamente la tercera regla, que hace el trabajo real. La primera declaración incrementa el contador previamente establecido en la lista más externa. Luego, en la segunda declaración, el counters() La 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 del counters() función para mantener los números separados del contenido real de los elementos de la lista.

Los contadores están formateados con números decimales de forma predeterminada. Sin embargo, los estilos de la list-style-type También se dispone de propiedad 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 olvide que trabajamos con sistemas numéricos. También recuerde 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-latin después de 26 elementos de la lista no está definida. Por lo 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) ". ";
}

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


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

Tenga en cuenta que el counters() La 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, el counters() La función no nos permite especificar diferentes estilos para cada nivel de anidamiento.

Conclusión

Con la nueva generación de navegadores, podemos usar 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.

Otras lecturas

Fuente de la imagen en la portada: Riebart

Deja un comentario