Qu'est-ce qui est nouveau depuis CSS3 en 2015?

L'impact de CSS3 était indéniable. Une richesse de fonctionnalités - gradieuses, animations, coins arrondis, ombres de boîte, transformations - a révolutionné le développement CSS. L'adoption généralisée de CSS3 (et le surnom "HTML5" connexe) a conduit à un flot de ressources d'apprentissage. Cependant, de nombreux développeurs n'ont pas mis à jour de manière significative leurs compétences CSS depuis lors. Cet article comble cet écart.

Le "moderne CSS in A Nutshell" de Scott Vandehey met en évidence cette courbe d'apprentissage. Il note le besoin décroissant de préprocesseurs (y compris l'autopréfixeur et les polyfills pour les fonctionnalités futures) et la pertinence spécifique au contexte de CSS-in-JS (principalement utile dans les projets JavaScript lourds). Il souligne l'importance de maîtriser les propriétés personnalisées, Flexbox et Grid.

S'appuyant sur cela, explorons les progrès clés du CSS depuis environ 2015:

Améliorations post-CSS3

Disposition révolution: flexbox et grille

Flexbox et Grid sont fondamentaux pour le CSS moderne. La puissance de Grid est amplifiée par les dispositions de sous-grille et de maçonnerie (bien que la fiabilité du navigateur croisé se développe toujours).

 .carte {
  Affichage: grille;
  grille-template-colonnes: 150px 1FR;
  Écart: 1rem;
}
.Card .nav {
  Affichage: flex;
  Écart: 0,5rem;
}

Propriétés personnalisées CSS: jetons de conception et thème

Les propriétés personnalisées sont cruciales pour gérer les jetons de conception, assurer la cohérence et simplifier la maintenance. L'implémentation en mode noir est un excellent exemple. Les sites entiers peuvent être stylisés principalement à l'aide de propriétés personnalisées, complémentant des cadres comme Tailwind CSS (une approche populaire, bien que diviseur).

 html {
  --BgColor: # 70F1D9;
  --Font-Size-Base: pinmp (1.833rem, 2vw 1rem, 3rem);
  --FONT-SIZE-LRG: pince (1.375REM, 2VW 1REM, 2.25REM);
}

html.dark {
  --BgColor: # 2D283E;
}

Requêtes de préférence: conception centrée sur l'utilisateur

Requêtes de préférence, étendant les requêtes multimédias traditionnelles, détectez les préférences des utilisateurs (par exemple, prefers-reduced-motion , prefers-color-scheme ). Cela permet des expériences utilisateur plus accessibles et personnalisées.

 @Media (préfert-réduisant le mouvement: réduire) {
  * {
    Durée d'animation: 0,001s! IMPORTANT;
  }
}

@Media (préfère-Color-Scheme: Dark) {
  :racine {
    --BG: # 222;
  }
}

Syntaxe de couleur améliorée et nouveaux espaces de couleurs

La syntaxe des couleurs a évolué pour inclure les valeurs alpha directement dans les fonctions (par exemple, rgb(0 0 255 / 0.5) ). Nouveaux espaces de couleurs color() , lab() , lch() , hwb() - offrir des capacités de représentation des couleurs élargies.

 .bloc {
  Contexte: HSL (0 33% 53% / 0,5);
  Contexte: RVB (255 0 0);
  Contexte: Couleur (affichage-P3 0,9176 0,2003 0,1386);
  Contexte: Lab (52.2345% 40.1645 59.9971 / .5);
  Contexte: HWB (194 0% 0% / .5);
}

Polices variables: typographie améliorée

Les polices variables offrent des améliorations des performances et une flexibilité de conception par rapport aux polices Web traditionnelles. Bien qu'il existe des polices de couleur, ils n'ont pas obtenu une large adoption.

 corps {
  Font-Family: «récursive», Sans-Serif;
  Police-poids: 950;
  Settings de la variation des polices: «Mono» 1, «Casl» 1;
}

Intégration SVG via les chemins, l'écrêtage et le masquage

Le CSS s'intègre désormais avec toute septembre à SVG, permettant l'écrêtage basé sur la forme ( clip-path ), le masquage ( mask ), l'animation basée sur le chemin ( offset-path ) et la manipulation de chemin (attribut d ).

 .découper {
  Path de clip: polygone (25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

Filtres CSS: manipulation d'image et d'élément

Les filtres CSS fournissent des capacités de manipulation d'images étendues ( filter ), le mélange d'arrière-plan ( background-blend-mode ), le filtrage de fond ( backdrop-filter ) et le mélange d'éléments ( mix-blend-mode ).

 .désactiver {
  Filtre: blur (1px) en niveaux de gris (1);
}

Houdini: Extension de CSS avec JavaScript

Houdini propose des extensions CSS alimentées par JavaScript, y compris l'API de peinture, l'API Properties & Values, l'API de mise en page et l'API d'animation. Bien que le support du navigateur varie, sa modularité et sa facilité d'utilisation sont prometteuses.

 Importer "https://unpkg.com/extra.css/confetti.js";

Style des composants Shadow Dom et Web

Shadow Dom a un impact sur les composants Web de style, nécessitant une compréhension des techniques de style externes.

 my-composant {
  --BG: LightGreen;
}

L'avenir de CSS

Bien que le rattrapage des fonctionnalités actuels soit cruciale, plusieurs progrès prometteurs sont à l'horizon: requêtes en conteneurs, unités de conteneurs, transformations indépendantes, nidification, couches en cascade, unités de fenêtre améliorées, sélecteur :has() et par défilement.

Cet aperçu fournit une mise à jour complète sur les progrès du CSS depuis l'ère CSS3, équipant les développeurs des connaissances nécessaires pour créer des sites Web modernes, efficaces et conviviaux.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!