Linha do Tempo do CSS

Índice da Linha do Tempo

• 1994 – Proposta Inicial do CSS
• 1996 – CSS1
• 1998 – CSS2
• 2001 - 2008: Adoção do CSS2 e Modularização do CSS3
• 2012 - 2017: Flexbox e CSS Grid
• 2019: Variáveis CSS (Custom Properties)
• 2020 - 2023: Recursos Modernos (Container Queries, @layer, :has())

️ Linha do Tempo do CSS (Cascading Style Sheets)

1994 – Proposta inicial do CSS

• Criado por Håkon Wium Lie, com apoio de Bert Bos
• Objetivo: separar estrutura (HTML) da apresentação (estilo)

Contexto histórico: como era a web antes do CSS

Nos primórdios da web, os documentos HTML eram puramente estruturais. Isso significa que:

• Não havia separação entre conteúdo e apresentação
• Os desenvolvedores usavam tags HTML para definir aparência, como <font>, <center>, <b>, etc.
• O layout era limitado, e qualquer mudança visual exigia alterar o próprio HTML

Isso tornava o código difícil de manter, pouco flexível e não escalável para grandes sites.

A proposta de Håkon Wium Lie (1994)

Em outubro de 1994, Håkon Wium Lie, então trabalhando com Tim Berners-Lee no CERN, propôs um novo conceito: Cascading Style Sheets (CSS).

Objetivo principal:

Separar o conteúdo (HTML) da apresentação (estilo visual)

Ideias centrais da proposta:

• Criar um sistema de regras de estilo aplicáveis a elementos HTML
• Permitir que múltiplas folhas de estilo fossem aplicadas e “cascassem” (daí o nome)
• Dar aos autores e usuários controle sobre a aparência dos documentos
• Facilitar a personalização, acessibilidade e manutenção

O documento original

A proposta foi publicada como um rascunho chamado “Cascading HTML Style Sheets — a proposal”. Nele, Håkon sugeria:

• Sintaxe simples, parecida com a que usamos hoje:

  H1 { color: red; font-size: 24pt }

• Aplicação de estilos por seletor de elemento
• Suporte a herança e prioridade entre regras
• Possibilidade de folhas de estilo externas

Por que “cascading”?

O termo “cascading” refere-se ao mecanismo de prioridade entre regras de estilo:

1. Estilos do navegador (user agent)
2. Estilos definidos pelo usuário (acessibilidade)
3. Estilos do autor (site)
4. Estilos inline (no próprio HTML)

O CSS escolhe qual regra aplicar com base em especificidade, ordem e importância.

Legado da proposta de 1994

A ideia de Håkon Wium Lie foi visionária. Ela permitiu:

• Criação de sites visualmente ricos e responsivos
• Separação clara entre estrutura e estilo
• Evolução para CSS2, CSS3 e os módulos modernos que usamos hoje

Link para o documento original https://www.w3.org/People/howcome/p/cascade.html

1996 – CSS1 é publicado pelo W3C

• Primeira especificação oficial
• Suporte básico: cores, fontes, margens, alinhamento
• Limitado para layouts simples

Em 17 de dezembro de 1996, o W3C publicou oficialmente o CSS1 — a primeira especificação de folhas de estilo em cascata — marcando um divisor de águas na forma como páginas web passaram a ser estilizadas. Ele introduziu a separação entre conteúdo (HTML) e apresentação (CSS), com uma linguagem simples, legível e poderosa para a época.

O que é o CSS1?

O CSS1 (Cascading Style Sheets, Level 1) foi a primeira recomendação oficial do W3C para aplicar estilos visuais a documentos HTML. Criado por Håkon Wium Lie e Bert Bos, ele permitia que autores definissem estilos como cores, fontes, margens e espaçamentos sem misturar essas definições com o conteúdo estrutural do HTML.

Principais recursos introduzidos pelo CSS1

1. Modelo de formatação

• Separação entre elementos block-level (como <p>, <div>) e inline (como <span>, <a>)
• Controle de margens, bordas, preenchimento (padding) e alinhamento

