2023: Um ano de ouro para o CSS
Introdução
Com a quantidade de bibliotecas e frameworks CSS que temos disponíveis atualmente, e que de fato resolvem boa parte das nossas necessidades, muitas vezes acabamos não acompanhando a evolução da linguagem em si. Porém, como vamos ver nesse artigo, 2023 foi um ano fantástico para o CSS, trazendo inúmeras melhorias e funcionalidades extremamente úteis.
Inspirado nesta publicação do Addy Osmany, resolvi escrever esse artigo e explicar um pouco mais sobre esses novos recursos do CSS.
Minha história com CSS
Sou da época em que era necessário adicionar um arquivo de Polyfill para suportar novas funcionalidades CSS nos browsers, nomeado geralmente como PIE.htc (Polyfill IE). Esse arquivo fornecia suporte às propriedades CSS modernas em navegadores Internet Explorer (IE) mais antigos, que não tinham suporte nativo.
No exemplo abaixo, podemos ver como adicionar um simples border-radius no Internet Explorer 8:
.element {
border-radius: 10px;
behavior: url(PIE.htc);
}Ou também, adicionar um background gradient em browsers antigos:
.element {
/* Exemplo de gradiente no Firefox 3.6 ou superior */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
}Que dificuldade, né?!
Hoje, felizmente, a grande maioria dos navegadores que damos suporte são atualizados automaticamente, os famosos “Evergreen browsers”, e não precisamos mais nos preocupar (tanto) com esse tipo de situção.
Outra boa notícia é o Interop 2023, que é um esforço entre navegadores para melhorar a interoperabilidade da web — para alcançar um estado em que cada tecnologia funcione exatamente da mesma forma em todos os navegadores… Mas isso é um assunto pra outro artigo.
Encanto pelo CSS
Desde o começo, mesmo com toda essa “dificuldade” para resolver problemas simples, particularmente sempre fui muito fã do CSS.
Sempre prezei pela simplicidade e fico fascinado com a possibilidade de resolver problemas complexos somente com CSS, sem a necessidade de scripts adicionais ou uma estrutura HTML complexa.
Por exemplo, que tal construir um tooltip somente com CSS?
Código fonte: https://github.com/brunoquadrotti/Pure-CSS3-South-Park
Ou então, criar uma ilustração do Stan Marsh (South Park) somente com CSS também?
Código fonte: https://github.com/brunoquadrotti/Pure-CSS3-South-Park
Muito legal, né?!
Esse “poder” do CSS muitas vezes é pouco explorado pelos desenvolvedores. Vejo que muitas vezes adotamos soluções complexas ou “prontas” para resolver problemas simples do nosso cotidiano que poderia ser resolvido facilmente somente com o CSS.
Parado no tempo?
A definição de padrões no CSS, assim como em outras tecnologias web, é conduzida pelo World Wide Web Consortium (W3C). O processo de introdução de novas funcionalidades no CSS segue uma abordagem estruturada sob a supervisão do W3C, uma organização internacional dedicada ao desenvolvimento de normas para a web.
Em resumo, esse processo percorre várias etapas que envolvem proposta, análise, revisão e refinamento por parte de um grupo de trabalho especializado. Posteriormente, a funcionalidade é implementada pelos navegadores e disponibilizada para a comunidade de desenvolvedores após atingir a estabilidade desejada.
Este rigoroso procedimento assegura que as inovações no CSS sejam cuidadosamente avaliadas, testadas e amplamente adotadas, garantindo a consistência e a interoperabilidade nas experiências web.
Porém, se levarmos em consideração todas as inovações que foram disponibilizadas nos últimos anos, podemos dizer que ele não evoluiu tanto, com novos recursos importantes para a linguagem.
Mas aí, 2023 chegou e com ele, mudanças incríveis chegaram na linguagem! Bora conhecer juntos?
Novos recursos do CSS em 2023
Neste artigo vou focar somente nos 5 recursos que achei mais relevante. Se quiser ter acesso a tudo que foi disponibilizado neste ano, acesse esse artigo do Chrome for Developers que tem tudo lá.
1 — Container Queries
2 — Style Container Queries
3 — CSS Nesting
4 — CSS Scope
5 — Pseudo Seletor :has()
Container Queries
Para mim, sem dúvidas, esse é o recurso mais interessante. Já pensou em criar layouts responsivos que se adaptam a contêineres específicos em sua página? Pois agora isso é possível com Container Queries — ou Consultas de Contêiner em Português.
Isso fornece um controle mais detalhado sobre o comportamento responsivo da sua interface e permite layouts mais complexos e diferenciados.
Notem que todos os cards possuem a mesma formatação e existe uma regra que, se o container pai for menor ou igual a 500px, ele ficará com flex-direction: column, ou seja, uma linha embaixo da outra. Com o tradicional @media queries isso não seria possível.
Consulte a compatibilidade com os navegadores em: https://caniuse.com/css-container-queries-style
Style Container Queries
Em Português, Estilizar Consultas de Contêineres, é um recurso muito interessante também. Ele permite que você consulte valores de propriedades personalizadas em um elemento pai usando @container style().
Por exemplo, faça uma consulta se existir um valor de propriedade personalizada ou estiver definido como um determinado valor, como @container style( — alert-type: warning).
Consulte a compatibilidade com os navegadores em: https://caniuse.com/mdn-css_at-rules_container_style_queries_for_custom_properties
CSS Nesting
O CSS Nesting permite que você escreva seu CSS aninhado, igual fazemos com pré-processadores CSS, como SASS/SCSS e LESS.
Sempre foi um ponto problemático para nós desenvolvedores garantir a consistência em que os estilos tem uma maior precedência sobre as outros, a famosa especificidade, e uma forma para resolver isso é ter mais controle sobre o Aninhamento do código CSS.
Antes do aninhamento, cada seletor precisava ser declarado explicitamente, separadamente. Isso leva à repetição, muitas folhas de estilo e uma experiência de criação dispersa. Agora, os seletores podem continuar com as regras de estilo relacionadas agrupadas.
O Aninhamento CSS resolve isso ao dar aos desenvolvedores controle sobre quais camadas têm maior precedência sobre as outras, o que significa um controle mais preciso de quando os estilos são aplicados.
Consulte a compatibilidade com os navegadores em: https://caniuse.com/css-nesting
CSS Scope
CSS Scope é um recurso que vai ajudar bastante a escrever CSS sem conflitos, de maneira muito mais simples.
Agora, com CSS Scope, é possível delimitar um escopo para os estilos aplicados na página. Ele funciona como uma “subárvore de estilos” e mantém toda a formatação isolada, sem impactar em outros elementos.
Esse recurso tem a possibilidade de causar menos conflitos entre estilos da página.
Consulte a compatibilidade com os navegadores em: https://caniuse.com/mdn-css_selectors_scope
Pseudo Seletor :has()
Quem nunca desejou ter um Seletor pai no CSS? Agora isso é possível com o pseudo-seletor :has(). Com ele, você consegue mudar a formatação de um elemento pai dependendo do que tiver no elemento filho.
A ideia por trás do pseudo-seletor :has() é permitir que os desenvolvedores selecionem elementos com base em seus descendentes, algo que até então não era suportado pelo CSS.
Um exemplo teórico do que o pseudo-seletor :has() poderia fazer:
div:has(p) {
background-color: yellow;
}No exemplo acima, a regra CSS selecionaria todas as divs que contêm pelo menos um elemento p como descendente direto e aplicaria um fundo amarelo a elas.
Nesse outro exemplo, mostro como aplicar um display: grid nos alertas, caso ele possua um botão de fechar:
Consulte a compatibilidade com os navegadores em: https://caniuse.com/css-has
Considerações finais
É muito bom ver a linguagem evoluindo como foi nesse ano de 2023. Esses novos recursos devem ajudar bastante no desenvolvimento das nossas interfaces sem a necessidade de bibliotecas ou scripts adicionais.
É importante ressaltar também que não sou contra a utilização de bibliotecas ou frameworks de estilos. Considero eles muito importantes para a agilidade no desenvolvimento e padronização dos projetos.
Referências:
https://developer.mozilla.org/
https://developer.chrome.com/blog/css-wrapped-2023?hl=pt-br
https://developer.chrome.com/blog/whats-new-css-ui-2023?hl=pt-br
https://positivethinking.tech/insights/the-10-new-css-features-in-2023/
