5 formas en que interactúan CSS y JavaScript que quizás no conozcas -

CSS y JavaScript: las líneas aparentemente se vuelven borrosas con cada versión del navegador. Siempre han hecho un trabajo muy diferente, pero al final ambas son tecnologías de vanguardia, por lo que necesitan trabajar en estrecha colaboración. Tenemos nuestros archivos .js y nuestro .css, pero eso no significa que CSS y JS no puedan interactuar más estrechamente de lo que permiten los marcos básicos de JavaScript. ¡Aquí hay cinco formas en que JavaScript y CSS funcionan juntos que quizás no conozcas!

Obtener propiedades de pseudoelementos con JavaScript

Sabemos que podemos obtener valores de estilo CSS básicos para un elemento con la stylepropiedad, pero ¿qué pasa con las propiedades de pseudoelementos? Sí, ¡JavaScript también puede acceder a ellos!

// Obtener el valor del color de .element:beforevar color = window.getComputedStyle(document.querySelector('.element'), ':before').getPropertyValue('color');// Obtener el valor del contenido de . elemento: contenido beforevar = window.getComputedStyle(document.querySelector('.element'), ':before').getPropertyValue('content');

Puede ver cómo acceder al valor de la propiedad del contenido en la publicación de mi blog sobre Detección del estado del dispositivo. ¡Increíblemente útil si buscas crear sitios dinámicos y únicos!

API de lista de clases

Todos hemos utilizado los métodos addClassy en nuestras bibliotecas de JavaScript favoritas. Para admitir navegadores más antiguos, cada biblioteca tomaría los elementos (en su formato de cadena) y agregaría/eliminaría la clase de cadena, luego actualizaría la cadena. Hay una API más nueva para agregar, eliminar y alternar clases, y se llamaclassList :removeClasstoggleClassclassNameclassName

myDiv.classList.add('myCssClass'); // Agrega un classmyDiv.classList.remove('myCssClass'); // Elimina un classmyDiv.classList.toggle('myCssClass'); // Alterna una clase

classListSe ha implementado durante mucho tiempo en la mayoría de los navegadores, pero esta API llegó a IE en la versión 10.

Agregar y eliminar reglas directamente a hojas de estilo

Todos conocemos bien la modificación de estilos mediante este element.style.propertyNamemétodo y hemos utilizado kits de herramientas de JavaScript para hacerlo, pero ¿sabías que puedes leer y escribir reglas dentro de hojas de estilo nuevas y existentes? ¡La API también es bastante sencilla!

función addCSSRule(hoja, selector, reglas, índice) {if(hoja.insertRule) {hoja.insertRule(selector + "{" + reglas + "}", índice);}si no {hoja.addRule(selector, reglas, índice) );}}// ¡Úsalo!addCSSRule(document.styleSheets[0], "header", "float: left");

El caso de uso más común es crear una nueva hoja de estilo, pero si desea modificar una hoja de estilo existente, hágalo.

Cargar archivos CSS con un cargador

La carga diferida de recursos como imágenes, JSON y scripts es una excelente manera de reducir el tiempo de carga. Podemos cargar esos recursos externos con cargadores de JavaScript como curl.js, pero ¿sabías que puedescargar hojas de estilo de forma diferida y recibir esa notificación dentro de la misma devolución de llamada?

curl(["namespace/MyWidget","css!namespace/resources/MyWidget.css"], function(MyWidget) {// Hacer algo con MyWidget// La referencia CSS no está en la firma porque no nos importa al respecto;// solo nos importa que esté ahora en la página}});

Este blog carga de forma diferida PrismJS, el resaltador de sintaxis, según la presencia de preelementos. Una vez que todos los recursos estén cargados, incluida la hoja de estilo, puedo realizar una devolución de llamada. ¡Útil!

CSSpointer-events

La propiedad de CSSpointer-events es interesante porque casi actúa de manera similar a JavaScript, deshabilitando efectivamente un elemento cuando el valor es none pero permitiendo que el elemento funcione de manera habitual cuando el valor no lo es none. Quizás estés diciendo “¿y qué?” ¡pero los eventos de puntero incluso evitan que se activen los eventos de JavaScript!

.disabled { eventos de puntero: ninguno; }

Haga clic en ese elemento y cualquier addEventListenerdevolución de llamada que haya colocado en el elemento no se activará. Realmente, una propiedad perfecta: no es necesario hacer una classNameverificación antes de decidir si disparar o no algo en función de la presencia en clase.

Estas son solo cinco formas en las que interactúan CSS y JavaScript en las que no siempre piensas. ¿Tienes más ideas? ¡Por favor compártelos!