State of CSS 2026

Start Date

May 15, 2026

End Date

June 29, 2026

Respondents

4,902

Survey Archive

Review Questions →

Get Data

Download →

The CSS of 2026 would be unrecognizable to our distant ancestors from the early 2000s.

Today, you can animate page transitions using CSS, create masonry layouts, even emulate a microprocessor! And of course, you can render Doom in CSS–and yes, you can now even center <div>s in CSS as well!

To help you understand how this year's State of CSS survey results reflect this vibrant ecosystem, here is a quick overview of the most interesting trends.

The Year of Anchor Positioning

Anchor Positioning's limited browser support makes it all the more remarkable that it came in first when asking respondents for their favorite new CSS feature.

链接到某一部分
最喜爱的新功能

您最喜欢今年开始使用的 CSS 新功能是什么？

多选

Limited

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
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

Browser Support Issues

Anchor Positioning also ranked first when asking developers which CSS Features they'd like to use, but were avoiding because of browser support issues.

链接到某一部分
浏览器不兼容性

你是否有因为浏览器之间的差异，导致在使用 CSS 时遇到困难？

(自由提问)

多选

20%

40%

60%

80%

100%

-1

-2

20%

40%

60%

80%

100%

This points to a key issue of the CSS ecosystem: because of lagging browser support, enthusiasm for newly-announced features is often mitigated by the inability to use them in a real-world production context.

In addition to Anchor Positioning, a few other features such as View Transitions, or if() fall in that same bucket: CSS developers want these features, and it's now up to browser vendors to make sure they can be usable everywhere.

This is where initiatives such as Interop come in, and this year's edition will thankfully help improve support across the board for many of the survey's most-requested features.

Bucking the AI Trend

While the rest of the web development world has been entrusting more and more of its code to AI, CSS seems to remain a stronghold of manual coding, at least for now.

链接到某一部分
CSS AI Code Generation
✨

What proportion of the CSS code you produce is AI-generated?

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%

Most of the comments around this issue cited the fact that AI just isn't great at producing good CSS code yet, so it'll be interesting to see how things evolve going forward.

A Unique Language

More than any other web technology, CSS feels like its own wholly original thing, and it's been fascinating to see it evolve over decades into its modern incarnation.

This is just a tiny part of the data collected in this survey, so be sure to check out the full survey results to get the whole picture!

– Sacha Greif

View Full Results »