Referencia de características CSS

Descubra nuevos flujos de trabajo en la siguiente referencia completa de las características de Microsoft Edge DevTools relacionadas con la visualización y el cambio de CSS.

Para obtener información sobre los conceptos básicos, consulte Introducción a la visualización y el cambio de CSS.

Contenido detallado:

Seleccionar un elemento

La herramienta Elementos de DevTools le permite ver o cambiar el CSS de un elemento a la vez. El elemento seleccionado se resalta en el árbol DOM. Los estilos del elemento se muestran en el panel Estilos . Para obtener un tutorial, vea Ver css para un elemento.

Ejemplo de un elemento seleccionado

En la ilustración anterior:

  • El h1 elemento que está resaltado en el árbol DOM es el elemento seleccionado.
  • A la derecha, los estilos del elemento se muestran en el panel Estilos .
  • A la izquierda, el elemento está resaltado en la ventanilla, pero solo porque el mouse mantiene el puntero sobre él en el árbol DOM:

Hay varias maneras de seleccionar un elemento:

  • En una página web representada, haga clic con el botón derecho en un elemento page y, a continuación, haga clic en Inspeccionar.

  • En DevTools, haga clic en Seleccionar un elemento (Seleccionar un elemento) o presione Ctrl+Mayús+C (Windows, Linux) o Comando+Mayús+C (macOS) y, a continuación, haga clic en el elemento en la ventanilla.

  • En DevTools, haga clic en el elemento del árbol DOM.

  • En DevTools, ejecute una consulta como document.querySelector('p') en la consola, haga clic con el botón derecho en el resultado y, a continuación, seleccione Mostrar en el panel Elementos.

Ver CSS

Use losestilos de elementos> y las pestañas Calculadas para ver las reglas CSS y diagnosticar problemas de CSS.

La pestaña Estilos muestra vínculos en varios lugares a otros lugares, incluidos, entre otros, los siguientes:

  • Junto a reglas CSS, a hojas de estilos y orígenes CSS. Estos vínculos abren la herramienta Orígenes . Si se minifica la hoja de estilos, consulte Reformatear un archivo JavaScript minificado con una impresión bonita en las características de depuración de JavaScript.

  • En las secciones Heredado de , a los elementos primarios.

  • En var() las llamadas, a declaraciones de propiedad personalizadas. Consulte Uso de propiedades personalizadas css (variables) en MDN.

  • En animation propiedades abreviadas, a @keyframes.

  • Obtenga más información sobre los vínculos en la información sobre herramientas de la documentación.

Los vínculos pueden tener un estilo diferente. Si no está seguro de si algo es un vínculo, intente hacer clic en él para averiguarlo.

Por ejemplo:

  1. Vaya a La aplicación De hacer en una nueva ventana o pestaña.

  2. Haga clic con el botón derecho en el espacio en blanco situado encima de la cadena "Agregar una tarea" y, a continuación, haga clic en Inspeccionar.

    Se abre DevTools, con la herramienta Elementos seleccionada.

  3. Seleccione la pestaña Estilos .

    Se muestran varios tipos de vínculos:

    Varios vínculos resaltados

Visualización de información sobre herramientas con documentación de CSS, especificidad y valores de propiedad personalizados

En la herramienta Elementos , la pestaña Estilos muestra información sobre herramientas con información útil al mantener el puntero sobre elementos específicos.

Visualización de la documentación de CSS

Para mostrar la descripción de una propiedad CSS, en una información sobre herramientas:

  1. Vaya a una página web, como la aplicación Tareas pendientes, en una nueva ventana o pestaña.

  2. Haga clic con el botón derecho en el espacio en blanco situado encima de la cadena "Agregar una tarea" y, a continuación, haga clic en Inspeccionar.

    Se abre DevTools, con la herramienta Elementos seleccionada.

  3. Seleccione la pestaña Estilos .

  4. Mantenga el puntero sobre un nombre de propiedad CSS, como padding:.

    Se muestra una información sobre herramientas:

    Información sobre herramientas con documentación sobre una propiedad CSS

    DevTools extrae las descripciones de la información sobre herramientas del repositorio de datos personalizados de VS Code .

  5. En la información sobre herramientas, haga clic en el vínculo Más información .

    Se muestra la página de referencia CSS de la propiedad en MDN, como padding la propiedad CSS.

Para desactivar la información sobre herramientas de CSS:

  • En la información sobre herramientas, active la casilla No mostrar .

Para volver a activar la información sobre herramientas de CSS:

  1. En DevTools, seleccione Personalizar y controlar DevTools y, a continuación, seleccione Configuración.

  2. En el esquema de la izquierda, seleccione Preferencias y desplácese hacia abajo hasta la sección Elementos .

  3. Active la casilla Mostrar información sobre herramientas de documentación CSS .

Ver la especificidad del selector

Mantenga el puntero sobre un selector CSS para mostrar una información sobre herramientas que muestre el peso de especificidad del selector, como: Especificidad: (0,0,1):

Por ejemplo:

  1. Vaya a una página web, como la aplicación Tareas pendientes, en una nueva ventana o pestaña.

  2. Haga clic con el botón derecho en la página web y, a continuación, haga clic en Inspeccionar.

    Se abre DevTools, con la herramienta Elementos seleccionada.

  3. En el árbol DOM, seleccione el <body> elemento .

  4. En la pestaña Estilos , mantenga el puntero sobre el body selector CSS.

    Se muestra una información sobre herramientas que muestra Especificidad: (0,0,1):

    Información sobre herramientas con peso de especificidad de un selector coincidente

Vea también:

Visualización de los valores de las propiedades personalizadas

Mantenga el puntero sobre una var(--custom-property) función para ver el valor de la propiedad personalizada en una información sobre herramientas.

