Anotações e recursos sobre CSS. CSS é complexo, para estar profundo na matéria é importante entender os principais conceitos, as principais especificações oficiais, como está o suporte pelos navegadores de internet e ajuda ter uma perspectiva de futuro.
Devo usar CSS 1, 2, 3 ou 4?
Resposta curta: Use CSS 2.1 e módulos específicos estáveis de CSS 3 em diante.
Atualmente a especificação base de toda a CSS (ver wikipedia CSS) que deve ser aprendida e pode ser usada sem nenhum receio em todos os navegadores é a 2.1. A especificação 2.1 é basicamente um alinhamento entre o que foi a especificação 2 e o que de fato se tornou padrão na implementação dos navegadores.
O CSS 3 e 4 na verdade não existe como especificação unificada, mas como conjuntos de módulos, onde cada especificação tem uma situação diferente. Algumas estão ainda em estudo, outras já amplamente implementadas e recomendadas para uso.
Por exemplo, a especificação Flexbox, amplamente usada, seria considerada já como parte do CSS 4. A especificação de media queries, também amplamente usada, é considerada CSS 3.
A relação completa de todas as especificações está aqui:
Como saber o que é suportado pelos navegadores?
Nós vamos usar o Can I use para checar o suporte. Não é perfeito, mas é ótimo é amplamente usado.
A relação entre a situação da especificação e se ela está ou não suportada pelos navegadores é irregular.
De modo geral especificações que estão em situação VERDE (recomendadas) vão funcionar bem em todos os principais navegadores, a “Candidate Recommendation” e a “Candidate Recommendation Draft” muito provavelmente já terão alguma implementação, talvez incompleta, talvez completa, cada caso é um caso. Vamos ver alguns.
Por exemplo, a especificação CSS Containment, apesar de estar 100% finalizada, não é suportada pelo Safari em nenhuma versão.
Outro exemplo é o famoso “Grid Layout”. A especificação Grid Layout está aqui: https://www.w3.org/TR/css-grid-1/. Quando olhamos ela na lista de especificações ela é considera em teste com uma versão atual de “Candidate Recommendation Draft”.
Ou seja, na prática Grid Layout já pode ser utilizado.
Porém, no mesmo grupo de “Testing”, mas considerado até em situação de especificação mais avançado está a especificação CSS Painting, suportada somente pelo Chrome e pelo Edge. Ou seja, você provavelmente não poderá usá-la.
Na prática, existe uma distância entre o que se projeta e o que na prática se mostra relevante aos navegadores e para os desenvolvedores em geral. Por isso, o ideal é dominar as especificações básicas, identificar as demais que te interessam e ir acompanhando aquelas mais relevantes para você.
Sobre o Internet Explorer 11
O IE 11 já não tem mais suporte oficial da Microsoft acontecendo, mas deve se manter presente em 1% (ou menos) dos usuários brasileiros Desktop pelo menos por mais um ano ou um pouco mais.
O Edge está crescendo e inclusive tem versão para Linux já em testes para ser lançada oficialmente quem sabe final de 2021.
Eu cogitei muito continuar oferecendo suporte ao IE11, porém, ele limita muito a implementação de recursos muito valiosos de CSS, e considerando seu ciclo realmente chegando ao final, o esforço de desenvolver para o IE11 só vale a pensa com custo extra real e limitações significativas na experiência dos programadores.
Tudo indica que realmente não vale mais o esforço.
Curso Google de CSS
Estudar CSS diretamente das especificações provavelmente não é a melhor maneira pelo excesso de termos técnicos e pela falta de clareza se aquilo que está alí escrito já está ou não funcional nos navegadores de intetner.
Um bom material que encontrei até agora para estudar os principais conceitos do tema é o curso da google: https://web.dev/learn/css
Gosto destas anotações feitas em papel (na mão mesmo): https://prathkum.gumroad.com/#IrWlkL É um e-book pago com valor mínimo de $1. Vale a pena por um valor baratinho, é bem simples, mas bem legal como lembrete de estudos.
E claro, o site (e os livros são ótimos também) da maior referência brasileira em CSS, o ENORME Maurício Samy Silva.
Outros recursos
- Uma folha de estilo de redefinição para padronizar regras entre navegadores: https://piccalil.li/blog/a-modern-css-reset/;
- Metodologia para ajudar a organizar CSS: https://cube.fyi/;
- Super resumo visual para decorar e relembrar especificidade em CSS;
- Almanaque 2020 da web pelo http Archive. É como um “estado atual da web”. Aqui o capítulo sobre CSS;
- Trechos de código de CSS moderno para problemas frequentes;
- Trechos de código de CSS moderno para layouts;