CSS e interface
Descubra ferramentas e técnicas do Chrome para melhorar o CSS e o design da interface do usuário do seu site.
Melhore suas habilidades de desenvolvimento de interface
Estilo da barra de rolagem
Use as propriedades
scrollbar-width e scrollbar-color para definir o estilo das barras de rolagem.
Saldo de ajuste de texto CSS
O CSS é uma técnica de tipografia clássica que cria manualmente quebras de linha para blocos de texto equilibrados.
Guia de cores CSS de alta definição
A CSS Color 4 traz para a Web uma ampla gama de ferramentas de cores: mais cores, funções de manipulação e melhores gradientes.
Modelo de objeto tipado do CSS
O modelo de objeto tipado (OM, na sigla em inglês) do CSS traz tipos, métodos e um modelo de objeto flexível para trabalhar com valores CSS.
Introdução às consultas de estilo
Consulte os valores de estilo de um elemento pai usando a regra @container.
Transição de CSS
Um dos nossos recursos favoritos de pré-processador de CSS agora está integrado à linguagem: regras de estilo de aninhamento.
@scope do CSS
Saiba como criar estilos com escopo que selecionam elementos somente em uma subárvore do seu DOM.
CSS color-mix()
Misturar cores, em qualquer um dos espaços de cor suportados, diretamente do seu CSS.
Mais controle sobre as seleções nth-child()
Faça um pré-filtro de um conjunto de elementos filhos antes de aplicar a lógica An+B a ele.
Acordeão exclusivo
Crie um acordo exclusivo com vários elementos
<details> que tenham o mesmo name.
Introdução ao inert
A propriedade inert é um atributo HTML global que simplifica a remoção e a restauração de eventos de entrada do usuário para um elemento, incluindo eventos de foco e eventos de tecnologias adaptativas.
Quebra de texto CSS bonita
Ative o ajuste de texto otimizado para priorizar a beleza em vez da velocidade.
Grade CSS no DevTools
Como projetamos e implementamos o suporte a ferramentas de grade CSS no DevTools.
Suporte a CSS-in-JS no DevTools
Como oferecemos suporte a CSS-in-JS no DevTools e qual é a diferença entre ele e o CSS normal.
Layout
Como usar calc()
Especifique tamanhos no CSS usando uma combinação de unidades.
Um evento para uma posição fixa do CSS
Registre mensagens e execute o JavaScript.
Tornar o conteúdo recolhido acessível
Descubra "hidden=until-found", um valor de atributo, que pode garantir que o conteúdo nas seções do acordeão possa ser encontrado e vinculado.
Animações na Web
API Web Animations
A API Web Animations fornece primitivos poderosos para descrever animações imperativas do JavaScript.
Vários efeitos de animação
A propriedade animação-composição permite controlar o que deve acontecer quando várias animações afetarem a mesma propriedade simultaneamente.
Curvas de animação complexas com linear()
linear() é uma função de easing CSS que interpola linearmente entre seus pontos, permitindo que você recrie os efeitos de salto e mola.
Animações de rolagem
Trabalhe com linhas do tempo de rolagem e de visualização para criar animações de rolagem de maneira declarativa.
CURSO
Conheça o design responsivo
Leia uma história do design responsivo e conheça os princípios básicos dos layouts responsivos. Você vai aprender sobre imagens responsivas, tipografia, acessibilidade e muito mais.
CURSO
Aprenda sobre CSS
Você aprenderá os fundamentos do CSS, como o modelo de box, cascata e especificidade, flexbox, grade e Z-index. Além disso, você vai aprender sobre funções, propriedades lógicas e muito mais para aprimorar suas habilidades de desenvolvimento de front-end.