2. Seletores

• Por tipo de elemento: p, h1, body
• Por classe: .destaque
• Por ID: #menu
• Seletores contextuais: div p (parágrafo dentro de uma div)

3. Pseudo-classes e pseudo-elementos

• :link, :visited, :hover para estilizar links
• ::first-line e ::first-letter para estilizar partes específicas de um texto

4. Sistema de cascata

• Estilos podiam vir de diferentes fontes: navegador, autor, usuário
• O CSS1 definia regras para resolver conflitos entre estilos concorrentes
• Introduziu o modificador !important para dar prioridade a uma regra

5. Propriedades de estilo

• Fontes: font-family, font-size, font-style, font-weight
• Cores e fundo: color, background-color, background-image
• Texto: text-align, line-height, letter-spacing
• Listas: list-style-type, list-style-position

Exemplo de CSS1

/* 1. Fontes */
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    font-style: normal;
    font-weight: normal;
    color: #333333;
    background-color: #f0f0f0;
}

/* 2. Títulos */
h1 {
    font-size: 24pt;
    font-weight: bold;
    color: navy;
    background-color: transparent;
    text-align: center;
}

/* 3. Parágrafos */
p {
    font-size: 12pt;
    line-height: 1.5;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
    margin-right: 20px;
    text-align: justify;
}

/* 4. Listas */
ul {
    list-style-type: disc;
    list-style-position: outside;
}

ol {
    list-style-type: decimal;
    list-style-position: inside;
}

/* 5. Links */
a:link {
    color: blue;
    text-decoration: underline;
}

a:visited {
    color: purple;
}

a:hover {
    color: red;
}

/* 6. Bordas e espaçamentos */
div.caixa {
    border-width: 2px;
    border-style: solid;
    border-color: #999999;
    padding: 10px;
    margin: 20px;
}

/* 7. Classes e IDs */
.destaque {
    font-weight: bold;
    color: darkgreen;
}

#rodape {
    font-size: 10pt;
    text-align: center;
    color: gray;
}

Explicação detalhada por seção

1. Fontes e cores

• font-family: define a família de fontes (com fallback)
• font-size: tamanho da fonte (em pt, como no Word)
• font-style: normal ou italic
• font-weight: normal ou bold
• color: cor do texto
• background-color: cor de fundo

2. Títulos

• Estilização específica para h1, com alinhamento central e cor personalizada

3. Parágrafos

• line-height: espaçamento entre linhas
• margin: espaçamento externo
• text-align: alinhamento do texto (justify, center, left, right)

4. Listas

• list-style-type: tipo de marcador (disc, circle, square, decimal)
• list-style-position: posição do marcador (inside ou outside)

5. Links

• :link: estilo para links não visitados
• :visited: estilo para links já clicados
• :hover: estilo ao passar o mouse (suporte parcial em 1996)

6. Bordas e espaçamentos

• border-width, border-style, border-color: definem a borda
• padding: espaço interno
• margin: espaço externo

7. Classes e IDs

• .destaque: classe para aplicar estilo a múltiplos elementos
• #rodape: ID para aplicar estilo único a um elemento específico

Limitações do CSS1

Apesar de revolucionário, o CSS1 tinha várias limitações:

• Sem suporte a layout complexo (como grid ou flexbox)
• Sem posicionamento absoluto ou relativo
• Sem media queries para responsividade
• Sem animações ou transições
• Pouco suporte entre navegadores (especialmente o Internet Explorer)

Essas limitações foram abordadas nas versões seguintes, como o CSS2 (1998) e o CSS3 (2001 em diante).

Impacto histórico

O CSS1 foi o primeiro passo para transformar a web de um espaço puramente textual em um ambiente visual, acessível e estilizado. Ele permitiu:

• Criação de temas e estilos reutilizáveis
• Separação clara entre estrutura e aparência
• Maior controle por parte dos usuários (acessibilidade)
• Evolução para interfaces modernas e responsivas

Link para o Documento oficial https://www.w3.org/TR/REC-CSS1/

