Skip to content

Difficultés

Difficultés liées à la mise en page

Comme l'année dernière, Grid est l'élément le plus souvent cité parmi les difficultés liées à la mise en page. Cela reflète à la fois son utilisation croissante (il est devenu la méthode de mise en page CSS par défaut pour de nombreux développeurs) et sa courbe d'apprentissage indéniable.

Si la prise en charge généralisée de Subgrid est bienvenue, cette fonctionnalité ajoute une couche de complexité à un système de mise en page déjà sophistiqué.

Quelles sont vos principales difficultés CSS liées à la mise en page ?
Multiple
Principaux sujets problématiques dans l'ensemble.

Affichage :

Éléments qui ne font pas partie de « limitations »
0%
20%
40%
60%
80%
100%
01
3
02
Browser vendor issues
4
03
1
+4
04
Element sizing
4
+19
05
Cognitive overload
4
06
Positioning
1
07
Responsive design
+1
08
+17
09
Problèmes de positionnement
10
Problèmes d'alignement
2
11
Developer Experience
12
Overflow
13
14
Problèmes de hauteur
-10
15
Stacking contexts & z-index
1
16
Typography
1
17
Education
1
18
19
Environments & Consumers
1
20
Table Styling
21
22
-9
23
Animations
24
Syntax issues
25
-13
0%
20%
40%
60%
80%
100%

Difficultés liées aux formes et aux graphiques

Le CSS nous permet de mieux en mieux de dépasser le rectangle et de dessiner toutes sortes de formes complexes sans recourir à Canvas ni même à SVG.

Le problème reste la compatibilité : tant que tous les navigateurs n'implémenteront pas ces fonctionnalités, il sera difficile de convaincre les développeurs de les utiliser.

Quelles sont vos principales difficultés CSS liées aux formes et aux graphiques ?
Multiple
Principaux sujets problématiques dans l'ensemble.

Affichage :

Éléments qui ne font pas partie de « limitations »
0%
20%
40%
60%
80%
100%
01
Browser vendor issues
3
02
Complex element shapes
3
03
SVG
2
04
Cognitive overload
4
05
2
06
Developer Experience
07
Education
2
08
1
09
-4
10
11
Syntax issues
12
CSS inside SVG
1
13
Element sizing
14
Rendering
15
16
Animations
17
Tooling
1
18
19
20
Bugs and stability issues
21
Typography
22
Positioning
23
Icons issues
24
1
25
0%
20%
40%
60%
80%
100%

Difficultés liées aux couleurs

Ces dernières années, le CSS nous a offert de nombreuses façons de définir les couleurs. Les espaces colorimétriques polaires uniformes en perception comme oklch, ainsi que les couleurs relatives, light-dark() et contrast-color(), nous rapprochent de l'idéal d'interfaces recolorables dynamiquement.

Malheureusement, sans mappage de gamut, les modifications produisent souvent des couleurs hors gamut, sans aucune garantie. Les critiques portent donc non seulement sur l'absence de mappage, mais aussi sur ses conséquences : thèmes dynamiques toujours difficiles à créer ou couleurs oklch imprévisibles.

Quelles sont vos principales difficultés CSS liées à la gestion des couleurs ?
Multiple
Principaux sujets problématiques dans l'ensemble.

Affichage :

Éléments qui ne font pas partie de « limitations »
0%
20%
40%
60%
80%
100%
01
Accessibility
1
02
Theming
3
03
Cognitive overload
6
04
Browser vendor issues
3
05
2
06
Problèmes liés à la manipulation des couleurs
3
+4
07
+8
08
Tooling
3
09
Syntax issues
10
RGB colors (hex, rgb() and rgba(), HSL etc)
11
1
12
Education
1
13
-1
14
15
16
Maintenance
1
17
Ecosystem issues
18
Contrast algorithms
19
Design systems
1
20
Data structures
21
Debugging
1
22
System colors
23
24
25
Cascade Management
0%
20%
40%
60%
80%
100%

Difficultés liées aux interactions

Tout comme pour les formes et les graphiques, la prise en charge des interactions et des animations par les navigateurs accuse un certain retard.

