De manera predeterminada, el editor CSS muestra las reglas CSS aplicadas al elemento seleccionado actualmente:
Estas características son especialmente útiles:
- Las reglas aplicadas al elemento actual se muestran en orden de mayor a menor especificidad.
- Haz clic en las casillas de verificación junto a cada declaración para ver qué pasaría si eliminaras la declaración.
- Haz clic en la pequeña flecha al lado de la abreviatura de cada propiedad para mostrar los nombres completos equivalentes de la propiedad.
- Haz clic en el nombre o valor de una propiedad para que aparezca un cuadro de texto, donde puedes ingresar un nuevo valor para obtener una vista previa en vivo de un cambio de estilo.
- Junto a cada regla está el nombre del archivo y el número de línea en el que se define la regla. Al hacer clic en esa regla, las herramientas de desarrollo saltan para mostrarlas en su propia vista, donde generalmente puedes editar y guardar.
- También puedes hacer clic en la llave de cierre de cualquier regla para que aparezca un cuadro de texto en una nueva línea, donde puedes escribir una declaración completamente nueva para tu página.
Notarás una serie de pestañas en las que se puede hacer clic en la parte superior del Visor CSS:
- _Calculado_: Muestra los estilos calculados para el elemento seleccionado actualmente (los valores finales normalizados que aplica el navegador).
- _Diseño_: En Firefox, esta área incluye dos secciones:
- _Modelo de caja_: representa visualmente el modelo de caja del elemento actual, por lo que de un vistazo puedes identificar qué relleno, borde y margen se le aplica, y qué tan grande es su contenido.
- _Cuadrícula_: Si la página que estás inspeccionando utiliza Grid CSS, esta sección te permite ver los detalles de la cuadrícula.
- Fuentes: En Firefox, la pestaña Fuentes muestra los tipos de letra aplicados al elemento actual.