- 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
Ainda não há comentários.