Por ejemplo:

  1. Vaya a una página web, como la aplicación Tareas pendientes, en una nueva ventana o pestaña.

  2. Haga clic con el botón derecho en la página web y, a continuación, haga clic en Inspeccionar.

    Se abre DevTools, con la herramienta Elementos seleccionada.

  3. En el árbol DOM, seleccione el <body> elemento .

  4. En la pestaña Estilos , en la body regla CSS, mantenga el puntero sobre --spacing.

    El valor .3rem se muestra en una información sobre herramientas:

    Valor de una propiedad personalizada en una información sobre herramientas

Vea también:

Ver la hoja de estilos externa donde se define una regla

En el panel Estilos , haga clic en el vínculo situado junto a una regla CSS para abrir la hoja de estilos externa que define la regla. La hoja de estilos se abre en el panel Editor de la herramienta Orígenes .

Si se minifica la hoja de estilos, haga clic en el botón Formato (Formato) situado en la parte inferior del panel Editor . Para obtener más información, vea Reformatear un archivo JavaScript minificado con una impresión bonita en las características de depuración de JavaScript.

Visualización de la hoja de estilos donde se define una regla

En la ilustración anterior, después de hacer clic en to-do-styles.css:5, se le lleva a la línea 5 de to-do-styles.css, donde se define la h1 regla CSS.

Visualización de CSS no válida, invalidada, inactiva y de otro tipo

La pestaña Estilos reconoce muchos tipos de problemas CSS y los resalta de diferentes maneras.

Ver solo el CSS que se aplica realmente a un elemento

El panel Estilos muestra todas las reglas que se aplican a un elemento, incluidas las declaraciones que se han invalidado. Cuando no esté interesado en las declaraciones invalidadas, use el panel Calculado para ver solo el CSS que realmente se aplica a un elemento.

Por ejemplo:

  1. Vaya a una página web, como la aplicación Tareas pendientes, en una nueva ventana o pestaña.

  2. Haga clic con el botón derecho en el encabezado Mis tareas y, a continuación, haga clic en Inspeccionar.

    DevTools se abre, con la herramienta Elementos seleccionada, con el <h1> elemento seleccionado en el árbol DOM.

  3. En la herramienta Elementos , seleccione la pestaña Calculado .

    Se muestran las propiedades CSS que se aplican al elemento seleccionado:

    Panel Calculado

    Un nombre de propiedad y un valor en cursiva indican un valor que se calcula en tiempo de ejecución.

  4. Para mostrar todas las propiedades, active la casilla Mostrar todo .

Visualización de propiedades CSS en orden alfabético

Use el panel Calculado . Consulte Ver solo el CSS que se aplica realmente a un elemento anterior.

Visualización de propiedades CSS heredadas

Active la casilla Mostrar todo en el panel Calculado . Consulte Ver solo el CSS que se aplica realmente a un elemento anterior.

Ver css en reglas

Las reglas son instrucciones CSS que permiten controlar el comportamiento de CSS.

En la herramienta Elementos , la pestaña Estilos muestra las siguientes reglas en secciones dedicadas:

Ver @property en reglas

La @property regla css le permite definir propiedades personalizadas CSS de tipos específicos en una hoja de estilos.

Mantenga el puntero sobre el nombre de dicha propiedad en la pestaña Estilos para ver una información sobre herramientas que contiene:

  • Valor de la propiedad, como 20%.
  • Descriptores de la propiedad, como: initial value: 40%
  • Un vínculo ver propiedad registrada a su registro en la sección contraíble @property en la parte inferior de la pestaña Estilos .

Por ejemplo:

  1. Vaya a una página que use la @property regla en regla, como Ver @property en reglas, en una nueva ventana o pestaña.

  2. Haga clic con el botón derecho en el párrafo Elemento tres y, a continuación, haga clic en Inspeccionar.

    Se abre DevTools, con la herramienta Elementos seleccionada.

  3. En la pestaña Estilos , mantenga el puntero sobre esa var(--itemSize) función:

    Información sobre herramientas del CSS en regla de propiedad

    La información sobre herramientas contiene:

    • Valor de la propiedad, como 100px.
    • Descriptores de la propiedad, como el valor inicial.
    • Vínculo ver propiedad registrada .

  4. Haga clic en el vínculo Ver propiedad registrada .

    Se muestra la sección @property expandida, más abajo en la pestaña Estilos :

    --itemSize en la sección at-property

Para editar una @property regla, haga doble clic en su nombre o valor. Consulte Cambio de un nombre o valor de declaración, a continuación.

Vea también:

Ver @supports en reglas

La pestaña Estilos muestra las @supports reglas en CSS, si se aplican a un elemento.

Por ejemplo, para ver la @supports regla:

  1. En una nueva ventana o pestaña, vaya a una página que use la @supports regla en regla, como Ver @supports en reglas.

  2. Haga clic con el botón derecho en "I support CIE LAB color space!" (Compatibilidad con el espacio de colores de CIE LAB) y, a continuación, seleccione Inspeccionar.

    Se abre DevTools. En la herramienta Elementos , en el árbol DOM, se selecciona el <div class="box"> elemento . En la pestaña Estilos , @supports se muestran las declaraciones CSS:

    Resultado de HTML para la regla at-supports

  • Si el explorador admite la lab() función , el elemento es verde.

  • Si el explorador no admite la lab() función, el elemento es púrpura.

Para ver qué versiones del explorador admiten el espacio de color de CIE LAB, busque "laboratorio" en Caniuse.com.

Ver @scope en reglas

La pestaña Estilos muestra css @scope en las reglas si se aplican a un elemento.

Las @scope reglas en permiten limitar los estilos CSS; es decir, aplicar estilos explícitamente a elementos específicos. Consulte @scope CSS en regla en MDN.

