Referência de recursos CSS

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

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

Consulte Visualizar e alterar 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 Styles. À esquerda, o elemento é destacado na viewport, mas apenas porque o mouse está passando sobre ele na árvore DOM.

Consulte Visualizar o CSS de um elemento para conferir um tutorial.

Há muitas maneiras de selecionar um elemento:

• Na janela de visualização, clique com o botão direito do mouse no elemento e selecione Inspecionar.
• Nas Ferramentas do desenvolvedor, clique em Selecionar um elemento ou pressione Command+Shift+C (Mac) ou Control+Shift+C (Windows, Linux) e clique no elemento na viewport.
• Nas Ferramentas do desenvolvedor, 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 Revelar no painel "Elements".

Conferir o CSS

Use as guias Elements > Styles e Computed para conferir as regras de CSS e diagnosticar problemas.

Navegar com links

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

• Ao lado de regras CSS, folhas de estilo e origens CSS. Esses links abrem o painel Origens. Se a folha de estilo for minimizada, consulte Como tornar um arquivo minimizado legível.
• Nas seções Herdado de ..., para elementos pai.
• Em chamadas var(), para declarações de propriedade personalizada.
• Em animation propriedades abreviadas, 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.

Confira dicas com documentação de CSS, especificidade e valores de propriedade personalizada

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

Confira 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 Styles.

Observação:o DevTools extrai as descrições das dicas de ferramentas dos dados personalizados do VS Code.

Clique em Saiba mais para acessar uma referência CSS do MDN sobre essa propriedade.

Para desativar as dicas, marque Não mostrar.

Para ativá-las novamente, confira Configurações > Preferências > Elementos > Mostrar dicas da documentação de CSS.

Ver especificidade do seletor

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

Ver os valores das propriedades personalizadas

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

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

A guia Estilos reconhece muitos tipos de problemas de CSS e os destaca de maneiras diferentes.

Consulte Entender o CSS na guia "Styles".

Visualizar somente o CSS que foi realmente aplicado a um elemento

A guia Estilos mostra todas as regras que se aplicam a um elemento, incluindo declarações que foram substituídas. Quando você não quiser usar declarações substituídas, use a guia Calculado para visualizar somente o CSS que está sendo aplicado a um elemento.

1. Selecione um elemento.
2. Acesse a guia Computed no painel Elements.

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

Consulte Entender o CSS na guia "Computed".

Mostrar propriedades CSS em ordem alfabética

Use a guia Computed. Consulte Visualizar apenas o CSS que é aplicado a um elemento.

Ver propriedades CSS herdadas

Marque a caixa de seleção Mostrar tudo na guia Processado. Consulte Visualizar apenas o CSS que foi realmente aplicado a um elemento.

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

Conferir regras CSS

As regras at são instruções CSS que permitem controlar o comportamento do CSS. Elements > Styles mostra as seguintes regras de at-rules em seções dedicadas:

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

Acessar regras @property

O @property CSS at-rule permite definir propriedades personalizadas do CSS explicitamente e registrá-las em uma folha de estilo sem executar nenhum JavaScript.

Passe o cursor sobre o nome dessa propriedade na guia Styles para ver uma dica de ferramenta com o valor, os descritores e um link para o registro da propriedade na seção @property colapsável na parte de baixo da guia Styles.

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

Acessar regras @supports

A guia Estilos mostra as regras do CSS @supports 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 ficará verde. Caso contrário, será roxo.

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

Ver @scope nas regras

A guia Styles mostra as regras @scope de CSS se elas forem aplicadas a um elemento.

Os novos @scope at-rules fazem parte da especificação de nível 6 de hierarquia e herança do CSS. Essas regras permitem que você defina o escopo dos estilos CSS, ou seja, aplique estilos explicitamente a elementos específicos.

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

Confira a regra @scope na seguinte visualização:

1. Inspecione o texto no card na visualização.
2. Na guia Estilos, encontre a regra @scope.

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

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

Ver @font-palette-values nas regras

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

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

1. Inspecione a segunda linha de texto na visualização.
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 @position-try nas regras

A regra de CSS @position-try com a propriedade position-try-options permite definir posições de âncora alternativas para elementos. Para saber mais, consulte Introdução à API de posicionamento de âncora do CSS.

Elementos > Estilos resolve e vincula o seguinte:

• valores da propriedade position-try-options para uma seção @position-try --name dedicada.
• Valores de 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 visualização:

