Referencia de las funciones de CSS

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

Descubre nuevos flujos de trabajo en esta referencia integral de las funciones de las Herramientas para desarrolladores de Chrome relacionadas con la visualización y el cambio de CSS.

Consulta Cómo ver y cambiar el CSS para conocer los conceptos básicos.

Seleccionar un elemento

El panel Elements de DevTools te permite ver o cambiar el CSS de un elemento a la vez.

En la captura de pantalla, el elemento h1 destacado en azul en el árbol del DOM es el elemento seleccionado. A la derecha, los diseños del elemento se muestran en la pestaña Estilos. A la izquierda, el elemento se destaca en la vista del puerto, pero solo porque el mouse se coloca sobre él en el Árbol del DOM.

Consulta Cómo ver el CSS de un elemento para obtener un instructivo.

Existen muchas formas de seleccionar un elemento:

• En tu vista de portabilidad, haz clic con el botón derecho en el elemento y selecciona Inspeccionar.
• En DevTools, haz clic en Seleccionar un elemento o presiona Comando+Mayúsculas+C (Mac) o Control+Mayúsculas+C (Windows y Linux) y, luego, haz clic en el elemento en el viewport.
• En DevTools, haz clic en el elemento del árbol del DOM.
• En las Herramientas para desarrolladores, ejecuta una consulta como document.querySelector('p') en la consola, haz clic con el botón derecho en el resultado y, luego, selecciona Mostrar en el panel de elementos.

Ver CSS

Usa las pestañas Elementos > Estilos y Procesamiento para ver las reglas de CSS y diagnosticar problemas de CSS.

Cómo navegar con vínculos

En la pestaña Estilos, se muestran vínculos en varios lugares a otros lugares, incluidos, entre otros, los siguientes:

• Junto a las reglas de CSS, a las hojas de estilo y a las fuentes de CSS. Estos vínculos abren el panel Fuentes. Si la hoja de estilo está reducida, consulta Cómo hacer que un archivo reducido sea legible.
• En las secciones Heredado de…, a los elementos superiores.
• En llamadas a var(), a declaraciones de propiedad personalizada.
• En las propiedades de abreviatura animation, a @keyframes.
• Vínculos Más información en las herramientas de ayuda de la documentación
• Y mucho más.

Estos son algunos de ellos:

Los vínculos pueden tener un estilo diferente. Si no sabes si algo es un vínculo, haz clic en él para averiguarlo.

Cómo ver información sobre herramientas con documentación de CSS, especificidad y valores de propiedades personalizadas

En Elementos > Estilos, se muestran cuadros de información con información útil cuando colocas el cursor sobre elementos específicos.

Ver la documentación de CSS

Para ver una información sobre herramientas con una descripción breve de CSS, coloca el cursor sobre el nombre de la propiedad en la pestaña Styles.

Nota: DevTools extrae las descripciones de las herramientas de ayuda de los datos personalizados de VS Code.

Haz clic en Más información para ir a una referencia de CSS de MDN sobre esta propiedad.

Para desactivar las indicaciones sobre herramientas, marca No mostrar.

Para volver a activarlos, marca Configuración > Preferencias > Elementos > Mostrar la información sobre herramientas de la documentación de CSS.

Especificidad del selector de vista

Coloca el cursor sobre un selector para ver una información sobre la herramienta con su peso de especificidad.

Cómo ver los valores de las propiedades personalizadas

Coloca el cursor sobre un --custom-property para ver su valor en la información.

Cómo ver CSS no válido, anulado, inactivo y otros

La pestaña Styles reconoce muchos tipos de problemas de CSS y los destaca de diferentes maneras.

Consulta Comprende CSS en la pestaña Estilos.

Consulta solo el CSS que se aplica realmente a un elemento

En la pestaña Diseños, se muestran todas las reglas que se aplican a un elemento, incluidas las declaraciones que se anularon. Cuando no te interesen las declaraciones anuladas, usa la pestaña Cálculo para ver solo el CSS que se aplica realmente a un elemento.

1. Selecciona un elemento.
2. Ve a la pestaña Cálculos en el panel Elementos.

