DEV Community: Leandro do Nascimento

O que é DOCTYPE? E como ele Afeta a Renderização das Páginas?

Leandro do Nascimento — Mon, 02 Sep 2024 16:51:28 +0000

Entenda como os navegadores utilizam o DOCTYPE para aplicar diferentes modos para exibir as páginas

Você provavelmente já deve ter visto de maneira frequente no topo dos documentos HTML atuais, algo como <!DOCTYPE HTML> ou caso esteja visualizando um documento antigo parecerá com <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">.

Mas, você sabe o que é exatamente o DOCTYPE e as consequências do seu não uso? Caso não saiba, fique até o final deste artigo para descobrir.

Boa leitura!

Sumário

Definição e Sintaxe do DOCTYPE
Modos de Renderização usados pelos Navegadores
Quais são os Comportamentos que os Modos tem ao Renderizar a Página?
Como os Navegadores determinam qual Modo usar?
Como Saber qual Modo o Navegador está Utilizando?

Definição e Sintaxe do DOCTYPE

Apesar da sintaxe do DOCTYPE (Document type declaration ou Declaração de tipo de documento) ser muito semelhante aos elementos HTML, por conta dos símbolos de colchetes angulares (menor que < e maior que >), ele não é exatamente uma tag, mas sim, uma declaração única por página que precisa vir antes de qualquer elemento subsequente no documento.

O DOCTYPE vai funcionar como uma espécie de instrução, usada como base para informar aos navegadores qual é a versão HTML que está sendo utilizada para a renderização da página.

Antes o HTML nas versões mais antigas era baseado em SGML (Standard generalized markup language ou Linguagem de marcação generalizada padrão) que consistia em uma especificação complexa e alguns casos, era difícil de implementar e compreender.

Além disso, a declaração DOCTYPE precisava de uma associação a um DTD (Document type definition ou Definição de tipo de documento) para definir a estrutura e as regras de marcação que um documento deveria seguir. E o resultado disso, era simplesmente uma extensa declaração contida no documento, confira a lista de DTDs válidos.

Por questões de desenvolvimento da própria linguagem HTML não sendo mais dependente de SGML e também para proporcionar uma melhor compatibilidade, funcionalidade, especificação simples/fácil de implementar e etc, o DOCTYPE na versão HTML5 pode ser escrito de maneira curta (“abreviada”) usando apenas <!DOCTYPE HTML>.

A sintaxe DOCTYPE deve seguir a seguinte ordem enumerada de acordo com a especificação DOCTYPE do WHATWG para ser considerado um DOCTYPE válido:

Uma string que é uma correspondência ASCII sem distinção entre maiúsculas e minúsculas para a string <!DOCTYPE.
Um ou mais espaços em branco ASCII.
Uma string que é uma correspondência ASCII sem distinção entre maiúsculas e minúsculas para a string html.
Opcionalmente, uma string legada DOCTYPE.
Zero ou mais espaços em branco ASCII.
Um caractere de sinal de maior que U+003E (>).

Ou seja, você pode fazer combinações de caixa alta e baixa ou espaços (com exceções) na sintaxe DOCTYPE como, por exemplo:

Apenas maiúsculas: <!DOCTYPE HTML>.
Apenas minúsculas: <!doctype html>.
Maiúsculas e minúsculas: <!DOCTYpe HtMl>.
Maiúsculas, minúsculas e mais do que um espaço após a string "DOCTYPE" e antes do símbolo de maior que (>): <!doctype html >.

Existem desenvolvedores que preferem escrever <!DOCTYPE HTML> ou <!DOCTYPE html> por motivos de legibilidade para destacar a declaração DOCTYPE com letras maiúsculas do restante do código HTML escrito em letras minúsculas, outros preferem escrever tudo em letras minúsculas para manter um único padrão dentro do código e alguns utilizam mais do que um espaço antes do símbolo de maior que (>) em DOCTYPEs antigos, principalmente em documentos XHTML para ressaltar o fechamento dos elementos, porém para por aí e não há motivos de utilizar outra sintaxe além dessas mencionadas para uso.

Caso, o sistema que você esteja utilizando não possa gerar o documento HTML com a versão curta <!DOCTYPE HTML>, você poderá resolver o problema usando a string legada DOCTYPE:

<!DOCTYPE html SYSTEM "about:legacy-compat">

