Referência de recursos CSS

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

Descubra novos fluxos de trabalho nesta referência abrangente dos recursos do Chrome DevTools relacionados à visualização e à mudança de CSS.

Consulte Ver e mudar CSS para aprender o básico.

Selecione um elemento

O painel Elementos do DevTools permite visualizar ou mudar o CSS de um elemento por vez.

Na captura de tela, o elemento h1 destacado em azul na árvore DOM é o elemento selecionado. À direita, os estilos do elemento são mostrados na guia Estilos. À esquerda, o elemento é destacado na janela de visualização, mas apenas porque o mouse está passando por cima dele na árvore DOM.

Consulte Ver o CSS de um elemento para um tutorial.

Há várias maneiras de selecionar um elemento:

• Na janela de visualização, clique com o botão direito do mouse no elemento e selecione Inspecionar.
• Nas DevTools, clique em Selecionar um elemento ou pressione Command+Shift+C (Mac) ou Control+Shift+C (Windows, Linux) e clique no elemento na janela de visualização.
• No DevTools, clique no elemento na árvore DOM.
• No DevTools, execute uma consulta como document.querySelector('p') no Console, clique com o botão direito do mouse no resultado e selecione Mostrar no painel "Elementos".

Ver CSS

Use as guias Elementos > Estilos e Calculado para ver as regras de CSS e diagnosticar problemas de CSS.

Navegar com links

A guia Estilos mostra links em vários lugares para vários outros lugares, incluindo, entre outros:

• Ao lado das regras CSS, para folhas de estilo e fontes CSS. Esses links abrem o painel Fontes. Se a folha de estilo estiver minimizada, consulte Tornar um arquivo minimizado legível.
• Nas seções Herdado de ..., para elementos pai.
• Em chamadas var(), para declarações de propriedade personalizada.
• Em propriedades abreviadas de animation, para @keyframes.
• Links Saiba mais nas dicas de ferramentas da documentação.
• e muito mais.

Confira alguns deles:

Os links podem ter estilos diferentes. Se você não tiver certeza se algo é um link, clique nele para descobrir.

Ver dicas com documentação, especificidade e valores de propriedades personalizadas do CSS

Elementos > Estilos mostra dicas com informações úteis quando você passa o cursor sobre elementos específicos.

Acessar a documentação do CSS

Para ver uma dica com uma breve descrição do CSS, passe o cursor sobre o nome da propriedade na guia Estilos.

Observação:o DevTools extrai as descrições dos tooltips de Dados personalizados do VS Code.

Clique em Saiba mais para acessar uma Referência de CSS da MDN sobre essa propriedade.

Para desativar as dicas, marque Não mostrar.

Para reativar, marque Configurações > Preferências > Elementos > Mostrar dica de ferramenta de documentação CSS.

Ver especificidade do seletor

Passe o cursor sobre um seletor para ver uma dica com o peso da especificidade.

Ver os valores das propriedades personalizadas

Passe o cursor sobre um --custom-property para ver o valor dele em uma dica.

Ver CSS inválido, substituído, inativo e outros

A guia Estilos reconhece vários tipos de problemas de CSS e os destaca de diferentes maneiras.

Consulte Entender o CSS na guia "Estilos".

Ver apenas o CSS que é aplicado a um elemento

A guia Estilos mostra todas as regras aplicadas a um elemento, incluindo declarações que foram substituídas. Quando você não tiver interesse em declarações substituídas, use a guia Calculado para ver apenas o CSS que está sendo aplicado a um elemento.

1. Selecione um elemento.
2. Acesse a guia Calculado no painel Elementos.

Marque a caixa de seleção Mostrar tudo para ver todas as propriedades.

Consulte Entender o CSS na guia "Calculado".

Ver propriedades do CSS em ordem alfabética

Use a guia Calculado. Consulte Ver apenas o CSS que é aplicado a um elemento.

