Puedes examinar y editar CSS en el panel CSS del Inspector.

Examinar reglas CSS

La Vista reglas muestra la lista de todas las reglas que se aplican al elemento seleccionado, ordenadas de más específicas a menos específicas:

La vista Reglas muestra la lista de estilos aplicados por el navegador o estilos de agente de usuario si la opción para hacerlo está seleccionada en la configuración de las herramienta del desarrollador. Ten en cuenta que esta configuración es independiente de la casilla de verificación "Estilos de navegador" de la Vista calculado.

La vista Reglas muestra todos los estilos creados, incluidos los estilos que no se admiten o que no son válidos. Esto puede ayudarte a entender por qué ciertos estilos no se están aplicando:

Visualización de Reglas

Muestra cada regla como en una hoja de estilo, con una lista de selectores seguida de una lista de declaraciones con forma property:value;.

  • Resaltar elementos coincidentes: : al lado del selector hay un icono de target: haz clic en él para resaltar todos los nodos de la página que coincidan con este selector.
  • Declaración anulada:: las declaraciones anuladas por normas posteriores se tachan. Ver declaraciones anuladas.
  • Mostrar cascada:: junto a las declaraciones anuladas hay una lupa: haz clic aquí para ver la cascada de reglas que contienen la propiedad anulada. Ver declaraciones anuladas.
  • Activar/desactivar:: si pasas el cursor sobre una declaración, aparece una casilla de selección junto a ella: se puede utilizar para activar o desactivar la declaración.
  • Nombre de archivo y número de línea:: en el lado derecho hay un enlace a la regla. Ver enlace al archivo CSS.

Desde Firefox 52, si el elemento tiene una declaración display: grid, entonces aparece a su lado un icono grid así: . Haz clic en ese icono para mostrar la cuadrícula superpuesta en la página, incluidas las líneas de cuadrícula y las pistas. Consulta Examinar grid layouts para obtener más información al respecto.

Los estilos del agente de usuario se muestran con un fondo diferente, e indican el enlace al nombre de archivo y número de línea contiene el prefijo (agente de usuario):

Regla element {}

La regla element {} que hay al principio de la lista de reglas no es en realidad una regla CSS. Representa las propiedades CSS asignadas al elemento a través de su atributo style.

A partir de Firefox 52, también se muestra el icono de target:: , que ofrece una forma cómoda de resaltar el elemento seleccionado en la página.

Reglas de filtrado

Hay un campo en la parte superior de la vista Reglas, llamado "Filtrar Estilos":

A medida que escribes:

  • Cualquier regla que no contenga la cadena mecanografiada queda oculta.
  • Se resaltan las declaraciones que contengan la cadena mecanografiada.

Para eliminar el filtro haz clic en la "X" al final del cuadro de búsqueda.

En la vista Reglas, presionar Ctrl / Cmd + F focaliza el campo de búsqueda. Una vez que has escrito un filtro, puedes presionar Esc para quitarlo de nuevo.

Búsqueda estricta

De forma predeterminada, el cuadro de búsqueda resalta todas las declaraciones que contienen cualquier parte de la cadena. Por ejemplo, la búsqueda "color" resaltará declaraciones que contengan border-bottom-color y background-color así como color.:

Si la consulta de búsqueda se encierra entre comillas de este modo: `color` se limita la búsqueda a las coincidencias exactas:

Expandir las propiedades shorthand

Las propiedades Shorthand (abreviadas) se pueden expandir para mostrar las características correspondientes en forma larga haciendo click en la flecha junto a ellas.

Mostrar pseudo-elementos

La vista Regla muestra los siguientes pseudo-elementos, en caso de que se apliquen al elemento seleccionado

::after
::backdrop

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

Si el elemento seleccionado tiene pseudo-elementos aplicados, se muestran delante del elemento seleccionado pero ocultos por un triángulo:

Haciendo clic en el triángulo se muestran:

Setting :hover, :active, :focus

A la derecha del campo Filtrar hay un botón:

Haz clic en el botón y verás tres casillas de verificación que puedes utilizar para establecer las pseudo-clases :hover, :active y :focus para el elemento seleccionado:

También puedes acceder a esta función desde el menú contextual emergente de la vista HTML.

Si fijas una de estas pseudoclases para un nodo, aparece un punto naranja en la vista HTML junto a todos los nodos a los que se ha aplicado la pseudoclase:

Enlazar al archivo CSS

En la parte superior derecha de cada regla, el nombre del archivo fuente y el número de línea se muestran como enlace: al hacer clic en él, se abre el archivo en el Editor de estilos.

Puedes copiar la ubicación del archivo fuente: haz clic con el botón derecho del ratón en el enlace y selecciona "Copiar dirección".

El Inspector entiende los mapas de código fuente de CSS. Esto significa que si estás usando un preprocesador CSS que tiene soporte para mapas de código fuente, y has habilitado Activar mapas de código fuente" en Ajustes avanzados de la Configuración del editor de estilos, entonces el enlace te llevará a la fuente original, no al CSS generado. Lee más sobre el soporte de mapas de código fuente CSS en la Documentación del editor de estilos.

Declaraciones anuladas

Si una declaración CSS es anulada por alguna otra regla CSS con mayor peso, entonces la declaración se muestra con una línea a través de ella.