Você pode usar a string legada com aspas simples ou duplas e sem distinções de letras maiúsculas para minúsculas (em exceção para a string dentro das aspas) apenas na hipótese de uso válido para que a página seja renderizada em No quirks mode, evitando o Quirks mode ou Limited quirks mode que são especificados com mais detalhes na próxima seção a seguir.

Modos de Renderização usados pelos Navegadores

Atualmente duas entidades trabalham juntas para regularizar a padronização da linguagem de marcação HTML que são a W3C e WHATWG:

W3C e WHATWG trabalham juntos em HTML e DOM, nos repositórios WHATWG, para produzir um padrão vivo e rascunhos de recomendação/revisão instantâneos.
WHATWG mantém os padrões vivos HTML e DOM.
O W3C facilita o trabalho da comunidade diretamente nos repositórios do WHATWG (ligando comunidades, desenvolvendo casos de uso, arquivando problemas, escrevendo testes, mediando a resolução de problemas).
O W3C interrompe a publicação independente de uma lista designada de especificações relacionadas a HTML e DOM e, em vez disso, trabalhará para levar os rascunhos de revisão do WHATWG às recomendações do W3C.

Porém, nem sempre foi assim e para você entender as variações de modos de renderização existentes é necessário voltar um pouco no tempo. Antigamente (por volta do final da década de 1990) a maioria das páginas da web eram escritas em duas versões, uma para Netscape navigator e outra para o Microsoft internet explorer, isso fazia com que as páginas fossem construídas se baseando diretamente nas implementações incompletas ou incorretas desses navegadores e renderizadas de acordo com os comportamentos desses navegadores.

Ou seja, nessa época era meio que dificultoso a criação de sites e aplicativos web que funcionassem de maneira igual ou semelhante em todos os navegadores já que cada navegador possuía os seus próprios conjunto de recursos e especificações.

Sendo assim, surgiu a necessidade de criar um padrão que pudesse ser seguido por todos os navegadores e desenvolvedores web para promover o acesso e utilização por qualquer pessoa, independentemente do dispositivo ou software que estejam usando. Este padrão que é conhecido como padrões da web (que são documentos extensos que seguem um processo até virar recomendações, onde detalham exatamente como a tecnologia deve funcionar).

Quando os padrões da web foram criados pelo W3C já existia uma grande quantidade de páginas escritas que não seguiam formalmente os padrões da web, isso fez com que os navegadores não pudessem começar a utilizar de forma imediata os padrões da web já que isso quebraria todos os sites desenvolvidos para as versões dos navegadores Navigator e Internet explorer.

Por conta, dessa adversidade os navegadores precisavam manter a compatibilidade entre sites compatíveis com os padrões da web e sites que não ofereciam compatibilidade com o mesmo, assim diversos modos de renderização foram implementados pelos navegadores para tratar os sites novos de maneira diferente dos sites antigos.

Atualmente existem três modos de renderização adotados pela grande parte dos navegadores para manipular os documentos HTML em determinadas circunstâncias:

Quirks mode

Do português Modo peculiaridades é um modo que emula o comportamento (ou peculiaridades) dos navegadores Navigator 4 e Internet explorer 5 com o intuito de oferecer suporte a versões de sites antigas.

Obs: não utilize este modo (principalmente se o seu site for novo). Quando um navegador entra neste modo, ele geralmente adota comportamentos de layout e renderização mais antigos, o que pode levar a resultados imprevisíveis na exibição do documento.

No quirks mode

Do português Modo sem peculiaridades é um modo com o comportamento que segue os padrões da web, onde possui as especificações mais modernas de HTML e CSS.

Obs: este modo é o que deve ser utilizado atualmente. Antigamente ele era chamado de Full standards mode (do português Modo padrões completos) ou apenas Standards mode (do português Modo padrões).

Limited quirks mode

Do português Modo de peculiaridades limitadas é um modo semelhante ao No quirks mode, porém possui apenas um pequeno número de comportamentos que são implementados pelos navegadores.

Obs: da mesma maneira que o Quirks mode, não o utilize. Por mais que este modo siga grande parte dos padrões da web mais recentes, ele ainda pode levar a comportamentos imprevisíveis na exibição do documento. Antigamente este modo costumava ser chamado de Almost standards mode (do português Modo quase padrão).

Os modos de renderização Quirks, No quirks e Limited quirks são os mais comuns e suportados pela maioria dos navegadores modernos, porém os navegadores podem adotar outros modos personalizados que são projetados para resolver problemas particulares ou seja, exclusivamente de si próprio e não para todos.