Ver propriedades CSS herdadas

Marque a caixa de seleção Mostrar tudo na guia Calculado. Consulte Ver apenas o CSS que é realmente aplicado a um elemento.

Como alternativa, role a guia Estilos e encontre seções chamadas Inherited from <element_name>.

Ver regras-arroba do CSS

As regras-arroba são instruções CSS que permitem controlar o comportamento do CSS. Elementos > Estilos mostra as seguintes regras-arroba em seções dedicadas:

• @property
• @supports
• @scope
• @font-palette-values
• @position-try

Ver regras-arroba @property

A at-regra @property do CSS permite definir propriedades personalizadas do CSS de forma explícita e registrá-las em uma folha de estilo sem executar JavaScript.

Passe o cursor sobre o nome dessa propriedade na guia Estilos para ver um card de informações com o valor, os descritores e um link para o registro na seção recolhível @property na parte de baixo da guia Estilos.

Para editar uma regra @property, clique duas vezes no nome ou valor dela.

Ver regras-arroba @supports

A guia Estilos mostra as regras-arroba @supports do CSS se elas forem aplicadas a um elemento. Por exemplo, inspecione o seguinte elemento:

Se o navegador for compatível com a função lab(), o elemento será verde. Caso contrário, ele será roxo.

Observação: no momento da redação, apenas o Safari oferece suporte ao espaço de cores CIELAB.

Ver regras-arroba @scope

A guia Estilos mostra as regras-arroba @scope do CSS se elas forem aplicadas a um elemento.

As novas regras-@ @scope fazem parte da especificação de nível 6 de herança e cascata do CSS. Com elas, é possível definir o escopo de estilos CSS, ou seja, aplicar estilos explicitamente a elementos específicos.

Observação: o recurso de regra at @scope é experimental. Para testar, ative a flag Recursos experimentais da plataforma da Web em chrome://flags/#enable-experimental-web-platform-features. Caso contrário, a próxima prévia não vai funcionar.

Confira a regra @scope na seguinte prévia:

1. Inspecione o texto no card da prévia.
2. Na guia Estilos, encontre a regra @scope.

Neste exemplo, a regra @scope substitui a declaração global background-color do CSS para todos os elementos <p> dentro de elementos com uma classe card.

Para editar a regra @scope, clique duas vezes nela.

Ver regras-arroba @font-palette-values

A at-regra @font-palette-values do CSS permite personalizar os valores padrão da propriedade font-palette. Elementos > Estilos mostra essa regra at em uma seção dedicada.

Confira a seção @font-palette-values na próxima prévia:

1. Inspecione a segunda linha de texto na prévia.
2. Em Estilos, encontre a seção @font-palette-values.

Neste exemplo, os valores da paleta de fontes --New substituem os padrões da fonte colorida.

Para editar os valores personalizados, clique duas vezes neles.

Ver regras-arroba @position-try

A regra de CSS @position-try e a propriedade position-try-options permitem definir posições de âncora alternativas para elementos. Para saber mais, consulte Apresentação da API de posicionamento de âncora CSS.

Elementos > Estilos resolve e vincula o seguinte:

• position-try-options valores de propriedade para uma seção @position-try --name dedicada.
• Valores da propriedade position-anchor e argumentos anchor() para os elementos correspondentes com atributos popovertarget.

Inspecione os valores position-try-options e as seções @position-try na próxima prévia:

Demonstração usando âncora com popover

1. Na prévia, abra o submenu. Para isso, clique em SUA CONTA e em VITRINE.
2. Inspecione o elemento com id="submenu" na prévia.
3. Em Estilos, encontre a propriedade position-try-options e clique no valor --bottom dela. A guia Estilos leva você à seção @position-try correspondente.
4. Clique no link do valor position-anchor ou nos mesmos argumentos anchor(). O painel Elementos seleciona o elemento com o atributo popovertarget correspondente, e a guia Estilos mostra o CSS do elemento.

