Novo em CSS

Permite que um componente responda à largura do próprio container em vez da viewport.

Chrome 105Edge 105Safari 16Firefox 110

Estilize um pai pelo que ele contém, sem classe de estado em JS.

Chrome 105Edge 105Safari 15.4Firefox 121

Aninhamento nativo de regras dentro de regras, incluindo `&` para o pai, media e container queries.

Chrome 120Edge 120Safari 17.2Firefox 117

As camadas posteriores vencem, seja qual for a especificidade da regra abaixo.

Chrome 99Edge 99Safari 15.4Firefox 97

Um grid aninhado pode adotar as trilhas de linha ou coluna do pai, então títulos, corpos e rodapés de.

Chrome 117Edge 117Safari 16Firefox 71

Mistura duas cores num espaço de cor escolhido, então você deriva cores de hover, tom e borda de um.

Chrome 111Edge 111Safari 16.2Firefox 113

Espaços de cor perceptualmente uniformes: passos iguais de luminosidade parecem iguais, e o matiz fica.

Chrome 111Edge 111Safari 15.4Firefox 113

Pega uma cor existente e reescreve seus canais: `oklch(from var(--brand) calc(l + .2) c h)` cria um tom.

Chrome 119Edge 119Safari 16.4Firefox 128

Escolhe uma de duas cores dependendo do `color-scheme` do elemento.

Chrome 123Edge 123Safari 17.5Firefox 120

Dá a uma custom property um tipo, valor inicial e herança, o que a torna animável.

Chrome 85Edge 85Safari 16.4Firefox 128

Equilibra o comprimento das linhas em blocos curtos de texto (títulos, legendas) para você nunca ficar.

Chrome 114Edge 114Safari 17.5Firefox 121

Popovers declarativos: qualquer elemento com `popover` abre na top layer via o `popovertarget` de um.

Chrome 114Edge 114Safari 17Firefox 125

Diálogos modais nativos têm o focus trapping correto, a inércia da página e o tratamento de Escape.

Chrome 134Edge 134Safari noFirefox 137

Permite transicionar a partir de `display:none` e outras propriedades discretas.

Chrome 117Edge 117Safari 17.5Firefox 129

Remove uma subárvore do foco, dos cliques e da árvore de acessibilidade com um único atributo.

Chrome 102Edge 102Safari 15.5Firefox 112

Como `:valid`/`:invalid`, mas só depois que o usuário interagiu com o campo, então um campo obrigatório.

Chrome 119Edge 119Safari 16.5Firefox 88

Recolore checkboxes, radios, sliders de range e barras de progresso nativos com a cor da sua marca,.

Chrome 93Edge 93Safari 15.4Firefox 92

Matemática em CSS além de calc(): encaixar um valor fluido numa grade (`round(nearest, 1.2rem, 4px)`),.

Chrome 125Edge 125Safari 15.4Firefox 118

Trigonometria em CSS torna layouts circulares e radiais CSS puro: posicione N itens num anel com.

Chrome 111Edge 111Safari 15.4Firefox 108

Duas animações numa propriedade, somadas em vez de substituídas.

Chrome 112Edge 112Safari 16Firefox 115

Move um elemento ao longo de um caminho (circle, inset, polygon, path SVG ou `shape()`), rotacionando-o.

Chrome 116Edge 116Safari 16Firefox 122

`mask` sem prefixo permite esmaecer, cortar e modelar qualquer elemento com gradientes ou imagens;.

Chrome 120Edge 120Safari 15.4Firefox 53

Aplica blur/saturate/brightness ao que está atrás de um elemento, a base de cabeçalhos, sheets e.

Chrome 76Edge 76Safari 18Firefox 103

Controle padrão de barras de rolagem: reserve o gutter para o layout não se deslocar quando uma barra.

Chrome 121Edge 121Safari 26.2Firefox 64

Agrupar `<details>` com o mesmo `name` cria um acordeão exclusivo nativamente.

Chrome 131Edge 131Safari 18.4Firefox 144

Estilize intervalos arbitrários de texto (resultados de busca, correção ortográfica, tokens de código).

Chrome 105Edge 105Safari 17.2Firefox 140

Envolva uma mudança de DOM em `document.startViewTransition()` e o navegador anima entre os estados.

Chrome 111Edge 111Safari 18Firefox 144

Casa com `<details>`, `<dialog>`, `<select>` e inputs de data/cor enquanto estão abertos, substituindo.

Chrome 133Edge 133Safari 26.5Firefox 136

Consulte os valores das custom properties de um container: `@container style(--theme: dark)` estiliza os.

Chrome 111Edge 111Safari 18Firefox 151