Marca la casilla de verificación Mostrar todo para ver todas las propiedades.

Consulta Comprende CSS en la pestaña Computada.

Cómo ver las propiedades de CSS en orden alfabético

Usa la pestaña Cálculos. Consulta Cómo ver solo el CSS que se aplica realmente a un elemento.

Cómo ver las propiedades CSS heredadas

Marca la casilla de verificación Mostrar todo en la pestaña Cálculos. Consulta Cómo ver solo el CSS que se aplicó a un elemento.

Como alternativa, desplázate por la pestaña Estilos y busca secciones con el nombre Inherited from <element_name>.

Cómo ver las reglas de at de CSS

Las reglas “at-rules” son instrucciones de CSS que te permiten controlar su comportamiento. En Elementos > Estilos, se muestran las siguientes reglas de anidación en secciones específicas:

• @property
• @supports
• @scope
• @font-palette-values
• @position-try

Ver @property at-rules

La regla-at de CSS @property te permite definir propiedades personalizadas de CSS de forma explícita y registrarlas en una hoja de estilo sin ejecutar ningún JavaScript.

Coloca el cursor sobre el nombre de esa propiedad en la pestaña Styles para ver un cuadro de información con el valor, los descriptores y un vínculo a su registro en la sección @property plegable que se encuentra en la parte inferior de la pestaña Styles.

Para editar una regla @property, haz doble clic en su nombre o valor.

Cómo ver reglas de @supports

La pestaña Estilos muestra las reglas at-rules de CSS @supports si se aplican a un elemento. Por ejemplo, inspecciona el siguiente elemento:

Si tu navegador admite la función lab(), el elemento será verde; de lo contrario, será púrpura.

Nota: En el momento de escribir este artículo, solo Safari admite el espacio de color CIELAB.

Cómo ver reglas de @scope

En la pestaña Styles, se muestran las directivas @scope de CSS si se aplican a un elemento.

Las nuevas reglas de @scope forman parte de la especificación de nivel 6 de herencia y cascada de CSS. Estas reglas te permiten definir el alcance de los estilos CSS, es decir, aplicar estilos a elementos específicos de forma explícita.

Nota: La función de regla de @scope es experimental. Para probarlo, habilita la marca Funciones experimentales de la plataforma web en chrome://flags/#enable-experimental-web-platform-features. De lo contrario, la siguiente vista previa no funcionará.

Consulta la regla @scope en la siguiente vista previa:

1. Inspecciona el texto de la tarjeta en la vista previa.
2. En la pestaña Estilos, busca la regla @scope.

En este ejemplo, la regla @scope anula la declaración global de background-color de CSS para todos los elementos <p> dentro de elementos con una clase card.

Para editar la regla @scope, haz doble clic en ella.

Cómo ver reglas de @font-palette-values

La regla de anidación @font-palette-values de CSS te permite personalizar los valores predeterminados de la propiedad font-palette. Elementos > Estilos muestra esta regla AT en una sección dedicada.

Consulta la sección @font-palette-values en la siguiente vista previa:

1. Inspecciona la segunda línea de texto en la vista previa.
2. En Estilos, busca la sección @font-palette-values.

En este ejemplo, los valores de la paleta de fuentes --New anulan los predeterminados de la fuente de color.

Para editar los valores personalizados, haz doble clic en ellos.

Cómo ver reglas de @position-try

La regla de CSS @position-try junto con la propiedad position-try-options te permiten definir posiciones de anclaje alternativas para los elementos. Para obtener más información, consulta Presentamos la API de posicionamiento de anclas de CSS.

Elementos > Estilos resuelve y vincula lo siguiente:

• valores de la propiedad position-try-options a una sección @position-try --name dedicada.
• Valores de propiedad position-anchor y argumentos anchor() a los elementos correspondientes con atributos popovertarget.

Inspecciona los valores position-try-options y las secciones @position-try en la siguiente vista previa:

Demostración con ancla con popover