Para ver la @scope regla:

  1. En una nueva ventana o pestaña, vaya a una página que use la @scope regla en regla, como la demostración Ver @scope en reglas :

    Resultado de HTML & CSS para el ámbito en regla

  2. Haga clic con el botón derecho en "I'm the text that lives on a card" (Soy el texto que reside en una tarjeta) y, a continuación, seleccione Inspeccionar.

    Se abre DevTools, con la herramienta Elementos seleccionada.

  3. Seleccione la pestaña Estilos .

  4. Examine la @scope regla:

    Regla de ámbito en la pestaña Estilos

    En este ejemplo, la @scope regla (color de fondo = ciruela) invalida la declaración CSS background-color global (aguamarina), para cualquier <p> elemento que esté dentro de un elemento (por ejemplo, ) <div>que tenga una card clase .

    Para editar la @scope regla, haga doble clic en la regla:

  5. En la pestaña Estilos , haga doble clic en ciruela, presione Eliminar y, a continuación, seleccione Beige.

    El texto de la tarjeta de la página web de demostración cambia de fondo ciruela a fondo beige.

Ver @font-palette-values en reglas

La regla CSS @font-palette-values le permite personalizar (invalidar) los valores predeterminados de la font-palette propiedad. En la herramienta Elementos , la pestaña Estilos muestra esta regla en una sección dedicada.

Para ver la @font-palette-values regla CSS:

  1. En una nueva ventana o pestaña, vaya a una página que use la @font-palette-values regla en regla, como la demostración Ver @font-palette-values en reglas .

  2. Haga clic con el botón derecho en "nuevos colores" y, a continuación, seleccione Inspeccionar.

    Se abre DevTools, con la herramienta Elementos seleccionada.

  3. En la pestaña Estilos , busque la @font-palette-values regla CSS:

    Regla at-font-palette-values en la pestaña Estilos

    En este ejemplo, los valores de la --New paleta de fuentes invalidan los valores predeterminados de la fuente coloreada.

    Para editar un valor personalizado, haga doble clic en él, como se indica a continuación:

  4. En la @font-palette-values regla CSS, en la override-colors propiedad , haga doble clic en 0 gold, 1 redy escriba 0 blue, 1 red.

    En la página web inspeccionada, "nuevos colores" ahora se representa como azul y rojo.

Ver @position-try en reglas

La @position-try regla CSS junto con la position-try-fallbacks propiedad le permite definir posiciones de delimitador alternativas para los elementos.

En la herramienta Elementos , la pestaña Estilos resuelve y vincula lo siguiente:

  • Los position-try-fallbacks valores de propiedad (o position-try-options valores de propiedad) se vinculan a una sección de regla CSS dedicada @position-try --name .

  • Los position-anchor valores de propiedad y anchor() los argumentos se vinculan a los elementos correspondientes que tienen popovertarget atributos.

Por ejemplo, inspeccione los position-try-fallbacks valores y @position-try las reglas CSS, como se indica a continuación:

  1. En una nueva ventana o pestaña, vaya a una página que use los position-try-fallbacks valores y @position-try en regla, como la demostración Ver @position-try en reglas .

  2. En la página web representada, abra el submenú; es decir, haga clic en SU CUENTA y, a continuación, haga clic en ESCAPARATE.

    Se muestra el submenú, que muestra una lista de comandos: LISTINGS, SPECIAL OFFERS, SIGN OUT.

  3. En el submenú, haga clic con el botón derecho encima de LISTINGS y, a continuación, seleccione Inspeccionar.

    Se abre DevTools, con la herramienta Elementos seleccionada. El elemento <ul id="submenu"> de submenú está seleccionado en el árbol DOM:

    Resultado de HTML & CSS para la regla at-position-try

  4. En la pestaña Estilos , en la #submenu regla CSS, busque la position-try-fallbacks propiedad y haga clic en su --bottom valor.

    La pestaña Estilos se desplaza hacia abajo hasta la sección correspondiente @position-try :

    La sección at-position-try de la pestaña Estilos

  5. En la pestaña Estilos , en la #submenu regla CSS, haga clic en el --submenu vínculo de cualquiera de las propiedades siguientes:

    position-anchor: --submenu;
left: anchor(--submenu right);
top: anchor(--submenu top);

    El árbol DOM selecciona el elemento (<button popovertarget="submenu">) que tiene el valor de atributo correspondiente popovertarget (popovertarget="submenu") y la pestaña Estilos muestra el CSS del elemento:

    Elemento button seleccionado en el árbol DOM y su CSS

Para editar un valor, haga doble clic en el valor.

Vea también:

Visualización del modelo de cuadro de un elemento

Para ver el modelo de cuadro de un elemento, vaya al panel Estilos y desplácese hacia abajo.

Para cambiar un valor, haga doble clic en el valor.

En la ilustración siguiente, el diagrama Modelo de cuadro del panel Estilos muestra el modelo de cuadro para el elemento seleccionado h1 actualmente:

Diagrama del modelo de cuadro

Vea también:

Buscar y filtrar el CSS de un elemento

Use el cuadro de texto Filtrar en los paneles Estilos y Calculados para buscar propiedades o valores CSS específicos.

Para buscar también propiedades heredadas en el panel Calculado , active la casilla Mostrar todo .

En la ilustración siguiente, el panel Estilos se filtra para mostrar solo las reglas que incluyen la consulta colorde búsqueda .

Filtrar el panel Estilos

En la ilustración siguiente, el panel Calculado se filtra para mostrar solo las declaraciones que incluyen la consulta 100%de búsqueda :

Filtrar el panel Calculado

Emular una página centrada

Si cambia el foco de la página web inspeccionada a DevTools, algunos elementos de superposición se ocultan automáticamente, si se desencadenan mediante el foco. Por ejemplo:

  • Listas desplegables.
  • Menús.
  • Selectores de fechas.

Para depurar un elemento como si la página tuviera el foco, realice una de las siguientes acciones:

  • En la herramienta Elementos , en la pestaña Estilos , haga clic en :hov (Alternar estado del elemento) y, a continuación, seleccione la casilla Emular una página centrada .
  • En la herramienta Representación , active la casilla Emular una página centrada .

Precaución: Cuando esta opción está activada, document.visibilityState se establece visible en y el visibilitychange evento no se desencadena. Consulte Api de visibilidad de páginas en MDN.