Escopa regras a uma subárvore com um limite inferior opcional ("escopo donut"): `@scope (.card) to.

Chrome 118Edge 118Safari 17.4Firefox 146

Faz inputs, textareas e selects se dimensionarem pelo conteúdo, então um textarea cresce conforme o.

Chrome 123Edge 123Safari 26.2Firefox 152

Retorna preto ou branco, o que contrastar mais com a cor dada.

Chrome 147Edge 147Safari 26Firefox 146

Uma sintaxe de path escrita em unidades e matemática de CSS em vez dos números sem unidade do SVG, então.

Chrome 135Edge 135Safari 18.4Firefox 148

Funções numéricas que retornam a posição de um elemento (a partir de 1) entre os irmãos e a contagem total.

Chrome 138Edge 138Safari 26.2Firefox 154

Apara o espaço extra acima da altura de caixa alta e abaixo da linha de base dentro de uma line box,.

Chrome 133Edge 133Safari 18.2Firefox 154

Tooltips e menus se prendem ao gatilho e invertem na borda.

Chrome 125Edge 125Safari 26Firefox 147

`@container name { }` sem condição casa sempre que um container nomeado existir, uma forma limpa de.

Chrome 148Edge 148Safari 26.4Firefox 149

`lh` é o line-height do elemento, `rlh` o da raiz, então o espaçamento pode ser expresso em linhas:.

Chrome 109Edge 109Safari 16.4Firefox 120

Guia uma animação de keyframes pela posição do scroll em vez do tempo: barras de progresso de leitura,.

Chrome 115Edge 115Safari 26Firefox flag (158 nightly)

Habilita navegações animadas num site multipágina com uma at-rule em ambas as páginas;.

Chrome 126Edge 126Safari 18.2Firefox no

Quebra de parágrafo melhor: evita palavras órfãs, melhora a hifenização e uniformiza a margem irregular.

Chrome 117Edge 117Safari 26Firefox no

Um popover da classe tooltip que não fecha popovers `auto` abertos e fecha quando outro hint abre.

Chrome 133Edge 133Safari noFirefox 149

Declara como um `<dialog>` pode fechar: `any` (Escape, clique fora ou programático), `closerequest` (só.

Chrome 134Edge 134Safari noFirefox 137

`color-mix()` agora aceita qualquer número de cores com pesos, e `light-dark()` aceita.

Chrome 150Edge 150Safari noFirefox 150

Remove as margens do primeiro e do último filho nas bordas do container, então o padding de um card fica.

Chrome 155 (upcoming)Edge 155 (upcoming)Safari 16.4Firefox no

Trunca um bloco em N linhas com reticências.

Chrome flagEdge flagSafari legacyFirefox flag

Uma API JavaScript tipada para valores CSS: leia `el.computedStyleMap().get('width')` como um.

Chrome 66Edge 66Safari 16.4Firefox flag

Uma palavra-chave de cascata que age como se a regra atual não tivesse definido a propriedade, deixando.

Chrome 148Edge 148Safari 27 betaFirefox 150

Opte com `interpolate-size: allow-keywords` e você consegue transicionar `height: 0` para `height: auto`.

Chrome 129Edge 129Safari noFirefox no

Muda o que `border-radius` desenha: `squircle` (curvas contínuas estilo iOS), `scoop` (para dentro),.

Chrome 139Edge 139Safari noFirefox no

Condições inline num valor: `if(style(--variant: primary): #2563eb; else: #e5e7eb)`.

Chrome 137Edge 137Safari TPFirefox no

Funções definidas pelo autor com parâmetros tipados e um descritor `result`, utilizáveis em qualquer.

Chrome 139Edge 139Safari TPFirefox no

Faz o foco do teclado e a ordem do leitor de tela seguirem a ordem visual dos layouts flex e grid.

Chrome 137Edge 137Safari noFirefox no

Carrosséis em CSS puro: um container de scroll-snap ganha botões de anterior/próximo e uma navegação de.

Chrome 135Edge 135Safari noFirefox no

Estilize um elemento com base no estado do scroll: um cabeçalho sticky que ganha sombra quando está.

Chrome 133Edge 133Safari noFirefox no

Escala o tamanho da fonte de um título para a linha preencher exatamente o container, a resposta do CSS.

Chrome 150Edge 150Safari noFirefox no

Recorta um fundo para a border box menos a padding box, então uma borda em gradiente vira uma.

Chrome 150Edge 150Safari noFirefox no

Desenha filetes dentro dos gaps de grid/flex com `column-rule` e `row-rule` (mais `*-rule-inset` e.

Chrome 149Edge 149Safari noFirefox no

`random(min, max, step)` produz um valor aleatório estável por carregamento de página (ou por elemento.

Chrome noEdge noSafari 26.2 / 26.0Firefox flag

Um layout estilo masonry em que os itens fluem para a coluna mais curta, expresso com `display:.

Chrome flagEdge flagSafari 26.4Firefox flag

Opta um `<select>` nativo por uma renderização totalmente estilizável: estilize o botão, o dropdown.

Chrome 135Edge 135Safari 27 betaFirefox no

`attr()` agora funciona em qualquer propriedade e pode interpretar o atributo como um tipo.

Chrome 133Edge 133Safari TPFirefox flag