CSS Academy · Leçon

Autoprefixer et cssnano

Ajoutez automatiquement des préfixes de navigateur avec Autoprefixer et réduisez la sortie CSS avec cssnano.

Autoprefixer et cssnano est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.

Qu’est-ce qu’Autoprefixer ?

Autoprefixer est un module d’extension PostCSS qui ajoute automatiquement des préfixes spécifiques aux navigateurs (-webkit-, -moz-, -ms-) aux propriétés CSS, en fonction des navigateurs que vous devez prendre en charge et à partir des données de Can I Use.

Fonctionnement d’Autoprefixer

Vous écrivez du CSS standard sans préfixes. Autoprefixer lit votre configuration Browserslist et ajoute les préfixes nécessaires pour vos navigateurs cibles pendant le processus de compilation.

<div class="flex">Flexbox row (display: flex — Autoprefixer would add -webkit-box/-ms-flexbox for older targets)</div>

Configuration de Browserslist

Autoprefixer utilise Browserslist pour déterminer les navigateurs cibles. Définissez cette configuration dans .browserslistrc ou package.json :

# .browserslistrc
> 1%
last 2 versions
not dead

Le CSS moderne nécessite peu de préfixes

En 2024, la plupart des fonctionnalités CSS modernes (Grid, Flexbox, propriétés personnalisées et transformations) ne nécessitent aucun préfixe ou seulement quelques-uns. Autoprefixer est surtout utile pour les propriétés de pointe comme appearance, user-select et les API plus récentes.

Ajouter Autoprefixer à PostCSS

Incluez autoprefixer dans votre configuration PostCSS :

// postcss.config.js
const autoprefixer = require('autoprefixer');

module.exports = {
  plugins: [autoprefixer]
};

Qu’est-ce que cssnano ?

cssnano est un module d’extension PostCSS qui réduit la taille du CSS en supprimant les espaces, les commentaires et les déclarations redondantes, tout en appliquant des optimisations sûres, afin de produire le fichier CSS le plus compact possible.

Préréglages de cssnano

cssnano propose des préréglages d’optimisation :

default : minifications sûres (suppression des espaces, des commentaires et des doublons)
advanced : optimisations agressives pouvant modifier la spécificité (à utiliser avec précaution)

// postcss.config.js
const cssnano = require('cssnano');

module.exports = {
  plugins: [
    cssnano({ preset: 'default' })
  ]
};

Fonctionnalités de cssnano

Les optimisations de cssnano comprennent :

Supprimer les espaces et les commentaires
Convertir les couleurs dans leur forme la plus courte (#ffffff → #fff)
Fusionner les règles identiques
Supprimer les propriétés redondantes
Raccourcir les valeurs nulles (0px → 0)

Combiner les deux dans la configuration

Une configuration PostCSS de production utilisant les deux modules d’extension :

module.exports = {
  plugins: [
    require('autoprefixer'),
    process.env.NODE_ENV === 'production' && require('cssnano')({ preset: 'default' })
  ].filter(Boolean)
};

Cartes source et réduction de taille

Générez toujours des cartes source lorsque vous utilisez cssnano dans les compilations de développement. Elles associent la sortie réduite au CSS source pour faciliter le débogage dans DevTools.

Alternatives à cssnano

Parmi les autres outils de réduction du CSS figurent : clean-css, lightningcss (très rapide et fondé sur Rust) et les outils intégrés aux outils de compilation, comme le minificateur CSS interne de Vite (qui utilise esbuild).

Vérification rapide

Qu’est-ce qui détermine les préfixes spécifiques aux navigateurs qu’Autoprefixer ajoute à votre CSS ?

Récapitulatif

Autoprefixer ajoute automatiquement des préfixes spécifiques aux navigateurs en fonction des navigateurs cibles définis dans Browserslist, ce qui évite de les écrire manuellement. cssnano réduit la taille du CSS en supprimant les espaces et les commentaires, tout en appliquant des optimisations sûres. Utilisez les deux dans les chaînes de traitement PostCSS de production. Le CSS moderne nécessite moins de préfixes qu’auparavant : vérifiez le résultat avec vos navigateurs cibles réels.

Questions Fréquemment Posées

La leçon « Autoprefixer et cssnano » est-elle gratuite ?

Oui — le texte complet de « Autoprefixer et cssnano » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Autoprefixer et cssnano » ?

Ajoutez automatiquement des préfixes de navigateur avec Autoprefixer et réduisez la sortie CSS avec cssnano. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer CSS Academy ?

Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Autoprefixer et cssnano » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?

Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Rôle et fonctionnement de PostCSS
Autoprefixer et cssnano
Modules d’extension PostCSS personnalisés
PostCSS dans Vite et Webpack

← Retour à CSS Academy