Para editar valores, clique duas vezes neles.

Ver o modelo de caixa de um elemento

Para conferir o modelo de caixa de um elemento, acesse a guia Estilos e clique no botão Mostrar barra lateral na barra de ações.

Para mudar um valor, clique duas vezes nele.

Pesquisar e filtrar o CSS de um elemento

Use a caixa Filtro nas guias Estilos e Calculado para pesquisar propriedades ou valores específicos de CSS.

Para pesquisar também propriedades herdadas na guia Calculado, marque a caixa de seleção Mostrar tudo.

Para navegar na guia Calculado, agrupe as propriedades filtradas em categorias recolhíveis marcando Grupo.

Emular uma página em foco

Se você mudar o foco da página para o DevTools, alguns elementos de sobreposição serão ocultados automaticamente se forem acionados pelo foco. Por exemplo, listas suspensas, menus ou seletores de data. A opção check_box Emular uma página em foco permite depurar um elemento como se ele estivesse em foco.

Atenção: com essa opção ativada, o document.visibilityState é definido como visible, e o evento visibilitychange não é acionado. Para mais informações, consulte a API Page Visibility.

Tente emular uma página em foco nesta página de demonstração:

1. Foque o elemento de entrada. Outro elemento aparece abaixo dele.
2. Abra o DevTools. A janela do DevTools agora está em foco em vez da página, então o elemento desaparece novamente.
3. Em Elementos > Estilos, clique em :hov, marque check_box Emular uma página focada e verifique se o elemento de entrada está selecionado. Agora você pode inspecionar o elemento abaixo dele.

Você também pode encontrar a mesma opção no painel Renderização.

Para descobrir mais maneiras de congelar um elemento, consulte Congelar a tela e inspecionar elementos que desaparecem.

Alternar uma pseudoclasse

Para ativar ou desativar uma pseudoclasse:

1. Selecione um elemento.
2. No painel Elementos, acesse a guia Estilos.
3. Clique em :hov.
4. Marque a pseudoclasse que você quer ativar.

Neste exemplo, você pode ver que o DevTools aplica a declaração background-color ao elemento, mesmo que ele não esteja sendo passado com o cursor.

A guia Estilos mostra as seguintes pseudoclasses para todos os elementos:

• :active
• :focus
• :focus-within
• :target
• :hover
• focus-visible

Além disso, alguns elementos podem ter pseudoclasses próprias. Quando você seleciona um elemento desse tipo, a guia Estilos mostra uma seção Forçar estado específico do elemento que pode ser expandida para ativar pseudoclasses específicas do elemento.

Consulte Adicionar um pseudostate a uma classe para um tutorial interativo.

Ver pseudoelementos de destaque herdados

Com os pseudoelementos, é possível estilizar partes específicas dos elementos. Os pseudoelementos de destaque são partes do documento com o status "selecionado" e são estilizados como "destacados" para indicar esse status ao usuário. Por exemplo, esses pseudoelementos são ::selection, ::spelling-error, ::grammar-error e ::highlight.

Conforme mencionado na especificação, quando vários estilos entram em conflito, a cascata determina o estilo vencedor.

Observação:para ativar esse recurso, execute o Chrome com a flag --enable-blink-features=HighlightInheritance.

Para entender melhor a herança e a prioridade das regras, confira os pseudoelementos de destaque herdados:

1. Analise o texto abaixo.

   Herdei o estilo do pseudoelemento de destaque do meu elemento pai. Me selecione!

2. Selecione uma parte do texto acima.

3. Na guia Estilos, role para baixo até encontrar a seção Inherited from ::selection pseudo of....

Ver camadas em cascata

As camadas em cascata permitem um controle mais explícito dos arquivos CSS para evitar conflitos de especificidade de estilo. Isso é útil para grandes bases de código, sistemas de design e ao gerenciar estilos de terceiros em aplicativos.

