CSS Atualizado: Descubra as Novidades e Ferramentas Incríveis!

Propriedade `text-box-trim`

A propriedade text-box-trim permite remover espaços acima e abaixo de elementos de texto, baseando-se em métricas da fonte (cap height, baseline, ex, etc.), garantindo alinhamentos mais precisos (Chrome for Developers, caniuse.com).

Sintaxe

/* Remover espaços acima e abaixo segundo cap height e baseline */
h1 {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Shorthand */
p {
  text-box: trim-both cap alphabetic;
}

Valores de text-box-trim: trim-start, trim-end, trim-both, none.
Valores de text-box-edge: cap, alphabetic, ex, ideographic-ink, etc. (CSS-Tricks, MDN Web Docs).

Compatibilidade

Suporte em cerca de 77,4% dos navegadores modernos, mas ainda requer flag nas versões mais antigas de Chrome e Safari (caniuse.com, CSS-Tricks).

Função `light-dark()`

A light-dark() é parte do CSS Color Module Level 5 e retorna automaticamente a cor adequada conforme o esquema de cores do usuário ou do sistema operacional (MDN Web Docs, Chrome for Developers).

Exemplo de uso

:root {
  color-scheme: light dark;
}

body {
  background-color: light-dark(#ffffff, #000000);
  color: light-dark(#000000, #ffffff);
}

Simplifica o uso de @media (prefers-color-scheme) sem duplicar regras (MDN Web Docs, Chrome for Developers).
Compatível nas versões mais recentes dos principais navegadores; verifique MDN para detalhes de compatibilidade.

Pseudo-classes `:user-valid` e `:user-invalid`

As pseudo-classes :user-valid e :user-invalid aplicam estilos de validação após a interação do usuário, evitando indicar erro ou sucesso antes que o campo seja manipulado (MDN Web Docs, MDN Web Docs).

Exemplo

input:required:user-valid {
  border-color: green;
  background-image: url('check.svg');
}

input:required:user-invalid {
  border-color: red;
  background-image: url('error.svg');
}

Melhora a experiência comparado a :valid e :invalid, que atuam imediatamente no carregamento (MDN Web Docs, MDN Web Docs).
Suportadas em navegadores modernos desde final de 2023; vale testar versões específicas.

Novidades Adicionais do CSS (2025)

Container Queries

Permitem aplicar estilos com base no tamanho ou características do container em vez da viewport, facilitando componentes verdadeiramente responsivos (CSS-Tricks, MDN Web Docs).

.card {
  container-type: inline-size;
}

.card img {
  container-condition: (min-width: 300px) {
    width: 100%;
  }
}

Suporte estável em Chrome, Firefox e Edge recentes; Safari em progresso.

CSS Nesting

Módulo de nesting nativo reduz repetição de seletores, aproximando sintaxe do SCSS (MDN Web Docs, Pivale).

.nav {
  display: flex;

  &__item {
    margin-right: 1rem;

    &:hover {
      text-decoration: underline;
    }
  }
}

Pseudo-classe `:has()`

Selector relacional que permite estilizar pais com base em seus filhos, algo antes possível apenas via JavaScript (MDN Web Docs, caniuse.com).

article:has(img) {
  padding-top: 0;
}

Garantia de suporte acima de 92% globalmente; excelente para estados dependentes de conteúdo interno.

Funções de Cores Avançadas

color-mix(): mistura duas cores em espaço de cor definido (MDN Web Docs, Smashing Magazine).
color-contrast() (em rascunho): seleciona cor de maior contraste automaticamente.

Cascade Layers (`@layer`)

Define camadas de CSS para controlar precedência sem abusar de !important (MDN Web Docs, CSS-Tricks).

@layer reset, base, components, utilities;

@layer components {
  .btn { /* … */ }
}

Suporte sólido em navegadores atuais.

Subgrid

Permite que grades filhas herdem linhas/colunas da grade pai, superando limitações do grid tradicional (caniuse.com, MDN Web Docs).

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.child {
  display: grid;
  grid-template-columns: subgrid;
}

`content-visibility`

Evita renderização de elementos fora da viewport, melhorando performance de carregamento (MDN Web Docs, web.dev).

section {
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
}

Layout Masonry nativo

Usa display: masonry em vez de scripts para layouts estilo Pinterest (Chrome for Developers, Smashing Magazine).

.gallery {
  display: masonry;
  masonry-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

Scroll-Driven Animations

Combinações de ScrollTimeline e ViewTimeline para animações baseadas no scroll declarativamente (MDN Web Docs, Chrome for Developers).

@scroll-timeline scroll {
  source: selector(document);
  orientation: block;
}

.element {
  animation: fade-in 1s scroll(timeline: scroll);
}

Conclusão

O ecossistema CSS evolui rapidamente, oferecendo ferramentas poderosas para tipografia, temas, layouts e interações. Adote essas novidades hoje mesmo, sempre validando compatibilidade e fornecendo fallbacks quando necessário.

Propriedade text-box-trim