1998 – CSS2 é lançado

• Introduz:
  • Posicionamento absoluto e relativo
  • Modelos de caixa
  • Suporte a mídia (impressão, tela)
  • Seletores avançados
• Permite layouts mais sofisticados

Em 12 de maio de 1998, o W3C lançou oficialmente o CSS2 (Cascading Style Sheets Level 2) — uma evolução monumental em relação ao CSS1. Ele transformou o CSS de uma linguagem de estilo básica em uma ferramenta poderosa para controle de layout, acessibilidade, mídia e impressão. Vamos explorar isso a fundo:

Por que o CSS2 foi revolucionário?

O CSS1 (1996) permitia estilizar texto, cores e margens, mas era limitado. O CSS2 expandiu o escopo para permitir:

• Layouts complexos
• Suporte a múltiplos dispositivos e mídias
• Melhor acessibilidade
• Maior controle sobre a hierarquia de estilos

Principais recursos introduzidos no CSS2

1. Modelo de caixa completo

• Cada elemento é tratado como uma caixa com:
  • margin
  • border
  • padding
  • content
• Isso permitiu criar layouts mais precisos e previsíveis.

2. Posicionamento de elementos

• position: static | relative | absolute | fixed
• Combinado com top, left, right, bottom, permitiu colocar elementos em qualquer lugar da tela.

3. Z-index

• Controle da ordem de empilhamento dos elementos:

  div {
      position: absolute;
      z-index: 10;
  }

4. Media types

• Estilos específicos para diferentes dispositivos:

  @media screen {
      body { font-size: 14px; }
  }
  
  @media print {
      body { font-size: 10pt; }
  }

5. Estilos para tabelas

• Controle total sobre:
  • border-collapse
  • caption-side
  • empty-cells
  • table-layout

6. Seletores avançados

• div > p → parágrafo filho direto de div
• div + p → parágrafo imediatamente após div
• div[class] → elementos com atributo class
• div[class="menu"] → elementos com classe exata

7. Pseudo-classes e pseudo-elementos

• :first-child, :lang(), :focus
• ::before, ::after (ainda com sintaxe de :before na época)

8. Importação de estilos

• Permitiu modularizar CSS:

  @import url("estilos.css");

9. Acessibilidade

• Estilos para leitores de tela e dispositivos táteis
• Suporte a aural media type (embora pouco implementado)

10. Content generation

• Inserção de conteúdo via CSS:

  p::before {
      content: "Nota: ";
  }

CSS2 Completo — Exemplo Prático

/* 1. Fontes e texto */
body {
    font-family: "Verdana", "Arial", sans-serif;
    font-size: 12pt;
    font-style: normal;
    font-weight: normal;
    color: #333;
    background-color: #f9f9f9;
    direction: ltr;
    unicode-bidi: embed;
}

/* 2. Títulos */
h1 {
    font-size: 24pt;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    word-spacing: 5px;
    line-height: 1.5;
    text-indent: 20px;
    white-space: nowrap;
}

/* 3. Links */
a:link {
    color: blue;
    text-decoration: underline;
}

a:visited {
    color: purple;
}

a:hover {
    color: red;
}

a:active {
    color: orange;
}

/* 4. Listas */
ul {
    list-style-type: disc;
    list-style-position: outside;
}

ol {
    list-style-type: decimal;
    list-style-position: inside;
}

/* 5. Tabelas */
table {
    border-collapse: collapse;
    caption-side: top;
    empty-cells: show;
    table-layout: auto;
    width: 100%;
}

th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
    vertical-align: top;
}

/* 6. Layout e posicionamento */
#menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: #eee;
}

.box {
    position: absolute;
    top: 100px;
    left: 50px;
    width: 200px;
    height: 100px;
    overflow: auto;
    visibility: visible;
    display: block;
}

/* 7. Margens, bordas e preenchimento */
.container {
    margin: 20px;
    padding: 15px;
    border-width: 2px;
    border-style: solid;
    border-color: #999;
}