Para ver as camadas em cascata, inspecione o próximo elemento e abra Elementos > Estilos.

Na guia Estilos, confira as três camadas em cascata e os estilos delas: page, component e base.

Para conferir a ordem das camadas, clique no nome da camada ou no botão Alternar visualização das camadas de CSS.

A camada page tem a maior especificidade. Portanto, o plano de fundo do elemento é verde.

Ver uma página no modo de impressão

Para ver uma página no modo de impressão:

1. Abra o Command Menu (link em inglês).
2. Comece a digitar Rendering e selecione Show Rendering.
3. No menu suspenso Emular mídia CSS, selecione print.

Ver CSS usado e não usado com a guia "Cobertura"

A guia "Cobertura" mostra qual CSS uma página realmente usa.

1. Pressione Command+Shift+P (Mac) ou Control+Shift+P (Windows, Linux, ChromeOS) enquanto o DevTools está em foco para abrir o menu de comandos.

2. Comece a digitar coverage.

   

3. Selecione Mostrar cobertura. A guia "Cobertura" aparece.

   

4. Clique em Atualizar. A página é recarregada, e a guia Cobertura oferece uma visão geral de quanto CSS (e JavaScript) é usado de cada arquivo carregado pelo navegador.

   

   O verde representa o CSS usado. Vermelho representa CSS não utilizado.

5. Clique em um arquivo CSS para ver um detalhamento linha por linha do CSS usado na prévia acima.

   

   Na captura de tela, as linhas 55 a 57 e 65 a 67 de devsite-google-blue.css não são usadas, enquanto as linhas 59 a 63 são.

Forçar o modo de visualização de impressão

Consulte Forçar o DevTools no modo de visualização de impressão.

Copiar CSS

Em um único menu suspenso na guia Estilos, é possível copiar regras, declarações, propriedades e valores de CSS separados.

Além disso, é possível copiar propriedades CSS na sintaxe JavaScript. Essa opção é útil se você estiver usando bibliotecas CSS-in-JS.

Para copiar CSS:

1. Selecione um elemento.
2. Na guia Elementos > Estilos, clique com o botão direito do mouse em uma propriedade CSS.

3. Selecione uma das seguintes opções no menu suspenso:

   • Declaração de direitos autorais. Copia a propriedade e o valor dela na sintaxe CSS: css property: value;
   • Copiar propriedade. Copia apenas o nome property.
   • Copiar valor. Copia apenas o value.
   • Copiar regra. Copia toda a regra de CSS: css selector[, selector] { property: value; property: value; ... }
   • Copiar declaração como JS. Copia a propriedade e o valor dela na sintaxe JavaScript: js propertyInCamelCase: 'value'
   • Copiar todas as declarações. Copia todas as propriedades e os valores delas na regra CSS: css property: value; property: value; ...

   • Copiar todas as declarações como JS. Copia todas as propriedades e os valores na sintaxe JavaScript: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

   • Copiar todas as mudanças de CSS. Copia as mudanças feitas na guia Estilos em todas as declarações.

   • Ver o valor calculado. Abre a guia Calculado.

Mudar CSS

Esta seção lista todas as maneiras de mudar o CSS em Elementos > Estilos.

Também é possível:

• Substituir CSS em carregamentos de página.
• Salve o CSS modificado nas suas fontes locais em um espaço de trabalho.

Mudar o CSS com o preenchimento de código

Para testar combinações mais complexas de propriedades CSS, como gradientes ou sombras de caixa, sem precisar lembrar a sintaxe exata, ou para criar rapidamente layouts de grade e flexíveis, contando com várias propriedades relacionadas, comece a digitar uma propriedade CSS e use a conclusão de código.

Adicionar uma declaração CSS a um elemento

Como a ordem das declarações afeta a estilização de um elemento, é possível adicioná-las de diferentes maneiras:

