El lenguaje CSS es tan desconocido que se llega incluso a ignorar la cantidad exacta de propiedades de la que dispone. Podemos decir que este lenguaje es de los más fáciles de aprender, pero a la vez de los más difíciles de dominar, y es por ello mismo que a través de este artículo quiero dar algún ejemplo de lo que hablo en estas líneas y ofrecerle una descripción general de estas propiedades, qué valores puede darnos, sus casos de uso y también algunos ejemplos.

¿Sabías que con CSS podemos crear contadores que crecen o decrecen olvidándonos de esta manera de código JavaScript? o ¿Sabías que podemos recortar una imagen dándole la forma que más nos apetezca? o ¿Quizás alguna vez te has preguntado como maquetamos para un idioma que se escribe al revés?. A continuación, ofreceré la solución, entre otros, a estos problemas con un listado de propiedades ignoradas pero que a la vez hacen que CSS sea un lenguaje de gran valor y que por su desconocimiento puede llegar a estar poco valorado.

will-change

Cada vez se está usando más las propiedades de animaciones CSS y dejando a un lado las bibliotecas JavaScript o el más que obsoleto Flash.

Bajo mi punto de vista, es un error el seguir utilizando esta tecnología para hacer transiciones, transformación o alguna que otra animación, ¡Ojo! Que se siguen usando, incluso en algunos contextos llegan a ser necesario. Lo que quiero decir es que gracias al CSS tenemos propiedades como transitions o los keyframe que nos facilita ese trabajo además de hacerlo más liviano.

Pero en este articulo no voy a hablar de esas propiedades antes mencionadas que para algunos no sean tan conocidas, aunque a día de hoy están implementadas en mucho proyectos. Yo quiero ir más allá y dar a conocer una propiedad muy poderosa la cual mejora el rendimiento y la calidad de esas animaciones. Se trata de la propiedad will-change destinada a informar a los navegadores de un futuro cambio relevante para que de esta manera optimice y asigne memoria en consecuencia. Esto evitaría los típicos parpadeos en las animaciones y transiciones, y realizar el renderizado de las páginas de una forma más rápida y eficiente.

Un ejemplo de la propiedad will-change sería si estuviéramos aplicando una transformación en un elemento, podríamos informar al navegador de esto así:

will-change: transform;

También puede declarar varios valores así:

will-change: transform, opacity;

Los valores posibles que recoge el documento del W3C para la propiedad CSS will-change son:

• auto
• scroll-position
• contents
• Nombre de propiedad

auto

No especifica ningún cambio en particular. Deja en manos del navegador aplicar las optimizaciones.

scroll-position

Indica que el autor espera animar o cambiar la posición del elemento (desplazamiento).

contents

Indica que el autor espera animar o cambiar algo en el contenido del elemento.

Nombre de propiedad

Indica que el autor espera animar o cambiar el valor de la propiedad especificada.

Como vemos en esta descripción podemos confirmar que existen propiedades que no son estáticas sino funcionales como es este caso.

Direccionamiento del texto

Existen propiedades CSS que son poco conocidas por el desarrollador perteneciente a países con sistema de escritura latino, ya que todos seguimos el patrón LTR, donde la lectura de los contenidos de una web se realiza de izquierda a derecha. Pero qué hacemos con los países árabes los cuales su sistema de escritura se realiza de derecha a izquierda o para volvernos locos, que hacemos con los chinos, en los que sus periódicos suelen combinar todas las direcciones de escritura en una misma página.

Para ello, tenemos una propiedad writing-mode, la cual cambia la alineación del texto para que se pueda leer de arriba a abajo o de izquierda a derecha, según el idioma.

Para esta propiedad existen varios valores que a continuación os describo:

horizontal-tb

El contenido fluye horizontalmente de izquierda a derecha y verticalmente de arriba hacia abajo. El próximo renglón horizontal se posiciona debajo del renglón anterior.

vertical-rl

El contenido fluye verticalmente de arriba hacia abajo y horizontalmente de derecha a izquierda. El próximo renglón vertical se posiciona a la izquierda del renglón anterior.

vertical-lr

El contenido fluye verticalmente de arriba hacia abajo y horizontalmente de izquierda a derecha. El próximo renglón vertical se posiciona a la derecha del renglón anterior.

sideways-rl

El contenido fluye verticalmente de arriba hacia abajo y todos los glifos, incluidos aquellos de los sistemas de escritura verticales, se colocan de lado hacia la derecha. Solo es compatible con Firefox en estos momentos.

sideways-lr

El contenido fluye verticalmente de arriba hacia abajo y todos los glifos, incluidos aquellos de los sistemas de escritura verticales, se colocan de lado hacia la izquierda. Solo es compatible con Firefox en estos momentos.

Por otro lado, y añadiendo a las propiedades de dirección del texto antes mencionadas podemos orientar los elementos del DOM, cuyo primer paso sería el añadir dir="ltr |rtl |auto" a la etiqueta Body, así indicamos al navegador que queremos aplicar al documento dicha orientación a sus elementos.

Y si bien hemos hablado de la orientación de los elementos del DOM no podemos dejar de hablar de la propiedad de CSS direction. Esta propiedad puede ser direction: rtl | ltr | inherit . Su función es alinear los textos según su criterio text-align. Para el parámetro rtl, pues hace que los elementos alineados según el criterio por defecto text-align:left pasen a comportarse como text-align:right

