HTML et CSS en 2025 : 5 nouvelles fonctionnalités que vous avez peut-être manquées

Pensez-vous que le HTML et le CSS ont été étudiés en long et en large depuis longtemps ? Eh bien non ! En 2025, ces « anciens » surprennent à nouveau : plusieurs fonctionnalités intéressantes sont apparues dans les navigateurs, qui rendent la mise en page plus facile, plus propre et plus puissante 💥

Dans cet article, il y a 5 nouveautés que vous avez peut-être manquées. Surtout si vous venez de commencer. Allons-y !

1. 🧱 :has() en CSS, enfin !

CSS peut maintenant « regarder en arrière » — appliquer des styles au parent s'il a un certain élément à l'intérieur. Auparavant, cela ne pouvait être fait que via JS.

.card:has(img) {
  border: 1px solid green;
}

👉 Appliquer le cadre .card s'il y a une image à l'intérieur. Hourra, le sélecteur parent est maintenant une réalité !

2. 🎛️ Requêtes de conteneur (container queries)

Les styles peuvent désormais être adaptés non pas à la taille de l'écran, mais à la taille conteneur! C'est une révolution pour l'approche par composants.

@container (min-width: 400px) {
  .card-title {
    font-size: 2rem;
  }
}

⚙️ Utilisé avec la propriété container-type, et cela est déjà pris en charge dans Chrome, Firefox, Safari.

3. 🎨 CSS :where() et :is() — sélecteurs sans douleur

Ce sont des outils puissants pour écrire des sélecteurs courts et flexibles avec une faible spécificité :

:where(header, main, footer) {
  margin: 0 auto;
}

🧠 C'est pratique si vous ne voulez pas vous battre avec les redéfinitions et l'importance.

4. 💾 Attribut loading="lazy" par défaut

Maintenant, tous les <img> et <iframe> dans la plupart des navigateurs par défaut, le chargement est lent - seulement quand ils apparaissent à l'écran.

<img src="photo.jpg" alt="Photo">

Auparavant, vous deviez écrire loading="lazy", maintenant vous pouvez simplement oublier - et tout fonctionnera !

5. 🧪 Styles délimités en HTML

Une expérience déjà disponible dans Chrome et Safari : vous pouvez écrire des styles directement dans le composant, et ils seront appliqués seulement à lui.

<style scoped>
  h2 {
    color: tomato;
  }
</style>

⚠️ Bien qu'instable, mais l'avenir est clairement derrière cela. Surtout pour ceux qui écrivent sur Web Components.

🤓 Bonus : quelques fonctionnalités supplémentaires à noter

• text-wrap: balance; - transfère magnifiquement les titres sur plusieurs lignes

• view-transition API — transitions fluides entre les pages

• anchor positioning — nouveau positionnement des info-bulles et des pop-ups

Dans l'application Code tu peux non seulement lire, mais essayer — directement dans l'éditeur ! Nous mettons à jour les cours sur HTML et CSS, ajoutons de nouvelles fonctionnalités et vous donnons des connaissances à jour. Et nous avons aussi communauté chaleureuse sur Telegram 👾

💬 Avez-vous déjà essayé :has() ou les requêtes de conteneur ?

Écrivez dans les commentaires quelles astuces CSS vous ont impressionné en 2025 !