1. En la vista previa, abre el submenú, es decir, haz clic en TU CUENTA y, luego, en VIDRIERA.
2. Inspecciona el elemento con id="submenu" en la vista previa.
3. En Estilos, busca la propiedad position-try-options y haz clic en su valor --bottom. La pestaña Diseños te lleva a la sección @position-try correspondiente.
4. Haz clic en el vínculo del valor position-anchor o en los mismos argumentos anchor(). El panel Elementos selecciona el elemento con el atributo popovertarget correspondiente y la pestaña Estilos muestra el CSS del elemento.

Para editar valores, haz doble clic en ellos.

Cómo ver el modelo de cuadro de un elemento

Para ver el modelo de cuadro de un elemento, ve a la pestaña Estilos y haz clic en el botón Mostrar barra lateral en la barra de acción.

Para cambiar un valor, haz doble clic en él.

Busca y filtra el CSS de un elemento

Usa el cuadro Filtrar en las pestañas Estilos y Cálculos para buscar propiedades o valores específicos de CSS.

Para buscar también propiedades heredadas en la pestaña Cálculo, marca la casilla de verificación Mostrar todo.

Para navegar por la pestaña Cálculo, marca Agrupar para agrupar las propiedades filtradas en categorías que se pueden contraer.

Emular una página enfocada

Si cambias el enfoque de la página a Herramientas para desarrolladores, algunos elementos superpuestos se ocultan automáticamente si se activan por el enfoque. Por ejemplo, listas desplegables, menús o selectores de fecha. La opción check_box Emulate a focused page te permite depurar un elemento como si estuviera enfocado.

Precaución: Si activas esta opción, document.visibilityState se establecerá en visible y no se activará el evento visibilitychange. Para obtener más información, consulta la API de Page Visibility.

Intenta emular una página enfocada en esta página de demostración:

1. Enfoca el elemento de entrada. Aparecerá otro elemento debajo.
2. Abre las Herramientas para desarrolladores. La ventana de DevTools ahora está en foco en lugar de la página, por lo que el elemento vuelve a desaparecer.
3. En Elementos > Estilos, haz clic en :hov, marca check_box Emular una página enfocada y asegúrate de que el elemento de entrada esté seleccionado. Ahora puedes inspeccionar el elemento debajo de él.

También puedes encontrar la misma opción en el panel Renderización.

Para descubrir más formas de inmovilizar un elemento, consulta Inmoviliza la pantalla y revisa los elementos que desaparecen.

Activa o desactiva una pseudoclase

Para activar o desactivar una pseudoclase, haz lo siguiente:

1. Selecciona un elemento.
2. En el panel Elementos, ve a la pestaña Diseños.
3. Haz clic en :hov.
4. Marca la pseudoclase que quieres activar.

En este ejemplo, puedes ver que DevTools aplica la declaración background-color al elemento, aunque no se esté colocando el cursor sobre él.

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

• :active
• :focus
• :focus-within
• :target
• :hover
• focus-visible

Además, algunos elementos pueden tener sus propias pseudoclases. Cuando seleccionas un elemento de este tipo, la pestaña Styles muestra una sección Force specific element state que puedes expandir y activar para aplicar pseudoclases específicas al elemento.

Consulta Agrega un pseudoestado a una clase para ver un instructivo interactivo.

Cómo ver los pseudoelementos de resaltado heredados

Los seudoelementos te permiten aplicar diseño a partes específicas de los elementos. Los seudoelementos destacados son partes de documentos con el estado "seleccionado" y tienen el estilo "destacado" para indicarlo al usuario. Por ejemplo, esos pseudoelementos son ::selection, ::spelling-error, ::grammar-error y ::highlight.

Como se menciona en la especificación, cuando hay varios estilos en conflicto, la cascada determina el estilo ganador.

Nota: Para habilitar esta función, ejecuta Chrome con la marca --enable-blink-features=HighlightInheritance.

Para comprender mejor la herencia y la prioridad de las reglas, puedes ver los pseudoelementos de resaltado heredados:

1. Inspecciona el siguiente texto.

   Heredé el estilo del seudoelemento de destaque de mi elemento superior. ¡Selecciona mi!