• Adicione uma declaração inline. Equivalente a adicionar um atributo style ao HTML do elemento.
• Adicionar uma declaração a uma regra de estilo.

Qual fluxo de trabalho você deve usar? Na maioria dos cenários, é recomendável usar o fluxo de trabalho de declaração inline. As declarações inline têm maior especificidade do que as externas. Portanto, o fluxo de trabalho inline garante que as mudanças tenham efeito no elemento como esperado. Consulte Tipos de seletores para mais informações sobre especificidade.

Se você estiver depurando os estilos de um elemento e precisar testar especificamente o que acontece quando uma declaração é definida em lugares diferentes, use o outro fluxo de trabalho.

Adicionar uma declaração inline

Para adicionar uma declaração inline:

1. Selecione um elemento.
2. Na guia Estilos, clique entre os colchetes da seção element.style. O cursor é focado, permitindo que você insira texto.
3. Digite um nome de propriedade e pressione Enter.

4. Insira um valor válido para essa propriedade e pressione Enter. Na Árvore do DOM, você pode ver que um atributo style foi adicionado ao elemento.

   

   Na captura de tela, as propriedades margin-top e background-color foram aplicadas ao elemento selecionado. Na árvore DOM, é possível ver as declarações refletidas no atributo style do elemento.

Adicionar uma declaração a uma regra de estilo

Para adicionar uma declaração a uma regra de estilo atual:

1. Selecione um elemento.
2. Na guia Estilos, clique entre os colchetes da regra de estilo a que você quer adicionar a declaração. O cursor é focado, permitindo que você insira texto.
3. Digite um nome de propriedade e pressione Enter.
4. Insira um valor válido para essa propriedade e pressione Enter.

Na captura de tela, uma regra de estilo recebe a nova declaração border-bottom-style:groove.

Mudar o nome ou o valor de uma declaração

Clique duas vezes no nome ou valor de uma declaração para mudar. Consulte Mudar valores enumeráveis com atalhos de teclado para saber como aumentar ou diminuir rapidamente um valor em 0, 1, 1, 10 ou 100 unidades.

Mudar valores enumeráveis com atalhos do teclado

Ao editar um valor enumerável de uma declaração, por exemplo, font-size, use os seguintes atalhos de teclado para aumentar o valor em uma quantidade fixa:

• Option+Cima (Mac) ou Alt+Cima (Windows, Linux) para aumentar em 0,1.
• Para cima para mudar o valor em 1 ou em 0, 1 se o valor atual estiver entre -1 e 1.
• Shift+Seta para cima para aumentar em 10.
• Shift+Command+Seta para cima (Mac) ou Control+Shift+Page Up (Windows, Linux) para aumentar o valor em 100.

A decrementação também funciona. Basta substituir cada instância de Up mencionada anteriormente por Down.

Mudar valores de duração

Descontinuado: esse recurso foi descontinuado no Chrome 123. Para reativar temporariamente, desmarque settings Configurações > Experimentos > check_box Descontinuar a ferramenta de criação de CSS <length> na guia "Estilos". Deixe seu feedback em crbug/1522657.

Use o ponteiro para mudar qualquer propriedade com comprimento, como largura, altura, padding, margem ou borda.

Para mudar a unidade de comprimento:

1. Passe o cursor sobre o nome da unidade e observe que ele está sublinhado.

2. Clique no nome da unidade para selecionar uma opção no menu suspenso.

Para mudar o valor de duração:

1. Passe o cursor sobre o valor da unidade e observe que o ponteiro muda para uma seta horizontal de duas pontas.

2. Arraste na horizontal para aumentar ou diminuir o valor.

Para ajustar o valor em 10, pressione Shift enquanto arrasta.

Adicionar uma classe a um elemento

Para adicionar uma classe a um elemento:

1. Selecione o elemento na árvore DOM.
2. Clique em .cls.
3. Digite o nome da turma na caixa Adicionar turma.
4. Pressione Enter.

