Scoped CSS é uma pequena novidade no HTML5 que nos permite inserir estilos CSS que sejam apenas aplicado em um determinado lugar de uma página, de modo que os estilos restantes da mesma página não sejam afetados. Para isso, foi definido um novo atributo scoped que deve ser utilizado na tag .
Pela definição da especificação:
O atributo scoped é um atributo booleano. Se for setado, indica que os estilos (da tag) serão aplicados apenas na sub-árvore do elemento pai deste mesmo elemento, ao contrário de todo o documento.
— WHATWG
Antes de tudo
Se você quiser testar os exemplos mostrados neste post no browser, terá que usar o Google Chrome versão 20 ou superior, pois é o único que já dá suporte a scoped CSS. Com seu Chrome aberto, digite na barra de endereços: chrome://flags. Vai abrir a tela de configurações das flags do Chrome, procure por Enable , e ative a opção (se já não estiver ativada). Agora o reinicie e é só mandar ver.
Show me the money code
Para entendermos melhor, vamos a parte boa, nerds! No trecho de HTML abaixo, temos um cenário bem simples: 2 parágrafos soltos e 2 parágrafos agrupados em uma
OK, do jeito como está no código acima, o navegador aplicará os estilos de em toda a página, ou seja, todos os parágrafos (
) serão da cor vermelha:
Aplicando o atributo scoped em , os estilos apenas serão aplicados ao mesmo escopo, ou seja, nos dois últimos parágrafos:
E o resultado será:
Grande coisa…
É isso que você deve estar pensando agora. “Grande coisa, não precisamos disso, apenas podemos definir uma classe ou id e estilizá-los like the old times“. Eu concordo que devemos utilizar determinadas soluções apenas quando for realmente necessário, eu mesmo não sairia por ai inserindo estilos em tudo quanto é lugar. Iria ser uma zona.
O pulo do gato
Algumas aplicações podem acrescentar elementos programaticamente a uma página. Nestes casos, há o perigo de que as novas regras afetem o conteúdo da página de forma não intencional. Ao utilizar o atributo scoped, as aplicações podem impedir que este infeliz efeito colateral aconteça.
Sendo assim, utilizar scoped em estilos pode ser uma solução elegante para a componentização de aplicações web de terceiros. Hoje em dia (quase) todo mundo faz uso de plugins de widgets e de diversos tipos em suas aplicações, e muita gente faz mashups com várias dessas aplicações, misturando tudo em uma única solução. Isto não é nenhuma novidade – há muito tempo.
Então, o que acontece? Sabendo que muitas pessoas reutilizarão um determinado plugin, são usados diversos nomes de classes CSS de uma maneira a evitar conflitos com os estilos de outros sites – onde farão uso desses plugins.
Um ótimo exemplo é o Disqus. Para usar o Disqus, apenas precisamos inserir um pequeno script na nossa página, e ele cuidará de todo o resto. Ao visitar uma página que utiliza o Discus, esse script incluirá as marcações necessárias para os comentários já inseridos e seu formulário, além de seus estilos CSS, imagens, e até mesmo outros scripts. Ou seja, é um exemplo completo de aplicação de terceiros rodando em sites do mundo inteiro. Agora, se formos analisar os códigos HTML que são inseridos, teremos nomes de classes CSS como: dsq-comments, dsq-comments-head, dsq-comments-body, dsq-comments-message, dsq-comments-eu-gosto-de-rolling-stones, dsq-comments-tudo-o-que-der-na-telha, etc. Como seria legal se esses nomes super extensos não fossem mais necessários, hein?
Problemas
Em meus testes, encontrei alguns empecilhos. Tentei utilizar scoped primeiramente em elementos que já tinham sido estilizados – não deu certo –, depois tentei aninhar estilos scoped e também não funcionou – francamente, não sei se é certo/possível fazer isto, e mesmo assim, penso que isso não serviria pra nada, é o tipo de coisa que só iria complicar a nossa vida (e de complexidade, já basta ser desenvolvedor web nos dias atuais), mas, pelo bem da ciência, realizei esse teste (aparentemente) inútil.
Aplicando scoped a elementos já estilizados
Quando a página já possuía estilos – por exemplo, no – as propriedades que já tinham sido definidas não eram modificadas pelos estilos scoped, apenas aquelas que ainda não tinham sido alteradas por nenhum CSS. Por exemplo:
Se tentarmos fazer como acima, o resultado será:
Perceba que o único estilo de escopo que foi aplicado foi a regra font-size: 1.4em e a cor vermelha simplesmente foi ignorada. Sinceramente eu não faço a mínima ideia do porquê disto, também não vejo muito sentido – poderia até ser um erro de implementação do navegador, mas não posso afirmar isto com tanta veemência.
A pseudo-classe :scope
Depois de muito pesquisar, achei uma “solução”, por assim dizer. Eis que existe uma **pseudo-classe :scope! Se usarmos esse cara como seletor das regras, tudo funciona perfeitamente. No exemplo acima, só faríamos:
Agora sim, tudo como esperado:
Aninhando estilos scoped
Tentei também aninhar estilos scoped, mas parece que isso não funciona legal, e acredito que seja proposital. Mas essa parte eu deixo com vocês 😉 Testem colocar um dentro de outro. Aqui mesmo eu não consegui muito resultado, ocorre o mesmo problema com as propriedades CSS que já foram definidas – são ignoradas e não funcionam nem mesmo adicionando a pseudo-classe :scoped. Se alguém obtiver algum resultado diferente do meu, comenta ai!
Suporte
No momento, apenas Google Chrome versão 20+.