Para complementar esta propiedad existe la propiedad unicode-bidi la cual se usa junta y establece devuelve si el texto debe anularse para admitir varios idiomas.

Uno de sus valores más relevantes es el valor bidi-override el cual indica que los contenidos del elemento se deben ordenar de acuerdo al valor de la propiedad direction, ignorando por tanto el algoritmo de bidireccionalidad.

Para estos casos se recomienda siempre tener un hoja de estilos externa tipo style-rtl.css que nos ayudará a sobrescribir los estilos existentes.

Puede darse el caso de tener la necesidad que en cada renglón de un párrafo haya el máximo número de caracteres posibles, incluso apareciendo cortadas con un guion algunas palabras antes del salto al siguiente reglón en vez de hacer un salto de línea al terminar una palabra.

Con la propiedad hyphens podemos solucionar el problema, simplemente daremos el valor auto para visualizar esos guiones en las palabras.

Y ya que hablamos de fuentes, seguro que habéis visto esas webs que hasta que cargue la fuente establecida os visualiza una fuente alternativa del sistema. Pues ese cambio indeseado de fuentes se puede evitar con la propiedad font-display la cual determina como se van a cargar y mostrar las fuentes de un sitio web, estableciéndose esta dentro del @font-face.

Contadores CSS

Otra función muy útil pero poco conocida del CSS es la de sus contadores. Los contadores CSS, nos permiten reproducir números basado en elementos repetidos.

Normalmente para realizar conteos de elementos los usuarios utilizan lenguajes como Javascript , PHP, Python, etc.,que sin querer puede provocarnos que consumamos más recursos de memoria en el sistema del que necesitaríamos sin empleásemos los contadores CSS.

Lo veremos claramente con un ejemplo.

¿Cómo haríamos si necesitamos numerar todos los encabezados existentes en cada sección de una web?

En primer lugar, inicializaríamos un contador con el valor 0 dentro de la etiqueta body con la propiedad counter-reset, para posteriormente en cada h2 ir incrementado su valor de uno en uno con la propiedad counter-increment.

Con estas dos propiedades no veríamos el efecto deseado ya que, aunque se haya incrementado no lo podemos percibir en la pantalla. Para eso existe otra propiedad que le acompaña como es counter(), seguido del nombre que le hayamos dado al contador.

Otro ejemplo de uso que le podemos dar al contador CSS y que pocas veces lo habremos utilizado, aunque no por falta de ocasión, es el de contar el número de filas que pueda llegar a contener una tabla para posteriormente implementarlo la cantidad en el footer de esa misma tabla.

Para concluir, podemos decir que los contadores CSS nos ayuda a solucionar problemas a la hora de trabajar con estilos personalizados en elementos con un orden dinámico. También se debe decir que esto no es una solución completamente accesible, así que debemos de ser consciente de sus limitaciones y usarlo adecuadamente.

clip-path

Existe una propiedad la cual no es muy común verla en proyectos, bien sea porque se desconoce su capacidad o bien por que se toma otras alternativas de creación pero lo cierto es que esta propiedad llamada clip-path nos es muy útil para crear desde formas simples hasta formas bastante complejas desde el mismo CSS.

Con ella podemos ocultar un área específica de un elemento. Como caso de uso más común es emplear la propiedad con una imagen, aunque se puede ser más creativo con esta propiedad y usar la ruta del clip con un párrafo para mostrar solo una parte del contenido.

Todo esto comentado se puede lograr utilizando distintos valores de corte dependiendo del resultado deseado:

Valores de imagen:

• clip-path: url(recursos.svg)

Valores geométricos:

• clip-path: polygon ();
• clip-path: circle ();
• clip-path: inset (); /Corta el área interna del la figura/

Polygon es la más flexible de todas las formas disponibles porque nos permite especificar cualquier cantidad de puntos. Los puntos proporcionados son pares de coordenadas X e Y que pueden ser de cualquier unidad. Debido a que es el más flexible, también es el más complejo.

Veamos unos ejemplos marcando diferentes coordenadas, creando de esta manera figuras geométricas con forma de triángulo, equis o estrella entre otras muchas.

Si lo que deseamos es crear un círculo (algo mas habitual de encontrar en la maquetación de un proyecto) lo debemos definir con la sintaxis: circle(radio en posX posY). La posición es opcional y estará predeterminada al 50% 50%. Muestro un par de ejemplos.

Si por lo contrario lo que quiere es crear unas elipses se definiría utilizando la sintaxis: ellipse(radiusX radioY at posX posY). Una vez más, la posición es opcional y estará predeterminada al 50% 50%. Muestro un ejemplo:

Por último, con el valor inset puede definir el rectángulo interior y todo el exterior se recortará. También puede redondear el rectángulo con la palabra clave round y un valor para el radio de borde. Lo vemos en el siguiente ejemplo:

Conclusiones

Para finalizar, quiero recordarte que, cuando se trata de nuevas propiedades CSS, siempre es una buena idea verificar su compatibilidad y posibles problemas entre navegadores.

CSS es un lenguaje muy amplio y con una complejidad creciente a medida que empiezas a profundizar en él.

Esto es simplemente un ejemplo de algunas de esas propiedades poco conocidas, principalmente para aquellos que no estén habituados a trabajar con la vista de un proyecto. Espero que os sirva de ayuda y que la podáis utilizar en alguna ocasión.

Y si te ha gustado, ¡síguenos en Twitter para estar al día de próximos posts!