Para intentar emular una página centrada:

  1. Abra la demostración Emular una página centrada en una nueva ventana o pestaña.

  2. Haga clic en el cuadro de texto de entrada. O bien, presione Tab para poner el foco en el cuadro de texto de entrada.

    Otro elemento aparece bajo el cuadro de texto de entrada, que dice "Este mensaje solo aparece cuando se centra el cuadro de texto".

  3. Haga clic con el botón derecho en el cuadro de texto de entrada y, a continuación, seleccione Inspeccionar.

    Se abre DevTools y desaparece el elemento de mensaje. La ventana DevTools está ahora en el foco, en lugar de en la página web inspeccionada, por lo que el elemento de mensaje desaparece.

  4. En la herramienta Elementos , en la pestaña Estilos , haga clic en :hov (Alternar estado del elemento) y, a continuación, seleccione la casilla Emular una página centrada .

  5. Asegúrese de que el elemento <input id="textBox" type="text"> del cuadro de texto de entrada sigue seleccionado.

    En el cuadro de texto de entrada, el elemento de mensaje vuelve a aparecer debajo del cuadro de texto de entrada.

    Ahora puede inspeccionar el elemento de mensaje que está debajo del cuadro de texto de entrada, aunque DevTools, en lugar de la página inspeccionada, tenga el foco:

    Casilla emular una página centrada seleccionada

  6. Limpieza: en la herramienta Elementos , en la pestaña Estilos , haga clic en :hov (Alternar estado de elemento) y, a continuación, desactive la casilla Emular una página centrada .

También aparece una casilla Emular una página centrada en la herramienta Representación ; vea Herramienta de representación para ver el aspecto de una página web con diferentes opciones de visualización o deficiencias de visión.

Vea también:

Alternar una pseudoclase

Para alternar una pseudoclase:

  1. Vaya a una página web, como la aplicación Tareas pendientes, en una nueva ventana o pestaña.

  2. Escriba una tarea, como la tarea 1.

  3. Haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar.

    Se abre DevTools.

  4. Seleccione la herramienta Elementos .

  5. En el árbol DOM, seleccione el <li class="task"> elemento .

  6. Seleccione la pestaña Estilos .

  7. En la esquina superior derecha, haga clic en :hov.

    Se muestran las casillas.

  8. Active la casilla de la pseudoclase que desea habilitar, como :hover:

    Selección de la pseudoclase :hover

    En la página web representada, el círculo situado junto al nombre de la tarea se rellena con una marca de verificación y aparece una X roja en un círculo rojo en el lado derecho de la tarea, como si el elemento estuviera sobre el puntero, aunque el elemento no se mantenga sobre él.

La pestaña Estilos muestra las siguientes pseudo clases para todos los elementos:

Además, algunos elementos pueden tener pseudo-clases específicas del elemento. Al seleccionar este tipo de elemento, la pestaña Estilos muestra una sección Force specific element state (Forzar estado de elemento específico ) que puede expandir y activar pseudo-clases específicas del elemento, como una casilla :read-write :

La sección Force specific element state (Forzar estado de elemento específico) de un elemento 'textarea'

Para obtener un tutorial interactivo, vea Agregar un pseudoestado a una clase.

Ver pseudoelementos de resaltado heredados

Los pseudoelementos permiten aplicar estilo a partes específicas de los elementos. Los pseudoelementos resaltados son partes del documento con un estado "seleccionado" y tienen el estilo "resaltado" para indicar este estado al usuario.

Por ejemplo, estos pseudoelementos son:

  • ::selection
  • ::spelling-error
  • ::grammar-error
  • ::highlight

Cuando varios estilos entran en conflicto, la cascada CSS determina el estilo ganador. Consulte Introducción a la cascada CSS en MDN.

Para comprender mejor la herencia y la prioridad de las reglas, vea el pseudo-elemento resaltado heredado en la demostración siguiente.

Para ver los pseudoelementos de resaltado heredados:

  1. Vaya a la demostración Resaltar pseudoelementos en una nueva ventana o pestaña.

  2. Seleccione una parte del texto "Heredé el estilo del pseudo-elemento resaltado de mi padre. ¡Selecciónela!"

    El texto seleccionado cambia a texto rojo en el fondo amarillo.

  3. Haga clic con el botón derecho en el texto "Heredé el estilo del pseudo-elemento resaltado de mi padre. Seleccione mí!", y, a continuación, seleccione Inspeccionar.

    Se abre DevTools. En la herramienta Elementos , en la pestaña Estilos , se muestra la sección: Heredado de ::selection pseudo de div.text-parent:

    Ver la sección Heredado en la pestaña Estilos

  4. En el árbol DOM, seleccione el <div class="text-parent"> elemento .

    En la pestaña Estilos , se muestra la sección: Elemento Pseudo ::selection:

    Ver la sección Pseudo en la pestaña Estilos

Vea también:

Ver capas en cascada

Las capas en cascada permiten un control más explícito de los archivos CSS para evitar conflictos de especificidad de estilo. Esto es útil para:

  • Bases de código grandes.
  • Diseño del sistema.
  • Administración de estilos de terceros.

Para ver las capas en cascada:

  1. Vaya a una página web que use capas en cascada, como la demostración Capas en cascada.

  2. Haga clic con el botón derecho en el elemento "Mis estilos están en capas" y, a continuación, seleccione Inspeccionar.

    Se abre DevTools.

  3. En la herramienta Elementos , seleccione la pestaña Estilos .

  4. En la pestaña Estilos , vea las tres capas en cascada y sus estilos: page, component y base:

    Capas en cascada

  5. Para ver el orden de la capa, haga clic en el nombre de la capa (página, componente o base). O bien, haga clic en el botón Alternar vista De capas CSSAlternar vista Capas CSS .

    La page capa tiene la mayor especificidad, por lo que el fondo del elemento es verde.

Vea también:

Visualización de una página en modo de impresión