Emular preferências de tema claro e escuro e ativar o modo escuro automático

Para ativar ou desativar o modo escuro automático ou emular a preferência do usuário por temas claros ou escuros:

1. Na guia Elementos > Estilos, clique em Alternar emulações de renderização comuns.

2. Selecione uma das seguintes opções na lista suspensa:

   • prefers-color-scheme: light. Indica que o usuário prefere o tema claro.
   • prefers-color-scheme: dark. Indica que o usuário prefere o tema escuro.
   • Modo escuro automático. Mostra sua página no modo escuro, mesmo que você não o tenha implementado. Além disso, define prefers-color-scheme como dark automaticamente.

Esse menu suspenso é um atalho para as opções Emular recurso de mídia CSS prefers-color-scheme e Ativar modo escuro automático da guia Renderização.

Alternar uma turma

Para ativar ou desativar uma classe em um elemento:

1. Selecione o elemento na árvore DOM.
2. Abra a seção Classes de elementos. Consulte Adicionar uma classe a um elemento. Abaixo da caixa Adicionar nova classe, estão todas as classes que estão sendo aplicadas a esse elemento.
3. Marque ou desmarque a caixa de seleção ao lado da turma que você quer ativar ou desativar.

Adicionar uma regra de estilo

Para adicionar uma nova regra de estilo:

1. Selecione um elemento.
2. Clique em Nova regra de estilo . As DevTools inserem uma nova regra abaixo da regra element.style.

Na captura de tela, o DevTools adiciona a regra de estilo h1.devsite-page-title depois de clicar em Nova regra de estilo.

Escolha a folha de estilo em que você quer adicionar uma regra

Ao adicionar uma nova regra de estilo, clique e mantenha pressionado Nova regra de estilo para escolher a folha de estilo em que a regra será adicionada.

Ativar/desativar uma declaração

Para ativar ou desativar uma única declaração:

1. Selecione um elemento.
2. Na guia Estilos, passe o cursor sobre a regra que define a declaração. As caixas de seleção aparecem ao lado de cada declaração.
3. Marque ou desmarque a caixa de seleção ao lado da declaração. Quando você limpa uma declaração, o DevTools a risca para indicar que ela não está mais ativa.

Na captura de tela, a propriedade color do elemento selecionado no momento está desativada.

Editar os pseudoelementos ::view-transition durante uma animação

Consulte a seção correspondente em Animações.

Para mais informações, consulte Transições suaves e simples com a API View Transitions.

Alinhar itens da grade e o conteúdo deles com o Editor de grade

Consulte a seção correspondente em Inspecionar grade CSS.

Mudar cores com o seletor de cores

Consulte Inspecionar e depurar cores HD e não HD com o seletor de cores.

Mudar o valor do ângulo com o relógio de ângulo

O Angle Clock oferece uma GUI para mudar <angle>s em valores de propriedades CSS.

Para abrir o Relógio de ângulo:

1. Selecione um elemento com declaração de ângulo.

2. Na guia Estilos, encontre a declaração transform ou background que você quer mudar. Clique na caixa Visualização do ângulo ao lado do valor do ângulo.

   

   Os pequenos relógios à esquerda de -5deg e 0.25turn são as prévias de ângulo.

3. Clique na prévia para abrir o Relógio de ângulo.

   

4. Para mudar o valor do ângulo, clique no círculo do Relógio de ângulo ou role o mouse para aumentar / diminuir o valor em 1.

5. Há mais atalhos de teclado para mudar o valor do ângulo. Saiba mais nos atalhos de teclado do painel "Estilos".

Mudar as sombras da caixa e do texto com o Editor de sombras

O Shadow Editor oferece uma GUI para mudar as declarações CSS text-shadow e box-shadow.

Para mudar as sombras com o Editor de sombras:

