State of CSS 2026

Start Date

May 15, 2026

End Date

June 29, 2026

Respondents

4,902

Survey Archive

Review Questions →

Get Data

Download →

Le CSS de 2026 serait méconnaissable pour nos lointains ancêtres du début des années 2000.

Aujourd'hui, vous pouvez animer les transitions entre les pages en CSS, créer des mises en page en maçonnerie et même émuler un microprocesseur ! Bien sûr, vous pouvez aussi faire tourner Doom en CSS et, oui, même centrer des <div> !

Pour vous aider à comprendre ce que les résultats de l'enquête State of CSS de cette année révèlent sur cet écosystème foisonnant, voici un aperçu rapide des tendances les plus intéressantes.

L'année du positionnement par ancrage

La prise en charge limitée du positionnement par ancrage rend d'autant plus remarquable sa première place lorsque les répondants citent leur nouvelle fonctionnalité CSS préférée.

Link to section
Nouvelle fonctionnalité préférée

Quelles nouvelles fonctionnalités CSS avez-vous commencé à utiliser cette année et préférez-vous ?

Multiple

Limité

favorite_new_features

Build-time query error | Block ID: favorite_new_features | Value "limitations" does not exist in "DataAPI_StateOfCssFavoriteNewFeaturesDynamicID" enum.

debug

