Ce guide fournit une référence complète du support CSS par navigateur, destinée à aider les développeurs à planifier la compatibilité inter-navigateurs. Il couvre les propriétés CSS de base, les fonctionnalités CSS3 et CSS4 modernes, ainsi que Flexbox et Grid, jusqu’aux pseudo-classes avancées. Les informations incluent les versions de navigateurs (Chrome, Firefox, Safari, Edge, Internet Explorer, iOS Safari et Android) où chaque propriété est supportée, ainsi que les notes pratiques et les préfixes nécessaires pour les versions plus anciennes. Organisé par catégories de fonctionnalités, ce guide permet une consultation rapide et facilite la prise de décision pour le développement cross-browser fiable et efficace.
📊 Basic CSS Properties Support
| Property |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| color |
1 |
1 |
1 |
12 |
3 |
1 |
1 |
CSS 1 |
Support universel |
| background-color |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Support universel |
| font-family |
1 |
1 |
1 |
12 |
3 |
1 |
1 |
CSS 1 |
Support universel |
| margin |
1 |
1 |
1 |
12 |
3 |
1 |
1 |
CSS 1 |
Support universel |
| padding |
1 |
1 |
1 |
12 |
3 |
1 |
1 |
CSS 1 |
Support universel |
| border |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Support universel |
| width |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Support universel |
| height |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Support universel |
| display |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Support universel |
| position |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 2 |
Support universel |
| float |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Support universel |
📊 CSS3 Properties Support
| Property |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| border-radius |
5 |
4 |
5 |
12 |
9 |
4 |
2.1 |
CSS3 |
Nécessite le préfixe -webkit dans les anciennes versions |
| box-shadow |
10 |
4 |
5.1 |
12 |
9 |
5 |
4 |
CSS3 |
Nécessite le préfixe -webkit dans les anciennes versions |
| text-shadow |
2 |
3.5 |
4 |
12 |
10 |
4 |
2.1 |
CSS3 |
Pas de préfixe nécessaire |
| opacity |
1 |
1 |
2 |
12 |
9 |
2 |
1 |
CSS3 |
IE8 nécessite filter: alpha() comme fallback |
| rgba() |
1 |
3 |
3.1 |
12 |
9 |
3.2 |
2.1 |
CSS3 |
Fallback hexadécimal pour anciens navigateurs |
| transform |
36 |
16 |
9 |
12 |
9 |
9 |
3 |
CSS3 |
Nécessite le préfixe -webkit dans les anciennes versions |
| transition |
26 |
16 |
9 |
12 |
10 |
9 |
4 |
CSS3 |
Nécessite le préfixe -webkit dans les anciennes versions |
| linear-gradient |
26 |
16 |
7 |
12 |
10 |
7 |
4.4 |
CSS3 |
Prérequis de préfixes élevés |
📊 Flexbox Support
| Property |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| display: flex |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE10-11 utilise -ms-flex |
| flex-direction |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE utilise une syntaxe différente |
| flex-wrap |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE11+ uniquement |
| justify-content |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE utilise -ms-flex-pack |
| align-items |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE utilise -ms-flex-align |
| flex-grow |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE utilise -ms-flex-positive |
| flex-shrink |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE utilise -ms-flex-negative |
| order |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE utilise -ms-flex-order |
📊 CSS Grid Support
| Property |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| display: grid |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE10-11 utilise ancienne syntaxe avec -ms- |
| grid-template-columns |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE utilise -ms-grid-columns |
| grid-template-rows |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE utilise -ms-grid-rows |
| grid-gap |
57 |
52 |
10.1 |
16 |
No |
10.3 |
57 |
CSS3 |
Préférer gap moderne |
| grid-column |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE utilise -ms-grid-column |
| grid-row |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE utilise -ms-grid-row |
| justify-items |
57 |
52 |
10.1 |
16 |
11 |
10.3 |
57 |
CSS3 |
Support limité dans IE |
📊 Modern CSS Features Support
| Property |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| custom properties |
49 |
31 |
9.1 |
16 |
No |
9.3 |
49 |
CSS3 |
Non supporté par IE |
| calc() |
26 |
16 |
7 |
12 |
9 |
7 |
4.4 |
CSS3 |
Support limité dans anciennes versions |
| clamp() |
79 |
75 |
13.1 |
79 |
No |
13.4 |
79 |
CSS4 |
Navigateurs modernes uniquement |
| filter |
53 |
35 |
9.1 |
12 |
No |
9.3 |
53 |
CSS3 |
Support limité IE avec -ms-filter |
| clip-path |
55 |
3.5 |
13.1 |
12 |
No |
13.1 |
55 |
CSS3 |
Nécessite -webkit- préfixe |
| object-fit |
32 |
36 |
10 |
16 |
No |
10 |
32 |
CSS3 |
Non supporté par IE |
| aspect-ratio |
88 |
89 |
15 |
88 |
No |
15 |
88 |
CSS4 |
Navigateurs modernes uniquement |
📊 Pseudo-class Support
| Selector |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| :hover |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS1 |
Support universel |
| :focus |
1 |
1 |
1 |
12 |
8 |
1 |
1 |
CSS2 |
Support universel |
| :first-child |
1 |
1 |
3 |
12 |
7 |
1 |
1 |
CSS2 |
Support universel |
| :last-child |
1 |
1 |
3 |
12 |
9 |
1 |
1 |
CSS3 |
IE9+ uniquement |
| :nth-child() |
1 |
3.5 |
3 |
12 |
9 |
3.2 |
1 |
CSS3 |
IE9+ uniquement |
| :not() |
1 |
1 |
3.2 |
12 |
9 |
3.2 |
1 |
CSS3 |
IE9+ support limité |
| :focus-visible |
86 |
85 |
15.4 |
86 |
No |
15.4 |
86 |
CSS4 |
Navigateurs modernes uniquement |
| :has() |
105 |
121 |
15.4 |
105 |
No |
15.4 |
105 |
CSS4 |
Navigateurs très modernes uniquement |
/* Reset cross-browser */
* {
box-sizing: border-box;
}
/* Flexbox avec fallback */
.flex-container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
/* Grid avec fallback IE */
.grid {
display: -ms-grid;
display: grid;
}
Pour garantir une compatibilité maximale, il est conseillé de fournir des alternatives pour les nouvelles propriétés CSS et d’adopter une approche d’amélioration progressive. Testez systématiquement sur les navigateurs cibles, notamment Safari mobile et IE. Les préprocesseurs CSS et outils comme Autoprefixer facilitent l’ajout automatique de préfixes. Pour les fonctionnalités modernes comme Grid ou Flexbox, utilisez la règle @supports pour appliquer des styles conditionnels. Suivez la part de marché des navigateurs de votre audience et fournissez des solutions légères si nécessaire. L’utilisation d’outils tels que “Can I Use” permet de suivre les états de support en temps réel et d’assurer un rendu cohérent sur tous les appareils et navigateurs.