Para ver una página en modo de impresión:

  1. Vaya a una página web.

  2. Haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar.

    Se abre DevTools.

  3. Presione Esc una o dos veces, para que la barra de herramientas Vista rápida aparezca en la parte inferior de DevTools.

  4. En la barra de herramientas Vista rápida , seleccione Más herramientas (+).

  5. Seleccione la herramienta Representación .

    La herramienta Representación se abre en el panel Vista rápida en la parte inferior de DevTools.

  6. En la herramienta Representación , haga clic en la lista desplegable Emular tipo de medio CSS y, a continuación, seleccione Imprimir.

    La página web se representa como si se imprimía.

  7. Cuando termine, en la herramienta Representación , haga clic en la lista desplegable Emular tipo de medio CSS y, a continuación, seleccione Sin emulación.

Visualización de CSS usada y sin usar con la herramienta Cobertura

La herramienta Cobertura muestra qué CSS usa realmente una página.

  1. Abra el menú Comando presionando Ctrl+Mayús+P (Windows, Linux) o Comando+Mayús+P (macOS), mientras QuevTools tiene el foco.

  2. Empiece a escribir coveragey, a continuación, seleccione Mostrar cobertura:

    Apertura de la herramienta Cobertura desde el menú Comandos

    Aparece la herramienta Cobertura :

    La herramienta Cobertura

  3. Haga clic en Iniciar instrumentación de cobertura y actualice la página (Empiece a instrumentar la cobertura y actualice la página). La página se actualiza y la herramienta Cobertura proporciona información general sobre la cantidad de CSS (y JavaScript) que se usa en cada archivo que carga el explorador. Verde representa CSS usado. Rojo representa CSS sin usar.

    Información general sobre la cantidad de CSS (y JavaScript) que se usa y no se usa:

    Información general sobre la cantidad de CSS (y JavaScript) que se usa y no se usa

  4. Para mostrar un desglose línea a línea de lo que se usa CSS, haga clic en un archivo CSS.

    En la ilustración siguiente, las líneas 145 a 147 y 149 a 151 de b66bc881.site-ltr.css no se usan, mientras que las líneas 163 a 166 se usan:

    Un desglose línea a línea de CSS usado y sin usar

Forzar el modo de vista previa de impresión

Consulte Force DevTools into Print Preview mode (Forzar DevTools al modo de vista previa de impresión).

Copiar CSS

En un único menú desplegable de la pestaña Estilos , puede copiar reglas, declaraciones, propiedades o valores CSS independientes; vea Conceptos básicos de la sintaxis CSS en ¿Qué es CSS? en MDN.

Además, puede copiar las propiedades CSS en la sintaxis de JavaScript. Esta opción es útil si usa bibliotecas CSS en JS; consulte Edición de estilos para marcos CSS en JS.

Para copiar CSS:

  1. Vaya a una página web que use CSS, como la aplicación Tareas pendientes, en una nueva ventana o pestaña.

  2. Haga clic con el botón derecho en la página web y, a continuación, haga clic en Inspeccionar.

    Se abre DevTools, con la herramienta Elementos seleccionada.

  3. En el árbol DOM, seleccione un elemento, como <h1>.

  4. En la pestaña Estilos , dentro de una regla CSS, haga clic con el botón derecho en una propiedad CSS, como text-align: center:

    Menú desplegable Copiar CSS

  5. Seleccione un elemento de menú con el botón derecho:

    • Copia de la declaración. Copia la propiedad y su valor en la sintaxis CSS: property: value;

    • Copia de la propiedad . Copia solo el property nombre.

    • Valor de copia. Copia solo .value

    • Regla de copia. Copia toda la regla CSS: selector[, selector] { property: value; property: value; ... }

    • Copie la declaración como JS. Copia la propiedad y su valor en la sintaxis de JavaScript: propertyInCamelCase: 'value'

    • Copie todas las declaraciones. Copia todas las propiedades y sus valores en la sintaxis CSS: property: value; property: value; ...

    • Copie todas las declaraciones como JS. Copia todas las propiedades y sus valores en la sintaxis de JavaScript: propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

    • Copie todos los cambios de CSS. Copia los cambios que realice en la pestaña Estilos en todas las declaraciones. Este elemento de menú aparece condicionalmente.

    • Ver el valor calculado. Le lleva a la pestaña Calculado ; vea Ver solo el CSS que se aplica realmente a un elemento anterior.

Cambiar CSS

En esta sección se enumeran todas las formas en que puede cambiar CSS enEstilos de elementos>.

Además, puede:

Dos maneras de agregar una declaración CSS a un elemento

El orden de las declaraciones afecta al estilo de un elemento. Puede agregar declaraciones agregando una declaración insertada o agregando una declaración a una regla de estilo. Estos dos enfoques se describen en las secciones siguientes.

Adición de una declaración CSS insertada a un elemento

Agregar una declaración insertada equivale a agregar un style atributo al HTML de un elemento. En la mayoría de los escenarios, probablemente quiera usar declaraciones insertadas.

Las declaraciones insertadas tienen mayor especificidad que las declaraciones externas, por lo que el uso de declaraciones insertadas garantiza que los cambios surtan efecto en el elemento específico esperado. Para obtener más información sobre la especificidad, vea Tipos de selector en especificidad en MDN.

Para agregar una declaración insertada:

  1. Seleccione un elemento.

  2. En el panel Estilos , haga clic entre los corchetes de la sección element.style . El cursor se centra, lo que le permite escribir texto.

  3. Escriba un nombre de propiedad y presione Entrar.

  4. Escriba un valor válido para esa propiedad y presione Entrar. En el árbol DOM, se ha agregado un style atributo al elemento .

Como alternativa, escriba el valor en el campo de propiedad y DevTools sugerirá una lista de propiedades coincidentes: pares de valores entre los que seleccionar. Por ejemplo, si escribe bold en el campo de propiedad, DevTools sugiere font-weight: bold y font-weight: bolder como las reglas posibles. Presione Entrar para aplicar la regla.

En la ilustración siguiente, las margin-top propiedades y background-color se han aplicado al elemento seleccionado. En el árbol DOM, las declaraciones se reflejan en el atributo del style elemento.

Adición de declaraciones insertadas

Adición de una declaración CSS a una regla de estilo existente