/* 8. Seletores avançados */
div > p {
    color: green;
}

div + p {
    color: teal;
}

[class] {
    font-style: italic;
}

input[type="text"]:focus {
    background-color: #fff;
}

/* 9. Pseudo-elementos */
p::first-line {
    font-weight: bold;
}

p::first-letter {
    font-size: 200%;
    color: red;
}

/* 10. Geração de conteúdo */
blockquote::before {
    content: "“";
}

blockquote::after {
    content: "”";
}

/* 11. Media types */
@media screen {
    body {
        background-color: #fff;
    }
}

@media print {
    body {
        background-color: #fff;
        color: black;
        font-size: 10pt;
    }
}

/* 12. Importação de estilos */
@import url("reset.css");

Explicação Detalhada por Seção

1. Fontes e texto

• font-family: define a família de fontes com fallback
• font-size, font-style, font-weight: controle de tamanho, estilo e peso
• direction, unicode-bidi: suporte a idiomas RTL (como árabe e hebraico)

2. Títulos

• text-transform: transforma texto em maiúsculas, minúsculas ou capitalizado
• letter-spacing, word-spacing: espaçamento entre letras e palavras
• line-height: altura da linha
• text-indent: recuo da primeira linha
• white-space: controle de quebra de linha e espaços

3. Links

• Pseudo-classes :link, :visited, :hover, :active para controlar estados de interação

4. Listas

• list-style-type: tipo de marcador
• list-style-position: posição do marcador em relação ao texto

5. Tabelas

• border-collapse: une bordas adjacentes
• caption-side: posiciona o título da tabela
• empty-cells: mostra ou oculta células vazias
• table-layout: define como o navegador calcula o layout da tabela

6. Layout e posicionamento

• position: define o tipo de posicionamento (static, relative, absolute, fixed)
• z-index: controla a ordem de empilhamento
• overflow: define como lidar com conteúdo que ultrapassa o contêiner
• visibility: mostra ou oculta elementos
• display: define como o elemento é renderizado (block, inline, none)

7. Margens, bordas e preenchimento

• margin, padding: espaçamento externo e interno
• border-width, border-style, border-color: controle completo da borda

8. Seletores avançados

• >: filho direto
• +: irmão adjacente
• [attr]: elementos com atributo específico
• [attr="value"]: elementos com valor exato

9. Pseudo-elementos

• ::first-line, ::first-letter: estiliza partes específicas do texto

10. Geração de conteúdo

• content: insere texto antes ou depois de um elemento

11. Media types

• @media: aplica estilos diferentes para tela, impressão, etc.

12. Importação de estilos

• @import: permite modularizar o CSS em arquivos separados

Limitações do CSS2

Apesar de avançado, o CSS2 ainda tinha desafios:

• Suporte inconsistente entre navegadores (especialmente IE)
• Sem layout flexível nativo (float era a única opção)
• Sem animações ou transições
• Sem variáveis ou nesting

Essas limitações levaram à criação do CSS2.1 (revisado entre 2004–2011) e depois ao CSS3, que dividiu o CSS em módulos independentes.

Impacto histórico

• Permitiu sites com layout fixo, menus flutuantes, estilos para impressão
• Abriu caminho para frameworks como Bootstrap e Tailwind
• Estabeleceu a base para responsividade, acessibilidade e modularidade

Link para o Documento oficial https://www.w3.org/TR/1998/REC-CSS2-19980512/

Anos de Transição e Evolução: 2001 a 2008

2001–2005 – Navegadores começam a implementar CSS2

• Internet Explorer, Firefox e Opera adotam parcialmente
• Problemas de compatibilidade entre navegadores

Após o lançamento do CSS2 (1998), a adoção pelos navegadores foi lenta e cheia de obstáculos. O período de 2001 a 2005 foi marcado pela "Guerra dos Navegadores" e pelos notórios problemas de compatibilidade (os "bugs do CSS").

Apesar dos desafios, este período forçou a evolução das ferramentas de desenvolvimento e a criação de métodos de testes, como os CSS Zen Garden (lançado em 2003), que demonstrou a força do CSS ao aplicar centenas de designs diferentes sobre o mesmo HTML.

