CSS e JavaScript: as linhas se tornam turvas a cada lançamento de browser. Eles sempre desempenharam papéis diferentes, mas no final, ambas são tecnologias de front end que precisam ser trabalhadas juntas. Temos nossos arquivos .js e nossos .css, mas isso não significa que CSS e JS interagem mais do que o básico que os frameworks javascript permitirão. Aqui estão cinco formas que JavaScript e CSS vão trabalhar juntos e que você talvez ainda não conhecesse!

1. Obtendo propriedades de pseudo-elementos com JavaScript

Todo mundo sabe que é possível pegar valores de estilos CSS básicos para um elemento com a propriedade do estilo, mas e as propriedades dos pseudo-elementos? Sim, JavaScript também pode acessa-los!

// Get the color value of .element:before
var color = window.getComputedStyle(
	document.querySelector('.element'), ':before'
).getPropertyValue('color');

// Get the content value of .element:before
var content = window.getComputedStyle(
	document.querySelector('.element'), ':before'
).getPropertyValue('content');

Você pode ver como eu acesso propriedades de valor nesse artigo sobre Detecção de Estado de Dispositivo. Super útil se você quer criar sites únicos e dinâmicos!

2. API classList

Já usamos os métodos addClass, removeClass, e toggleClass nas nossas bibliotecas JavaScript favoritas. Para conseguir suportar navegadores antigos, cada biblioteca pegaria o className dos elementos (no formato string) e adicionaria/removeria a classe, então faz o update na string className. Há uma nova API para adicionar, remover e alternar classes, e é chamado de classList:

myDiv.classList.add('myCssClass'); // Adiciona uma classe
myDiv.classList.remove('myCssClass'); // Remove uma classe
myDiv.classList.toggle('myCssClass'); // Alterna uma classe

classList foi implementado por muito tempo na maioria dos navegadores, mas essa API vai até o IE 10.

3. Adicionar e remover regras diretamente para folhas de estilo

Somos todos bem entendidos em modificar estilos através do método element.style.propertyName, e usamos toolkits JavaScript para fazer isso. Mas você sabia que é possível ler e escrever regras dentro de folhas de estilo novas e já existentes? A API é realmente simples também!

function addCSSRule(sheet, selector, rules, index) {
	if(sheet.insertRule) {
		sheet.insertRule(selector + "{" + rules + "}", index);
	}
	else {
		sheet.addRule(selector, rules, index);
	}
}

// Use it!
addCSSRule(document.styleSheets[0], "header", "float: left");

O caso de uso mais comum é criar uma nova folha de estilo, mas se você quiser modificar uma existente, é possível.

4. Carregar arquivos CSS com um loader

Utilizar lazy-load para recursos como imagens, JSON e scripts são boas formas de diminuir o tempo de carregamento. Você pode carregar esses recursos externos com loaders JavaScript como curl.js, mas você sabia que pode fazer lazy load de folhas de estilo e receber a notificação no mesmo call-back?

curl(
	[
		"namespace/MyWidget",
		"css!namespace/resources/MyWidget.css"
	], 
	function(MyWidget) {
		// Do something with MyWidget
		// The CSS reference isn't in the signature because we don't care about it;
		// we just care that it is now in the page
	}
});

O meu site faz lazy load com PrismJS, um highlighter de sintaxe, baseado na presença de elementos <pre>. Uma vez que todos os recursos estiverem carregados, incluindo a folha de estilo, eu posso disparar um callback!

5. CSS pointer-events

A propriedade pointer-events do CSS é interessante pois funciona quase como um JavaScript, efetivamente desabilitando um elemento quando o valor é none, mas permitindo que o elemento funcione normalmente quando o valor não for none. Você pode estar aí dizendo “e daí?” mas pointer-events até mesmo previnem que eventos JavaScript sejam disparados!

.disabled { pointer-events: none; }

Clique no elemento e qualquer callback addEventListener que você tenha colocado no elemento não será disparado. Uma propriedade perfeita, realmente – você não precisa de checar o className antes de decidir se vai ou não disparar alguma coisa com base na presença da classe.

 

Essas são só 5 formas que CSS e JavaScript interagem e que são pouco conhecidas. Tem mais alguma ideia? Compartilha com a gente!

—

Artigo traduzido com autorização, publicado originalmente em http://davidwalsh.name/ways-css-javascript-interac