Descubre herramientas y técnicas de Chrome para mejorar el CSS y el diseño de la interfaz de usuario de tu sitio.

Mejora tus habilidades de desarrollo de IU

Usa las propiedades scrollbar-width y scrollbar-color para aplicar diseño a las barras de desplazamiento.
CSS es una técnica clásica de tipografía de creación manual de saltos de línea para bloques de texto equilibrados.
CSS Color 4 ofrece una amplia gama de herramientas y capacidades de color en la Web: más colores, funciones de manipulación y mejores gradientes.
El Modelo de objetos escritos de CSS (OM escrito) permite trabajar con tipos, métodos y un modelo de objetos flexible con valores CSS.
Consulta los valores de estilo de un elemento superior con la regla @container.
Una de nuestras funciones favoritas del preprocesador de CSS ahora está integrada en el lenguaje: las reglas de estilo de anidación.
Aprende a crear estilos con alcance que seleccionen elementos solo dentro de un subárbol de tu DOM.
Mezcla colores en cualquiera de los espacios de color admitidos directamente desde tu CSS.
Filtra previamente un conjunto de elementos secundarios antes de aplicar la lógica An+B en él.
Crea un acordeón exclusivo con varios elementos <details> que tengan el mismo name.
La propiedad inert es un atributo HTML global que simplifica la manera de quitar y restablecer eventos de entrada del usuario para un elemento, incluidos los eventos de enfoque y los eventos de tecnologías de accesibilidad.
Habilita el ajuste de texto optimizado, para darle más belleza que a la velocidad.
Cómo diseñamos e implementamos la compatibilidad con herramientas de cuadrícula de CSS en Herramientas para desarrolladores
Cómo admitimos CSS-in-JS en Herramientas para desarrolladores y en qué se diferencia del CSS normal

Shadow DOM

Una nueva forma de implementar y usar Shadow DOM directamente en HTML.
Es el estado actual de interoperabilidad de los nombres definidos por el autor y el shadow DOM.

Diseño

Especifica tamaños en CSS con una combinación de unidades de tamaño.
Descubre oculto hasta que se encuentra, un valor de atributo puede garantizar que el contenido dentro de las secciones del acordeón se pueda encontrar y vincular.

Casos de éxito de la IU y CSS

¿Qué son exactamente las funciones de la IU web y cómo pueden mejorar tu embudo de conversión? ¿Cuáles son los beneficios de adoptar estas funciones?
Descubre los beneficios de las animaciones basadas en desplazamientos con Policybazaar, redBus y Tokopedia.
redBus, Policybazaar y Tokopedia usan la API de View Transitions y se benefician con un mejor rendimiento y una IU fluida.
Tokopedia usa la API de Popover para reducir la cantidad de código de su aplicación.

Animaciones en la Web

La API de Web Animations proporciona potentes primitivas para describir animaciones imperativas de JavaScript.
La propiedad de composición de animación permite controlar lo que debe suceder cuando varias animaciones afectan la misma propiedad de forma simultánea.
linear() es una función de aceleración de CSS que interpola de manera lineal entre sus puntos, lo que le permite recrear los efectos de rebote y resorte.
Trabaja con cronogramas de desplazamiento y cronogramas de vista para crear animaciones basadas en desplazamientos de forma declarativa.
CURSO
Lee la historia del diseño adaptable y conoce los aspectos básicos de estos diseños. Aprenderás sobre imágenes responsivas, tipografía, accesibilidad y mucho más.
CURSO
Aprenderás los aspectos básicos de CSS, como el modelo de caja, la cascada y la especificidad, Flexbox, la cuadrícula y el índice z. Además, aprenderás sobre funciones, propiedades lógicas y mucho más para mejorar tus habilidades como desarrollador de frontend.