2. Selecciona una parte del texto de arriba.

3. En la pestaña Estilos, desplázate hacia abajo hasta la sección Inherited from ::selection pseudo of....

Cómo ver las capas en cascada

Las capas en cascada permiten un control más explícito de tus archivos CSS para evitar conflictos de especificidad de diseño. Esto es útil para bases de código grandes, sistemas de diseño y cuando se administran estilos de terceros en aplicaciones.

Para ver las capas en cascada, inspecciona el siguiente elemento y abre Elementos > Estilos.

En la pestaña Styles, consulta las 3 capas en cascada y sus estilos: page, component y base.

Para ver el orden de las capas, haz clic en el nombre de la capa o en el botón Toggle CSS layers view.

La capa page tiene la especificidad más alta, por lo que el fondo del elemento es verde.

Cómo ver una página en modo de impresión

Para ver una página en modo de impresión, haz lo siguiente:

1. Abre el menú de comandos.
2. Comienza a escribir Rendering y selecciona Show Rendering.
3. En el menú desplegable Emular medios de CSS, selecciona print.

Consulta los elementos CSS usados y no usados con la pestaña Cobertura

La pestaña Cobertura muestra el CSS que usa una página.

1. Presiona Comando+Mayúsculas+P (Mac) o Control+Mayúsculas+P (Windows, Linux y ChromeOS) mientras DevTools está en foco para abrir el menú de comandos.

2. Comienza a escribir coverage.

   

3. Selecciona Mostrar cobertura. Aparecerá la pestaña Cobertura.

   

4. Haz clic en Volver a cargar. La página se vuelve a cargar y la pestaña Cobertura proporciona una descripción general de cuánto CSS (y JavaScript) se usa de cada archivo que carga el navegador.

   

   El verde representa el CSS utilizado. El rojo representa el CSS que no se usa.

5. Haz clic en un archivo CSS para ver un desglose por línea de lo que usa el CSS en la vista previa anterior.

   

   En la captura de pantalla, las líneas 55 a 57 y 65 a 67 de devsite-google-blue.css no están en uso, mientras que las líneas 59 a 63 se usan.

Cómo forzar el modo de vista previa de impresión

Consulta Cómo forzar las Herramientas para desarrolladores al modo de vista previa de impresión.

Cómo copiar CSS

Desde un solo menú desplegable en la pestaña Styles, puedes copiar reglas, declaraciones, propiedades y valores de CSS separados.

Además, puedes copiar propiedades CSS en sintaxis JavaScript. Esta opción es útil si usas bibliotecas de CSS en JS.

Para copiar CSS, sigue estos pasos:

1. Selecciona un elemento.
2. En la pestaña Elementos > Estilos, haz clic con el botón derecho en una propiedad de CSS.

3. Selecciona una de las siguientes opciones en el menú desplegable:

   • Copiar declaración. Copia la propiedad y su valor en sintaxis CSS: css property: value;
   • Copiar propiedad. Solo copia el nombre property.
   • Copiar valor. Solo copia el value.
   • Copiar regla. Copia toda la regla de CSS: css selector[, selector] { property: value; property: value; ... }
   • Copia la declaración como JS. Copia la propiedad y su valor en la sintaxis de JavaScript: js propertyInCamelCase: 'value'
   • Copia todas las declaraciones. Copia todas las propiedades y sus valores en la regla CSS: css property: value; property: value; ...

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

   • Copia todos los cambios de CSS. Copia los cambios que realices en la pestaña Estilos en todas las declaraciones.

   • Consulta el valor calculado. Te lleva a la pestaña Calculado.

Cambia el CSS

En esta sección, se enumeran todas las formas en que puedes cambiar el CSS en Elementos > Estilos.

Además, puedes hacer lo siguiente:

• Anula el CSS en todas las cargas de páginas.
• Guarda el CSS modificado en tus fuentes locales en un lugar de trabajo.

Agrega una declaración de CSS a un elemento

Dado que el orden de las declaraciones afecta la forma en que se aplica el diseño a un elemento, puedes agregar declaraciones de diferentes maneras:

• Agrega una declaración intercalada. Equivale a agregar un atributo style al HTML del elemento.
• Agrega una declaración a una regla de estilo.

¿Qué flujo de trabajo deberías usar? En la mayoría de los casos, es recomendable usar el flujo de trabajo de declaración intercalada. Las declaraciones intercaladas tienen una especificidad más alta que las externas, por lo que el flujo de trabajo intercalado garantiza que los cambios se apliquen en el elemento como esperas. Consulta Tipos de selectores para obtener más información sobre la especificidad.

Si estás depurando los estilos de un elemento y necesitas probar específicamente lo que sucede cuando una declaración se define en diferentes lugares, usa el otro flujo de trabajo.

Agrega una declaración intercalada

Para agregar una declaración intercalada, sigue estos pasos:

1. Selecciona un elemento.
2. En la pestaña Styles, haz clic entre los corchetes de la sección element.style. El cursor se enfoca, lo que te permite ingresar texto.
3. Ingresa un nombre de propiedad y presiona Intro.

4. Ingresa un valor válido para esa propiedad y presiona Intro. En el árbol del DOM, puedes ver que se agregó un atributo style al elemento.

   

   En la captura de pantalla, se aplicaron las propiedades margin-top y background-color al elemento seleccionado. En el árbol del DOM puedes ver las declaraciones reflejadas en el atributo style del elemento.

Agrega una declaración a una regla de estilo

Para agregar una declaración a una regla de estilo existente, haz lo siguiente:

1. Selecciona un elemento.
2. En la pestaña Styles, haz clic entre los corchetes de la regla de estilo a la que deseas agregar la declaración. El cursor se enfoca, lo que te permite ingresar texto.
3. Ingresa un nombre de propiedad y presiona Intro.
4. Ingresa un valor válido para esa propiedad y presiona Intro.

En la captura de pantalla, una regla de estilo obtiene la nueva declaración border-bottom-style:groove.

Cómo cambiar el nombre o el valor de una declaración

Haz doble clic en el nombre o valor de una declaración para cambiarlo. Consulta Cómo cambiar valores enumerables con combinaciones de teclas para obtener combinaciones de teclas que permitan incrementar o disminuir rápidamente un valor en 0.1, 1, 10 o 100 unidades.

Cómo cambiar valores enumerables con combinaciones de teclas

Mientras editas un valor enumerable de una declaración, por ejemplo, font-size, puedes usar las siguientes combinaciones de teclas para incrementar el valor en una cantidad fija:

• Opción + Arriba (Mac) o Alt + Arriba (Windows y Linux) para incrementar en 0.1.
• Arriba para cambiar el valor en 1 o en 0.1 si el valor actual está entre -1 y 1.
• Mayúsculas + Arriba para aumentar en 10.
• Mayúsculas+Comando+Arriba (Mac) o Control+Mayúsculas+Repág (Windows, Linux) para aumentar el valor en 100.

Disminuir también funciona. Solo reemplaza cada instancia de Arriba mencionada anteriormente por Abajo.

Cambia los valores de longitud

Obsoleto: Esta función dejó de estar disponible en Chrome 123. Para volver a activarla temporalmente, borra la configuración Configuración > Experimentos > check_box Dar de baja la herramienta de creación de CSS <length> en la pestaña Estilos. No dudes en dejar comentarios en crbug/1522657.

Puedes usar el puntero para cambiar cualquier propiedad con longitud, como ancho, altura, padding, margen o borde.

Para cambiar la unidad de longitud, sigue estos pasos:

1. Coloca el cursor sobre el nombre de la unidad y observa que está subrayado.

2. Haz clic en el nombre de la unidad para seleccionar una unidad del menú desplegable.

Para cambiar el valor de la longitud, sigue estos pasos:

1. Coloca el cursor sobre el valor de la unidad y observa que el puntero cambia a una flecha horizontal de doble punta.

2. Arrastra horizontalmente para aumentar o disminuir el valor.

Para ajustar el valor en un 10, mantén presionada la tecla Mayúsculas mientras lo arrastras.

Cómo agregar una clase a un elemento

