El editor de estilo te permite:
{{EmbedYouTube("7839qc55r7o")}}
Para abrir el Editor de Estilo selecciona la opción "Editor de Estilo" desde el menú "Web Developer" (este es un submenu del menú "Tools" o "Herramientas" en una Mac). El Toolbox o caja de herramientas aparecerá en la parte inferior de la ventana del navegador, con el Editor de Estilo activado:
El Editor de Estilo está divivido en dos secciones principales: el panel de estilos en la izquierda y el editor en la derecha.
From Firefox 33 onwards, there's a third component to the Style Editor: the media sidebar.
El panel de hojas de estilo, en la izquierda, muestra todas las hojas de estilos que están siendo utilizadas por el documento actual. You can quickly toggle the use of a given sheet on and off by clicking the eyeball icon to the left of the sheet's name. Puede guardar los cambios hechos en la hoja de estilos a su computador, haciendo clic en el botón Guardar en la esquina inferior derecha de cada hoja de estilos de la lista.
A la derecha está el panel de edición. Aquí está disponible el código fuente de la hoja de estilo seleccionada, lista para ver y editar. Cualquier cambio que realice será aplicada inmediatamente. This makes it easy to experiment with, revise, and test changes. Una vez esté satisfecho con sus cambios, puede guardar una copia localmente, haciendo clic en el botón Guardar.
El editor contiene numeración de líneas y resaltamiento de código, haciendo más fácil la lectura de su CSS. También soporta keyboard shortcuts.
El Editor de Estilos automáticamente des-minimiza las hojas de estilo que detecta, sin afectar el original. Esto facilita mucho el trabajo en páginas que ya han sido optimizadas.
El Editor de Estilos soporta autocompletado. Empiece escribiendo y el sistema le ofrecerá una lista de sugerencias.
Puede deshabilitar el autocompletado en Style Editor settings.
A partir de Firefox 33 en adelante, el Editor de Estilos muestra una barra lateral a la derecha cuando se encuentra alguna regla @media (@media rules). La barra lateral muestra las reglas y provee un link a la línea donde se define dicha regla. Haga clic en un ítem para ir hacia la definición de esa regla en la hoja de estilo. El texto condicional de la regla estará en gris si el media query no aplica.
La barra lateral de medios funciona especialmente bien con Responsive Design View para crear y depurar diseños móviles :
Se puede crear una nueva hoja de estilos haciendo click en el nuevo botón de la barra de herrramientas. A continuación puedes comenzar a introducir CSS en el nuevo editor y ver como los nuevos estilos se aplican de forma inmediata ,al igual que los cambios en otras hojas.
Se puede cargar una hoja de estilos desde el disco y aplicarlo a la página haciendo click en el boton de importar.
{{EmbedYouTube("zu2eZbYtEUQ")}}
Los desarrolladores web, con frecuencia crean archivos CSS utilizando un preprocesador como Sass, Less, o Stylus. Estas herramientas generan archivos CSS procedentes de un sintasix mas rico y expresivo. Si haces esto, seras capaz de editar y ver que el CSS generado no es tan util, porque el código que mantienes es el sintaxis preprocesado, no el CSS generado. Por lo que necesitarás editar el CSS generado, y después manualmente trabajar sobre como reaplicarlo a la fuente original.
Mapas Fuente habilita para regresar desde el CSS generado a la síntasix original, entonces se puede ver, y te permite editar archivos en la síntasix original. A partir de Firefox 29 en adelante, el editor de estilos puede interpretar mapas fuente de CSS .
Esto significa que si utilizas, por ejemplo, Sass, el Editor de Estilos mostrará,y permitirá editar,archivos Sass , en lugar del CSS que se ha generado desde ellos:
Para que esto funcione ,es necesario:
--sourcemap a la herramienta de comando en linea de Sass.Ahora, si compruebas "mostrar fuentes originales" en los ajustes del Editor de estilos, el vínculo junto a las reglas CSS en la Vista de Reglas ,vincula con las fuentes originales en el Editor de Estilos.
Se pueden editar tambien las fuentes originales en el Editor de estilos y ver el resultado aplicado a la página de inmediato. Para conseguir que esto funcione hay dos pasos adicionales.
Primero, configura el preprocesador para que muestre la fuente original y automaticamente regenere el CSS cuando cambien las fuentes. Con Sass puedes hacer esto simplemente pasando la opción --watch :
sass index.scss:index.css --sourcemap --watch
A continuación, guarda la fuente original en el editor de estilos haciendo click en el botón "Guardar" junto al archivo, y este se guardará sobre el archivo original.
Ahora cuando hagas cambios en el archivo original en el Editor de Estilos , el CSS se regenerará y podrás ver los cambios de forma inmediata.
{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}
{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}