Si va a depurar los estilos de un elemento y necesita probar específicamente lo que sucede cuando se define una declaración en lugares diferentes, agregue una declaración a una regla de estilo existente.

Para agregar una declaración a una regla de estilo existente:

  1. Seleccione un elemento.

  2. En el panel Estilos , haga clic entre los corchetes de la regla de estilo a la que desea agregar la declaración. El cursor se centra, lo que le permite escribir texto.

  3. Escriba un nombre de propiedad y presione Entrar.

  4. Escriba un valor válido para esa propiedad y presione Entrar.

Adición de una declaración a una regla de estilo

Cambio de un nombre o valor de declaración

Para cambiar el nombre de una declaración CSS, haga doble clic en el nombre de la declaración.

Para cambiar el valor de una declaración CSS, haga doble clic en el valor de la declaración. En la captura de pantalla siguiente se muestra cómo seleccionar un valor de una lista:

Cambio del valor de una declaración

Para cambiar un valor numérico, escriba el valor o use las teclas de dirección en la sección siguiente.

Cambio de valores enumerables con métodos abreviados de teclado

Para cambiar un valor numérico de una declaración CSS, escriba el valor o use las teclas de flecha para incrementar el valor en una cantidad específica. Al editar un valor enumerable de una declaración, por ejemplo, font-size, puede usar los siguientes métodos abreviados de teclado para incrementar el valor en una cantidad fija:

Combinación de teclas Acción
Alt+Flecha arriba (Windows, Linux), Opción+UpArrow (macOS) Incremente en 0,1.
Flecha arriba Incremente en 1 o en 0,1 si el valor actual está entre -1 y 1.
Mayús+Flecha arriba Incremente en 10.
Ctrl+Mayús+PgUp (Windows, Linux), Mayús+Comando+UpArrow (macOS) Incremente en 100.

Para disminuir, presione la tecla Flecha abajo (o Bajar página) en lugar de la tecla Flecha arriba (o Subir página).

Cambiar los valores de longitud

Puede usar el puntero para cambiar cualquier propiedad que tenga un valor de longitud, como width, height, padding, margino border.

Para cambiar la unidad de longitud:

  1. Abra una página web que use CSS, como la aplicación Tareas pendientes, en una nueva ventana o pestaña.

  2. Haga clic con el botón derecho en el texto Agregar una tarea y, a continuación, seleccione Inspeccionar.

    Se abre DevTools, que muestra la herramienta Elementos . El <label> elemento se selecciona en el árbol DOM.

  3. En la pestaña Estilos , en la .new-task-form regla CSS, en la propiedad , mantenga el max-width: puntero sobre 50rem.

    Aparece una información sobre herramientas que muestra el valor y las unidades equivalentes: 800px.

  4. Haga clic en el valor 50rem.

    Aparece una información sobre herramientas: "Incremento/decremento con rueda del mouse o teclas arriba/abajo. Ctrl: +/-100, Mayús: +/-10, Alt: +/-0.1"

  5. Mueva el mousewheel o presione las teclas UpArrow y DownArrow mientras presiona una tecla:

    Ctrl: incrementa en 100. Mayús: incrementa en 10. Alt: incrementa en 0,1.

    En la página web inspeccionada, el cuadro de texto Agregar una entrada de tarea cambia de ancho a medida que cambia el valor.

  6. En el campo de valor de la propiedad max-width, cree el valor 200px (cambiando de rem unidades a px unidades).

  7. Mueva de nuevo el mousewheel o presione las teclas UpArrow y DownArrow mientras mantiene presionadas las teclas Ctrl (+/-100), Mayús (+/-10) o Alt (+/-0.1).

    En la página web inspeccionada, el cuadro de texto Agregar una entrada de tarea cambia de ancho a medida que cambia el valor:

    Cambio del ancho máximo del cuadro de texto de entrada

Adición de una clase a un elemento

Para agregar una clase a un elemento:

  1. Seleccione el elemento en el árbol DOM.

  2. Haga clic en .cls.

  3. Escriba el nombre de la clase en el cuadro de texto Agregar nueva clase .

  4. Presione Entrar.

    Panel Clases de elemento

Emular las preferencias de temas claros y oscuros y habilitar el modo automático oscuro

Para alternar el modo oscuro automático o emular la preferencia del usuario por los temas claros o oscuros:

  1. En la herramienta Elementos , en la pestaña Estilos , haga clic en el botón Alternar emulaciones de representación comunes (icono de pincel) en la esquina superior derecha:

    Alternar emulaciones de representación comunes

  2. Seleccione una de las siguientes opciones en la lista desplegable:

    • prefers-color-scheme: light. Indica que el usuario prefiere el tema claro.

    • prefers-color-scheme: oscuro. Indica que el usuario prefiere el tema oscuro.

    • Modo oscuro automático. Muestra la página en modo oscuro incluso si no la implementó. Además, establece prefers-color-scheme en dark automáticamente.

Esta lista desplegable es un acceso directo para emular la característica prefers-color-schemede medios CSS y habilitar las opciones de modo oscuro automático de la herramienta representación.

Vea también:

Alternar una clase

Para habilitar o deshabilitar una clase en un elemento:

  1. Seleccione el elemento en el árbol DOM.

  2. Abra el panel Clases de elemento . Vea Agregar una clase a un elemento. Debajo de los cuadros de texto Agregar nueva clase se encuentran todas las clases que se aplican a este elemento.

  3. Active la casilla situada junto a la clase que desea habilitar o deshabilitar.

Adición de una regla de estilo

Para agregar una nueva regla de estilo:

  1. Seleccione un elemento.

  2. Haga clic en Nueva regla de estilo (nueva regla de estilo). DevTools inserta una nueva regla debajo de la regla element.style .

    En la ilustración siguiente, DevTools agrega la regla de h1.devsite-page-title estilo después de hacer clic en Nueva regla de estilo.

    Adición de una nueva regla de estilo

Seleccione una hoja de estilos a la que agregar una regla.