Quais são os Comportamentos que os Modos tem ao Renderizar a Página?

Cada modo vai possuir comportamentos específicos que os navegadores utilizam para renderizar a página, porém isso pode depender de vários fatores como, por exemplo, versão do navegador, sistema operacional, dispositivo usado para acessar a página e etc.

No entanto, em geral, os modos de renderização podem afetar a forma como os navegadores interpretam e exibem as páginas da web de várias maneiras, incluindo:

Box model: os modos podem afetar a forma como os navegadores interpretam o modelo de caixa e como os elementos são exibidos na página.
CSS: os modos podem incluir propriedades obsoletas ou não padronizadas que são ignoradas ou aplicadas aos elementos.
HTML: da mesma forma que o CSS, os modos de renderização também podem afetar a forma como os navegadores interpretam as tags HTML, incluindo tags obsoletas ou não padronizadas.
Suporte: os modos também podem afetar a forma como os navegadores suportam recursos mais modernos da web, como novas APIs do navegador.

É importante notar que alterar o modo de renderização pode ter consequências significativas no layout e no comportamento da página, por isso, é recomendado seguir com prioridade as especificações de padrões da web mais recentes para obter a melhor compatibilidade e resultados esperados na renderização da página.

Como os Navegadores determinam qual Modo usar?

Os navegadores usam a declaração DOCTYPE do topo do documento HTML para determinar qual modo vão renderizar a página (caso haja a falta da mesma ou esteja incorreta).

Se o site for novo deve ser usado a versão curta <!DOCTYPE HTML> que é recomendado para garantir que os navegadores deem prioridade na renderização da página com No quirks mode.

O único propósito da declaração <!DOCTYPE HTML> é ativar o No quirks mode para impedir que o navegador alterne entre os modos de renderização Quirks mode e Limited quirks mode fazendo uma tentativa de seguir os padrões da web.

Em poucas palavras o DOCTYPE deve ser a primeira coisa declarada no início do documento sobretudo se o site for novo, colocar qualquer coisa antes (até mesmo um comentário) poderá resultar no acionamento do Quirks mode ou Limited quirks mode (principalmente em navegadores como o Internet explorer 9 e versões anteriores).

Como Saber qual Modo o Navegador está Utilizando?

Por último, caso queira saber o modo de renderização atual, a propriedade compatMode do objeto document retorna valores que indicam qual modo de renderização da página está sendo usado pelo navegador, os valores são:

"BackCompat": o documento está em Quirks mode.
"CSS1Compat": o documento está em No quirks mode ou Limited quirks mode.

Um exemplo de uso típico com Javascript seria:

if (document.compatMode === "BackCompat") {
    // em Quirks Mode
}

Conclusão

Agora você pode dizer que sabe o que é DOCTYPE e a importância dele ao renderizar as páginas. Por mais que os modos não sejam ativados diretamente por você, eles podem ser ativados indiretamente e isso pode trazer diversos comportamentos imprevisíveis para o documento. Por causa disso, na maioria das vezes não haverá motivos para usar outros modos além do No quirks mode que pode ser controlado com a declaração curta de tipo de documento.

Créditos

Imagem de Isabel Ródenas por Pixabay.

Melhore a Legibilidade e Manutenção do Código CSS criando Estilos Dinâmicos

Leandro do Nascimento — Sun, 01 Sep 2024 13:46:08 +0000

Aprenda a utilizar as variáveis CSS para criar aplicações web cada vez mais sofisticadas e eficientes.

Na medida que um projeto web vai crescendo e se tornando cada vez mais complexo, acaba sendo muito comum ter um código CSS extenso com milhares de linhas e dentro deste código é muito provável que a frequência de repetição de valores atribuídos as propriedades sejam grandes também.

Como você pode ver no exemplo abaixo, existem repetições dos mesmos valores nas propriedades color e background-color:

.one {
    color: #f0f0f0;
    background-color: #a52a2a;
}

.two {
    color: #f0f0f0;
    background-color: #a52a2a;
}

.three {
    color: #f0f0f0;
    background-color: #a52a2a;
}

.four {
    color: #f0f0f0;
    background-color: #a52a2a;
}