Para agregar una clase a un elemento, sigue estos pasos:

1. Selecciona el elemento en el Árbol de DOM.
2. Haz clic en .cls.
3. Ingresa el nombre de la clase en el cuadro Add New Class.
4. Presiona Intro.

Emula las preferencias de los temas claro y oscuro, y habilita el modo oscuro automático

Para activar o desactivar el modo oscuro automático o emular la preferencia del usuario por los temas oscuros o claros, haz lo siguiente:

1. En la pestaña Elementos > Estilos, haz clic en Activar o desactivar emulaciones de renderización comunes.

2. Selecciona una de las siguientes opciones de 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 tu página en modo oscuro, incluso si no lo implementaste. Además, configura prefers-color-scheme como dark automáticamente.

Este menú desplegable es un atajo para las opciones Emular la función multimedia CSS prefers-color-scheme y Habilitar el modo oscuro automático de la pestaña Renderización.

Cómo activar o desactivar una clase

Para habilitar o inhabilitar una clase en un elemento, sigue estos pasos:

1. Selecciona el elemento en el Árbol de DOM.
2. Abre la sección Clases de elementos. Consulta Cómo agregar una clase a un elemento. Debajo del cuadro Add New Class, se encuentran todas las clases que se aplican a este elemento.
3. Activa o desactiva la casilla de verificación junto a la clase que deseas habilitar o inhabilitar.

Agregar una regla de estilo

Para agregar una nueva regla de estilo, haz lo siguiente:

1. Selecciona un elemento.
2. Haz clic en Nueva regla de estilo . DevTools inserta una regla nueva debajo de la regla element.style.

En la captura de pantalla, las Herramientas para desarrolladores agrega la regla de estilo h1.devsite-page-title después de hacer clic en New Style Rule.

Elige a qué hoja de estilo quieres agregar una regla

Cuando agregues una regla de estilo nueva, mantén presionado Nueva regla de estilo para elegir a qué hoja de estilo se agregará la regla de estilo.

Cómo activar o desactivar una declaración

Para activar o desactivar una sola declaración, haz lo siguiente:

1. Selecciona un elemento.
2. En la pestaña Styles, coloca el cursor sobre la regla que define la declaración. Las casillas de verificación aparecen junto a cada declaración.
3. Marca o desmarca la casilla de verificación junto a la declaración. Cuando borras una declaración, DevTools la tacha para indicar que ya no está activa.

En la captura de pantalla, la propiedad color del elemento seleccionado actualmente está desactivada.

Cómo editar los pseudoelementos ::view-transition durante una animación

Consulta la sección correspondiente en Animaciones.

Para obtener más información, consulta Cómo crear transiciones simples y fluidas con la API de View Transitions.

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

Consulta la sección correspondiente en Inspeccionar cuadrícula de CSS.

Cómo cambiar los colores con el Selector de colores

Consulta Cómo inspeccionar y depurar colores HD y no HD con el selector de color.

Cómo cambiar el valor de ángulo con el reloj angular

El reloj de ángulo proporciona una GUI para cambiar los <angle> en los valores de las propiedades CSS.

Para abrir el reloj de ángulo, haz lo siguiente:

1. Selecciona un elemento con la declaración de ángulo.

2. En la pestaña Styles, busca la declaración transform o background que deseas cambiar. Haz clic en el cuadro Vista previa del ángulo junto al valor del ángulo.

   

   Los relojes pequeños a la izquierda de -5deg y 0.25turn son las vistas previas de los ángulos.

3. Haz clic en la vista previa para abrir Reloj angular.

   

4. Para cambiar el valor del ángulo, haz clic en el círculo del reloj de ángulo o mueve el mouse para aumentar o disminuir el valor del ángulo en 1.

5. Hay más combinaciones de teclas para cambiar el valor del ángulo. Obtén más información en las combinaciones de teclas del panel Estilos.

Cambia las sombras de los cuadros y el texto con el editor de sombras

El editor de sombras proporciona una GUI para cambiar las declaraciones de CSS text-shadow y box-shadow.