De forma predeterminada, al agregar una regla de estilo, DevTools crea una nueva hoja de estilos denominada inspector-stylesheet en el documento y, a continuación, agrega la nueva regla de estilo en esta hoja de estilos.

Para agregar la regla en una hoja de estilos existente:

  • Haga clic y mantenga presionada la opción Nueva regla de estilo (nueva regla de estilo) y, a continuación, seleccione una hoja de estilos de la lista a la que agregar la regla de estilo.

Selección de una hoja de estilos

Adición de una regla de estilo a una ubicación específica en una hoja de estilos

De forma predeterminada, al agregar una regla de estilo al hacer clic en el botón Nueva regla de estilo (icono Nueva regla de estilo) se inserta la nueva regla debajo de la regla element.style en la hoja de inspector-stylesheet estilos.

Para agregar una regla de estilo en una ubicación específica de una hoja de estilos determinada empezando por el panel Estilos :

  1. En la herramienta Elementos , en la pestaña Estilos , mantenga el puntero sobre la regla de estilo que está directamente encima de donde desea agregar la nueva regla de estilo.

    A continuación, aparece un botón Insertar regla de estilo (insertar regla de estilo debajo del icono) en el lado derecho de la regla CSS.

  2. Haga clic en el botón Insertar regla de estilo siguiente (insertar regla de estilo debajo del icono):

    Insertar regla de estilo a continuación

Alternar una declaración

Para activar o desactivar una sola declaración:

  1. Seleccione un elemento.

  2. En el panel Estilos , mantenga el puntero sobre la regla que define la declaración. Aparece una casilla junto a cada declaración.

  3. Active o desactive la casilla situada junto a la declaración. Cuando se borra una declaración, DevTools la cruza para indicar que ya no está activa.

    En la ilustración siguiente, se ha desactivado la margin-top propiedad del elemento seleccionado actualmente.

    Alternar una declaración

Editar los ::view-transition pseudoelementos durante una animación

Vea:

Alinear elementos de cuadrícula y su contenido con el Editor de cuadrícula

Vea:

Cambio de colores con el selector de colores

El selector de color proporciona una interfaz de usuario para cambiar color y background-color declaraciones.

Para abrir el selector de colores:

  1. Seleccione un elemento.

  2. En el panel Estilos , busque la colordeclaración , background-coloro similar que desea cambiar. A la izquierda del colorvalor , background-coloro similar, hay un cuadrado pequeño, que es una vista previa del color.

    En la ilustración siguiente, el cuadrado pequeño situado a la izquierda de rgba(0, 0, 0, 0.7) es una vista previa de ese color.

    Vista previa de color

  3. Haga clic en la vista previa para abrir el Selector de colores.

    Selector de color

En la siguiente ilustración y lista se describe cada uno de los elementos de la interfaz de usuario del selector de colores.

Selector de color, anotado

Llamada Componente Descripción
1 Sombras
2 Cuentagotas Muestra de un color fuera de la página con el cuentagotas
3 Copiar en el portapapeles Copie el valor para mostrar en el Portapapeles.
4 Valor para mostrar Representación RGBA, HSLA o hexadecimal del color.
5 Paleta de colores Haga clic en un cuadrado para cambiar el color.
6 Hue
7 Opacidad
8 Mostrar modificador de valor Alternar entre las representaciones RGBA, HSLA y Hexadecimal del color actual.
9 Modificador de paleta de colores Alternar entre la paleta Diseño de materiales, una paleta personalizada o una paleta de colores de página. DevTools genera la paleta de colores de página en función de los colores que encuentre en las hojas de estilos.

Vea también:

Muestra de un color fuera de la página con el cuentagotas

Para cambiar el color seleccionado a otro color de la página:

  1. Haga clic en el icono Cuentagotas (Cuentagotas). El cursor cambia a una lupa.

  2. Mantenga el puntero sobre el píxel que tiene el color que desea muestrear, en cualquier lugar de la pantalla.

  3. Haga clic para confirmar.

    En la ilustración siguiente, el Selector de color muestra un valor de color actual de , que está cerca del rgba(0,0,0,0.7)negro. El color específico cambia a la versión de negro que está resaltada actualmente en la ventanilla después de hacer clic en ella.

    Uso del cuentagotas

Vea también:

Cambiar el valor de ángulo con el reloj angular

El reloj angular proporciona una interfaz de usuario para cambiar las cantidades de ángulo en los valores de propiedad CSS.

Para abrir el reloj angular:

  1. Seleccione un elemento que incluya una declaración de ángulo.

  2. En el panel Estilos , busque la transform declaración o background que desea cambiar. Haga clic en el cuadro Vista previa del ángulo situado junto al valor de ángulo.

    En la ilustración siguiente, el pequeño reloj situado a la izquierda de 100deg es una vista previa del ángulo.

  3. Haga clic en la vista previa para abrir el reloj angular:

    Vista previa de ángulo

  4. Cambie el valor del ángulo haciendo clic en el círculo reloj angular o desplácese el mouse para aumentar o reducir el valor del ángulo en 1.

Hay más métodos abreviados de teclado para cambiar el valor del ángulo. Obtenga más información en los métodos abreviados de teclado del panel Estilos.

Cambiar las sombras de cuadro y texto con el Editor de sombras

Use el Editor de sombras para cambiar el valor de la box-shadow propiedad o text-shadow CSS en un elemento HTML:

  1. Seleccione un elemento con una box-shadow declaración o text-shadow .

    Por ejemplo, abra la página de demostración de 1DIV en una nueva pestaña o ventana, haga clic con el botón derecho en la página y seleccione Inspeccionar para abrir DevTools y, a continuación, en la herramienta Elementos , seleccione el <div class="demos"> elemento.

  2. En el panel Estilos , en la .demos regla CSS, busque la box-shadow declaración y, a continuación, haga clic en el botón Abrir editor de sombras (icono del botón Editor de sombras).

    Se abre el Editor de sombras :

    Editor de sombras

  3. Cambie las propiedades de sombra, como se indica a continuación:

    Propiedad Cómo cambiar
    Tipo Seleccione Inicio oInicio. Solo para box-shadow.
    Desplazamiento X Especifique un valor en el cuadro de texto o arrastre el punto azul.
    Desplazamiento Y Especifique un valor en el cuadro de texto o arrastre el punto azul.
    Desenfoque Especifique un valor en el cuadro de texto o arrastre el control deslizante.
    Extenderse Especifique un valor en el cuadro de texto o arrastre el control deslizante. Solo para box-shadow.

    Los cambios se aplican al elemento de la página web representada en tiempo real:

    Efecto de los cambios realizados en el Editor de sombras

