News

Modern-CSS.com : Arrêtez d'écrire du CSS comme en 2015

Mohamed E.

— 2 min read
Modern-CSS.com : Arrêtez d'écrire du CSS comme en 2015
Photo by Vatsal Tyagi / Unsplash

Vous utilisez encore position: absolute + transform: translate(-50%, -50%) pour centrer un élément ? Vous ajoutez du JavaScript juste pour faire un accordéon exclusif ou un textarea auto-extensible ? Il est temps de passer à autre chose.

Modern-CSS.com est une ressource gratuite qui met côte à côte les vieilles astuces CSS et leurs remplacements natifs modernes. Le concept est simple, mais redoutablement efficace.

Le principe : ancien vs. moderne, snippet par snippet

Le site propose actuellement 75 snippets comparatifs. Chaque page présente deux colonnes : à gauche, la méthode "old school" (souvent un hack ou une dépendance JavaScript), et à droite, la solution CSS native qui la remplace.

Quelques exemples parlants :

Centrer un élément — On connaît tous le combo position: absolute + top: 50% + transform. Aujourd'hui, deux lignes suffisent :

.parent {
  display: grid;
  place-items: center;
}

Textarea auto-extensible — Plus besoin d'écouter chaque frappe clavier en JS pour recalculer la hauteur :

textarea {
  field-sizing: content;
  min-height: 3lh;
}

Accordéons exclusifs — Fini le JavaScript qui ferme tous les <details> avant d'ouvrir celui cliqué. Un simple attribut HTML fait le travail :

<details name="faq">...</details>
<details name="faq">...</details>

Ce qui rend le site vraiment utile

Chaque snippet affiche un pourcentage de compatibilité navigateur, ce qui permet de savoir immédiatement si la technique est utilisable en production. On peut d'ailleurs filtrer les snippets par niveau de support : "Widely available", "Newly available" ou "Limited".

Les snippets sont aussi classés par catégorie (Layout, Animation, Color, Typography, Workflow, Selectors) et par niveau (Beginner, Intermediate, Advanced), ce qui en fait un outil aussi bien pour les débutants que pour les développeurs expérimentés.

Au-delà des snippets, le site propose aussi une section Articles, un Playground pour tester le code directement, une cheatsheet CSS complète, et une page What's New pour suivre les dernières nouveautés CSS.

Pour qui ?

Si vous êtes intégrateur, développeur front-end, ou simplement quelqu'un qui touche au CSS régulièrement, Modern-CSS.com devrait rejoindre vos favoris. Le site est particulièrement pertinent si vous travaillez encore avec des habitudes prises il y a quelques années — et soyons honnêtes, c'est le cas de beaucoup d'entre nous.

Le CSS a énormément évolué ces dernières années : container queries, @layer, nesting natif, oklch(), View Transitions, Scroll-driven Animations, Anchor Positioning… La liste est longue, et Modern-CSS.com est probablement le moyen le plus rapide de se mettre à jour.

En résumé

Modern-CSS.com est un projet créé par Naeemnur qui remplit un vrai besoin : montrer concrètement ce que le CSS moderne permet de faire, sans framework, sans build tool, et sans JavaScript superflu. 75 snippets, zéro dépendance, et une mise à jour régulière pour 2026.

👉 Lien : modern-css.com

Read more