MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

Você pode examinar e editar CSS no painel CSS do Inspetor.

Analisar regras de CSS

A visualização das listas de todas regras que se aplicam a um elemento selecionado são ordenados das formas mais específica até a menos específica:

As regras também podem ser visualizadas pelo estilo de agente-visualizador (estilos que são aplicados pelo navegador), para ativar esta opção, a própria dever ser marcada nas configurações da barra de ferramentas. Note que essa configuração é independente da checkbox "Estilo do Navegador" na aba de visualização de estilos "Computado".

Do Firefox versão 44 em diante, todas as Regras do CSS são exibidas, including styles that are not supported or that are invalid. This can help you understand why certain styles are not being applied:

Regra de exibição

Cada regra é exibida como uma folha de estilo, com uma lista de seletores seguida de uma lista de declarações propriedade:valor;.

  • Destaque de elementos combinados: junto ao seletor está um ícone de destino: clique nele para destacar todos os nós correspondentes da página a este seletor.
  • Declaração de sobrescrita: declarações que são sobrescritas por regras posteriores são cruzadas. Veja declarações de sobrescrita.
  • Exibição em cascata: junto a declarações de sobrescritas está uma magnifying glass: click this to see the cascade of rules containing the overridden property. See overridden declarations.
  • Enable/disable: se você passar o mouse sobre a declaração, uma checkbox aparecerá proximo a ela: você pode usar para alterar a declaração entre on ou off.
  • Nome do arquivo e número da linha: no lado direto exite um link com as regras. Veja o link para o arquivo CSS.

User-agent styles são exibidos com o fundo diferente, e o link com nome do arquivo e o número da linha contendo o prefixo (user agent):

Regras de Filtragem

Iniciado no Firefox 40, ela é uma caixa que fica no topo da vizualização das regras "Filter Styles":

Enquanto você digita:

  • qualquer regra que não contenha o valor digitado são ocultadas
  • qualquer regra que estiver com o valor digitado serão destacadas

Clique no "X" para fechar a caixa de pesquisa e remover os filtros.

Pesquisa restrita

Novo no Firefox 43

Por padrão, a caixa de pesquisa destaca todas as declaraçõs que contem qualquer parte do valor digitado. Por exemplo, pesquise por "color" irá destacar uma linha que tenha o valor digitado border-bottom-color e background-color bom como apenas color.:

Iniciado no Firefox 43, se você incluir aspas simples na pesquisa , dessa forma: `color`, a pesquisa será restringida a ter somente o que está entre aspas simples:

Mostrando pseudo-elementos

Do Firefox 41, a regra é exibir os seguintes pseudo-elementosse forem aplicados ao elemento selecionado:

::after
::backdrop
(Novo no Firefox 46)
::before
::first-letter
::first-line
::selection
:-moz-color-swatch
:-moz-number-spin-box
:-moz-number-spin-down
:-moz-number-spin-up
:-moz-number-text
:-moz-number-wrapper
:-moz-placeholder
:-moz-progress-bar
:-moz-range-progress
:-moz-range-thumb
:-moz-range-track
:-moz-selection

Se o elemento selecionado for um pseudo-elemento aplicado a ele, ele mostrará antes do elemento selecionado porém oculto por um triângulo de divulgação:

Clicando no triângulo irá mostrar os elementos:

Configuração :hover, :active, :focus

Do Firefox 41, ele é um novo botão a direita da caixa de filtros:

Clique no botão para ver três checkboxes, que você pode usar para :hover, :active e :focus pseudo-classes para o elemento selecionado:

Apesar desse botão ser novo no Firefox 41, o recurso já existia em versões anteriores do Firefox. Poderia - e ainda pode - ser acessado a partir do na janela HTML.

Novo no Firefox 43

Iniciado no Firefox 43, se você definir uma dessas pseudo-classes para um nó, um ponto laranja aparecerá na exibição de marcação ao lado de todos os nós aos quais a pseudo-class foi aplicada:

No canto superio direito de cada regra, O nome do arquivo fonte e o número da linha é exibida como link: cliquenele para abrir no Style Editor.

Do Firefox 41 você pode copiar o local do arquivo fonte: Clique com botão direito no link e selecione "Copar localização".