Para cambiar las sombras con el Editor de sombras, haz lo siguiente:

1. Selecciona un elemento con una declaración paralela. Por ejemplo, selecciona el siguiente elemento.

2. En la pestaña Estilos, busca un ícono de sombra junto a la declaración text-shadow o box-shadow.

   

3. Haz clic en el ícono de sombra para abrir el editor de sombras.

   

4. Cambia las propiedades de sombra:

   • Tipo (solo para box-shadow). Elige Outset o Inset.
   • Compensaciones X e Y. Arrastra el punto azul o especifica valores.
   • Desenfoque: Arrastra el control deslizante o especifica un valor.
   • Spread (solo para box-shadow). Arrastra el control deslizante o especifica un valor.

5. Observa los cambios aplicados al elemento.

Cómo editar los tiempos de animación y transición con el Editor de aceleración

El Editor de aceleración proporciona una GUI para cambiar los valores de transition-timing-function y animation-timing-function.

Para abrir el Editor de aceleración, sigue estos pasos:

1. Selecciona un elemento con una declaración de función de sincronización, como el elemento <body> de esta página.
2. En la pestaña Styles, busca el ícono púrpura junto a las declaraciones transition-timing-function, animation-timing-function o la propiedad de abreviatura transition.
3. Haz clic en el ícono para abrir el Editor de suavización:

Usa ajustes predeterminados para ajustar los tiempos

Para ajustar los tiempos con un clic, usa los ajustes predeterminados del Editor de suavización:

1. En el Editor de aceleración, para establecer un valor de palabra clave, haz clic en uno de los botones del selector:
   • lineal
   • entrada y salida gradual
   • ease-in
   • salida lenta

2. En el selector de ajustes predeterminados, haz clic en los botones o para elegir uno de los siguientes parámetros de configuración predeterminados:

   • Parámetros preestablecidos lineales: elastic, bounce o emphasized.
   • Ajustes predeterminados de Bézier cúbica:

Palabra clave de tiempo	Valor preestablecido	Bézier cúbica
acelerar/ralentizar	In Out, Sine	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	Dentro y fuera, cuadrática	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	In Out, Cubic	cubic-bezier(0.65, 0.05, 0.36, 1)
	Salida rápida, entrada lenta	cubic-bezier(0.4, 0, 0.2, 1)
	Dentro, fuera, atrás	cubic-bezier(0.68, -0.55, 0.27, 1.55)
acelerar	En, seno	cubic-bezier(0.47, 0, 0.75, 0.72)
	In, cuadrático	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	In, Cubic	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	Entrante, Atrás	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	Rápido y lineal	cubic-bezier(0.4, 0, 1, 1)
ralentizar	Out, Sine	cubic-bezier(0.39, 0.58, 0.57, 1)
	Fuera, cuadrática	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Externo, cúbico	cubic-bezier(0.22, 0.61, 0.36, 1)
	Salida lineal, entrada lenta	cubic-bezier(0, 0, 0.2, 1)
	Salida, atrás	cubic-bezier(0.18, 0.89, 0.32, 1.28)

Configurar tiempos personalizados

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

• Para las funciones lineales, haz clic en cualquier parte de la línea para agregar un punto de control y arrastrarlo. Haz doble clic para quitar el punto.

  

• En el caso de las funciones de Bezier cúbicas, arrastra uno de los puntos de control.

  

Cualquier cambio activa una animación de bola en Preview en la parte superior del editor.

Copiar cambios de CSS (experimental)

Nota: Para habilitar esta función experimental, marca Sync CSS changes in the Styles tab en Settings > Experiments y vuelve a cargar DevTools.

Con este experimento habilitado, la pestaña Styles destaca los cambios de CSS en verde.

Para copiar un solo cambio de declaración de CSS, coloca el cursor sobre la declaración destacada y haz clic en el botón Copiar.

Para copiar todos los cambios de CSS en las declaraciones a la vez, haz clic con el botón derecho en cualquier declaración y selecciona Copiar todos los cambios de CSS.

Además, puedes hacer un seguimiento de los cambios que realices con la pestaña Cambios.