Podcast do CSS - 004: A Cascade
CSS significa folhas de estilo em cascata. A cascata é o algoritmo para resolver conflitos em que várias regras CSS se aplicam a um elemento HTML. É por isso que o texto do botão estilizado com o seguinte CSS será azul.
button {
color: red;
}
button {
color: blue;
}
Entender o algoritmo em cascata ajuda você a entender como o navegador resolve conflitos como esse. O algoritmo em cascata é dividido em quatro estágios distintos.
- Posição e ordem de exibição: a ordem em que suas regras de CSS aparecem
- Especificidade: um algoritmo que determina qual seletor de CSS tem a correspondência mais forte.
- Origem: a ordem de quando o CSS aparece e de onde ele vem, seja um estilo de navegador, o CSS de uma extensão de navegador ou seu CSS criado.
- Importância: algumas regras CSS têm mais peso do que outras, especialmente com o tipo de regra
!important
Posição e ordem de exibição
A ordem em que suas regras de CSS aparecem e como elas aparecem é considerada pela cascata enquanto ela calcula a resolução de conflitos.
A demonstração no início desta aula é o exemplo mais direto de posição. Há duas regras com seletores de especificidade idêntica, de modo que a última a ser declarada venceu.
Os estilos podem vir de várias fontes em uma página HTML,
como uma tag <link>
,
uma tag <style>
incorporada
e um CSS inline, como definido no atributo style
de um elemento.
Se você tiver um <link>
que inclui CSS na parte de cima da página HTML,
outro <link>
que inclua CSS na parte de baixo da página: o <link>
da parte de baixo terá a maior especificidade.
O mesmo acontece com elementos <style>
incorporados.
Quanto mais específicos estiverem na página, mais específicos eles estarão.
Essa ordem também se aplica aos elementos <style>
incorporados.
Se forem declarados antes de um <link>
, o CSS da folha de estilo vinculada será mais específico.
Um atributo style
inline com CSS declarado substitui todos os outros CSS,
independente da posição dele, a menos que uma declaração tenha !important
definido.
A posição também se aplica à ordem da regra CSS.
Neste exemplo, o elemento terá um plano de fundo roxo porque background: purple
foi declarado por último.
Como o plano de fundo verde foi declarado antes do roxo, agora ele é ignorado pelo navegador.
.my-element {
background: green;
background: purple;
}
A possibilidade de especificar dois valores para a mesma propriedade
pode ser uma maneira simples de criar substitutos para navegadores que não oferecem suporte a um valor específico.
No exemplo a seguir, font-size
é declarado duas vezes.
Se clamp()
for compatível com o navegador,
a declaração font-size
anterior será descartada.
Se o navegador não oferecer suporte a clamp()
,
a declaração inicial será respeitada, e o tamanho da fonte será de 1,5 rem.
.my-element {
font-size: 1.5rem;
font-size: clamp(1.5rem, 1rem + 3vw, 2rem);
}
Teste seu conhecimento
Teste seus conhecimentos sobre a cascata
Se a página tiver o seguinte HTML:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="/styles.css" /> </head> <body> <button>I am a button</button> <style> button { background: pink; } </style> </body> </html>
Dentro de styles.css
, é a seguinte regra CSS:
button { background: yellow; }
Qual é a cor do plano de fundo do botão?
<style>
incorporada está mais abaixo na página do que a tag <link>
. Portanto, embora a especificidade de button
seja a mesma, a posição da regra de estilo faz com que ela vença.
Especificidade
A especificidade é um algoritmo que determina qual seletor de CSS é o mais específico, usando um sistema de ponderação ou pontuação para fazer esses cálculos. Ao tornar uma regra mais específica, você pode fazer com que ela seja aplicada mesmo que outro CSS correspondente ao seletor apareça mais tarde no CSS.
Na próxima aula, você vai aprender os detalhes de como a especificidade é calculada. No entanto, considerar alguns detalhes vai ajudar a evitar muitos problemas de especificidade.
A segmentação por CSS de uma classe em um elemento torna essa regra mais específica e, portanto, considerada mais importante para ser aplicada do que o CSS segmentando apenas o elemento.
Isso significa que, com o CSS a seguir, o h1
ficará vermelho, mesmo que as duas regras correspondam e a regra para o seletor h1
seja exibida posteriormente na folha de estilo.
<h1 class="my-element">Heading</h1>
.my-element {
color: red;
}
h1 {
color: blue;
}
Um id
torna o CSS ainda mais específico. Portanto, os estilos aplicados a um ID vão substituir os aplicados de várias outras maneiras.
Essa é uma razão pela qual geralmente não é uma boa ideia anexar estilos a uma id
.
Pode ser difícil substituir esse estilo por outro.
A especificidade é cumulativa
Como você verá na próxima lição,
cada tipo de seletor recebe pontos que indicam a especificidade dele.
Os pontos de todos os seletores usados para segmentar um elemento são somados.
Isso significa que, se você segmentar um elemento com uma lista de seletores, como
a.my-class.another-class[href]:hover
, terá algo bem difícil de substituir por outro CSS.
Por esse motivo, e para ajudar a tornar o CSS mais reutilizável,
é recomendável manter os seletores o mais simples possível.
Use a especificidade como uma ferramenta para chegar aos elementos quando necessário,
mas sempre considere refatorar listas de seletores longas e específicas, se possível.
Origem
O CSS que você cria não é o único aplicado a uma página. A cascata considera a origem do CSS. Essa origem inclui a folha de estilo interna do navegador, estilos adicionados por extensões do navegador ou pelo sistema operacional e seu CSS criado. Veja a ordem de especificidade dessas origens, da menos específica para a mais específica:
- Estilos base do user agent Estes são os estilos que o seu navegador aplica aos elementos HTML por padrão.
- Estilos de usuários locais. Eles podem vir do nível do sistema operacional, como um tamanho de fonte base ou uma preferência de movimento reduzido. Eles também podem vir de extensões do navegador, como uma extensão que permite que o usuário crie o próprio CSS personalizado para uma página da Web.
- CSS criado. O CSS que você criou.
- Criado em
!important
. Qualquer!important
que você adicionar às declarações de criação. - Estilos de usuários locais
!important
. Qualquer!important
que venha do nível do sistema operacional ou do CSS no nível da extensão do navegador. - User agent
!important
. Qualquer!important
definido no CSS padrão, fornecido pelo navegador.
Se você tiver um tipo de regra !important
no CSS criado e o usuário tiver um tipo de regra !important
no CSS personalizado, qual será o melhor CSS?
Teste seu conhecimento
Teste seus conhecimentos sobre as origens em cascata
Teste seu conhecimento sobre as origens em cascata e considere as seguintes regras de estilo de várias origens:
Estilo do user agent
h1 { margin-block-start: 0.83em; }
Inicializar
h1 { margin-block-start: 20px; }
Estilos do autor da página
h1 { margin-block-start: 2ch; } @media (max-width: 480px) { h1 { margin-block-start: 1ch; } }
Estilo personalizado do usuário
h1 { margin-block-start: 2rem !important; }
Em seguida, considerando o HTML a seguir:
<h1>Lorem ipsum</h1>
Qual é o margin-block-start
final do h1
?
!important
tem a origem mais específica.Importância
Nem todas as regras CSS são calculadas da mesma forma ou têm a mesma especificidade.
A ordem de importância, do menos importante para o mais importante, é a seguinte:
- tipo de regra normal, como
font-size
,background
oucolor
animation
tipo de regra- Tipo de regra
!important
(seguindo a mesma ordem da origem) transition
tipo de regra
Os tipos de animação e regra de transição ativos têm maior importância do que as regras normais.
No caso de transições, que têm maior importância do que os tipos de regra !important
.
Isso ocorre porque, quando uma animação ou transição fica ativa,
o comportamento esperado é mudar o estado visual.
Como usar o DevTools para descobrir por que parte do CSS não está sendo aplicada.
O navegador DevTools geralmente mostra todos os CSSs que podem corresponder a um elemento, aqueles que não estão sendo usados riscados.
Se o CSS que você esperava aplicar não aparecer, isso significa que ele não corresponde ao elemento. Nesse caso, verifique em outro lugar, talvez um erro de digitação no nome de uma classe ou elemento ou algum CSS inválido.
Teste seu conhecimento
Teste seus conhecimentos sobre a cascata
A Cascade pode ser usada para...