O Inspetor entende os mapas de origem CSS. Isso significa que se você estiver usando um pré-processador CSS que tenha suporte para mapas de origem e ativado o suporte ao mapa de origem nas configurações do editor de estilo, o link o levará para a fonte original e não para o CSS gerado . Leia mais sobre o suporte ao mapa de origem CSS na documentação do edtiro de estilo.

Obtendo ajuda para propriedades CSS

Iniciado no Firefox 40, se você clicar no nome da propriedade na visualização das regras, você pode abrir uma janela mostrando ajuda com aquela propriedade no MDN:

Perceba que nesse momento, isso não armazena em cache respostas de MDN, por isso requer conectividade de rede.

Substituir declarações

Se uma declaração no CSS pode ser substituído por qualquer regra CSS com um peso maior, Então a declaração é mostrada com uma linha através dele.

Novo no Firefox 43

Iniciado no Firefox 43, d eclarações de substituição têm uma lupa ao lado deles . Clique na lupa para filtrar a regra para mostrar apenas as regras que se aplicam ao notação atual que tentam definir a mesma propriedadeisto é, a cascata completa para a propriedade dada.

Isso torna mais fácil ver qual regra está substituindo a declaração:

Examine CSS calculado

Para ver o calculo compelo to CSS par ao elemento selecionado, altere para a Janela Computed. This shows the calculated value that each CSS property has for the selected element:

Clicando na flecha próximo ao nome da propriedade mostra a regra que define esse valor, juntamente com um link para o nome do arquivo fonte e o número da linha:

Por padrão, exibe apenas valores expicitamente definidos pela página: para ver todos os valores clique na caixa "Browser styles"

 

Digitar na caixa de pesquisa executa uma filtragem automática na lista, portanto, por exemplo, se você quiser apenas ver as configurações relacionadas a fontes, você pode digitar “font” na caixa de pesquisa e somente propriedades com “font” no nome serão listados. Você também pode pesquisar para valores das propriedades: para encontrar a regra responsável por definir a fonte para “Lucida Grande”, digite isso na caixa de pesquisa.

Editar regras

Se você clicar na declaração ou em algum seletor na visualização das regras, poderá editar e ver o resultado imediatamente. Para adicionar uma nova declaração para uma regra, clique na última linha da regra(a linha ocupada pela chave de fecho)

Quando você começar a digitar o nome da propriedade, você verá uma lista de sugestões de auto-preenchimento. Pressione Tab para aceitar a sugestão destacada ou Cima e Baixo para mover entre as sugestões.

Iniciado no Firefox 48, a escolha padrão é a propriedade mais comum que começa com as letras que você digitou . Por exemplo, aqui nós escrevemos "c" e o padrão escolheu "color":

Se você colocar um valor inválido para uma propriedade ao editar, ou uma propriedade desconhecida, um icone de alerta amarelo aparece além da declaração.

Qualquer mudança é temporária: Atualizando a página voltará ao normal.

Você pode usar as teclas de seta para aumentar/diminuir regras numéricas durante a edição . O botão Cima transformará "1px" para 2px, e Shift + Cima/Baixo irá acrescentar ou diminuir 10. Alt + Cima/Baixo altera os valores por 0.1, e Shift + Page up/Page down você adiciona ou subtrai 100 do valor.

Do Firefox 44, a s edições feitas na visualização regras são refletidas no editor de estilo, e vicce-versa.

Regras adicionais

Você pode adicionar novas regras na vizualização de regras. Basta clicar com o botão direito para exibirr um menu e selecionar "Add rule". Isso vai adionar uma nova regra cujo o seletor corresponde a seleção atual.

Inicio no Firefox 41, Há um botão que permite que você faça a mesma coisa:

Copiando regras

Inciado no Firefox 41, há itens extras no menu de regras que permite copiar regras ou partes de regras para a área de transferência:

  • Copar Regra
  • Copiar Seletor
  • Copiar Declaração da  Propriedade
  • Copiar Nome da Propriedade
  • Copiar Valor da propriedade

Veja também

  • O Inspetor também inclui um número de ferramentas especializadas para trabalhar com funcionalidades particulares em CSS, tais como cores, fontes, e animações. Para saber mais sobre leia a lista como guiar.

Etiquetas do documento e colaboradores

 Colaboradores desta página: wdot789, raphaellima8, jaimemaretoli, julianadfg
 Última atualização por: wdot789,