Las declaraciones anuladas tienen una lupa al lado. Haz clic en la lupa para filtrar la vista de reglas: mostrará sólo las reglas que se aplican al nodo actual intentando establecer la misma propiedad: es decir, la cascada completa para la propiedad dada.

Esto facilita ver qué regla prevalece sobre la declaración

Examinar CSS calculado

Para ver todas las reglas CSS que se calculan para el elemento seleccionado cambia a la Vista calculado.Esta vista organiza el estilo del elemento por propiedades: se enumeran por orden alfabético todas las propiedades CSS que se han aplicado a este elemento para mostrar el resultado o valor calculado de cada una de las propiedadades CSS para el elemento seleccionado :

Puedes usar la tecla Tab para seleccionarlos moviéndote través de ellos. Desde Firefox 49 en adelante, puedes encontrar más información sobre estas propiedades: si pulsas F1 en una propiedad seleccionada se abrirá su página de referencia MDN

Haciendo clic en la flecha situada junto al nombre de la propiedad (o pulsando Enter o Space mientras está seleccionado) se muestra la regla que establece este valor, un enlace al nombre del archivo fuente y el número de línea:

De forma predeterminada, esta vista sólo muestra los valores que la página ha definido explícitamente: para ver todos los valores, haz clic en la casilla "Estilos de navegador". Puedes pulsar Tab para moverte a través de los nombres de archivo/números de línea; y pulsando Enter/Return Enter/Return se abrirá el archivo en ese punto en el Editor de estilos.

Al escribir en el cuadro de búsqueda se realiza un filtrado activo de la lista, por lo que, por ejemplo, si sólo quieres ver opciones relacionadas con las fuentes, puedes escribir "font" en el cuadro de búsqueda, y sólo aparecerán las propiedades que contengan "font" en el nombre. También puedes buscar por el valor de las propiedades: para encontrar la regla responsable de seleccionar la fuente "Lucida Grande" , escribe "Lucida Grande" en el cuadro de búsqueda.

En la vista calculado, puedes presionar Ctrl / Cmd + F para enfocar el campo de búsqueda. Una vez que hayas escrito un filtro, presiona Esc para quitarlo.

Editar reglas

Si haces clic en una declaración o en un selector en la vista Reglas, puedes editarla y ver los resultados inmediatamente. También puedes pulsar Tab para desplazarte por las diferentes propiedades y valores existentes, y empezar a editarlos pulsando Enter o Space. Para añadir una nueva declaración a una regla, haz clic en la última línea de la regla (la línea ocupada por la llave de cierre).

A medida que comiences a escribir un nombre de propiedad, verás una lista de sugerencias autocompletadas. Presiona Tab para aceptar la sugerencia actual o Up y Down para desplazarte por la lista. La opción predeterminada es la propiedad más común que comienza con las letras que has escrito. Por ejemplo, aquí el usuario ha escrito "c" y la opción por defecto es "color":

Si al editar una propiedad introduces un valor no válido o escribes un nombre de propiedad desconocido, aparece un icono de alerta amarillo junto a la declaración.

Nota: Desde Firefox 60 en adelante, los nombres de variables CSS también se completarán automáticamente (ver error 1422635). Si escribes var(- var(- seguido de un guión (-) como valor de una propiedad, cualquier variable que hayas declarado en tu CSS aparecerá en la lista de autocompletado.

Cualquier cambio que hagas es temporal: recargar la página restaurará el estilo original.

Puedes utilizar las teclas Up , Down y Page up , Page down (junto con otras) para aumentar/disminuir las reglas numéricas durante la edición:

  • La flecha Up incrementa los valores por 1 — "1px" pasará a "2px", por ejemplo.
  • Shift + Up/Down incrementa los valores por 10.
  • Alt + Up/Down incrementa los valores por 0.1. Ten en cuenta que en Firefox 60 esta combinación cambia a Ctrl + Up/Down en Linux y Windows para evitar conflictos con los atajos predeterminados del Sistema Operativo (ver error 1413314). En Mac se mantiene— Ctrl + Up ya que en macOS es el atajo predeterminado para mostrar el Control de Misión.
  • Shift + Page up/Page down incrementa los valores por 100.

Los cambios que realices en la vista Reglas se reflejan en el Editor de estilos, y viceversa

A partir de Firefox 52, si estás editando CSS, el menú contextual que verás es el normal para trabajar con texto editable:

Añadir reglas

Puedes añadir nuevas reglas en la vista reglas. Simplemente haz clic derecho para que se muestre el menú contextual y selecciona "Añadir regla nueva": esto añadirá una regla cuyo selector coincide con el nodo actualmente seleccionado.

También hay un botón que te posibilita hacer lo mismo:

Copiar reglas

Para copiar reglas o partes de ellas usa uno de los items del siguiente menú contextual en la vista reglas

  • Copiar regla
  • Copiar selector
  • Copiar declaración de propiedad
  • Copiar nombre de la propiedad
  • Copiar valor de la propiedad

Ver también

  • Lista completa de los Atajos de teclado.
  • El Inspector también tiene herramientas especializadas para trabajar con algunas características CSS como colores, fuentes y animaciones. Para leer más Guías how to.

Etiquetas y colaboradores del documento

Colaboradores en esta página: amaiafilo
Última actualización por: amaiafilo,