CSS vient de changer pour toujours : fonctionnalités évolutives que vous devez connaître

En tant que développeurs Web, nous avons tous vécu ces moments de frustration face au CSS. Du centrage des divs à la gestion des transitions en mode sombre, CSS a toujours été une source d'innombrables problèmes pour les développeurs. Mais le paysage change. Avec sa récente mise à jour majeure et un magnifique nouveau logo dans Rebecca Purple, CSS entre dans une nouvelle ère de fonctionnalités puissantes et conviviales pour les développeurs.

? Recevez chaque semaine des conseils CSS, des extraits de code et des didacticiels directement dans votre boîte de réception - 100 % gratuitement !

L’importance de Rebecca Purple

Avant de plonger dans les nouvelles fonctionnalités, il convient de noter l'histoire touchante derrière la couleur du nouveau logo CSS. Rebecca Purple n'est pas simplement un autre nom de couleur : il a une signification profonde dans la communauté du développement Web. Nommée en l'honneur de Rebecca Meyer, la fille du pionnier du CSS Eric Meyer, cette couleur constitue un hommage durable. Rebecca, qui avait insisté pour qu'on l'appelle par son nom complet à l'âge de six ans, est décédée peu de temps après. Sa mémoire perdure grâce à cette couleur CSS standard, qui fera probablement partie des fondements du Web pour les siècles à venir.

1. Alignez le contenu sans la complexité

Vous vous souvenez de tous ces mèmes sur le centrage d'un div ? Ils sont désormais obsolètes. La nouvelle propriété align-content fonctionne directement dans n'importe quelle disposition de bloc, aucune flexbox ou grille n'est requise. Il est presque surprenant qu'il ait fallu 25 ans pour mettre en œuvre une fonctionnalité aussi fondamentale, mais mieux vaut tard que jamais.

.centered-content {
    align-content: center;  /* That's it! No flexbox or grid needed */
    block-size: 100vh;
}

2. Variables CSS tapées avec @property

Partie de CSS Houdini, la règle @property change la donne pour la gestion des variables. Auparavant, les variables CSS étaient interprétées comme de simples chaînes, limitant leur potentiel d'animation. Désormais, vous pouvez spécifier des types de variables comme un nombre, une couleur ou un pourcentage, permettant ainsi un code plus sûr et des animations plus sophistiquées.

/* Old way - limited animation capabilities */
:root {
    --gradient-stop: 50%;
}

/* New way - fully animatable */
@property --gradient-stop {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
}

.gradient {
    background: linear-gradient(90deg, blue var(--gradient-stop), red);
    transition: --gradient-stop 0.3s;
}

.gradient:hover {
    --gradient-stop: 75%;
}

3. Style de départ : meilleures premières impressions

La nouvelle règle @starting-style résout un défi d'animation courant. Lorsque des éléments masqués avec display: none deviennent visibles, leurs animations d'entrée ne se déclenchent souvent pas. Cette règle vous permet de définir des styles initiaux pour les éléments lors de leur premier rendu, parfaits pour les boîtes de dialogue, les popovers et autres contenus dynamiques.

.dialog {
    display: none;
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.3s, opacity 0.3s;
}

@starting-style {
    .dialog {
        transform: translateY(20px);
        opacity: 0;
    }
}

.dialog.open {
    display: block;  /* Will now animate smoothly from the starting style */
}

4. Capacités mathématiques améliorées

CSS continue d'évoluer en tant que langage de style puissant avec de nouvelles fonctions mathématiques :

.mathematical {
    /* Rounding numbers */
    width: round(45.6px);           /* 46px */
    height: round(down, 45.6px);    /* 45px */
    margin: round(up, 45.6px);      /* 46px */

    /* Remainder operations */
    padding: rem(17, 5);            /* 2 (remainder of 17÷5) */
    gap: mod(17, 5);               /* Same as rem() */
}

5. Mode sombre simplifié avec light-dark()

La mise en œuvre du mode sombre devient plus simple avec la fonction light-dark(). Cette fonctionnalité vous permet de spécifier différentes valeurs pour les jeux de couleurs claires et foncées sans requêtes multimédias.

6. Styles de validation de formulaire plus intelligents

L'UX de validation de formulaire s'améliore avec les nouvelles pseudo-classes valides et non valides pour l'utilisateur. Contrairement à leurs prédécesseurs (:valid et :invalid), ceux-ci ne se déclenchent qu'après interaction de l'utilisateur, évitant ainsi les messages d'erreur prématurés.

.centered-content {
    align-content: center;  /* That's it! No flexbox or grid needed */
    block-size: 100vh;
}

7. Percée de l'animation avec taille d'interpolation

L'ajout le plus intéressant est peut-être la propriété de taille d'interpolation. Il résout le défi de longue date consistant à animer des éléments avec des hauteurs dynamiques.

/* Old way - limited animation capabilities */
:root {
    --gradient-stop: 50%;
}

/* New way - fully animatable */
@property --gradient-stop {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
}

.gradient {
    background: linear-gradient(90deg, blue var(--gradient-stop), red);
    transition: --gradient-stop 0.3s;
}

.gradient:hover {
    --gradient-stop: 75%;
}

Avoir hâte de

Ces fonctionnalités ne représentent que la pointe de l'iceberg. Avec d'autres ajouts puissants tels que les requêtes de conteneur, la sous-grille et le sélecteur :has, CSS continue d'évoluer vers un langage plus performant et plus convivial pour les développeurs. La base de référence CSS moderne, prise en charge par tous les principaux navigateurs, prouve que CSS ne fait pas que survivre, il prospère.

Il est révolu le temps où CSS était considéré comme un mal nécessaire dans le développement Web. Ces nouvelles fonctionnalités démontrent un engagement à résoudre les défis réels des développeurs tout en rendant le langage plus intuitif et plus puissant. À mesure que nous avançons, il est clair que CSS ne se contente pas de changer : il révolutionne notre approche du style Web.

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!