6 potentes funciones de CSS que evitan JavaScript

Recientemente, CSS y JavaScript se comparan a menudo, discutiendo sobre la aplicación de estas tecnologías para resolver ciertos problemas. La controversia se está volviendo más candente a medida que surgen nuevas características de CSS que facilitan la resolución de muchos problemas y eliminan la necesidad de JS.







CSS y JavaScript funcionan bien juntos, cada uno de los cuales tiene sus propias fortalezas, pero estoy seguro de que cuanto más CSS se use para controlar la apariencia de las interfaces, más resistentes y confiables serán las aplicaciones web. El punto aquí es el siguiente:

• CSS, por su propia naturaleza, es una tecnología resistente a fallas. Esto significa que cuando un analizador CSS encuentra una propiedad que no comprende, simplemente la ignora y sigue adelante. En otras palabras, usando CSS, el programador aplica los estilos y espera que funcionen.
• JavaScript no es una tecnología tolerante a fallas. Un solo error de sintaxis en el código JS puede romper toda la aplicación. Es decir, a la hora de gestionar el estilo de los sitios utilizando JS, es absolutamente necesario comprobar la funcionalidad de las estructuras correspondientes.

Hay muchas otras consideraciones a considerar al responder a la pregunta de cuándo usar CSS sobre JS .



CSS nos brinda nuevas formas de diseñar soluciones fantásticas que son mucho más fáciles que las soluciones JS correspondientes y más fáciles de crear. Esto se refiere a muchas de las características de CSS: transiciones, propiedades personalizadas, animaciones, filtros, matemáticas.



En esta publicación, cubriré algunas de las características interesantes de CSS (algunas de las cuales son muy recientes) que es posible que aún no conozca. Es decir, hablaremos sobre el desplazamiento suave, sobre una propiedad position: stickyy sobre otras posibilidades, para cuya implementación se requería previamente escribir muchas líneas de ingenioso código JS.

1. Desplazamiento suave

Anteriormente, para equipar una página con un desplazamiento suave, era necesario utilizar varias líneas de código JS. Y ahora esta tarea se puede resolver exclusivamente mediante CSS. Bueno, ¿no es maravilloso? Ahora puede aprovechar el desplazamiento suave utilizando la propiedad CSS scroll-behavior.



Así es como se ve:

html {
  scroll-behavior: smooth;
}

Implementación de desplazamiento suave



→ Aquí hay un ejemplo en CodePen



En el momento de escribir este artículo, esta propiedadscroll-behaviorsolo es compatible con Chrome y Firefox. Aún no es compatible con Edge, IE y Safari (escritorio y móvil). Los detalles sobre el soporte para esta propiedad se pueden encontrar en ¿Puedo usar ?

2. Fijar elementos

Anclar elementos es una de mis funciones favoritas de CSS. La cuestión es que los elementos correspondientes no desaparecen de la ventana gráfica al desplazarse por las páginas. Ahora para arreglar los elementos de la página no es necesario recurrir a offsetToy window.scrollYen JS. En estos días, puede aprovechar la propiedad CSS position: sticky:

header {
  position: sticky;
  top: 0;
}

El bloque de navegación "descansa" en el borde superior de la ventana gráfica y no desaparece al desplazarse por la página



→ Aquí hay un proyecto de CodePen que muestra un ejemplo del uso de la propiedad.position: sticky



Para usar esta propiedad correctamente, debe tener en cuenta las peculiaridades de su efecto en los elementos. Cuando se aplica, la estructura de la página HTML juega un papel. Por cierto, es precisamente en el hecho de que estas características no se tienen en cuenta, y la razón es que esta propiedad a veces no funciona.



Echemos un vistazo al siguiente código HTML:

<main class="container">
  <nav class="nav">
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </nav>
  <div class="main-content">Main Content</div>
  <footer class="footer">Footer</footer>
</main>

El menú (el elemento navde este ejemplo) solo se puede fijar en el área que se superpone con su elemento principal ( mainen nuestro ejemplo). Como resultado, cuando se usa una propiedad position: sticky, se pueden distinguir dos clases principales de elementos:

• Elemento acoplable: Este es el elemento al que aplicamos la propiedad position: sticky( naven nuestro caso). Este elemento se moverá dentro del elemento padre hasta que alcance la posición dada. Por ejemplo, puede ser top: 0px.
• Contenedor acoplable: este es el elemento HTML que contiene el elemento acoplable. Esta es el área dentro de la cual se puede mover el elemento acoplado. Este "contenedor" define los límites dentro de los cuales puede existir el elemento acoplable.

El uso de esta función puede mejorar significativamente la usabilidad del sitio. Esto es especialmente cierto para aquellos proyectos cuyos usuarios tienen que desplazarse con frecuencia por las páginas.



Esta función tiene casi el 100% de compatibilidad con el navegador .

3. Recorte de texto

CSS nos brinda dos propiedades maravillosas: text-overflowy line-clamp. Le permiten recortar texto, manejar palabras con cuidado y, al mismo tiempo, nos ahorran la necesidad de usar JavaScript u otros métodos complejos para resolver tales problemas. Ambas propiedades no son nuevas, pero sí extremadamente útiles.





Recorte de textos



→ Aquí hay un ejemplo en CodePen.



Hablemos más sobre propiedadestext-overflowyline-clamp.

▍Propiedad de desbordamiento de texto

Esta propiedad controla cómo se muestra el texto en situaciones en las que debe truncarse si no cabe en una línea. Un ejemplo de tal situación se muestra en la figura anterior, en el encabezado de la tarjeta. Aquí puede usar la construcción text-overflow: ellipsis, lo que conducirá al hecho de que el carácter Unicode ( …) se agregará al final del texto recortado .



Para que la propiedad text-overflow: ellipsishaga su trabajo, es necesario utilizar las mismas propiedades white-space: nowrapy overflow: hidden.

.card-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Esta función es casi totalmente compatible con todos los navegadores modernos.

▍La propiedad line-clamp

Esta propiedad viene en nuestra ayuda en los casos en los que necesitamos trabajar no con texto de una línea, sino con texto de varias líneas (un ejemplo de dicho texto es el contenido de la tarjeta de la figura anterior). Aunque esto es parte del estándar CSS Overflow Module Level 3 , que ahora tiene el estado de un "Borrador de trabajo", esta propiedad ya es compatible con aproximadamente el 95% de los navegadores, aunque con un prefijo -webkit-. Antes de usarlo, es importante tener en cuenta que no brinda la capacidad de controlar la cantidad de caracteres mostrados. Pero de todos modos es increíblemente útil.



Para usarlo, necesitamos usar la antigua implementación de flexbox, usando las propiedades display: -webkit-boxy -webkit-box-orient: vertical. Así es como se ve:

.card-description {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

4. Propiedades CSS personalizadas: Variables CSS

En el mundo de JavaScript, los preprocesadores CSS (como Sass, Less y Stylus) son tecnologías muy útiles y populares. Los preprocesadores amplían las capacidades de CSS, permitiéndole utilizar, por ejemplo, variables y funciones. Pero los diseñadores web modernos tienen acceso a potentes funciones CSS estándar conocidas como propiedades CSS personalizadas o variables CSS.



Las variables CSS ayudan a mantener la coherencia de las aplicaciones y ayudan a implementar DRY. Facilitan el desarrollo y mantenimiento de temas de aplicaciones. Estas capacidades son una de las principales razones del éxito de los preprocesadores. Puedes leer más sobre esto aquí .



El uso de funciones CSS estándar significa que ya no necesita preprocesadores para crear variables. Las variables, al igual que otras características CSS estándar que nos encantan, funcionan en cascada.



Es muy fácil crear variables CSS. Es decir, para declarar una variable, basta con poner dos guiones ( --) delante de su nombre. Después de eso, donde se necesita el valor de la variable, se llama a la función var(), pasándole la variable creada previamente como argumento. Como ves, todo es muy sencillo.

:root {
  --base: #ffc600;
  --spacing: 10px;
  --blur: 10px;
}

img {
  padding: var(--spacing);
  background: var(--base);
  -webkit-filter: blur(var(--blur));
  filter: blur(var(--blur));
}

.hl {
  color: var(--base);
}

Las variables CSS se pueden manipular desde JavaScript.





Uso de variables CSS



→ Aquí hay un ejemplo en CodePen que muestra cómo usar variables CSS y manipularlas desde código JS

5. Brindar apoyo al tema oscuro

Desde que Apple introdujo el tema oscuro para macOS el año pasado, y porque CSS nos dio la capacidad de detectar el uso de este tema mediante una consulta de medios, muchos proyectos web grandes (como Twitter y Google Maps) han obtenido ese tema. ( aquí hay una lista de proyectos que apoyan el tema oscuro).



El tema oscuro no es solo una forma de decorar páginas web. Realmente puede ayudar a algunas personas a navegar por Internet.



Aquí hay algunas citas.



Y luego están las personas que, por razones objetivas, necesitan el modo oscuro. Utilizan este modo como una de las herramientas para las personas con discapacidad. Por ejemplo, estamos hablando de personas con baja visión.



Thomas Steiner, ingeniero de soluciones al cliente, Google, Alemania.



Molly tiene síndrome de Usher. Debido a esto, ella no escucha nada y el campo de visión de uno de sus ojos está limitado a 5 grados. (…) Ver páginas en modo oscuro estará dentro de sus posibilidades. Este modo también puede ser útil para otras personas, ampliando las posibilidades de trabajar en Internet para aquellos que tienen dolor de cabeza o para aquellos que tienen que sentarse frente a una computadora en una habitación con poca luz. Si, al desarrollar algo, se enfoca solo en algunos usuarios especiales, será útil no solo para ellos.



Charles Reynolds , diseñador, gobierno del Reino Unido.



También hecho de materialPuede aprender de Thomas Steiner cómo el uso del modo oscuro ayuda a ahorrar energía: “(…) como saben, usar el modo oscuro en las pantallas AMOLED ahorra mucha energía. La investigación de Android, dirigida a aplicaciones populares de Google como YouTube, ha mostrado ahorros de energía de hasta un 60% en algunos casos "



Una nueva función de CSS que nos permite saber si un usuario tiene un tema oscuro habilitado es la función multimedia prefers-color-scheme. Ya es compatible con Chrome, Firefox, Safari y Opera.



Cuando se combina con CSS Variables, es muy fácil para un desarrollador web hacer que sea fácil para sus visitantes aprovechar los modos dinámicos de luz y oscuridad.

:root {
  --color: #222;
  --background: #eee;
  --text: 'default';
}

body {
  color: var(--color);
  background: var(--background);
}

body:after {
  content: var(--text);
  display: block;
  text-align: center;
  font-size: 3rem;
}

@media (prefers-color-scheme: light) {
  :root {
    --color: #222;
    --background: #eee;
    --text: 'light';
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color: #eee;
    --background: #222;
    --text: 'dark';
  }
}

Detección automática del tema utilizado por el dispositivo



→ En este proyecto de CodePen, el diseño de la página depende del tema que esté usando el espectador

6. Directiva apoya

Durante mucho tiempo, los desarrolladores web tuvieron que recurrir a soluciones de terceros (como la herramienta Modernizr JS ) para averiguar si el navegador actual admite ciertas funciones de CSS. Por ejemplo, al configurar una propiedad de elemento -webkit-line-clamp, puede verificar si la propiedad es compatible con el navegador y, de lo contrario, puede usar alguna alternativa.



Después de que apareció la directiva en CSS @supports, fue posible verificar las capacidades de los navegadores directamente desde el código CSS.



La directiva es @supportsmuy similar a las consultas de medios. Es compatible con varias expresiones combinadas construidas utilizando las sentencias condicionales AND, ORy NOT:

@supports (-webkit-line-clamp: 2) {
    .el {
        ...
    }
}

Esto comprueba si el navegador admite la propiedad -webkit-line-clamp. Si es así, es decir, si la condición resulta ser verdadera, se aplicará el estilo declarado dentro de la directiva @supports. Todos los navegadores modernos admiten



esta función .

Salir

En esta publicación, he cubierto algunas de las características útiles de CSS. Si puede hacer algo sin usar JS, pero solo usando CSS, hágalo.



El mundo moderno de la interfaz está cambiando rápidamente, constantemente tenemos nuevas oportunidades a nuestra disposición que nos ayudan a hacer nuestro negocio más rápido y mejor. Experimentar con CSS y aprender cosas nuevas no solo es muy gratificante, sino también extremadamente interesante. Te aconsejo que pruebes algo nuevo de lo que aprendiste hoy.



¿Conoce alguna característica CSS reciente que le permita resolver los mismos problemas que resolvió anteriormente solo usando JavaScript?