CSS Wrapped: 2023 - Resumo completo das mudanças no CSS neste ano

• 2023 foi um ano enorme para o CSS. Surgiram muitos recursos novos em CSS e UI que tornaram possíveis funcionalidades antes consideradas inviáveis na plataforma web
• Todos os principais navegadores passaram a oferecer suporte a container queries, subgrid, ao seletor :has() e também a novos espaços de cor e funções
• O Chrome passou a oferecer suporte, apenas com CSS, a animações baseadas em rolagem e a transições suaves entre visualizações da web
• Muitos novos elementos fundamentais foram introduzidos para melhorar a experiência do desenvolvedor, como aninhamento de CSS e estilos com escopo

Architectural foundations

Trigonometric functions

• O Chrome 111 passou a oferecer suporte a funções trigonométricas como sin(), cos(), tan(), asin(), acos(), atan(), atan2()
• Essas funções são muito úteis para animações e objetivos de layout

Complex nth-* selection

• A pseudoclasse :nth-child() permite selecionar elementos no DOM por índice
• A partir do Chrome 111, tornou-se possível passar opcionalmente uma lista de seletores para :nth-child() e :nth-last-child()

Scope

• O Chrome 118 passou a oferecer suporte a @scope, que limita a correspondência de seletores a uma subárvore específica do documento
• A subárvore com escopo é definida pela raiz do escopo e por um limite do escopo opcional

Nesting

• Antes do uso de aninhamento, era necessário declarar todos os seletores separadamente e de forma explícita
• Agora é possível agrupar regras de estilo relacionadas e continuar reutilizando seletores

Subgrid

• Com o CSS subgrid, é possível criar grades mais complexas e obter melhor alinhamento entre layouts filhos
• Isso permite que a grade interna adote como suas as linhas e colunas da grade externa

Typography

Initial-letter

• A propriedade initial-letter, lançada no Chrome 110, é um recurso CSS pequeno, mas poderoso, para definir o posicionamento da letra inicial
• A letra pode ser posicionada como capitular rebaixada ou elevada

text-wrap: balance and pretty

• Os desenvolvedores não conhecem o tamanho final, o tamanho da fonte ou até mesmo o idioma de títulos e parágrafos
• Foram introduzidas duas novas técnicas de quebra de texto: balance e pretty

Color

HD Color Spaces (Color Level 4)

• Novas cores, mais cores, novos espaços de cor, funções de cor e novos recursos chegaram em 2023
• CSS e cor agora permitem criar gradientes de cores HDR e interpolar gradientes em diferentes espaços de cor

color-mix function

• Mistura de cores é uma tarefa clássica, e em 2023 também passou a ser possível no CSS
• É possível misturar transparência a uma cor, não apenas branco ou preto, e fazer isso no espaço de cor escolhido

Relative color syntax

• A sintaxe de cor relativa (RCS) é uma abordagem complementar ao color-mix() para gerar variações de cor
• A RCS permite realizar manipulações relativas e absolutas de cor

Responsive Design

Size container queries

• Em vez de usar informações globais de tamanho da viewport, container queries permitem consultar elementos pais dentro da página

Style container queries

• Style queries permitem consultar os valores de propriedades personalizadas do elemento pai

:has() selector

• Há quase 20 anos os desenvolvedores pedem um "seletor de pai" no CSS
• Com o seletor :has(), é possível selecionar um elemento .card que tenha uma imagem hero como filho, como em .card:has(img.hero)

Update media query

• A media query update permite ajustar a UI à taxa de atualização do dispositivo

Scripting media query

• A media query de scripting pode ser usada para verificar se o JavaScript está disponível

Reduced-transparency media query

• Interfaces translúcidas podem causar dor de cabeça ou dificultar a visão para vários tipos de deficiência visual
• Essa media query indica que o usuário tem uma preferência de sistema para reduzir ou remover transparência na UI

Interaction

View transitions

• Transições de visualização têm grande impacto na experiência do usuário em uma página
• Com a API View Transitions, é possível criar transições visuais entre dois estados de página em uma aplicação de página única

Linear-easing function

• A função linear() permite criar funções de easing complexas de forma simples, em troca de uma pequena perda de precisão

Scroll End

• O evento scrollend fornece um evento de fim de rolagem no momento certo para entender se o usuário ainda está no meio do gesto

Scroll-driven animations

• Animações guiadas por rolagem permitem vincular ao deslocamento de rolagem de um scroller animações existentes criadas com CSS ou com a Web Animations API

Deferred timeline attachment

• Ao aplicar animações guiadas por rolagem com CSS, o mecanismo que encontra o scroller controlador sempre sobe pela árvore DOM, então fica restrito apenas a ancestrais de rolagem

Discrete property animations

• Animações discretas, como a capacidade de animar a partir de display: none, foram adicionadas como novo recurso em 2023

@starting-style

• A regra CSS @starting-style se baseia no novo recurso da web para animar a partir de display: none

Overlay

• A nova propriedade CSS overlay faz com que elementos de estilo top-layer, como popover e dialog, possam surgir com animação suave a partir da camada superior

Components

Popover

• A API Popover ajuda a criar elementos que ficam acima do restante da página

Horizontal rules in select

• Chrome e Safari passaram a oferecer suporte neste ano à adição de elementos de regra horizontal (tag ) dentro de elementos

:user-valid and invalid pseudo classes

• :user-valid e :user-invalid funcionam de forma semelhante às pseudoclasses :valid e :invalid, mas só correspondem a controles de formulário depois que o usuário interage de maneira significativa com a entrada

Exclusive accordion

• No Chrome 120, o elemento `` passou a oferecer suporte ao atributo name
• Com esse atributo, vários elementos `` com o mesmo valor de name formam um grupo semântico