Demonstração usando âncora com popover

1. Na visualização, abra o submenu, ou seja, clique em SUA CONTA e, em seguida, em VISÃO DA LOJA.
2. Inspecione o elemento com id="submenu" na visualização.
3. Em Estilos, encontre a propriedade position-try-options e clique no valor --bottom. 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 Elements seleciona o elemento com o atributo popovertarget correspondente, e a guia Styles mostra o CSS do elemento.

Para editar valores, clique duas vezes neles.

Visualizar o modelo de caixa de um elemento

Para conferir o modelo de caixa de um elemento, acesse a guia Styles e clique no botão Show sidebar na barra de ações.

Para alterar um valor, clique duas vezes nele.

Pesquisar e filtrar o CSS de um elemento

Use a caixa Filtro nas guias Styles e Computed para pesquisar propriedades ou valores CSS específicos.

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

Para navegar pela guia Computed, agrupe as propriedades filtradas em categorias colapsáveis marcando Group.

Emular uma página em foco

Se você mudar o foco da página para o DevTools, alguns elementos de sobreposição vão se ocultar automaticamente se forem acionados pelo foco. Por exemplo, listas suspensas, menus ou seletores de data. A opção check_box Emulate a focused page permite depurar esse elemento como se ele estivesse em foco.

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

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

1. Focar 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 Elements > Styles, clique em :hov, marque check_box Emulate a focused page e verifique se o elemento de entrada está selecionado. Agora você pode inspecionar o elemento abaixo dele.

Também é possível 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.

Ativar 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, é possível ver que as Ferramentas do desenvolvedor aplicam a declaração background-color ao elemento, mesmo que ele não esteja sendo apontado.

A guia Styles 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 desses elementos, a guia Styles mostra uma seção Force specific element state que pode ser expandida para ativar as pseudoclasses específicas do elemento.

Consulte Adicionar um pseudoestado a uma classe para conferir um tutorial interativo.

Ver pseudoelementos de destaque herdados

Os pseudoelementos permitem definir o estilo de partes específicas dos elementos. Os pseudoelementos de destaque são partes do documento com status "selecionado" e têm o estilo "destacado" para indicar esse status ao usuário. Por exemplo, esses pseudoelementos são ::selection, ::spelling-error, ::grammar-error e ::highlight.

Como mencionado na especificação (link em inglês), 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, você pode conferir os pseudoelementos de destaque herdados:

1. Inspecione o texto abaixo.

   Herdei o estilo do pseudoelemento de destaque do pai. Selecione-me!

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 conferir as camadas em cascata, inspecione o próximo elemento e abra Elementos > Estilos.

Na guia Styles, 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 Ativar a visualização das camadas 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.
2. Comece a digitar Rendering e selecione Show Rendering.
3. No menu suspenso Emulate CSS Media, selecione print.

Conferir o CSS usado e não utilizado na guia "Cobertura"

A guia "Cobertura" mostra qual CSS uma página 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 comando.

2. Comece a digitar coverage.

   

3. Selecione Mostrar cobertura. A guia "Cobertura" vai aparecer.

   

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

   

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

5. Clique em um arquivo CSS para ver um detalhamento, linha por linha, de qual CSS ele usa na visualização 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 usadas.

Forçar 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 Styles, é possível copiar regras, declarações, propriedades e valores do 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 Elements > Styles, clique com o botão direito do mouse em uma propriedade CSS.

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

   • Copiar declaração. 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 CSS: css selector[, selector] { property: value; property: value; ... }
   • Copiar a 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 de CSS: css property: value; property: value; ...

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

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

   • Visualize o valor calculado. Vai para a guia Computed.

Alterar CSS

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

Também é possível:

• Modifique o CSS em todos os carregamentos de página.
• Salve o CSS modificado nas origens locais em um espaço de trabalho.

Adicionar uma declaração CSS a um elemento

Como a ordem das declarações afeta o estilo de um elemento, é possível adicionar declarações de várias 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 in-line. 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 seletor para saber mais detalhes.

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

Adicionar uma declaração in-line

Para adicionar uma declaração inline:

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

4. Digite um valor válido para essa propriedade e pressione Enter. Na Árvore DOM, um atributo style foi adicionado ao elemento.

   

   Na captura de tela, as propriedades margin-top e background-color foram aplicadas ao elemento selecionado. Em Á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:

1. Selecione um elemento.
2. Na guia Styles, 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 o nome de uma propriedade e pressione Enter.
4. Digite 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 fazer alterações. Consulte Alterar valores enumeráveis com atalhos de teclado para saber como incrementar ou decrementar 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 incrementar o valor em uma quantidade fixa:

• Option+Up (Mac) ou Alt+Up (Windows, Linux) para incrementar em 0,1.
• Para cima para mudar o valor em 1 ou 0, 1 se o valor atual estiver entre -1 e 1.
• Shift+Seta para cima para aumentar em 10.
• Shift+Command+Up (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.

Alterar valores de comprimento

Descontinuado: esse recurso foi descontinuado no Chrome 123. Para reativá-lo temporariamente, limpe as configurações Configurações > Experimentos > check_box Desativar a ferramenta de criação de CSS <length> na guia Estilos. Deixe seu feedback em crbug/1522657.

Você pode usar 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 da 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 horizontalmente para aumentar ou diminuir o valor.

Para ajustar o valor em 10, mantenha pressionada a tecla Shift ao arrastar.

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 Add New Class.
4. Pressione Enter.

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

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

1. Na guia Elements > Styles, clique em Toggle common rendering emulations.

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 a 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 Emulate recurso de mídia CSS prefers-color-scheme e Ativar modo escuro automático da guia Renderização.

Ativar ou desativar 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 Add New Class estão todas as classes que estão sendo aplicadas a esse elemento.
3. Marque a caixa de seleção ao lado da classe 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 . O DevTools insere 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.

Escolher em qual folha de estilo adicionar uma regra

Ao adicionar uma nova regra de estilo, clique e mantenha pressionada a opção Nova regra de estilo para escolher a folha de estilo em que a regra de estilo será adicionada.

Ativar ou desativar uma declaração

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

1. Selecione um elemento.
2. Na guia Estilo, 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 está desativada.

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

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

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

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

Consulte a seção correspondente na grade de inspeção do 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 (link em inglês) oferece uma GUI para alterar <angle>s em valores de propriedades CSS.

Para abrir o Relógio angular:

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

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

   

   Os pequenos relógios à esquerda de -5deg e 0.25turn são as visualizações de ângulo.

3. Clique na visualização para abrir o Angle Clock.

   

4. Mude o valor do ângulo clicando no círculo Angle Clock ou role o mouse para aumentar / diminuir o valor do ângulo em 1.

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

Mudar as sombras de caixa e de texto com o editor de sombras

O Editor de sombra fornece uma GUI para alterar as declarações de CSS text-shadow e box-shadow.

Para mudar as sombras com o Shadow Editor, faça o seguinte:

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

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

   

3. Clique no ícone de sombra para abrir o editor de sombra.

   

4. Mude as propriedades da sombra:

   • Type (apenas para box-shadow). Escolha Outset ou Inset.
   • Deslocamentos X e Y. Arraste o ponto azul ou especifique valores.
   • Desfoque. Arraste o controle deslizante ou especifique um valor.
   • Spread (apenas 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 Editor de easing

O Easing Editor oferece uma GUI para mudar os valores de transition-timing-function e animation-timing-function.

Para abrir o Easing Editor:

1. Selecione um elemento com uma declaração de função de tempo, como o elemento <body> desta página.
2. Na guia Styles, 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 Easing Editor:

Usar predefinições para ajustar os horários

Para ajustar os tempos com um clique, use as predefinições no Easing Editor:

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 Cubic Bezier:

Palavra-chave de tempo	Predefinido	Bézier cúbico
ease-in-out	Saiu, seno	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	In Out, Quadratic	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	In Out, Cubic	cubic-bezier(0.65, 0.05, 0.36, 1)
	Saída rápida, entrada lenta	cubic-bezier(0.4, 0, 0.2, 1)
	Para fora, costas	cubic-bezier(0.68, -0.55, 0.27, 1.55)
ease-in	In, Sine	cubic-bezier(0.47, 0, 0.75, 0.72)
	In, Quadratic	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	In, Cubic	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	In, Back	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)
	Quadratico	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, de volta	cubic-bezier(0.18, 0.89, 0.32, 1.28)

Configurar marcações de tempo personalizadas

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

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

  

• Para funções cúbicas de Bezier, arraste um dos pontos de controle.

  

Qualquer mudança aciona uma animação de bola na Visualização, 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 Styles destaca as mudanças de CSS em verde.

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

Para copiar todas as mudanças de CSS nas declarações de uma só 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 Alterações.