No caso do exemplo acima, a mesma cor pode ser usada em centenas de lugares diferentes no código. Como os valores das propriedades normais são relativamente fixos, caso no futuro decida trocar a cor de todos os elementos que tem a mesma cor, isso exigirá de você um trabalho manual de pesquisar em todo o código o valor da cor e realizar a substituição para a nova cor.

No entanto, a sua vida de desenvolvedor web começa a se tornar mais produtiva ao utilizar as variáveis CSS, no qual permite que um valor seja armazenado em um local e em seguida pode ser referenciado em vários outros locais.

É importante deixar bem claro que as variáveis CSS são basicamente propriedades personalizadas e não diretamente variáveis reais de programação. O valor da variável CSS é calculado onde é necessário, é limitado ao escopo do elemento e não pode ser manipulado dinamicamente ou ter seu valor alterado durante a execução do estilo.

Enquanto as variáveis em linguagens de programação são armazenadores de dados que podem conter diferentes tipos de valores e são manipuladas e modificadas durante a execução do programa, as variáveis em CSS são usadas para armazenar valores específicos para serem reutilizados em propriedades CSS.

Agora, no exemplo abaixo trocando os valores fixos pelas variáveis e utilizando a função var() no lugar do valor da propriedade para recuperar o valor da variável, caso você decida fazer uma mudança de cor, você só precisaria alterar o valor da variável e todas as instâncias em que a variável é utilizada serão atualizadas automaticamente:

:root {
    --text-primary: #f0f0f0;
    --bg-primary: #a52a2a;
}

