Referência de recursos CSS

Descubra novos fluxos de trabalho nessa referência abrangente de recursos do Chrome DevTools relacionados ao como visualizar e alterar 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. Os estilos do elemento são mostrados à direita, na guia Estilos. À esquerda, o elemento é destacado na janela de visualização, mas somente porque o mouse está sobre ele no DOM Árvore.

Consulte Visualizar o CSS de um elemento para acessar 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.
• No DevTools, clique em Select an element. ou pressione Command+Shift+C (Mac) ou Control+Shift+C (Windows e Linux) e clique no elemento na janela de visualização.
• No DevTools, clique no elemento na Árvore do DOM.
• No DevTools, execute uma consulta como document.querySelector('p') no Console, clique com o botão direito do mouse no resultado e, em seguida, selecione Revelar no painel Elementos.

Ver CSS

Use o menu Elementos > Estilos e Calculado para acessar as regras e diagnosticar problemas de CSS.

Navegar com links

A guia Estilos exibe links em vários lugares para vários outros lugares, incluindo, mas não se limitando a:

• Ao lado das regras de CSS, às folhas de estilo e às origens de CSS. Esses links abrem o painel Origens. Se a folha de estilo estiver reduzida, consulte Tornar um arquivo reduzido 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 da documentação.
• e muito mais.

Aqui estão alguns deles destacados:

O estilo dos links pode ser diferente. Caso não tenha certeza se algo é um link, tente clicar 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 de CSS, passe o cursor sobre o nome da propriedade na guia Estilos.

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

Para desativar as dicas, marque Não mostrar.

Para ativá-las novamente, acesse Configurações > Preferências > Elementos > Mostrar dica da documentação do CSS.

Ver especificidade do seletor

Passe o cursor sobre um seletor para ver uma dica com a ponderação de specificity.

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 "Estilos".

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ídos. Quando você não estiver interessado em declarações substituídas, use o método Calculado para visualizar somente 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".

Mostrar propriedades do CSS em ordem alfabética

Use a guia Calculado. Consulte Visualizar somente o CSS que é realmente aplicado a um elemento.

Ver propriedades CSS herdadas

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

Outra opção é rolar a guia Estilos e encontrar seções chamadas Inherited from <element_name>.

Acessar as regras do CSS

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

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

Ver @property nas regras

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 da propriedade na guia Estilos para ver uma dica com o valor, os descritores e um link para o registro dela na seção @property que pode ser recolhida na parte de baixo da guia Estilos.

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

Ver @supports nas regras

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.

Ver @scope nas regras

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

Os novos at-rules de @scope 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.

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

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

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

1. Inspecione a segunda linha do 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 valores padrão da fonte colorida.

Para editar seus valores personalizados, clique duas vezes neles.

Ver @position-try nas regras

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

Elementos > Estilos resolve e vincula o seguinte:

• position-try-options a uma seção dedicada do @position-try --name.
• 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:

.

1. Na visualização, abra o submenu, ou seja, clique em SUA CONTA e depois 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 dela. A guia Estilos leva você à seção @position-try correspondente.
4. Clique no link de 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 os valores, clique duas vezes neles.

Visualizar o modelo de caixa de um elemento

Para visualizar 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 alterar 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 por CSS específico. propriedades ou valores.

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 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 Emulate uma página em foco permite depurar esse elemento como se ele estivesse em foco.

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

1. Concentre-se no elemento de entrada. Outro elemento aparece abaixo dele.
2. Abra o DevTools. Como a janela do DevTools agora está em foco em vez da página, o elemento desaparece de novo.
3. Em Elementos > Estilos, clique em :hov, marque check_box Emulate uma página em foco 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.

Alternar uma pseudoclasse

Para ativar ou desativar uma pseudoclasse, como :active, :focus, :focus-within, :target, :hover, :visited ou focus-visible:

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

Na janela de visualização, é possível observar que o DevTools aplica a declaração background-color ao elemento, mesmo que ele não esteja realmente sobre o que está passando.

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

Ver pseudoelementos de destaque herdados

Com os pseudoelementos, você pode estilizar partes específicas deles. Os pseudoelementos de destaque são partes do documento com um e são estilizados como "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.

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

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

Mostrar 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 Estilos, confira as três camadas em cascata e os estilos delas: page, component e base.

Para visualizar a ordem das camadas, clique no nome da camada ou no botão Alternar visualização de 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 Menu de comando.
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 realmente usa.

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

2. Comece a digitar coverage.

   

3. Selecione Mostrar cobertura. A guia "Cobertura" será exibida.

   

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

   

   A cor 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 Estilos, você pode copiar regras, declarações, propriedades e valores de CSS separados.

Além disso, você pode copiar propriedades CSS na sintaxe JavaScript. Essa opção é útil se você estiver usando bibliotecas CSS em JS.

Para copiar CSS:

1. Selecione um elemento.
2. Na seção Elementos > Estilos, 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 seu valor 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; ... }
   • Copie a declaração como JS. Copia a propriedade e seu valor na sintaxe JavaScript: js propertyInCamelCase: 'value'
   • Copiar todas as declarações. Copia todas as propriedades e seus valores na regra CSS: css property: value; property: value; ...

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

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

   • Visualize o valor calculado. Leva você para a guia Calculado.

Alterar CSS

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

Também é possível:

• Substituir o CSS nos 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 modo como um elemento é estilizado, você pode adicionar declarações no maneiras diferentes:

• Adicione uma declaração in-line. 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 casos, é recomendável usar de declaração de serviço. Declarações em linha têm maior especificidade do que as externas. Portanto, garante que as alterações entrem em vigor no elemento conforme esperado. Consulte Seletor Tipos para mais detalhes.

Se você estiver depurando os estilos de um elemento e precisar testar especificamente o que acontece quando um for definida em locais diferentes, use o outro fluxo de trabalho.

Adicionar uma declaração in-line

Para adicionar uma declaração in-line:

1. Selecione um elemento.
2. Na guia Estilos, clique entre os colchetes da seção element.style. O cursor para você inserir 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, é possível 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 existente:

1. Selecione um elemento.
2. Na guia Estilos, clique entre os colchetes da regra de estilo a que você quer adicionar. declaração. 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 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 no valor de uma declaração para mudá-lo. Consulte Alterar valores enumeráveis com atalhos do teclado para aumentar ou diminuir rapidamente um valor em 0,1 ou 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 com um valor fixo:

• Option + seta para cima (Mac) ou Alt + seta para cima (Windows e Linux) para incrementado em 0,1.
• Para cima para alterar 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 incrementar o valor em 100.

Diminuir também funciona. Basta substituir cada instância de Up mencionada anteriormente por Abaixo.

Alterar valores de comprimento

Você pode usar o ponteiro para alterar qualquer propriedade de comprimento, como largura, altura, preenchimento, margem ou borda.

Para alterar a unidade de comprimento:

1. Passe o cursor sobre o nome do bloco e observe que ele está sublinhado.

2. Clique no nome da unidade para selecionar uma no menu suspenso.

Para mudar o valor do comprimento, faça o seguinte:

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

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 preferências de temas 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 página Elementos > Na guia Estilos, clique em Alternar emulações comuns de renderização.

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: escuro. 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.

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 do botão Adicionar novo Classe sã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 New Style Rule.

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 qual folha de estilo para adicionar a regra de estilo.

Alternar uma declaração

Para ativar ou desativar uma única declaração, faça o seguinte:

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 em seguida a 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 o risca para indicar que ele não está mais ativo.

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 os 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 Relógio angular oferece uma GUI para mudar <angle>s em valores de propriedade CSS.

Para abrir o Relógio angular:

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 relógios pequenos à esquerda de -5deg e 0.25turn são as visualizações de ângulo.

3. Clique na visualização para abrir o Relógio Ângulo.

   

4. Altere o valor do ângulo clicando no círculo Relógio angular ou role o mouse até aumentar / diminuir o valor do ângulo em 1.

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

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

O Editor de sombra oferece uma GUI para mudar 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 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 sombra.

   

4. Mude as propriedades da sombra:

   • Type (apenas para box-shadow). Selecione Outset ou Inset.
   • Deslocamentos X e Y. Arraste o ponto azul ou especifique valores.
   • Desfoque. Arraste o controle deslizante ou especifique um valor.
   • Spread (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 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> nesta página.
2. Na guia Estilos, encontre o ícone roxo ao lado das declarações transition-timing-function e 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 a marcação de tempo com um clique, use as predefinições do 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 velocidade	Predefinido	Bézier cúbica
ease-in-out	Saiu, seno	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	Em saída, quadrático	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	Cubic	cubic-bezier(0.65, 0.05, 0.36, 1)
	Desacelere, entre devagar	cubic-bezier(0.4, 0, 0.2, 1)
	Para fora, costas	cubic-bezier(0.68, -0.55, 0.27, 1.55)
ease-in	In, seno	cubic-bezier(0.47, 0, 0.75, 0.72)
	In, quadrático	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	In, Cubic	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	Para dentro, para trás	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	Fora rápida, entrada linear	cubic-bezier(0.4, 0, 1, 1)
ease-out	Fora, seno	cubic-bezier(0.39, 0.58, 0.57, 1)
	Extrema, quadrática	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Fora, cúbico	cubic-bezier(0.22, 0.61, 0.36, 1)
	Saída linear, entrada lenta	cubic-bezier(0, 0, 0.2, 1)
	Para fora	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 de Bézier cúbica, 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

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

Para copiar uma única alteração da 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 nas declarações de uma vez, clique com o botão direito do mouse em qualquer declaração e selecione Copy all CSS changes.

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