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.

5. Scroll-Driven Animations

• Animações que reagem ao **scroll do usuário**, sem JavaScript.
• **Exemplo**:

  @scroll-timeline myScroll {
      scroll-offsets: auto;
  }
  
  .element {
      animation: fade-in 1s linear;
      animation-timeline: myScroll;
  }

• **Impacto**: interações fluidas e nativas com base no comportamento do usuário.

6. View Transitions API

• Transições suaves entre páginas ou estados, com preservação visual.
• **Exemplo**:

  .fade {
      view-transition-name: fade;
  }

• **Impacto**: navegação com aparência de app nativo, sem frameworks pesados.

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.