1. Selecione um elemento com uma declaração de sombra. Por exemplo, selecione o próximo elemento.

2. Na guia Estilos, encontre um ícone de sombra ao lado da declaração text-shadow ou box-shadow.

   

3. Clique no ícone de sombra para abrir o Editor de sombras.

   

4. Mude as propriedades de sombra:

   • Tipo (somente para box-shadow). Escolha Início ou Inserção.
   • Deslocamentos X e Y. Arraste o ponto azul ou especifique valores.
   • Desfoque. Arraste o controle deslizante ou especifique um valor.
   • Dispersão (somente para box-shadow). Arraste o controle deslizante ou especifique um valor.

5. Observe as mudanças aplicadas ao elemento.

Editar animações e tempos de transição com o Easing Editor

O Editor de suavização oferece uma GUI para mudar os valores de transition-timing-function e animation-timing-function.

Para abrir o Editor de suavização:

1. Selecione um elemento com uma declaração de função de tempo, como o elemento <body> nesta página.
2. Na guia Estilos, encontre o ícone roxo ao lado das declarações transition-timing-function, animation-timing-function ou da propriedade abreviada transition.
3. Clique no ícone para abrir o Editor de suavização:

Usar predefinições para ajustar os tempos

Para ajustar as marcações de tempo com um clique, use as predefinições no Editor de suavização:

1. No Easing Editor, para definir um valor de palavra-chave, clique em um dos botões do seletor:
   • linear
   • ease-in-out
   • ease-in
   • ease-out

2. No Seletor de predefinições, clique nos botões ou para escolher uma das seguintes predefinições:

   • Predefinições lineares: elastic, bounce ou emphasized.
   • Predefinições de Bezier cúbico:

Palavra-chave de tempo	Predefinição	Bezier cúbico
ease-in-out	Entrada/saída, seno	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	Entrada e saída, quadrática	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	Entrada e saída cúbica	cubic-bezier(0.65, 0.05, 0.36, 1)
	Rápido para fora, lento para dentro	cubic-bezier(0.4, 0, 0.2, 1)
	Entrada, saída, volta	cubic-bezier(0.68, -0.55, 0.27, 1.55)
ease-in	In, Sine	cubic-bezier(0.47, 0, 0.75, 0.72)
	Em, Quadrática	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	In, Cubic	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	Entrada, volta	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	Saída rápida, entrada linear	cubic-bezier(0.4, 0, 1, 1)
ease-out	Out, Sine	cubic-bezier(0.39, 0.58, 0.57, 1)
	Saída, quadrática	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Out, Cubic	cubic-bezier(0.22, 0.61, 0.36, 1)
	Saída linear, entrada lenta	cubic-bezier(0, 0, 0.2, 1)
	Fora, volta	cubic-bezier(0.18, 0.89, 0.32, 1.28)

Configurar tempos personalizados

Para definir valores personalizados para funções de tempo, use os pontos de controle nas linhas:

• Para funções lineares, clique em qualquer lugar da linha para adicionar um ponto de controle e arraste-o. Clique duas vezes para remover o ponto.

  

• Para funções de Bézier cúbico, arraste um dos pontos de controle.

  

Qualquer mudança aciona uma animação de bola na Prévia na parte de cima do editor.

(Experimental) Copiar mudanças de CSS

Observação:para ativar esse recurso experimental, marque Sincronizar mudanças de CSS na guia "Estilos" em Configurações > Experimentos e recarregue o DevTools.

Com esse experimento ativado, a guia Estilos destaca as mudanças de CSS em verde.

Para copiar uma única mudança de declaração CSS, passe o cursor sobre a declaração destacada e clique no botão Copiar.

Para copiar todas as mudanças de CSS em todas as declarações de uma vez, clique com o botão direito do mouse em qualquer declaração e selecione Copiar todas as mudanças de CSS.

Além disso, é possível acompanhar as mudanças feitas na guia Mudanças.