Les carrousels CSS ont également suscité des réactions, notamment au sujet de l'accessibilité.

Quelles sont vos principales difficultés CSS liées aux interactions ?
Multiple
Principaux sujets problématiques dans l'ensemble.

Affichage :

Éléments qui ne font pas partie de « limitations »
0%
20%
40%
60%
80%
100%
01
Animations
8
02
Browser vendor issues
4
03
Accessibility
04
+8
05
Cognitive overload
4
06
-3
07
Reliance on JavaScript
+9
08
Developer Experience
09
Scrollbars
2
10
Element sizing
1
11
Syntax issues
12
Input element issues
1
13
Education
1
14
Scope Creep
15
Performance
-1
16
Environments & Consumers
1
17
Tooling
1
18
-5
19
Bugs and stability issues
20
Poor developer experience
21
Touch & pointer gestures
22
Debugging
23
:active, :focus, and :hover
24
-4
25
Technical issues
1
0%
20%
40%
60%
80%
100%

Difficultés liées aux autres fonctionnalités

Outre le fait qu'elles sont les trois fonctionnalités les plus citées de cette catégorie, les couches de cascade, l'imbrication CSS et if() pourraient profondément changer notre façon d'écrire du CSS.

Malgré cela, les répondants sont plutôt enthousiastes à l'idée de les adopter ; seul le manque de prise en charge adéquate par les navigateurs et les outils les en empêche principalement.

Quelles sont vos principales difficultés CSS liées aux fonctionnalités mentionnées ci-dessus ?
Multiple
Principaux sujets problématiques dans l'ensemble.

Affichage :

Éléments qui ne font pas partie de « limitations »
0%
20%
40%
60%
80%
100%
01
Browser vendor issues
4
02
Cognitive overload
3
03
Education
1
04
Cascade Management
1
05
-3
06
Tooling
1
07
08
Conditional logic
1
09
1
10
Custom Functions
1
11
12
-7
13
-10
14
15
Separation of Concerns
16
Preprocessors
1
17
Bugs and stability issues
18
display: contents
-10
19
Developer Experience
20
children-count()
21
Accessibility
0%
20%
40%
60%
80%
100%

Difficultés générales liées au CSS

Les problèmes de compatibilité des navigateurs restent très présents, mais il est frappant de voir combien de répondants évoquent une surcharge cognitive et craignent que le CSS ne devienne excessivement complexe. Une inquiétude compréhensible au vu de la vitesse d'évolution du langage et du rythme auquel de nouvelles fonctionnalités sont apparues ces dernières années.
Rencontrez-vous d'autres difficultés liées à l'écriture du CSS ?
Multiple
Principaux sujets problématiques dans l'ensemble.

Affichage :

Éléments qui ne font pas partie de « limitations »
0%
20%
40%
60%
80%
100%
01
Cognitive overload
7
02
Browser vendor issues
4
03
Tooling
3
04
Maintenance
1
+18
05
Education
3
06
Syntax issues
07
Ecosystem issues
2
08
AI tools
09
Cascade Management
1
10
+3
11
Debugging
12
Animations
13
+1
14
Element sizing
2
15
Positioning
1
16
Developer Experience
17
Specificity
18
Inconsistencies across web platform features
19
Environments & Consumers
20
Theming
21
Performance
-12
22
CSS layout issues
1
23
Community issues
24
Color management
25
Custom Functions
1
0%
20%
40%
60%
80%
100%

Ressources recommandées

Ultimate CSS Grid & Layout Techniques, v3
Jen Kramer
AnnieCannons

Ultimate CSS Grid & Layout Techniques, v3

CSS Grid is the most important tool in a modern web developer's toolkit for laying out web pages. With its two-dimensional structure, precise positioning, and overlapping elements, you’ll learn to achieve complex layouts with minimal code.
CSS Animations and Transitions
David Khourshid
Microsoft

CSS Animations and Transitions

Learn CSS animation basics and transition to advanced concepts like orchestration and choreography.
Contenu sponsorisé par nos partenaires. En savoir plus.