5 formas de interação de CSS e JavaScript que você provavelmente não conhece

5formasinteracssjava_topo

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!

1 // Get the color value of .element:before
2 var color = window.getComputedStyle(
3     document.querySelector('.element'), ':before'
4 ).getPropertyValue('color');
5
6 // Get the content value of .element:before
7 var content = window.getComputedStyle(
8     document.querySelector('.element'), ':before'
9 ).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!

1 function addCSSRule(sheet, selector, rules, index) {
2     if(sheet.insertRule) {
3         sheet.insertRule(selector + "{" + rules + "}", index);
4     }
5     else {
6         sheet.addRule(selector, rules, index);
7     }
8 }
9
10 // Use it!
11 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?

1 curl(
2     [
3         "namespace/MyWidget",
4         "css!namespace/resources/MyWidget.css"
5     ],
6     function(MyWidget) {
7         // Do something with MyWidget
8         // The CSS reference isn't in the signature because we don't care about it;
9         // we just care that it is now in the page
10     }
11 });

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!

Fonte: iMasters

Postagens Relacionadas