Editor de Estilos

O Editor de Estilos permite que vocĂȘ:

  • veja e edite todas as folhas de estilo associadas com a pĂĄgina
  • crie novas folhas de estilo e as aplique na pĂĄgina
  • importe folhas de estilo existentes e as aplique na pĂĄgina

Para abrir o Editor de Estilos escolha a opção "Editar Estilos" no menu "Desenvolvedor Web" (que é um submenu do menu "Ferramentas" no Mac) (which is a submenu in the "Tools" menu on the Mac). A Caixa de Ferramentas aparecerå na parte de baixo da janela do navegador, com o Editor de Estilos ativado:

Na esquerda (ou no topo, se sua janela estiver muito estreita) hĂĄ uma lista com todas as folhas de estilo usadas no documento, e na direita (ou em baixo se a janela estiver estreita) estĂĄ a fonte para a folha de estilo que vocĂȘ selecionou no painel de folhas de estilo.

O painel de folha de estilos

O painel de folha de estilos, na esquerda, lista todas as folhas de estilo que estĂŁo sendo usadas no documento atual. VocĂȘ pode rapidamente trocar o uso de determinada folha de estilos clicando no olho que fica a direita do nome da folha de estilos. VocĂȘ pode salvar qualquer mudança que fez na folha de estilos no seu computador local clicando no botĂŁo Salvar que estĂĄ no canto inferior direito de cada lista de folha de estilos.

O painel editor

Na direita fica o painel editor. Aqui Ă© onde o cĂłdigo da folha de estilo seleciona fica disponĂ­vel para vocĂȘ ler e editar. Quaisquer alteraçÔes que vocĂȘ faz sĂŁo aplicadas na pĂĄgina em tempo real. Isso faz com que fique realmente fĂĄcil experimentar, revisar e testar mudanças na aparença de sua pĂĄgina. Uma vez que vocĂȘ estiver satisfeito com suas mudanças, vocĂȘ pode salver uma cĂłpia localmente clicando no botĂŁo Salvar que fica no painel de folha de estilos.

O editor provĂȘ nĂșmeros de linha e marcação de sintaxe para ajudar a ficar fĂĄcil ler seu CSS. Veja Utilizando o Editor de Fonte para documentação do editor em si, incluindo atalhos de teclado Ășteis.

O Editor de Estilos automaticamente desminimiza folhas de estilo que ele detectar sem afetar o original. Isso faz com que fique muito mais fĂĄcil trabalhar em pĂĄginas que foram otimizadas.

Autocompletar

Autocompletar Ă© novo no Firefox 29.

Do Firefox 29 em diante, o Editor de Estilos suporta o autocompletar. Apenas começa a digitar e ele oferecerå uma lista de sugestÔes.

VocĂȘ pode desligar isso em  ConfiguraçÔes do Editor de Estilos.

Criando e importando folhas de estilos

VocĂȘ pode cirar uma nova folha de estilos clicando no botĂŁo Novo na barra de ferramentas. EntĂŁo vocĂȘ pode começar a inserir CSS em um novo editor e ver como os novos estilos sĂŁo aplicados em tempo real assim como quaisquer mudanças em outras folhas de estilo.

VocĂȘ pode carregar um estilo do disco e aplicĂĄ-lo na pĂĄgina clicando no botĂŁo Importar.

Suporte ao mapa de fonte

Suporte ao mapa da fonte de CSS Ă© uma funcionalidade nova no Firefox 29.

Desenvolvedores web frequentemente criam arquivos CSS usando prĂ©-processadores como Sass, Less, ou Stylus. Essas ferramentas geram CSS de uma sintaxe mais rica e expressiva. Se vocĂȘ fizer isso,  ser capaz de ver e editar CSS gerado nĂŁo Ă© Ăștil, porque o cĂłdigo que vocĂȘ mantĂ©m Ă© a sintaxe do prĂ©-processador, nĂŁo o CSS gerado. EntĂŁo vocĂȘ precisaria editar o CSS gerado e entĂŁo manualmente descobrir como reaplicar na fonte original.

Mapas de fonte viabilizam as ferramentas para mapear o CSS gerado agtĂ© sua fonte original, entĂŁo mostrĂĄ-la e permitir que vocĂȘ edite os arquivos na fonte original. Do Firefox 29 em diante o Editor de Estilos compreende mapas de fonte de CSS.

Isso significa que se vocĂȘ usa, por exemplo, Sass, entĂŁo o editor irĂĄ mostrĂĄ-lo e permitir que vocĂȘ edite arquivos Sass, ao invĂ©s do CSS gerado por ele:

Para isso funcionar, vocĂȘ deve:

Vendo as fontes originais

Agora, se vocĂȘ marcar "Mostrar fontes originais"  nas ConfiguraçÔes do Editor de Estilos, os links prĂłximos as regras de CSS em ver Regras irĂŁo levar as fontes originais no Editor de Estilos.

Editando fontes originais

VocĂȘ pode tambĂ©m editar fontes originais no Editor de Estilos e ver os resultas aplicados na pĂĄgina imediatamente. Para isso funcionar hĂĄ dois passos extra:

Primeiro, configure seu prĂ©-processador para que ele direcione a fonte original e automaticamente gere outro CSS quando a fonte original mudar. Com o Sass vocĂȘ pode fazer isso simplesmente passando a opção --watch:

sass index.scss:index.css --sourcemap --watch

Em seguida, salve a fonte original no Editor de Estilos clicando no botĂŁo Salvar, perto do arquivo para entĂŁo salvar o arquivo original.

Agora quando vocĂȘ faz mudanças no arquivo fonte no Editor de Estilos Ă© gerado um novo CSS vocĂȘ pode ver as mudanças em tempo real.