Edición de tiempos de animación y transición con el Editor de aceleración

Use el Editor de aceleración para cambiar el valor de la propiedad animation-timing-function o transition-timing-function en un elemento HTML.

Para abrir el Editor de Easing:

  1. En DevTools, en la herramienta Elementos , en el árbol DOM, seleccione un elemento que tenga aplicada una animación CSS o una transición.

    Por ejemplo, abra la página de demostración de propiedades animadas en una nueva pestaña o ventana, haga clic con el botón derecho en el cuadro verde que contiene una animación y, a continuación, seleccione Inspeccionar.

    Se abre DevTools, que muestra la herramienta Elementos .

  2. Presione Ctrl+F y busque "spinner" y, a continuación, seleccione el <div class="spinner"> elemento que está dentro <div class="animation-demo good">de .

    Los cuadros rojo (malo) y verde (bueno) de esta página de demostración son dos animaciones CSS diferentes. Ambas animaciones se ejecutan con CSS mediante la animation propiedad CSS y definen una función de ease-in-out temporización.

  3. En la pestaña Estilos , en la .good .spinner regla CSS, en la animation declaración, a la izquierda de ease-in-out, haga clic en el botón Abrir editor de bézier cúbica (icono del editor bézier cúbica).

    Se abre el Editor de aceleración :

    Editor de aceleración

Uso de valores preestablecidos para ajustar los tiempos

Para ajustar los tiempos con un simple clic con el mouse, use los valores preestablecidos en el Editor de aceleración:

  1. Abra el Editor de aceleración, como se describe en Edición de tiempos de animación y transición con el Editor de aceleración, anteriormente.

  2. Haga clic en uno de los cuatro botones del selector:

    Botón Tipo de función Palabra clave CSS
    Funciones de aceleración lineal Funciones lineales linear
    Funciones de aceleración de entrada y salida Funciones de facilidad de entrada y salida ease-in-out
    Funciones de aceleración sencillas Funciones de facilitación ease-in
    Funciones de aceleración de la facilidad de uso Funciones de facilitación ease-out

    Al seleccionar un botón, se establece un valor de palabra clave en la regla CSS (que varía si se selecciona un valor preestablecido de variante en el paso siguiente) y el modificador Presets se abre en la parte inferior del Editor de aceleración.

  3. En el conmutador Valores preestablecidos, haga clic en los botones Izquierdo< o Derecho> para seleccionar uno de los siguientes valores preestablecidos:

    • Valores preestablecidos lineales: elastic, bounceo emphasized.

    • Valores preestablecidos de Bézier cúbicas:

    Palabra clave timing Valor preestablecido Bézier cúbica
    facilidad de entrada y salida En salida, seno cubic-bezier(0.45, 0.05, 0.55, 0.95)
    facilidad de entrada y salida In Out, Quadratic cubic-bezier(0.46, 0.03, 0.52, 0.96)
    facilidad de entrada y salida En salida, cúbica cubic-bezier(0.65, 0.05, 0.36, 1)
    facilidad de entrada y salida Salida rápida, entrada lenta cubic-bezier(0.4, 0, 0.2, 1)
    facilidad de entrada y salida En salida, atrás cubic-bezier(0.68, -0.55, 0.27, 1.55)
    Palabra clave timing Valor preestablecido Bézier cúbica
    facilitación In, Sine cubic-bezier(0.47, 0, 0.75, 0.72)
    facilitación In, Quadratic cubic-bezier(0.55, 0.09, 0.68, 0.53)
    facilitación In, Cubic cubic-bezier(0.55, 0.06, 0.68, 0.19)
    facilitación Entrada, atrás cubic-bezier(0.6, -0.28, 0.74, 0.05)
    facilitación Salida rápida, entrada lineal cubic-bezier(0.4, 0, 1, 1)
    Palabra clave timing Valor preestablecido Bézier cúbica
    facilitar la salida Afuera, seno cubic-bezier(0.39, 0.58, 0.57, 1)
    facilitar la salida Out, Quadratic cubic-bezier(0.25, 0.46, 0.45, 0.94)
    facilitar la salida Out, Cubic cubic-bezier(0.22, 0.61, 0.36, 1)
    facilitar la salida Salida lineal, entrada lenta cubic-bezier(0, 0, 0.2, 1)
    facilitar la salida Fuera, atrás cubic-bezier(0.18, 0.89, 0.32, 1.28)

Vea también:

Configuración de tiempos personalizados

Para establecer valores personalizados para las funciones de control de tiempo, use los puntos de control de las líneas:

  • Para las funciones lineales, haga clic en cualquier lugar de la línea para agregar un punto de control y arrástrelo. Para quitar un punto de control, haga doble clic en él.

    Arrastrar un punto de control de una función lineal

  • Para las funciones De bézier cúbicas, arrastre uno de los puntos de control:

    Arrastrar los puntos de control de una función De bézier cúbica

Cualquier cambio desencadena una animación de bola en la vista previa en la parte superior del Editor de aceleración.

Vea también

Demostraciones:

MDN:

GitHub:

Web.dev:

Blog de Chrome para desarrolladores:

Documentación de Chrome:

material.io:

Nota:

Las partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y usadas según los términos descritos en la licencia internacional creative Commons Attribution 4.0. La página original se encuentra aquí y está creada por Kayce Basques.

Licencia de Creative Commons Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.

  • Last updated on