2008 – Início da modularização do CSS3

O ano de 2008 marca um ponto de viragem na história do CSS: foi quando o W3C iniciou oficialmente a modularização do CSS3, abandonando o modelo monolítico das versões anteriores (CSS1 e CSS2) e adotando uma abordagem flexível, escalável e evolutiva.

Por que modularizar o CSS?

Antes de 2008, o CSS era desenvolvido como uma única especificação gigante. Isso gerava vários problemas:

• Lentidão na evolução: tudo precisava estar pronto para ser lançado junto.
• Dificuldade de implementação: navegadores tinham que suportar tudo de uma vez.
• Pouca flexibilidade: não dava para atualizar partes específicas sem revisar o todo.
• Baixa previsibilidade: recursos ficavam anos em rascunho sem serem implementados.

A solução foi dividir o CSS em módulos independentes, cada um com seu próprio ciclo de desenvolvimento, testes e publicação.

O que é um módulo CSS?

Um módulo CSS é uma parte da linguagem que trata de um conjunto específico de funcionalidades. Cada módulo tem:

• Uma especificação própria
• Um nível de versão (ex: CSS Grid Level 1, Level 2)
• Um status (rascunho, candidato, recomendação)
• Um ciclo de revisão e testes independente

Isso permite que o CSS evolua por partes, com mais agilidade e foco.

Exemplos de módulos CSS3 lançados após 2008

Exemplo prático com módulos CSS3

O código de exemplo CSS3

/* 1. Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 2. Fontes personalizadas */
@font-face {
    font-family: 'OpenSans';
    src: url('OpenSans-Regular.ttf');
}

/* 3. Layout com Flexbox */
.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px;
}

/* 4. Responsividade com Media Queries */
@media (max-width: 600px) {
    .container {
        flex-direction: column;
    }
}

