Descubre nuevos flujos de trabajo en esta referencia completa 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 CSS para conocer los conceptos básicos.
Seleccionar un elemento
El panel Elements de Herramientas para desarrolladores te permite ver o cambiar el CSS de un elemento a la vez.
En la captura de pantalla, el elemento h1 que está destacado en azul en Á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 el viewport, pero solo porque el mouse se desplaza sobre él en el Árbol del DOM.
Consulta Cómo ver el CSS de un elemento para ver un instructivo.
Existen muchas formas de seleccionar un elemento:
- En tu viewport, haz clic con el botón derecho en el elemento y selecciona Inspeccionar.
- En las Herramientas para desarrolladores, 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 Herramientas para desarrolladores, haz clic en el elemento en el Á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 selecciona Reveal in Elements panel.
Ver CSS
Usa las pestañas Elements > Styles y Computed para ver las reglas de CSS y diagnosticar problemas de CSS.
Cómo navegar con vínculos
La pestaña Estilos muestra vínculos en varios lugares a otros lugares, incluidos, sin limitaciones, los siguientes:
- Junto a Reglas de CSS, para las hojas de estilo y 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 la sección Heredada de ... (Inherited from ...), a los elementos superiores.
- En las llamadas
var(), a las declaraciones de propiedad personalizada - En las propiedades de abreviatura
animation, a@keyframes. - Vínculos a Más información en la información sobre la herramienta de la documentación.
- Y mucho más.
Estos son algunos de ellos destacados:
Los vínculos pueden tener un estilo diferente. Si no sabes con certeza si el elemento es un vínculo, haz clic en él para descubrirlo.
Ver información sobre la herramienta con la documentación de CSS, la especificidad y los valores de las 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 un cuadro de información con una descripción de CSS breve, coloca el cursor sobre el nombre de la propiedad en la pestaña Estilos.
Haz clic en Más información para ir a una Referencia de CSS de MDN en esta propiedad.
Para desactivar los cuadros de información, marca 
No mostrar.
Para volver a activarlos, revisa 
Configuración > Preferencias > Elementos > 
Mostrar información sobre la documentación de CSS.
Ver especificidad del selector
Coloca el cursor sobre un selector para ver información sobre la herramienta con su ponderación de especificidad.
Cómo consultar los valores de las propiedades personalizadas
Coloca el cursor sobre un --custom-property para ver su valor en la información sobre la herramienta.
Ver CSS no válido, anulado, inactivo y otro tipo
La pestaña Estilos reconoce muchos tipos de problemas de CSS y los destaca de diferentes maneras.
Consulta Explicación de CSS en la pestaña Estilos.
Ver solo el CSS que realmente se aplica a un elemento
En la pestaña Estilos, se muestran todas las reglas que se aplican a un elemento, incluidas las declaraciones que se anularon. Si no te interesan las declaraciones anuladas, usa la pestaña Computed para ver solo el CSS que se está aplicando a un elemento.
- Selecciona un elemento.
- Ve a la pestaña Computed del panel Elements.
Marca la casilla de verificación Mostrar todo para ver todas las propiedades.
Consulta Explicación de CSS en la pestaña Procesamiento.
Ver las propiedades de CSS en orden alfabético
Usa la pestaña Computed. Consulta el artículo Cómo ver solo el CSS que realmente se aplicó a un elemento.
Ver las propiedades heredadas de CSS
Marca la casilla de verificación Mostrar todo en la pestaña Computed. Consulta Cómo ver solo el CSS que se aplicó realmente a un elemento.
También puedes desplazarte por la pestaña Estilos y buscar las secciones llamadas Inherited from <element_name>.
Cómo ver reglas at de CSS
Las reglas "at" son sentencias de CSS que te permiten controlar el comportamiento de CSS. En Elementos > Estilos, se muestran las siguientes reglas at en secciones dedicadas:
Ver reglas arrobas de @property
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 JavaScript.
Coloca el cursor sobre el nombre de la propiedad en la pestaña Estilos para ver un cuadro de información con el valor, los descriptores y un vínculo a su registro en la sección @property que se puede contraer en la parte inferior de la pestaña Estilos.
Para editar una regla @property, haz doble clic en su nombre o valor.
Ver reglas arrobas de @supports
En la pestaña Styles, se muestran 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.
Ver reglas arrobas de @scope
La pestaña Estilos muestra reglas en las reglas del @scope de CSS si se aplican a un elemento.
Las nuevas reglas at de @scope forman parte de la especificación de CSS en cascada y de herencia de nivel 6. Estas reglas te permiten definir el alcance de los estilos CSS, es decir, aplicar estilos de forma explícita a elementos específicos.
Consulta la regla @scope en la siguiente vista previa:
- Inspecciona el texto de la tarjeta en la vista previa.
- En la pestaña Estilos, busca la regla
@scope.
En este ejemplo, la regla @scope anula la declaración global de CSS background-color para todos los elementos <p> dentro de los elementos con una clase card.
Para editar la regla @scope, haz doble clic en ella.
Ver reglas arrobas de @font-palette-values
El CSS @font-palette-values en regla te permite personalizar los valores predeterminados de la propiedad font-palette. Elements > Styles muestra esta regla AT en una sección dedicada.
Consulta la sección @font-palette-values en la siguiente vista previa:
- Inspecciona la segunda línea de texto en la vista previa.
- En Estilos, busca la sección
@font-palette-values.
En este ejemplo, los valores de paleta de fuentes --New anulan los predeterminados de la fuente coloreada.
Para editar tus valores personalizados, 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 acciones.
Para cambiar un valor, haz doble clic en él.
Buscar y filtrar el CSS de un elemento
Usa el cuadro Filtro en las pestañas Estilos y Calculado para buscar propiedades o valores específicos de CSS.
Si también quieres buscar propiedades heredadas en la pestaña Computed, marca la casilla de verificación Show All (Mostrar todo).
Para navegar por la pestaña Computed, marca Group y agrupa 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 de la superposición se ocultarán automáticamente si se activan con foco. Por ejemplo, listas desplegables, menús o selectores de fecha. La opción check_box Emular una página enfocada te permite depurar este elemento como si estuviera enfocado.
Intenta emular una página enfocada en esta página de demostración:
- Enfoca el elemento de entrada. Aparece otro elemento debajo de ella.
- Abre Herramientas para desarrolladores. La ventana de Herramientas para desarrolladores ahora está enfocada en lugar de la página, por lo que el elemento desaparece nuevamente.
- 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 que se encuentra debajo.
También puedes encontrar la misma opción en el panel Renderización.
Activar o desactivar una seudoclase
Para activar o desactivar una seudoclase, como :active, :focus, :focus-within, :target, :hover, :visited o focus-visible, haz lo siguiente:
- Selecciona un elemento.
- En el panel Elementos, ve a la pestaña Estilos.
- Haz clic en :hov.
- Marca la seudoclase que quieres activar.
En el viewport, puedes ver que Herramientas para desarrolladores aplica la declaración background-color al elemento, aunque no se coloque el cursor sobre el elemento.
Consulta Cómo agregar un pseudoestado a una clase para obtener un instructivo interactivo.
Visualiza los pseudoelementos de resaltado heredados
Los seudoelementos te permiten aplicar diseño a partes específicas de los elementos. Los pseudoelementos de resaltado son partes de documentos con el estado "seleccionado" que tienen el estilo "destacado" para indicar este estado al usuario. Por ejemplo, estos seudoelementos son ::selection, ::spelling-error, ::grammar-error y ::highlight.
Como se mencionó en la especificación, cuando varios estilos entran en conflicto, la cascada determina el estilo ganador.
Para comprender mejor la herencia y la prioridad de las reglas, puedes ver los pseudoelementos destacados heredados:
Inspecciona el texto que aparece a continuación.
Heredé el estilo del pseudoelemento de resaltado de mis elementos superiores. ¡Seleccióname!Selecciona una parte del texto de arriba.
En la pestaña Estilos, desplázate hacia abajo hasta encontrar la sección
Inherited from ::selection pseudo of....
Ver capas en cascada
Las capas en cascada permiten un control más explícito de tus archivos CSS para evitar conflictos con la especificidad de un estilo. 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, inspect el siguiente elemento y abre Elementos > Estilos.
En la pestaña Styles, observa las 3 capas de cascada y sus estilos: page, component y base.
Para ver el orden de las capas, haz clic en el nombre de las capas o en el botón 
Activar o desactivar la vista de capas de CSS.
La capa page tiene la mayor especificidad, 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:
- Abre el Menú de comandos.
- Comienza a escribir
Renderingy seleccionaShow Rendering. - En el menú desplegable Emulate CSS Media, selecciona imprimir.
Consulta los CSS usados y no usados en la pestaña Cobertura
En la pestaña Cobertura, se muestra el CSS que usa realmente una página.
- Presiona Comando + Mayúsculas + P (Mac) o Control + Mayúsculas + P (Windows, Linux y ChromeOS) mientras Herramientas para desarrolladores esté enfocada para abrir el menú de comandos.
Comienza a escribir
coverage.
Selecciona Mostrar cobertura. Aparecerá la pestaña Cobertura.
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 en cada archivo que carga el navegador.
El verde representa el código CSS usado. El rojo representa el estilo CSS sin usar.
Haz clic en un archivo CSS para ver un desglose línea por línea del uso de CSS en la vista previa anterior.
En la captura de pantalla, no se usan las líneas 55 a 57 y 65 a 67 de
devsite-google-blue.css, mientras que las líneas 59 a 63 se usan.
Forzar el modo de vista previa de impresión
Consulta Cómo forzar el modo de vista previa de impresión de Herramientas para desarrolladores.
Copiar CSS
Desde un único menú desplegable en la pestaña Estilos, puedes copiar reglas de CSS, declaraciones, propiedades y valores independientes.
Además, puedes copiar las propiedades de CSS en la sintaxis de JavaScript. Esta opción es útil si usas bibliotecas CSS-in-JS.
Para copiar CSS, haz lo siguiente:
- Selecciona un elemento.
- En la pestaña Elements > Styles, haz clic con el botón derecho en una propiedad de CSS.
Selecciona una de las siguientes opciones del menú desplegable:
- Copiar declaración. Copia la propiedad y su valor en la sintaxis de CSS:
css property: value; - Copiar propiedad. Copia solo el nombre de
property. - Copiar valor. Solo copia
value. - Copiar regla. Copia la regla de CSS completa:
css selector[, selector] { property: value; property: value; ... } - Copiar 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 de todas las declaraciones.
Consulta el valor calculado. Te lleva a la pestaña Computed.
- Copiar declaración. Copia la propiedad y su valor en la sintaxis de CSS:
Cambiar CSS
En esta sección, se enumeran todas las formas de cambiar el CSS en Elementos > Estilos.
Además, puedes hacer lo siguiente:
- Anula el CSS en las cargas de páginas.
- Guarda el CSS modificado en tus fuentes locales en un lugar de trabajo.
Cómo agregar una declaración de CSS a un elemento
Dado que el orden de las declaraciones afecta el estilo de un elemento, puedes agregar declaraciones de diferentes maneras:
- Agrega una declaración intercalada. Equivale a agregar un atributo
styleal HTML del elemento. - Agrega una declaración a una regla de estilo.
¿Qué flujo de trabajo deberías usar? Para la mayoría de las situaciones, es probable que quieras usar el flujo de trabajo de declaración intercalada. Las declaraciones intercaladas tienen una mayor especificidad que las externas, por lo que el flujo de trabajo intercalado garantiza que los cambios se apliquen en el elemento como se espera. Consulta Tipos de selectores para obtener más información sobre la especificidad.
Si estás depurando los diseños de un elemento y necesitas probar específicamente qué 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, haz lo siguiente:
- Selecciona un elemento.
- En la pestaña Estilos, haz clic entre los corchetes de la sección element.style. El cursor se enfoca, lo que te permite ingresar texto.
- Ingresa el nombre de una propiedad y presiona Intro.
Ingresa un valor válido para esa propiedad y presiona Intro. En el árbol del DOM, puedes ver que se agregó un atributo
styleal elemento.
En la captura de pantalla, se aplicaron las propiedades
margin-topybackground-coloral elemento seleccionado. En el Árbol del DOM, puedes ver las declaraciones reflejadas en el atributostyledel elemento.
Cómo agregar una declaración a una regla de estilo
Para agregar una declaración a una regla de diseño existente, sigue estos pasos:
- Selecciona un elemento.
- En la pestaña Estilos, haz clic entre los corchetes de la regla de diseño a la que deseas agregar la declaración. El cursor enfoca, lo que te permite ingresar texto.
- Ingresa el nombre de una propiedad y presiona Intro.
- 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.
Cambia 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 para aumentar o disminuir rápidamente un valor en 0.1, 1, 10 o 100 unidades.
Cómo cambiar los valores que se pueden enumerar con combinaciones de teclas
Cuando editas un valor que se puede enumerar de una declaración, por ejemplo, font-size, puedes usar las siguientes combinaciones de teclas para aumentar el valor en una cantidad fija:
- Opción + Arriba (Mac) o Alt + Arriba (Windows y Linux) para aumentar en 0.1.
- Arriba para cambiar el valor de a 1 o de 0.1 si el valor actual se encuentra entre -1 y 1.
- Mayúsculas + Arriba para aumentar de a 10.
- Presiona Mayúsculas + Comando + Arriba (Mac) o Control + Mayúsculas + Re Pág (Windows y Linux) para aumentar el valor de a 100.
Disminuirla también funciona. Solo reemplaza cada instancia de Up que se mencionó antes con Down.
Cambiar valores de longitud
Puedes usar el puntero para cambiar cualquier propiedad de la longitud, como el ancho, la altura, el padding, el margen o el borde.
Para cambiar la unidad de longitud, haz lo siguiente:
- Coloca el cursor sobre el nombre de la unidad y observa que está subrayado.
Haz clic en el nombre de la unidad para seleccionar una en el menú desplegable.
Para cambiar el valor de longitud, haz lo siguiente:
- Coloca el cursor sobre el valor de la unidad y observa que el puntero cambia a una flecha horizontal de dos puntas.
Arrastra horizontalmente para aumentar o disminuir el valor.
Para ajustar el valor en 10, mantén presionada la tecla Mayúsculas mientras arrastras.
Agrega una clase a un elemento
Para agregar una clase a un elemento, haz lo siguiente:
- Selecciona el elemento en el Árbol del DOM.
- Haz clic en .cls.
- Ingresa el nombre de la clase en el cuadro Add New Class.
- Presione 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 de temas claros u oscuros, haz lo siguiente:
- En la pestaña Elements > Styles, haz clic en
Toggle common rendering emulations.
Selecciona una de las siguientes opciones de la lista desplegable:
- prefers-color-scheme: claro. 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 la implementaste. Además, configura
prefers-color-schemecomodarkautomáticamente.
Este menú desplegable es un acceso directo para las opciones Emular CSS media feature prefers-color-scheme y Habilitar el modo oscuro automático de la pestaña Renderización.
Activar o desactivar una clase
Para habilitar o inhabilitar una clase en un elemento, haz lo siguiente:
- Selecciona el elemento en el Árbol del DOM.
- 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.
- Activa o desactiva la casilla de verificación junto a la clase que quieras habilitar o inhabilitar.
Agregar una regla de estilo
Para agregar una nueva regla de estilo, sigue estos pasos:
- Selecciona un elemento.
- Haz clic en New Style Rule
. Herramientas para desarrolladores inserta una regla nueva debajo de la regla element.style.
En la captura de pantalla, Herramientas para desarrolladores agrega la regla de estilo h1.devsite-page-title después de hacer clic en Nueva regla de estilo.
Elige a qué hoja de estilo deseas agregar una regla
Cuando agregues una nueva regla de estilo, mantén presionado Nueva regla de diseño
para elegir la hoja de estilo a la que deseas agregar la regla.
Cómo activar o desactivar una declaración
Para activar o desactivar una sola declaración, sigue estos pasos:
- Selecciona un elemento.
- En la pestaña Estilos, coloca el cursor sobre la regla que define la declaración. Aparecerán casillas de verificación junto a cada declaración.
- Marca o desmarca la casilla de verificación junto a la declaración. Cuando borras una declaración, Herramientas para desarrolladores la tachará para indicar que ya no está activa.
En la captura de pantalla, la propiedad color del elemento seleccionado actualmente está desactivada.
Editar los pseudoelementos ::view-transition durante una animación
Consulta la sección correspondiente en Animaciones.
Para obtener más información, consulta Transiciones fluidas y simples con la API de View Transitions.
Alinea los elementos de la cuadrícula y su contenido con el Editor de cuadrícula
Consulta la sección correspondiente en Inspeccionar la cuadrícula de CSS.
Cómo cambiar colores con el Selector de color
Consulta Cómo inspeccionar y depurar colores HD y no HD con el selector de color.
Cambia el valor de ángulo con el reloj angular
El reloj de ángulo proporciona una GUI para cambiar los elementos <angle> en los valores de las propiedades CSS.
Para abrir el Reloj angular, haz lo siguiente:
- Selecciona un elemento con la declaración de ángulo.
En la pestaña Estilos, busca la declaración
transformobackgroundque deseas cambiar. Haz clic en la casilla Vista previa del ángulo junto al valor del ángulo.
Los relojes pequeños que se encuentran a la izquierda de
-5degy0.25turnson las vistas previas de ángulos.Haz clic en la vista previa para abrir el Reloj angular.
Para cambiar el valor del ángulo, haz clic en el círculo Reloj angular o desplaza el mouse para aumentar o disminuir el valor del ángulo de a 1.
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.
Cómo cambiar las sombras del cuadro y del texto con el Editor de sombras
Shadow Editor proporciona una GUI para cambiar las declaraciones de CSS text-shadow y box-shadow.
Para cambiar las sombras con Shadow Editor, haz lo siguiente:
Selecciona un elemento con una declaración de sombras. Por ejemplo, selecciona el siguiente elemento.
En la pestaña Estilos, busca un ícono de sombra
junto a la declaración text-shadowobox-shadow.
Haz clic en el ícono de sombras para abrir el Editor de sombras.
Cambia las propiedades de las sombras:
- Tipo (solo para
box-shadow). Elige Salida o Inserción. - 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.
- Tipo (solo para
Observa los cambios aplicados al elemento.
Cómo editar los tiempos de animación y de 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 Easing Editor, sigue estos pasos:
- Selecciona un elemento con una declaración de función de sincronización, como el elemento
<body>que se muestra en esta página. - En la pestaña Estilos, busca el ícono
púrpura junto a las declaraciones transition-timing-function,animation-timing-functiono la propiedad de abreviaturatransition.
- Haz clic en el ícono para abrir el Editor de aceleración:
Usa las funciones preestablecidas para ajustar los tiempos
Para ajustar los tiempos con un clic, usa los ajustes predeterminados en el Editor de aceleración:
- 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 lentas
- entrada lenta
- Salida lenta
En el selector de Ajustes predeterminados, haz clic en los botones
o 
para elegir uno de los siguientes ajustes:- Ajustes predeterminados lineales:
elastic,bounceoemphasized - Ajustes predeterminados de Bézier cúbico:
- Ajustes predeterminados lineales:
| Palabra clave de tiempo | Configuración predeterminada | Bézier cúbica |
|---|---|---|
| acelerar/ralentizar | Entrada/salida, seno | cubic-bezier(0.45, 0.05, 0.55, 0.95) |
| Entrada/salida, cuadrático | cubic-bezier(0.46, 0.03, 0.52, 0.96) |
|
| Entrada/salida (cúbica) | cubic-bezier(0.65, 0.05, 0.36, 1) |
|
| Rápido y lento | cubic-bezier(0.4, 0, 0.2, 1) |
|
| Entrada/salida | cubic-bezier(0.68, -0.55, 0.27, 1.55) |
|
| acelerar | En, seno | cubic-bezier(0.47, 0, 0.75, 0.72) |
| En, cuadrático | cubic-bezier(0.55, 0.09, 0.68, 0.53) |
|
| En (cúbico) | cubic-bezier(0.55, 0.06, 0.68, 0.19) |
|
| Entrar, Atrás | cubic-bezier(0.6, -0.28, 0.74, 0.05) |
|
| Salida rápida, entrada lineal | cubic-bezier(0.4, 0, 1, 1) |
|
| ralentizar | Fuera, seno | cubic-bezier(0.39, 0.58, 0.57, 1) |
| Salir, cuadrático | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
|
| Fuera (cúbico) | cubic-bezier(0.22, 0.61, 0.36, 1) |
|
| Salida lineal, entrada lenta | cubic-bezier(0, 0, 0.2, 1) |
|
| Fuera, atrás | cubic-bezier(0.18, 0.89, 0.32, 1.28) |
Cómo configurar tiempos personalizados
Si deseas establecer valores personalizados para las funciones de sincronización, 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 arrástralo. Haz doble clic para quitar el punto.
Para las funciones de Bézier cúbicas, arrastra uno de los puntos de control.
Cualquier cambio activa una animación de bola en la vista previa, en la parte superior del editor.
(Experimental) Copiar cambios de CSS
Cuando se habilita este experimento, la pestaña Estilos destaca los cambios en el 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 Copy all CSS changes.
Además, puedes hacer un seguimiento de los cambios que realices con la pestaña Cambios.