.one {
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

.two {
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

.three {
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

.four {
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

Muito legal né? Se quiser saber todo o potencial que as variáveis CSS tem a oferecer fique até o final deste artigo.

Boa leitura!

Sumário

Variáveis são basicamente Propriedades
Escopo da Variável
Função var()
Valores Inválidos de Propriedades e Variáveis

Variáveis são basicamente Propriedades

Ok, a minha intensão aqui não é confundi-lo(a)! Mas sim, mostrar que as variáveis CSS e propriedades CSS carregam o mesmo resultado de definição de estilos em um documento e são semelhantes em termos de sintaxe e uso, porém possuem funcionalidades completamente diferentes uma da outra como veremos logo a seguir.

Identificador da Variável

As variáveis são facilmente identificadas com um hífen duplo (--), seguido de um nome qualquer para a variável que faz a diferenciação de letras maiúsculas para minúsculas e por fim, um valor que seja válido para a variável:

--bg-secondary: #00ff00;

Como você pode ver no exemplo acima, um dos benefícios adicionais das variáveis é que o nome que você define para ela são personalizados e relativamente semânticos, isso significa, que o identificador --bg-secondary é mais fácil de entender como uma cor de fundo secundária em relação a uma cor de fundo principal (ou primária), ao invés de inserir diretamente como valor na propriedade o código hexadecimal #00ff00.

Já as propriedades em comparação com as variáveis não permitem o uso de hifens no início do nome, isso porque, os hifens são usados para separar palavras em propriedades compostas como font-size, text-align e etc. Em exceção, existem propriedades específicas com os prefixos -webkit, -moz, -ms e -o que usam um único hífen no início do nome, essas propriedades são usadas para recursos experimentais que ainda não foram totalmente padronizados ou incorporados às especificações oficiais do CSS.

--text-selected: none;

user-select: none;

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;

Dessa maneira, com ou sem hífen, você consegue diferenciar qual é a finalidade da propriedade.

Valor da Variável

Os valores que podem ser atribuídos as variáveis são os mesmos que correspondem a qualquer valor de propriedade que pode ser uma sequência de um ou mais valores, desde que a sequência não contenha um valor não permitido pela propriedade ou simplesmente seja um valor inválido:

--horizontal: left;
--text-color: #0000ff;
--shadow: 0 0 10px #3a3939, 0 0 20px #666565;
--gradient: linear-gradient(90deg, #3c719e 0%, #2323ab 35%);

Embora existam semelhanças entre as variáveis CSS e propriedades CSS, ambas têm propósitos e funcionalidades diferentes, enquanto uma é usada para armazenar e reutilizar valores, a outra define estilos específicos para elementos individuais.

Herança da Variável

As variáveis CSS podem ser herdadas, assim como as propriedades normais do CSS, isso significa, que ao definir um valor para uma variável em um elemento, ela será aplicada automaticamente a todos os elementos que forem descendentes desse mesmo elemento, a menos que eles definam um novo valor.

Como, por exemplo:

.father {
    --font-small: 16px;
}

.child-1 {
    --font-small: 3.4em;
}

<div class="father">
    <div class="child-1"></div>
    <div class="child-2"></div>
</div>

No exemplo acima, o resultado para cada elemento será:

Para o elemento com a classe .father será definido: 16px.
Para o elemento com a classe .child-1 será definido: 3.4em.
Para o elemento com a classe .child-2 será definido o valor herdado do elemento pai: 16px.

Por conta disso, toda vez que você usar uma variável em um determinado elemento, tanto este elemento quanto os elementos dentro dele, também poderão ter os mesmos valores definidos na variável.

Escopo da variável

As variáveis CSS possuem como escopo os elementos em que as mesmas foram declaradas. O escopo nada mais é que a área ou contexto em que uma variável pode ser acessada e utilizada.

Existem dois tipos de escopos para as variáveis o escopo Global e Local. As variáveis de escopo global é uma variável que está disponível para ser usada em todo o documento, enquanto as variáveis de escopo local, limita o uso da variável em elementos específicos.

Escopo da Global

É muito útil o escopo global para tornar uma variável CSS acessível para todos os elementos do documento.

Como, por exemplo:

:root {
    --bg-dark: #1b1a1a;
}

#first-box {
    background-color: var(--bg-dark);
}

#second-box {
    background-color: var(--bg-dark);
}

No exemplo acima, a variável --bg-dark foi declarada no escopo da pseudo-classe :root, isso significa, que essa variável vai estar disponível para qualquer elemento. Faz sentido, declarar neste caso a variável no escopo global já que na página pode existir vários elementos com um design escuro.

A pseudo-classe :root é comumente utilizada para a declaração de variáveis, isso porque, ela é semelhante à raiz de uma árvore e basicamente se refere ao elemento <html> que faz com que todos os outros elementos do documento fiquem contidos dentro dele, assim como os ramos e nós de uma árvore estão contidos na raiz da árvore.

Ao utilizar a pseudo-classe :root para declarar as suas variáveis, lembre-se que ela é semelhante ao seletor de elemento html, exceto que ela possui a especificidade mais alta de 0–0–1–0, enquanto o seletor htmlpossui a especificidade mais baixa de 0–0–0–1.

Escopo Local

O escopo local é a limitação que uma variável CSS vai ter para ser acessível dentro de um determinado elemento.

Como, por exemplo:

#third-box {
    --bg-info: #00ff00;
    background-color: var(--bg-info);
}

#fourth-box {
    background-color: var(--bg-info);
}

No exemplo acima, a variável --bg-info foi declarada no escopo do elemento que possui o id (#third-box), isso significa, que essa variável só vai estar disponível dentro deste elemento, ou seja, a cor de fundo só vai ser aplicada nele ou nos elementos dentro dele.

Enquanto ao tentar chamar a mesma variável para o elemento com id (#fourth-box) ela é "especificada como não definida" e a cor de fundo não será aplicada. Se você tiver a certeza que apenas alguns elementos na página vai receber um estilo específico, faz sentido usar o escopo local no elemento pai desses elementos.

Dependendo da sua necessidade, você pode declarar a variável com o mesmo nome ou com outros valores diferentes para elementos distintos:

#third-box {
    --bg-info: #00ff00;
    background-color: var(--bg-info);
}

#fourth-box {
    --bg-info: #0000ff;
   background-color: var(--bg-info);
}

No exemplo acima, as variáveis estão sendo declaradas em escopos diferentes (cada variável possui o seu próprio escopo), isso quer dizer que não são as mesmas variáveis.

Função var()

Como foi visto anteriormente nos exemplos, a função var() do CSS é usada para referenciar e aplicar os valores das variáveis CSS em diferentes propriedades ao longo do código:

:root {
    --text-dark: #0e0e0e;
}

.section-alert {
    color: var(--text-dark);
}

Mas, existe uma funcionalidade a mais que cerca essa função que é o valor de fallback que veremos logo a seguir, no qual pode ser útil ao trabalhar com Custom elements e Shadow DOM.

Valor de Fallback

O valor de fallback é um valor alternativo na função var() usado quando a variável fornecida não estiver definida ou for inválida.

A sintaxe é bem simples, a função var() aceita dois argumentos separados por uma vírgula, por tanto, o primeiro argumento é o nome da variável e caso for definido um segundo argumento ele será o valor de fallback que será usado no lugar da variável indisponível.

Como, por exemplo:

.section-alert {
    color: var(--text-dark, #202020);
}

No exemplo acima, se a variável text-dark não estiver disponível o valor #202020 será utilizado na propriedade.

Entenda que o valor de fallback não é usado para oferecer um valor alternativo para navegadores que não oferecem suporte a variáveis e sim, para navegadores que oferecem suporte a variáveis para que o mesmo possa escolher um valor diferente se a variável fornecida não estiver definida ou tiver um valor inválido.

Múltiplos Valores de Fallback

Como a função var() aceita apenas dois argumentos, caso você faça algo semelhante ao exemplo abaixo será considerado inválido:

.section-info {
    color: var(--text-dark, #202020, #454545);
}

Porém, você consegue fornecer mais de um valor de fallback, definindo no segundo argumento da função var() outra função var():

.section-info {
    color: var(--text-dark, var(--text-normal, #454545));
}

No exemplo acima, caso a variável --text-dark esteja indisponível será usado a variável --text-normal e que por sua vez, se também não estiver disponível será usado o valor de argumento #454545.

Valores Inválidos de Propriedades e Variáveis

Se você tentar atribuir um valor qualquer a uma propriedade normal que seja inválido, quando o navegador encontrar este valor ele simplesmente vai descartar e os elementos vão receber os valores que teriam se a declaração simplesmente não existisse.

Como, por exemplo:

div {
    background-color: orange;
}

div {
    background-color: 4rem;
}

No exemplo acima, foi especificado o valor de 4rem a propriedade background-color da segunda regra, esse valor definitivamente está incorreto já que essa propriedade e todas as propriedades do CSS aceita um determinado conjunto de valores válidos. O valor 4rem é comum e pode ser utilizado em propriedades como font-size, padding, margine etc.

Nesse caso, por conta do valor ser inválido para essa propriedade a declaração é descartada e o resultado é como se a regra não existisse ou seja, a primeira regra será aplicada e a cor de fundo da div ficará laranja.

Isso ocorre, porque o navegador segue as regras da cascata no processamento e renderização de estilos. Quando várias regras se aplicam ao mesmo elemento, o navegador precisa determinar qual delas deve prevalecer. Essas regras são brevemente avaliadas com base em sua especificidade e ordem de precedência (no caso do exemplo anterior pelo fato das duas regras terem seletores com a mesma especificidade foi levado em conta a ordem de precedência).

Por tanto, quando o navegador encontra uma declaração com um valor inválido para uma propriedade normal, ele entende que essa declaração não é válida e a descarta. O navegador então passa para a próxima declaração que seja possivelmente válida. Se não houver mais nenhuma declaração aplicável, o navegador utiliza o valor herdado ou inicial do elemento.

Isso garante, uma melhor experiência de navegação estável e confiável para os usuários, evitando que os elementos sejam exibidos de forma confusa ou não intencional quando não há declarações de estilo explícitas.

No entanto, as variáveis vão se comportar de maneira diferente em relação as propriedades normais. Quando o navegador encontra uma função var() referenciando uma variável inválida, o valor inicial ou herdado da propriedade é usado.

O exemplo abaixo é exatamente o do exemplo anterior, exceto que é usado uma variável:

:root {
    --bg-color: 4rem;
}

div {
    background-color: orange;
}

div {
    background-color: var(--bg-color);
}

Nesse caso, o valor 4rem da variável é inválido para a propriedade background-color da última regra e a ordem de precedência não será levada em consideração aqui, ou seja, a cor orange da segunda regra não será aplicada. Como a propriedade background-color não é herdável, o navegador aplicará o valor inicial dessa propriedade, que é transparente ou rgba(0, 0, 0, 0).

Conclusão

Essas são as variáveis CSS que podem ser usadas em diversos momentos e situações para fornecer maior flexibilidade e reutilização de código. Portanto, se você precisar definir valores comuns, trabalhar com responsividade ou criar temas e personalização, pode ser muito útil utilizar variáveis CSS. Elas não apenas simplificam o processo de manutenção do código, mas também tornam o design mais consistente e fácil de ajustar conforme necessário. Adotar variáveis CSS é uma prática inteligente que pode elevar a eficiência e a qualidade de seus projetos de desenvolvimento web.

Créditos

Imagem de Artisticme por Pixabay