css2023.yml

locale: en-US
translations:
  ###########################################################################
  # General
  ###########################################################################

  - key: general.results.description
    t: The 2023 edition of the annual survey about the latest trends in the CSS ecosystem.

  - key: general.css2022.js2022_banner
    t: The State of JS 2022 survey is currently open, you can [go take it right now](https://survey.devographics.com/survey/state-of-js/2022?source=css2022)!

  - key: general.css2023.results_intro
    t: |

      I'm not going to lie, keeping up with CSS hasn't been easy lately. Thankfully this year [Chen Hui Jing](https://chenhuijing.com/) took the lead of the survey design process, building on the work done by [Lea Verou](https://lea.verou.me/) last year.

      We were also lucky enough to get support from the Google Chrome team, who (along with other browser vendors) uses these results to help guide their roadmap.

      Thanks to all that extra help, we were able to introduce a bunch of new features, starting with the ability to **customize charts**. By clicking the <span class="customize-chart-icon">“settings”</span> icon next to a chart, you can now filter it by salary, country, or any other variable you'd like!

      With all this out of the way, let's see how CSS evolved in 2023!

  ###########################################################################
  # Introduction
  ###########################################################################

  - key: introduction.css2023
    t: |
      <span class="first-letter">C</span>SS is going through a period of unprecedented progress. Between `:has()`, container queries, subgrid, and many more, new features are making their way to browsers seemingly every month. 

      The consequence of all this growth is that things can get a bit overwhelming. Thankfully this year we had [Chen Hui Jing](https://chenhuijing.com/) to help design the survey and guide us through the CSS jungle. 

      And speaking of the survey, did you know browser vendors use its data as part of the [Interop](https://web.dev/interop-2023/) initiative to help prioritize which features to work on next?

      Finally, we are introducing a new feature this year: the ability to **customize charts** with your own data filters. We're excited to see what kind of new insights you'll come up with!

      <span class="conclusion__byline">– Sacha Greif</span>

  ###########################################################################
  # Tshirt
  ###########################################################################

  - key: sections.tshirt.title
    t: T-shirt

  - key: sections.tshirt.description
    t: |
      ## Support the Survey With the State of CSS T-Shirt

      Between the bad video quality, the bulky cassettes, and having to rewind, there's not much to miss about the VHS era. But one thing we *do* miss are the amazing 90s visuals that used to adorn blank VHS tapes. 

      But now, thanks to the talented Christopher Kirk-Nielsen you can enjoy all this retro radness while also celebrating your love for CSS at the same time!

  - key: tshirt.about
    t: About the T-shirt

  - key: tshirt.description
    t: |
      We use a high-quality, super-soft tri-blend shirt with a slim fit printed by our partners at Cotton Bureau.

  - key: tshirt.getit
    t: Get It

  - key: tshirt.price
    t: USD $29 + shipping

  - key: tshirt.designer.heading
    t: About the Designer

  - key: tshirt.designer.name
    t: Christopher Kirk-Nielsen

  - key: tshirt.designer.bio
    t: |
      Originally from France but now based in the United States, Chris is not just an amazing front-end developer, but also a talented illustrator who specializes in retro visuals. In fact, we encourage you to also check out his [other t-shirt designs](https://chriskirknielsen.com/designs)!

  ###########################################################################
  # Sections Introductions
  ###########################################################################

  - key: sections.user_info.description.css2023
    t: |
      This year's survey reached **9,190** developers throughout the world.

  - key: sections.features.description.css2023
    t: |
      CSS has been on a roll lately, and many of the new features introduced are
      slowly but surely being adopted by the developer community.

  - key: sections.css_frameworks.description.css2023
    t: |
      Once again, Tailwind CSS stands apart as the one major UI framework that developers are happy to keep using; while Open Props is generating a small but passionate following.

  - key: sections.css_in_js.description.css2023
    t: |
      After some initial growth, it seems like the CSS-in-JS sector has plateaued, and
      the fact that native CSS itself is adopting many of its main advantages is probably a big contributing factor.

  - key: sections.other_tools.description.css2023
    t: |
      30 years after the invention of the browser, we're still seeing innovation in that space with new entrants like Brave and Arc; or specialized tools like Polypane gaining marketshare.

  - key: sections.usage.description.css2023
    t: |
      No matter how you use CSS, the data shows that making sure your code works across all browsers is still a concern, especially for newer features such as `:has()`.

  - key: sections.resources.description.css2023
    t: |
      Between blogs, YouTube channels, and podcasts, the CSS community is more vibrant than ever.

  ###########################################################################
  # Charts
  ###########################################################################

  - key: options.features_categories.layout
    aliasFor: sections.layout.title
  - key: options.features_categories.shapes_graphics
    aliasFor: sections.shapes_graphics.title
  - key: options.features_categories.interactions
    aliasFor: sections.interactions.title
  - key: options.features_categories.typography
    aliasFor: sections.typography.title
  - key: options.features_categories.accessibility
    aliasFor: sections.accessibility.title
  - key: options.features_categories.other_features
    aliasFor: sections.other_features.title
  - key: options.features_categories.colors
    aliasFor: sections.colors.title
  - key: options.features_categories.selectors
    aliasFor: sections.selectors.title

  - key: user_info.country_low_vs_high_income.description.css2023
    t: >
      Splitting respondents between low-income and high-income brackets gives
      us two very different lists of countries.

  - key: user_info.higher_education_degree_by_gender.description.css2023
    t: >
      Women representation was higher than expected among respondents 
      with a higher-education diploma in areas unrelated to CSS, potentially 
      indicating a lot of career changes.

  - key: user_info.source_by_gender.description.css2023
    t: >
      Although the low total counts make it hard to draw any conclusions,
      the proportion of women was highest among respondents 
      who came across the survey from their workplace or through word-of-mouth, 
      especially compared to social networks such as Twitter or YouTube.

  - key: user_info.source_by_race_ethnicity.description.css2023
    t: >
      Again keeping in mind the low sample size, when considering race and ethnicity,
      YouTube stands out as one of the most diverse source of traffic to the survey.

  - key: user_info.average_income_by_company_size.description.css2023
    t: >
      We find the highest-paid respondents working for large companies, although
      it's notable that solo workers show a slight income advantage over small companies.

  - key: user_info.yearly_salary_usa_vs_the_world.description.css2023
    t: >
      When comparing U.S. incomes against the rest of the world, it becomes clear that U.S.
      developers are over-represented in the higher income brackets.

  ###########################################################################
  # Awards
  ###########################################################################

  - key: award.feature_adoption_delta_award.comment
    t: |
      The `gap` property for Flexbox is such a useful addition that it's not surprising
      it would see a **{value}** progression in 2023

  # - key: award.tool_usage_delta_award.comment
  #   t: No other tool comes even close to Tailwind CSS's dramatic **{value}** progression over the last year.

  - key: award.most_commented_feature_award.comment
    t: With **{value}** comments, no other feature even came close to generating as much feedback as Subgrid.

  - key: award.tool_satisfaction_award.comment
    t: |
      Out of all the CSS-in-JS solutions, Open Props is the only one that maintained a
      sky-high **{value}** retention ratio.

  # - key: award.tool_interest_award.comment
  #   t: With a **{value}** ratio, CSS Modules again generated the most interest among CSS developers this year.

  - key: award.most_write_ins_award.comment
    t: |
      With **{value}** mentions, Panda was the tool most mentioned in freeform questions by far.

  ###########################################################################
  # Conclusion
  ###########################################################################

  - key: conclusion.css2023.chen_hui_jing
    t: |
      <span class="first-line">As usage of newer CSS features has been trending upwards, usage of CSS frameworks has been on a downward slope.</span>

      This could be an indication that folks are starting to get used to the idea that you don’t necessarily have to wait to use newer CSS features, because browsers will catch up a lot quicker than before.

      With high awareness of native CSS features like nesting and `:has()` (which can act like a parent selector, but is much more than that!), it seems like we are on the brink of widespread adoption.

      Out of all these features, I did have a personal favourite for this year, and that is `text-wrap: balance`. It provides a one-line fix for a request that I’ve constantly gotten over my entire web development career: “can we adjust that headline so the last word isn’t an orphan?”

      It was also interesting that so many developers felt that animating to auto and masonry layout were missing CSS features. It's true it's always been tricky for browsers to determine element dimensions (especially height) when they're not explicitly declared. 

      But as [Lea Verou](https://lea.verou.me/) mentioned last year, with initiatives such as [Interop](https://wpt.fyi/interop-2023) bringing browsers together, features thought previously impossible can now potentially become reality!

  - key: conclusion.css2023.chen_hui_jing.bio
    t: Developer Experience Engineer @ Interledger Foundation

  ###########################################################################
  # Picks
  ###########################################################################

  - key: picks.my_pick
    t: "My 2023 Pick: "
  - key: picks.intro
    t: We asked members of the CSS community to share their “pick of the year”

  # - key: picks.david_east.name
  #   t: CSS Subgrid
  # - key: picks.david_east.bio
  #   t: Advocate for building on the web
  # - key: picks.david_east.description
  #   t: |
  #     CSS Subgrid allows child elements to inherit their parents grid properties.
  #     Soon, it will be much easier to lay elements out to the same grid
  #     lines across the entire page.

  # - key: picks.bramus_van_damme.name
  #   t: The `:has()` Selector
  # - key: picks.bramus_van_damme.bio
  #   t: Chrome Developer Relations Engineer at Google
  # - key: picks.bramus_van_damme.description
  #   t: |
  #     You might know this one as the so-called “parent selector” but that name does it
  #     no justice as it only covers a small part of what it can do.
  #     This selector has essentially changed the way I write my CSS.

  - key: picks.kevin_j_powell.name
    t: Ahmad Shadeed
  - key: picks.kevin_j_powell.bio
    t: CSS Evangelist
  - key: picks.kevin_j_powell.description
    t: |
      Ahmad's blog is a source of knowledge and inspiration, with in-depth explorations of topics, including great visuals and use cases.

  # - key: picks.samuel_kraft.name
  #   t: The `:has()` Selector
  # - key: picks.samuel_kraft.bio
  #   t: Design Engineer
  # - key: picks.samuel_kraft.description
  #   t: |
  #     The new :has() selector is super powerful and unlocks new styling possibilities.
  #     This great article from Jen Simmons breaks it down with explanations and practical examples.

  - key: picks.josh_comeau.name
    t: CSS Podcast
  - key: picks.josh_comeau.bio
    t: Instructor, CSS for JavaScript Developers
  - key: picks.josh_comeau.description
    t: |
      This podcast is a delightful tour of a bunch of 
      important and modern CSS features. 
      It's hosted by Una Kravets and Adam Argyle, two absolutely wonderful people.

  - key: picks.adam_argyle.name
    t: Zag.js
  - key: picks.adam_argyle.bio
    t: Google Chrome Developer Relations
  - key: picks.adam_argyle.description
    t: |
      The talented folks at ChakraUI are building some next-gen components and ideas, 
      can't wait to see what else they come up with.

  # - key: picks.eric_w_bailey.name
  #   t: “Style with Stateful, Semantic Selectors” by Ben Myers
  # - key: picks.eric_w_bailey.bio
  #   t: Accessibility advocate and CSS nerd
  # - key: picks.eric_w_bailey.description
  #   t: |
  #     Ben demonstrates how utilizing ARIA
  #     attribute selectors can simply and powerfully tie appearance to state.

  # - key: picks.michelle_barker.name
  #   t: Interop 2022
  # - key: picks.michelle_barker.bio
  #   t: Writer and creator of front-end blog CSS { In Real Life }
  # - key: picks.michelle_barker.description
  #   t: |
  #     Interop is a collaboration between all of the major browser vendors,
  #     agreeing 15 key areas of focus for implementation —
  #     including game-changing new CSS features like container queries,
  #     cascade layers and color functions.

  - key: picks.jhey_tompkins.name
    t: |
      The `:has()` Selector
  - key: picks.jhey_tompkins.bio
    t: CEO of Fancy CSS
  - key: picks.jhey_tompkins.description
    t: |
      `:has()` is the magic that you can use to combine other APIs like container queries, anchor positioning, etc. together. I'm excited to see how the community finds new and innovative ways to use it.

  # - key: picks.gift_egwuenu.name
  #   t: Learn CSS
  # - key: picks.gift_egwuenu.bio
  #   t: Developer Advocate at Cloudflare
  # - key: picks.gift_egwuenu.description
  #   t: |
  #     My recommended resource for anyone looking to learn CSS from the ground up,
  #     I also use it as a reference everytime I need to look up any CSS property.

  - key: picks.ahmad_shadeed.name
    t: Scroll-Driven Animations
  - key: picks.ahmad_shadeed.bio
    t: Design Engineer and Writer at [ishadeed.com](https://ishadeed.com/)
  - key: picks.ahmad_shadeed.description
    t: |
      If I went back 2 years, I'd never have imagined CSS 
      having scroll-driven animations. Yet, here we are!

  # - key: picks.georgedoescode.name
  #   t:
  # - key: picks.georgedoescode.bio
  #   t:
  # - key: picks.georgedoescode.description
  #   t: |

  # - key: picks.jen_simmons.name
  #   t: The `:has()` Selector
  # - key: picks.jen_simmons.bio
  #   t: Web technologies evangelist at Apple
  # - key: picks.jen_simmons.description
  #   t: |
  #     For two decades, “parent selector” was a top requested feature for CSS.
  #     Then in 2022, in a total surprise, the :has() pseudo-class arrived to solve this and far more.

  - key: picks.sara_soueidan.name
    t: |
      `color-contrast()`
  - key: picks.sara_soueidan.bio
    t: Inclusive design engineer and educator
  - key: picks.sara_soueidan.description
    t: |
      My vote goes to color-contrast() because I think it deserves more spotlight. 
      It’s one of the few features that makes it _easier_ for us (developers) 
      to design for our users. Cross-browser support can’t come soon enough.

  - key: picks.adam_wathan.name
    t: Lightning CSS
  - key: picks.adam_wathan.bio
    t: Creator of Tailwind CSS
  - key: picks.adam_wathan.description
    t: |
      An extremely fast, all-in-one CSS processing tool that handles things like vendor prefixes, minification, and modern feature transpilation, all while being an amazing platform for other developers to build CSS tools on top of.

  # - key: picks.christianoliff.bio
  #   t: Front-end developer for Trimble MAPS
  # - key: picks.christianoliff.description
  #   t: |
  #       One thing I've really started using and appreciating this year though is Purge CSS- an awesome tool for removing unused CSS. It can greatly reduce the size of your CSS, and its fast and easy to use.

  - key: picks.kilian_valkhof.name
    t: Devtoolstips
  - key: picks.kilian_valkhof.bio
    t: Creator of Polypane, the browser for developers.
  - key: picks.kilian_valkhof.description
    t: |
      The devtools in all browsers are super powerful. These bite-sized tips 
      help you get the most out of them regardless of which browser you use.

  - key: picks.ahmad_awais.name
    t: |
      `text-wrap: balance`
  - key: picks.ahmad_awais.bio
    t: VP DevRel & Google Developers Advisory Board founding member
  - key: picks.ahmad_awais.description
    t: |
      Headlines should dazzle and read like a breeze, even if screens play hard to predict. 
      I've battled those annoying solo words at line's end (hello, widow words!), 
      but guess what? Enter text-wrap: balance – one-liner-fix wizardry that's pure magic!

  # - key: picks.piccalilli_.bio
  #   t: Freelance designer & dev who runs piccalil.li
  # - key: picks.piccalilli_.description
  #   t: |
  #       This blog is an absolute gold mine of CSS knowledge. Michelle is a CSS legend and every post or tutorial they write is heaped with useful content.

  # - key: picks.piccalilli_.bio
  #   t: Freelance designer & dev who runs piccalil.li
  # - key: picks.piccalilli_.description
  #   t: |
  #       This blog is an absolute gold mine of CSS knowledge. Michelle is a CSS legend and every post or tutorial they write is heaped with useful content.

  # - key: picks.sarasoueidan.bio
  #   t: Independent UI/design engineer
  # - key: picks.sarasoueidan.description
  #   t: |
  #       My pick is a person, namely Rachel Andrew. She taught CSS Grid to a whole generation of developers.

  # - key: picks.5t3ph.bio
  #   t: Software Engineer @ Microsoft
  # - key: picks.5t3ph.description
  #   t: |
  #       In this conference talk, Manuel Matuzovic provides thoughtfully
  #       crafted examples that are engaging, approachable, and actionable.

  # - key: picks.hugogiraudel.bio
  #   t: Non-binary accessibility & diversity advocate
  # - key: picks.hugogiraudel.description
  #   t: |
  #       Fela is an amazing piece of software.
  #       It’s pretty powerful, relatively easy to use and very performant

  # - key: picks.foolip.bio
  #   t: Software Engineer @ Google
  # - key: picks.foolip.description
  #   t: |
  #       Sergio has recently fixed lots of Flexbox in WebKit and even some in Chromium,
  #       notably bringing flex gap to WebKit,
  #       which means that soon it will be available on all modern browsers.

  # - key: picks.jina.bio
  #   t: Design systems advocate and practitioner
  # - key: picks.jina.description
  #   t: |
  #       The media query to reduce motion, which helps avoid
  #       triggering dizziness and discomfort.

  ###########################################################################
  # Quiz
  ###########################################################################

  - key: quiz.quiz_dave_shea
    t: "Question 01"
  - key: quiz.quiz_dave_shea.question
    t: >
      In May 2003, Dave Shea launched a site that showcased CSS's flexibility and adaptability. What was that site's name?
  - key: options.quiz_dave_shea.css_playground
    t: CSS Playground
  - key: options.quiz_dave_shea.style_jungle
    t: Style Jungle
  - key: options.quiz_dave_shea.css_zen_garden
    t: CSS Zen Garden
  - key: quiz.quiz_dave_shea.answer
    t: >
      [CSS Zen Garden](https://www.csszengarden.com/) made a big impression by demonstrating what was possible when you kept markup and styling separate.
  - key: quiz.quiz_dave_shea.description
    aliasFor: quiz.quiz_dave_shea.question

  - key: quiz.quiz_css_spec
    t: "Question 02"
  - key: quiz.quiz_css_spec.question
    t: >
      Which of these organizations maintains the CSS specification?
  - key: options.quiz_css_spec.w3c
    t: W3C
  - key: options.quiz_css_spec.w3schools
    t: W3Schools
  - key: options.quiz_css_spec.mdn
    t: MDN
  - key: quiz.quiz_css_spec.answer
    t: >
      The W3C's [CSS Working Group](https://www.w3.org/groups/wg/css) maintains the CSS spec, which is then implemented by browser vendors.
  - key: quiz.quiz_css_spec.description
    aliasFor: quiz.quiz_css_spec.question

  ###########################################################################
  # Sponsors
  ###########################################################################

  - key: sponsors.frontendmasters.description
    t: Advance your skills with in-depth, modern front-end engineering courses.
  - key: sponsors.polypane.description
    t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease.
  - key: sponsors.nijibox.description
    t: UX and Product Development consulting in the heart of Tokyo.
  - key: sponsors.renderatl.description
    t: The largest tech conference with a dedicated Design & CSS track.
  - key: sponsors.google_chrome.description
    t: Thanks to the Google Chrome team for supporting our work.

  ###########################################################################
  # FAQ/About
  ###########################################################################

  - key: about.content
    t: >
      The 2023 State of CSS survey ran from June 15 to July 15 2023, and collected 9,108 responses. The survey is run by [Devographics](https://www.devographics.com/), with help from a team of open-source contributors and consultants. 


      The State of CSS logo and t-shirt were designed and animated by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/).


      ### Survey Goals

      This survey, along with the [State of JavaScript](https://stateofjs.com/) survey, was created to identify upcoming trends in the web development ecosystem in order to help developers make technological choices. 


      As such, these surveys are focused on anticipating what's coming over the next few years rather than analyzing what's popular now, which is why the features or technologies that are currently most widespread are not always included. 


      Additionally, survey data is also used by browser vendors to prioritize features and inform initiatives such as [Interop 2023](https://web.dev/interop-2023/).


      ### Survey Design

      This year, survey design was lead by [Chen Hui Jing](https://chenhuijing.com/) thanks to a funding grant from the Google Chrome team. All survey questions were optional. 

      ### Survey Audience

      The survey was openly accessible online and respondents were not filtered or selected in any way. Respondents were primarily a mix of respondents from past surveys (alerted through a dedicated mailing list) and social media traffic. 

      ### Project Funding

      Funding from this project comes from a variety of sources:

      - **T-shirt sales**. 

      - **Sponsored Links**: the links to recommended resources at the bottom of each page are provided by our partner [Frontend Masters](https://frontendmasters.com/).

      - **Sponsored Charts**: starting last year, anybody can now also choose to directly sponsor a chart for $10 or more, and get their Twitter avatar displayed next to it.

      - **Google**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a budget to hire Lea to help design the survey, as well as funded me directly to help support my work. 

      - **Nijibox**: Japan-based [Nijibox](https://nijibox.jp/) has also graciously accepted to sponsor my efforts to help make these yearly surveys more sustainable. 


      ### Technical Overview

      You can find a more in-depth technical overview of how the surveys are run [here](https://dev.to/sachagreif/how-the-devographics-surveys-are-run-2023-edition-1p6a). Our code is [open-source](https://github.com/Devographics/Monorepo/). 

      ### Feedback


      - [Report a technical issue](https://github.com/Devographics/Monorepo/issues)

      - [Make a suggestion for next year](https://github.com/Devographics/surveys/issues/193)

      - [Other non-technical issues](https://github.com/Devographics/surveys/issues)

      - [Join our Discord](https://discord.gg/tuWRUWVyJs)