query {
  surveys {
    state_of_css {
      css2026 {
        usage {
          favorite_new_features: favorite_new_features {
            id
            comments {
              currentEdition {
                count
              }
            }
            _correlations {
              questionCorrelations {
                kind1
                kind2
                questionId1
                sectionId1
                optionId1
                questionId2
                sectionId2
                optionId2
                n
                correlation
                sameSection
                strength
                direction
              }
              optionCorrelations {
                id
                correlations {
                  kind1
                  kind2
                  questionId1
                  sectionId1
                  optionId1
                  questionId2
                  sectionId2
                  optionId2
                  n
                  correlation
                  sameSection
                  strength
                  direction
                }
              }
            }
            freeform(
              parameters: {
                showNoAnswer: true
                cutoff: 5
                limit: 25
                mergeOtherBuckets: true
              }
              bucketsFilter: {
                nin: [
                  limitations
                ]
              }
            ) {
              allEditions(editionCount: 2) {
                _metadata {
                  axis1Sort {
                    property
                    order
                  }
                  axis2Sort {
                    property
                    order
                  }
                  limit
                  cutoff
                }
                _cardinalities {
                  buckets {
                    answerCount
                    count
                    percentage
                  }
                  max
                  mean
                  n
                }
                editionId
                year
                completion {
                  count
                  percentageSurvey
                  total
                }
                average
                percentiles {
                  p50
                }
                buckets {
                  id
                  count
                  value
                  index
                  percentageQuestion
                  percentageSurvey
                  isFreeformData
                  hasInsufficientData
                  entity {
                    name
                    nameHtml
                    nameClean
                    alias
                    author
                    description
                    descriptionHtml
                    descriptionClean
                    id
                    parentId
                    entityType
                    tags
                    example {
                      label
                      language
                      code
                      codeHighlighted
                    }
                    avatar {
                      url
                    }
                    homepage {
                      url
                    }
                    amazon {
                      url
                    }
                    wikipedia {
                      url
                    }
                    steam {
                      url
                    }
                    youtube {
                      url
                    }
                    twitter {
                      url
                    }
                    bluesky {
                      url
                    }
                    threads {
                      url
                    }
                    twitch {
                      url
                    }
                    rss {
                      url
                    }
                    blog {
                      url
                    }
                    mastodon {
                      url
                    }
                    github {
                      url
                    }
                    npm {
                      url
                    }
                    mdn {
                      url
                    }
                    caniuse {
                      url
                    }
                    resources {
                      url
                      title
                    }
                    webFeature {
                      id
                      description_html
                      group
                      name
                      spec
                      url
                      status {
                        baseline
                        baseline_low_date
                        support {
                          chrome
                          chrome_android
                          edge
                          firefox
                          firefox_android
                          safari
                          safari_ios
                        }
                      }
                    }
                  }
                  nestedBuckets {
                    id
                    count
                    value
                    index
                    percentageQuestion
                    percentageSurvey
                    isFreeformData
                    hasInsufficientData
                    entity {
                      name
                      nameHtml
                      nameClean
                      alias
                      author
                      description
                      descriptionHtml
                      descriptionClean
                      id
                      parentId
                      entityType
                      tags
                      example {
                        label
                        language
                        code
                        codeHighlighted
                      }
                      avatar {
                        url
                      }
                      homepage {
                        url
                      }
                      amazon {
                        url
                      }
                      wikipedia {
                        url
                      }
                      steam {
                        url
                      }
                      youtube {
                        url
                      }
                      twitter {
                        url
                      }
                      bluesky {
                        url
                      }
                      threads {
                        url
                      }
                      twitch {
                        url
                      }
                      rss {
                        url
                      }
                      blog {
                        url
                      }
                      mastodon {
                        url
                      }
                      github {
                        url
                      }
                      npm {
                        url
                      }
                      mdn {
                        url
                      }
                      caniuse {
                        url
                      }
                      resources {
                        url
                        title
                      }
                      webFeature {
                        id
                        description_html
                        group
                        name
                        spec
                        url
                        status {
                          baseline
                          baseline_low_date
                          support {
                            chrome
                            chrome_android
                            edge
                            firefox
                            firefox_android
                            safari
                            safari_ios
                          }
                        }
                      }
                    }
                    nestedBuckets {
                      id
                      count
                      value
                      index
                      percentageQuestion
                      percentageSurvey
                      isFreeformData
                      hasInsufficientData
                      entity {
                        name
                        nameHtml
                        nameClean
                        alias
                        author
                        description
                        descriptionHtml
                        descriptionClean
                        id
                        parentId
                        entityType
                        tags
                        example {
                          label
                          language
                          code
                          codeHighlighted
                        }
                        avatar {
                          url
                        }
                        homepage {
                          url
                        }
                        amazon {
                          url
                        }
                        wikipedia {
                          url
                        }
                        steam {
                          url
                        }
                        youtube {
                          url
                        }
                        twitter {
                          url
                        }
                        bluesky {
                          url
                        }
                        threads {
                          url
                        }
                        twitch {
                          url
                        }
                        rss {
                          url
                        }
                        blog {
                          url
                        }
                        mastodon {
                          url
                        }
                        github {
                          url
                        }
                        npm {
                          url
                        }
                        mdn {
                          url
                        }
                        caniuse {
                          url
                        }
                        resources {
                          url
                          title
                        }
                        webFeature {
                          id
                          description_html
                          group
                          name
                          spec
                          url
                          status {
                            baseline
                            baseline_low_date
                            support {
                              chrome
                              chrome_android
                              edge
                              firefox
                              firefox_android
                              safari
                              safari_ios
                            }
                          }
                        }
                      }
                      nestedBuckets {
                        id
                        count
                        value
                        index
                        percentageQuestion
                        percentageSurvey
                        isFreeformData
                        hasInsufficientData
                        entity {
                          name
                          nameHtml
                          nameClean
                          alias
                          author
                          description
                          descriptionHtml
                          descriptionClean
                          id
                          parentId
                          entityType
                          tags
                          example {
                            label
                            language
                            code
                            codeHighlighted
                          }
                          avatar {
                            url
                          }
                          homepage {
                            url
                          }
                          amazon {
                            url
                          }
                          wikipedia {
                            url
                          }
                          steam {
                            url
                          }
                          youtube {
                            url
                          }
                          twitter {
                            url
                          }
                          bluesky {
                            url
                          }
                          threads {
                            url
                          }
                          twitch {
                            url
                          }
                          rss {
                            url
                          }
                          blog {
                            url
                          }
                          mastodon {
                            url
                          }
                          github {
                            url
                          }
                          npm {
                            url
                          }
                          mdn {
                            url
                          }
                          caniuse {
                            url
                          }
                          resources {
                            url
                            title
                          }
                          webFeature {
                            id
                            description_html
                            group
                            name
                            spec
                            url
                            status {
                              baseline
                              baseline_low_date
                              support {
                                chrome
                                chrome_android
                                edge
                                firefox
                                firefox_android
                                safari
                                safari_ios
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

Les problèmes de prise en charge par les navigateurs

Le positionnement par ancrage arrive également en tête des fonctionnalités CSS que les développeurs aimeraient utiliser, mais évitent à cause de problèmes de compatibilité avec les navigateurs.

Link to section
Incompatibilités entre navigateurs

Y a-t-il des fonctionnalités CSS existantes que vous avez du mal à utiliser (ou que vous évitez complètement) en raison d'une prise en charge insuffisante ou de différences entre navigateurs ?

Réponse libre

Multiple

20%

40%

60%

80%

100%

-1

-2

20%

40%

60%

80%

100%

Cela met en évidence un problème central de l'écosystème CSS : à cause du retard de prise en charge par les navigateurs, l'enthousiasme suscité par les nouveautés est souvent tempéré par l'impossibilité de les utiliser en production.

Outre le positionnement par ancrage, d'autres fonctionnalités comme les transitions de vue ou if() rencontrent le même problème : les développeurs CSS les réclament, et il revient désormais aux éditeurs de navigateurs de veiller à ce qu'elles soient utilisables partout.

C'est là qu'interviennent des initiatives comme Interop, dont l'édition de cette année contribuera heureusement à améliorer la prise en charge de nombreuses fonctionnalités les plus demandées.

À contre-courant de la tendance à l'IA

Alors que le reste du monde du développement web confie une part croissante de son code à l'IA, le CSS semble rester un bastion du codage manuel, du moins pour l'instant.

Link to section
Génération de code CSS par l'IA
✨

Quelle proportion du code CSS que vous produisez est générée par l'IA ?

20%

40%

60%

80%

100%

980

12.5%

941

25%

562

37.5%

206

50%

322

62.5%

157

75%

312

87.5%

188

20%

40%

60%

80%

100%

La plupart des commentaires à ce sujet soulignent que l'IA n'est pas encore très douée pour produire du bon code CSS. Il sera donc intéressant de voir comment la situation évoluera.

Un langage à part

Plus que toute autre technologie web, le CSS semble être un langage entièrement à part. Il est fascinant de l'avoir vu évoluer au fil des décennies jusqu'à sa forme actuelle.

Ce n'est qu'un minuscule aperçu des données recueillies dans cette enquête. Consultez les résultats complets pour avoir une vue d'ensemble !

– Sacha Greif

Voir tous les résultats »