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 CSS a seguir será azul.
button {
color: red;
}
button {
color: blue;
}
Entender o algoritmo em cascata ajuda a entender como o navegador resolve conflitos como esse. Ele é 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 exibição do CSS e de onde ele vem, seja em um estilo de navegador, CSS de uma extensão do navegador ou seu CSS criado
- Importância: algumas regras de CSS têm um peso maior que outras.
especialmente com o tipo de regra
!important
Posição e ordem de aparência
A ordem em que as regras CSS aparecem e como elas aparecem é levada em consideração pela cascata enquanto calcula a resolução de conflitos.
A demonstração no início desta lição é o exemplo mais simples de posição. Existem duas regras com seletores de especificidade idêntica, então o último a ser declarado venceu.
Os estilos podem vir de várias fontes em uma página HTML,
como uma tag <link>
,
uma tag <style>
incorporada,
e CSS inline, conforme definido no atributo style
de um elemento.
Caso você tenha um <link>
que inclua CSS na parte superior da página HTML,
depois outra <link>
que inclui CSS na parte inferior da página: a <link>
inferior terá a maior especificidade.
O mesmo acontece com elementos <style>
incorporados.
Quanto mais detalhadas estiverem na página, mais específicas elas vão ficar.
Essa ordem também se aplica a elementos <style>
incorporados.
Se elas forem declaradas antes de um <link>
,
o CSS da folha de estilo vinculada terá mais detalhes.
Um atributo style
in-line com CSS declarado nele substituirá todos os outros CSS.
independentemente da posição, a menos que uma declaração tenha !important
definido.
A posição também se aplica na ordem da regra de CSS.
Neste exemplo, o elemento terá um plano de fundo roxo porque a background: purple
foi declarada por último.
Como o plano de fundo verde foi declarado antes do roxo, ele agora é ignorado pelo navegador.
.my-element {
background: green;
background: purple;
}
Ser capaz de especificar dois valores para a mesma propriedade
pode ser uma maneira simples de criar substitutos para navegadores que não aceitam determinado valor.
No próximo exemplo, font-size
é declarado duas vezes.
Se clamp()
for compatível com o navegador,
a declaração font-size
anterior será descartada.
Se clamp()
não for compatível com o navegador,
a declaração inicial será honrada, e o tamanho da fonte será 1,5rem
.my-element {
font-size: 1.5rem;
font-size: clamp(1.5rem, 1rem + 3vw, 2rem);
}
Teste seu conhecimento
Teste seu conhecimento sobre a cascata
Se você tiver o seguinte HTML na sua página:
<!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
, está 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
position da regra de estilo faz com que ela ganhe.
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ê poderá fazer com que ele seja aplicado mesmo que outro CSS correspondente ao seletor apareça mais tarde no CSS.
Na próxima aula, você vai conhecer os detalhes de como a especificidade é calculada, No entanto, ter algumas coisas em mente o ajudará a evitar muitos problemas de especificidade.
O CSS que segmenta uma classe em um elemento tornará essa regra mais específica,
e, portanto, considerada mais importante de ser aplicada,
do que um CSS segmentando apenas o elemento.
Isso significa que, com o CSS a seguir,
a h1
será colorida em vermelho, mesmo que ambas as regras sejam correspondentes e a regra do seletor h1
venha mais tarde 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,
assim, os estilos aplicados a um ID substituirão aqueles aplicados de muitas outras maneiras.
Esse é um motivo pelo qual geralmente não é uma boa ideia anexar estilos a uma id
.
Isso pode dificultar a substituição desse estilo por outro elemento.
A especificidade é cumulativa
Como você descobrirá na próxima aula,
cada tipo de seletor recebe pontos que indicam quão específico ele é,
os pontos de todos os seletores que você usou 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
, você recebe algo muito difícil de substituir por outro CSS.
Por esse motivo, e para ajudar a tornar seu CSS mais reutilizável,
é uma boa ideia manter seus seletores o mais simples possível.
Use a especificidade como uma ferramenta para chegar aos elementos quando precisar
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. Esses são os estilos que seu navegador aplica aos elementos HTML por padrão.
- Estilos de usuário locais. Eles podem ser provenientes do nível do sistema operacional, como o tamanho de fonte básico, ou uma preferência de movimento reduzido. Eles também podem vir de extensões do navegador, como uma extensão de navegador que permite ao usuário criar o próprio CSS personalizado para uma página da Web.
- CSS criado. O CSS que você cria.
- Criado
!important
. Qualquer!important
que você adicionar às declarações criadas por você. - Estilos de usuários locais
!important
: Qualquer!important
do nível do sistema operacional, ou no nível da extensão do navegador. - User agent
!important
. Qualquer!important
definido no CSS padrão, fornecidos pelo navegador.
Se você tiver um tipo de regra !important
no CSS de sua autoria
e o usuário tiver um tipo de regra !important
no CSS personalizado, qual CSS vence?
Teste seu conhecimento
Teste seu conhecimento sobre origens em cascata
Teste seus conhecimentos sobre as origens em cascata, considere o estilo a seguir regras 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 seguinte HTML:
<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 de CSS são calculadas da mesma forma, ou que têm a mesma especificidade.
A ordem de importância, da menos importante, mais importante é o 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 ativa e de regra de transição têm maior importância do que as regras normais.
Caso de transições tenham maior importância do que os tipos de regra !important
.
Isso ocorre porque, quando uma animação ou transição fica ativa,
seu comportamento esperado é mudar o estado visual.
Como usar o DevTools para descobrir por que alguns CSS não estão sendo aplicados
O DevTools do navegador normalmente mostra todo o CSS que pode corresponder a um elemento, e aqueles que não estão sendo usados riscados.
Se o CSS que você esperava não aparecer, então ele não corresponderia ao elemento. Nesse caso, você precisa procurar em outro lugar, talvez por um erro de digitação no nome de uma classe ou de um elemento ou algum CSS inválido.
Teste seu conhecimento
Teste seu conhecimento sobre a cascata
A Cascade pode ser usada para...