/* 5. Estilização de botões com Transitions */
button {
    background-color: #007BFF;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}

/* 6. Animações com Keyframes */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.card {
    animation: fadeIn 0.6s ease-out;
}

/* 7. Grid Layout */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

@media (max-width: 800px) {
    .grid {
        grid-template-columns: 1fr;
    }
}

/* 8. Backgrounds e Borders */
.box {
    background: linear-gradient(to right, #f0f0f0, #e0e0e0);
    border: 2px solid #ccc;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* 9. Pseudo-elementos */
h1::after {
    content: " ✨";
    color: gold;
}

/* 10. Seletores avançados */
input[type="text"]:focus {
    outline: 2px solid #007BFF;
}

ul li:nth-child(odd) {
    background-color: #f9f9f9;
}

/* 11. Multi-column Layout */
.article {
    column-count: 2;
    column-gap: 30px;
}

/* 12. Custom Properties (Variáveis CSS) */
:root {
    --main-color: #007BFF;
    --text-color: #333;
}

body {
    color: var(--text-color);
}

a {
    color: var(--main-color);
}

Explicação detalhada por módulo (Exemplo CSS3)

1. Reset básico

• * { box-sizing: border-box } evita que padding e border alterem o tamanho real dos elementos.

2. Fontes personalizadas

• @font-face permite usar fontes externas, mesmo que não estejam instaladas no sistema do usuário.

3. Flexbox

• Layout flexível unidimensional com controle de alinhamento (justify-content, align-items) e direção (flex-direction).

4. Media Queries

• Permite adaptar o layout para diferentes tamanhos de tela, essencial para design responsivo.

5. Transitions

• Cria animações suaves entre estados (ex: hover), sem precisar de JavaScript.

6. Keyframes

• Define animações complexas com etapas (from, to, ou porcentagens).

7. Grid Layout

• Layout bidimensional com controle total sobre linhas e colunas.

8. Backgrounds e Borders

• Gradientes, bordas arredondadas e sombras para criar profundidade visual.

9. Pseudo-elementos

• ::after e ::before permitem inserir conteúdo decorativo via CSS.

10. Seletores avançados

• :focus, :nth-child, [type="text"] permitem estilizar elementos com base em atributos ou estado.

11. Multi-column Layout

• Divide o conteúdo em colunas, como em revistas ou jornais.

12. Custom Properties (Variáveis CSS)

• Permite definir e reutilizar valores em todo o documento, facilitando manutenção e temas.

Impacto da modularização (2008 em diante)

• Desenvolvedores puderam usar novos recursos sem esperar por uma nova versão completa.
• Navegadores começaram a implementar módulos de forma gradual e mais confiável.
• Frameworks CSS como Bootstrap e Tailwind nasceram com base nessa modularidade.
• Ferramentas de build (Sass, PostCSS) começaram a organizar estilos por módulos.

O primeiro módulo oficialmente publicado como parte do CSS3 foi o Selectors Level 3, que introduziu seletores como :nth-child, :not, e :first-of-type. Ele foi essencial para tornar o CSS mais expressivo e poderoso.

A Revolução do Layout: Flexbox e Grid (2012 a 2017)

2012 – Flexbox é estabilizado (Flexible Box Layout)

• Introduz o modelo de layout flexível
• Permite alinhar e distribuir elementos com facilidade em uma única dimensão (linha ou coluna)

2017 – CSS Grid Layout é lançado

• Permite criar layouts bidimensionais (linhas e colunas)
• Revoluciona o design responsivo e complexo

O que é o CSS Grid Layout?

O CSS Grid Layout é um módulo do CSS que introduz um sistema de layout bidimensional, permitindo organizar elementos em linhas e colunas com facilidade e precisão. Ao contrário do Flexbox (que é unidimensional), o Grid foi projetado para lidar com layouts complexos, como páginas inteiras, dashboards, e áreas de conteúdo dinâmico.

Como funciona o CSS Grid?

1. Definindo um contêiner de grid

.container {
    display: grid;
}

2. Criando colunas e linhas

.container {
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto 100px;
}

3. Posicionando itens

.item {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
}

4. Usando áreas nomeadas

.container {
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
}

.header {
    grid-area: header;
}

Exemplo prático de CSS Grid

<div class="grid">
    <div class="header">Cabeçalho</div>
    <div class="sidebar">Menu</div>
    <div class="content">Conteúdo</div>
    <div class="footer">Rodapé</div>
</div>

.grid {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
}

Resultado: layout com cabeçalho, menu lateral, conteúdo principal e rodapé — tudo sem precisar de float, position, ou flex.

Impacto do lançamento do CSS Grid em 2017

• Substituiu técnicas antigas como float, inline-block, e table-layout
• Simplificou layouts complexos como grids de produtos, painéis administrativos, e páginas responsivas
• Reduziu dependência de frameworks como Bootstrap e Foundation
• Melhorou acessibilidade e semântica ao permitir estrutura limpa e lógica
• Facilitou design responsivo com minmax(), auto-fit, auto-fill e media queries

Recursos avançados do Grid

O Avanço da Consistência: Variáveis CSS (2019)

2019 – Variáveis CSS (Custom Properties) ganham suporte amplo

• Permitem definir valores reutilizáveis com --nome
• Facilitam temas e manutenção de estilos

O que são variáveis CSS (Custom Properties)?

As Custom Properties são valores definidos pelo desenvolvedor que podem ser reutilizados em qualquer parte do CSS. Elas são declaradas com prefixo -- e acessadas com a função var().

Sintaxe:

:root {
    --cor-principal: #007BFF;
    --espacamento: 16px;
}

button {
    background-color: var(--cor-principal);
    padding: var(--espacamento);
}

Vantagens das variáveis CSS (Custom Properties)

1. Reutilização de valores

Evita repetição e facilita manutenção:

--fonte: 'Open Sans';
font-family: var(--fonte);

2. Temas dinâmicos

Permite trocar cores, espaçamentos e estilos com facilidade:

:root {
    --tema-claro: #fff;
    --tema-escuro: #222;
}

3. Herança e escopo

Variáveis respeitam o escopo de CSS:

.card {
    --cor-fundo: #f0f0f0;
    background-color: var(--cor-fundo);
}

4. Interação com JavaScript

Você pode alterar variáveis dinamicamente:

document.documentElement.style.setProperty('--cor-principal', '#FF0000');

Exemplo prático completo (Variáveis CSS)

:root {
    --cor-primaria: #3498db;
    --cor-secundaria: #2ecc71;
    --espacamento: 20px;
    --raio-borda: 8px;
}

.container {
    background-color: var(--cor-primaria);
    padding: var(--espacamento);
    border-radius: var(--raio-borda);
}

button {
    background-color: var(--cor-secundaria);
    padding: calc(var(--espacamento) / 2);
    border: none;
    border-radius: var(--raio-borda);
}

Resultado: um layout com cores e espaçamentos consistentes, fáceis de alterar em um só lugar.

Impacto em 2019

• Frameworks modernos como Tailwind, Bootstrap 5 e Material Design passaram a usar variáveis CSS
• Design systems corporativos adotaram temas dinâmicos com :root e var()
• Dark mode e modo acessível tornaram-se fáceis de implementar
• Pré-processadores como Sass perderam relevância para tarefas simples

O Novo CSS: 2020–2023 – Recursos Modernos

2020–2023 – Novos recursos modernos

• :is() e :where() para simplificar seletores
• @layer para organizar estilos em camadas
• container queries começam a ser implementados
• Suporte crescente a subgrid, scroll-snap, aspect-ratio

Entre 2020 e 2023, o CSS passou por uma verdadeira revolução: surgiram recursos modernos que tornaram o layout, a responsividade, a acessibilidade e a estética da web mais poderosos e intuitivos do que nunca. Esses avanços consolidaram o CSS como uma linguagem dinâmica e expressiva, capaz de competir com frameworks e até substituir parte do JavaScript em interações visuais.

Principais recursos modernos lançados entre 2020 e 2023

1. Container Queries

• Permitem aplicar estilos com base no tamanho de um contêiner, não da janela inteira.
• Diferente das media queries, que dependem do viewport.
• Exemplo:

  @container (min-width: 400px) {
      .card {
          flex-direction: row;
      }
  }

• Impacto: componentes realmente responsivos, adaptáveis em qualquer contexto.

2. :has() — Seletores parentais

• Permite selecionar um elemento com base em seus filhos ou descendentes.
• Exemplo:

  article:has(h2) {
      border: 2px solid green;
  }

• Impacto: lógica condicional no CSS puro, antes só possível com JavaScript.

3. Cascade Layers (@layer)

• Organiza estilos em camadas controladas, evitando conflitos entre bibliotecas, temas e componentes.
• Exemplo:

  @layer reset, base, theme;
  
  @layer base {
      h1 { font-size: 2rem; }
  }

• Impacto: controle total da cascata e previsibilidade na sobrescrita de estilos.

4. CSS Nesting

• Permite aninhamento de seletores, como em Sass ou Less.
• Exemplo:

  .card {
      color: black;
  
      &:hover {
          color: blue;
      }
  }

• Impacto: código mais limpo, organizado e legível.

7. Color-mix() e Wide-gamut colors

• Mistura de cores diretamente no CSS:

  color: color-mix(in srgb, red 30%, blue);

• Suporte a espaços de cor avançados como display-p3.
• Impacto: controle artístico e preciso de cores para telas modernas.

Conclusão: O CSS como Plataforma de Design

Entre 2020 e 2023, o CSS deixou de ser apenas uma linguagem de estilo e se tornou uma plataforma de design interativo, com recursos que antes exigiam JavaScript ou bibliotecas externas. Hoje, é possível criar interfaces responsivas, animadas, temáticas e acessíveis com CSS puro.

O CSS evoluiu de uma simples ferramenta para colorir texto (CSS1) para uma linguagem completa de layout e interação, comprovando a visão de seus criadores de que o estilo deve ser totalmente separado da estrutura.