Découvrez les outils et techniques de Chrome permettant d'améliorer la conception du CSS et de l'interface utilisateur de votre site.

Améliorez vos compétences en développement d'UI

Utilisez les propriétés scrollbar-width et scrollbar-color pour appliquer un style aux barres de défilement.
CSS est une technique typographique classique qui consiste à créer manuellement des sauts de ligne pour les blocs de texte équilibrés.
CSS Color 4 propose sur le Web des outils et fonctionnalités de couleur à large gamme de couleurs: plus de couleurs, plus de fonctions de manipulation et de meilleurs dégradés.
La fonction CSS Typed Object Model (Typed OM) permet d'utiliser des types, des méthodes et un modèle d'objet flexible avec des valeurs CSS.
Interrogez les valeurs de style d'un élément parent à l'aide de la règle @container.
L'une de nos fonctionnalités préférées de préprocesseur CSS est désormais intégrée au langage: les règles de style d'imbrication.
Découvrez comment créer des styles de portée qui sélectionnent des éléments uniquement dans une sous-arborescence de votre DOM.
Mélangez les couleurs de l'un des espaces de couleurs disponibles directement depuis votre code CSS.
Préfiltrez un ensemble d'éléments enfants avant d'y appliquer la logique An+B.
Créez un accordéon exclusif avec plusieurs éléments <details> ayant le même name.
La propriété inerte est un attribut HTML global qui simplifie la suppression et la restauration des événements d'entrée utilisateur pour un élément, y compris les événements de sélection et les événements issus de technologies d'assistance.
Activer le retour automatique à la ligne optimisé, pour privilégier la beauté plutôt que la vitesse
Découvrez comment nous avons conçu et implémenté les outils de grille CSS dans les outils de développement.
Comment nous prenons en charge le CSS-in-JS dans les outils de développement et en quoi il diffère du CSS standard

Shadow DOM

Une nouvelle façon d'implémenter et d'utiliser le Shadow DOM directement en HTML
État d'interopérabilité actuel des noms définis par l'auteur et du Shadow DOM.

Mise en page

Spécifiez les tailles dans le code CSS en combinant plusieurs unités de dimensionnement.
Consignez les messages et exécutez JavaScript.
La propriété "hidden=until-found", une valeur d'attribut permet de garantir que le contenu des sections "accordéon" peut être trouvé et associé à des liens.

Études de cas sur les CSS et l'UI

En quoi consistent exactement les fonctionnalités de l'interface utilisateur Web et comment peuvent-elles améliorer votre entonnoir de conversion ? Quels sont les avantages de ces fonctionnalités ?
Découvrez les avantages des animations liées aux défilements avec Policybazaar, redBus et Tokopedia.
redBus, Policybazaar et Tokopedia utilisent tous l'API View Transitions et bénéficient de meilleures performances et d'une interface utilisateur fluide.
Tokopedia utilise l'API Popover pour réduire la quantité de code dans son application.

Animations sur le Web

L'API Web Animations fournit des primitives performantes pour décrire des animations impératives à partir de JavaScript.
La propriété animation-composition permet de contrôler ce qui doit se passer lorsque plusieurs animations affectent simultanément la même propriété.
linear() est une fonction de lissage CSS qui effectue une interpolation linéaire entre ses points, ce qui vous permet de recréer des effets de rebond et de ressort.
Utilisez les timelines de défilement et les timelines d'affichage pour créer des animations liées au défilement de manière déclarative.
COURS
Lisez l'histoire du responsive design et découvrez les principes de base des mises en page responsives. Vous en apprendrez davantage sur les images responsives, la typographie, l’accessibilité et plus encore.
COURS
Vous allez découvrir les principes de base du CSS, comme le modèle "box", la cascade et la spécificité, "flexbox", la grille et le z-index. Vous en apprendrez également plus sur les fonctions, les propriétés logiques, etc. afin d'approfondir vos compétences en matière de développement front-end.