diff --git a/css2024.yml b/css2024.yml new file mode 100644 index 0000000..c5de257 --- /dev/null +++ b/css2024.yml @@ -0,0 +1,584 @@ +locale: en-US +translations: + ########################################################################### + # General + ########################################################################### + + - key: general.results.description + t: The 2024 edition of the annual survey about the latest trends in the CSS ecosystem. + + - key: general.css2024.survey_intro + t: | + + It's amazing to witness the speed at which CSS keeps evolving. While the past decade has been all about building a solid foundation for layout (Flexbox, Grid) and syntax (variables) the future promises to be about going much further than most of us ever dreamed of. + + Want to calculate a square root or cosine in your CSS? Use that to build scroll-triggered animations? And maybe scope all of it down so it doesn't have any unwanted effects? Now you can do all that, and much more! + + Which is why this survey is more important than ever, not just as a way to keep track of your own progress; but also as a tool to let browser vendors know what we all think about this new direction. + + So once again, please join me for this year's State of CSS! + + - key: features.features_intro_css2024 + t: | + Welcome to the survey! This first part is all about sharing your experience with various CSS features: + + + - **Never heard of it**: it's your first time seeing this – or you've heard of it but have no idea what it does. + + - **Heard of it**: you've read or learned about this, but haven't actually used it yet. + + - **Used it**: you've used this at least once, even if it was just to play around. + + + By the way, if you want to tell us more about any of your choices, just click that little "comment" icon! + + ########################################################################### + # Introduction + ########################################################################### + + - key: introduction.css2024 + t: | + Let me make a prediction: we'll look back at 2024 as the turning point between “CSS Classic” and “New CSS”. + + CSS Classic is how most of us have been writing CSS for years: using a limited set of features, and compensating for the language's limitations using outside tools such as libraries, pre- and post-processors, and strict methodologies. + + New CSS on the other hand is an approach that embraces Subgrid, `:has()`, variables, container queries, and the many new and exciting CSS features introduced in recent years to not only do away with extra tooling, but even start taking on tasks that previously required complex JavaScript workarounds. + + This is all possible thanks to a renewed comittment by browser vendors to, you know, actually *make this stuff work* – and I can't shake the feeling that we've barely scratched the surface of everything New CSS can offer. + + – Sacha Greif + + ########################################################################### + # 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.css2024 + t: | + This year's survey reached **9,704** developers throughout the world. + + - key: sections.features.description.css2024 + t: | + It's no secret that CSS is adding new features at a record rate – which is why we ended up asking about no less than *50* of them this year! + + - key: sections.tools.css2024 + t: Libraries & Tools + + - key: sections.tools.description.css2024 + t: | + Despite the many capabilities unlocked by CSS's new features, developers still rely on tooling and libraries to support their workflow, at least for now. + + - key: sections.usage.description.css2024 + 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.css2024 + t: | + Rest assured: with the amount of new CSS features coming out, we won't run out of material for CSS blog posts, podcasts, videos, and courses anytime soon! + + ########################################################################### + # Charts + ########################################################################### + + # user_info + + - key: user_info.country.takeaway.css2024 + t: > + While the U.S. still represented the largest single demographic, we were still happy to see a good mix of countries among the rest of our respondents – although Asia sadly continues to be under-represented. + + - key: user_info.locale.takeaway.css2024 + t: > + Many thanks to our volunteer translators for making the surveys available in so many different languages! + + - key: user_info.completion_stats.takeaway.css2024 + t: > + Despite the survey's length, an overwhelming majority of respondents took the time to complete it from start to finish! + + - key: user_info.age.takeaway.css2024 + t: > + CSS isn't doing great among Gen Alpha respondents, possibly because they're too busy playing Fortnite. + + Wait, Fortnite is still a thing right…? + + - key: user_info.years_of_experience.takeaway.css2024 + t: > + This chart reveals that most respondents were lucky enough to never have to deal with `float`-based positioning. + + - key: user_info.company_size.takeaway.css2024 + t: > + The larger the company, the higher the salary. Although if you're good enough, our data shows that you can earn a decent living no matter your company's size. + + - key: user_info.yearly_salary.takeaway.css2024 + t: > + While we often hear tales of six-figure salaries out of Silicon Valley, the reality is that most front-end developers throughout the world earn far less, as becomes apparent when directly comparing the U.S. and the rest of the world. + + - key: user_info.higher_education_degree.takeaway.css2024 + t: > + While having a degree will ensure you earn more, turns out it doesn't necessarily have to be related to programming – a good sign for the many among us who discovered a passion for web development further along in life. + + - key: user_info.gender.takeaway.css2024 + t: > + Canada, Spain, the U.K., and the U.S. had the highest proportion of women respondents. + + Our data also shows women's income to be lagging compared to other groups. While the reasons behind this are beyond the scope of this report, it’s clear that women in our industry do face some unique challenges. + + - key: user_info.race_ethnicity.takeaway.css2024 + t: > + Non-white respondents were more likely to be younger and have less experience – which hopefully points to a ongoing diversification of the industry. + + - key: user_info.disability_status.takeaway.css2024 + t: > + Thanks to the continued efforts of accessibility advocates, we now accept the fact that disabilities (permanent or not) should be taken into account as part of the design & development process. + + - key: user_info.source.takeaway.css2024 + t: > + While most respondents knew about the survey from previous years, Kevin Powell also sent a large chunk of survey takers our way. + + # features + + - key: features.all_features + t: Features + + - key: features.all_features.takeaway.css2024 + t: > + Filter Effects (`blur()`, `contrast()`, etc.) were the unexpected most-used CSS feature of 2024, with 75.4% of respondents having used them; with the `:has()` selector a close second with 72.8%. + + When ranking for sentiment on the other hand, Subgrid turned out to be the most loved feature, with 51.5% of respondents willing to use it again. + + The least-used feature? None other than `hanging-punctuation`, with 84.7% of respondents never having even heard about it! + + - key: features.reading_list.takeaway.css2024 + t: > + The Reading List lets you save items you want to learn more about after the survey is complete. + + So it's no coincidence that the least-known-about feature, `hanging-punctuation`, also tops our Reading List rankings as the item developers saved the most! + + # tools + + - key: tools.css_frameworks.takeaway.css2024 + t: > + When it comes to CSS frameworks & UI libraries, Tailwind CSS continues to forge its own path far ahead of other, more traditional competitors. + + - key: tools.css_in_js.takeaway.css2024 + t: > + While some of CSS-in-JS's appeal might've been made obsolete by newer CSS features such as variables, recent innovations like typed styles and build-time compilation show that the space still has a lot to offer. + + - key: tools.pre_post_processors.takeaway.css2024 + t: > + Sass/SCSS is still the leader here, but it'll be interesting to see if its usage will remain stable now that many of its key features have been absorbed by CSS itself. + + - key: tools.utilities.takeaway.css2024 + t: > + There is no shortage of ways to format, minify, and otherwise tweak your CSS code to your liking. + + - key: tools.browsers.takeaway.css2024 + t: > + While the big four browsers dominate this chart, Arc is slowly creeping up the browser rankings, going from 7.8% to 12% usage year over year. + + # usage + + - key: usage.form_factors.takeaway.css2024 + t: > + An encouraging sign of accessibility's growing importance, screen reader testing has gone up from 16.6% to 19% year-over-year. + + - key: usage.what_do_you_use_css_for.takeaway.css2024 + t: > + While this data is unsurprising, it's a nice reminder that CSS can do a lot more than format webpages. + + - key: usage.industry_sector.takeaway.css2024 + t: > + Did you know you can filter this survey's data by Industry Sector? Just click "Add Filters…" on any other chart! + + - key: usage.usage_type.takeaway.css2024 + t: > + Whether you build websites profesionally or just dabble, there's no wrong way to use CSS! + + - key: usage.design_methodology.takeaway.css2024 + t: > + While a large majority of respondents use CSS to implement pre-existing designs, it'll be interesting to see if this changes as design apps evolve, and AI tools become capable of going straight from idea to code. + + - key: usage.css_js_balance.takeaway.css2024 + t: > + Even in the context of a CSS survey, it turns out a majority of respondents still spend most of their time in the JavaScript ecosystem. Only time will tell if this too will shift now that CSS is becoming more capable. + + - key: usage.css_interoperability_features.takeaway.css2024 + t: > + There are few worse feelings that knowing a new feature will solve your issue perfectly, yet not being able to use it because of poor browser support. + + + This is the case with Anchor Positioning, a promising new feature that is sadly not yet broadly supported. + + + Container Queries on the other hand *are* [available at a baseline level](https://web.dev/blog/cq-stable) and ready to be used, despite showing up in many respondent's answers! + + - key: usage.css_missing_features.takeaway.css2024 + t: > + In the absence of a magic wand that lets us conjure up any CSS feature we can dream of, the best we can hope for is that this data can help push browser vendors in the right direction! + + + The good news: conditional logic, mixins, and masonry layouts are all currently being worked on in some form or another! + + - key: usage.css_pain_points.takeaway.css2024 + t: > + While browser support remains the eternal CSS pain point, Tailwind CSS is also proving to be a source of frustration for some – while others complain that it's not used enough! + + - key: usage.favorite_new_features.takeaway.css2024 + t: > + Long-awaited feature, sensible implementation, good browser support: `:has()` has it all, and tops the rankings of the best new CSS feature of 2024! + + - key: usage.state_of_the_web_happiness.takeaway.css2024 + t: > + While we do love to complain about the state of thigns, it turns out happiness levels have remained surprisingly constent over the years. + + - key: usage.state_of_css_happiness.takeaway.css2024 + t: > + We are even seeing a slight uptick when it comes to CSS specifically, proof that the hard work by browser vendors, working groups, and the CSS community at large is not going unnoticed! + + # resources + + - key: resources.blogs_news_magazines.takeaway.css2024 + t: > + Despite CSS-Tricks going through a change of ownership over the last few years, it's managed to hold onto its number one ranking when it comes to CSS blogs. + + - key: resources.courses.takeaway.css2024 + t: > + Free resources like MDN and YouTube videos are essential tools for learning CSS, but it's also worth pointing out Josh Comeau's excellent material. + + - key: resources.podcasts.takeaway.css2024 + t: > + Syntax may retain its top spot for now, but Web Standards and The CSS Podcast show that you can be quite successful by addressing a specific language or topic. + + - key: resources.video_creators.takeaway.css2024 + t: > + Kevin Powell shows once again that when it comes to CSS on YouTube, nobody else can quite match his reach and popularity. + + - key: resources.people.takeaway.css2024 + t: > + While Kevin takes the lead here once more, it's nice to see Adam, Una, Josh, and Lea's work recognized by the community! + + - key: resources.other_surveys.takeaway.css2024 + t: > + You won't be surprised to hear that we consider surveys an essential learning tool – and for that reason we're always on the lookout for new competit… I mean, friends! + + ########################################################################### + # Awards + ########################################################################### + + - key: award.most_used_feature_award.comment + t: | + **Filter effects** have been around for a while, and they are still as useful as ever! + + - key: award.least_used_feature_award.comment + t: | + `hanging-punctuation` wins the prize for being the most unknown CSS feature! + + - key: award.most_loved_feature_award.comment + t: | + With {value}% of respondents having a positive impression of **Subgrid**, it takes the top spot in our rankings. + + - key: award.most_commented_feature_award.comment + t: | + **Subgrid** got over {value} comments, in part because it appeared early on in the survey, but also because it's definitely a praise-worthy feature! + + ########################################################################### + # Conclusion + ########################################################################### + + - key: conclusion.css2024.ahmad_shadeed + t: | + + Over the past two years, CSS has evolved so much that keeping up with all the new features feels like a full-time job. This means there are many topics and ideas to explore and experiment with. + + For example, after being requested for years CSS `:has()` turned out to be one of the most powerful additions to CSS and significantly reduced the need for JavaScript. To me, it’s comparable to the transition from using CSS floats to Flexbox, which allowed us to create nearly any layout we could imagine. + + CSS **container size and style queries** are also game-changers for building components that need to work in different contexts. Currently, only size container queries have full support across all major browsers, though their adoption remains limited. + + Looking ahead to 2025, I hope to see wider usage of size container queries, full browser support for **scroll-driven animations**, style queries, and **anchor positioning**. What more could we ask for? + + - key: conclusion.css2024.ahmad_shadeed.bio + t: Design Engineer and author of [Debugging CSS](https://debuggingcss.com/) + + ########################################################################### + # Picks + ########################################################################### + + - key: picks.my_pick + t: "My 2024 Pick: " + - key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + + - key: picks.chris_coyier.name + t: Google's CSS Contributions + - key: picks.chris_coyier.bio + t: Codepen creator & Shoptalk Show host + - key: picks.chris_coyier.description + t: | + It's tempting to say something about the CSS powerhouse that Google has been recently, certainly in the last year. Rachel Andrew, Adam Argyle, Bramus Van Damme, Una Kravets, Tab Atkins, fantasai — and they are all doing big cool stuff publicly mostly. + + + *Note: fantasai now works at Apple.* + + - key: picks.temani_afif.name + t: | + `@property` Being Widely Available + - key: picks.temani_afif.bio + t: Creator of [css-challenges.com](https://css-challenges.com) + - key: picks.temani_afif.description + t: | + I would probably say the support of `@property` coming to Firefox this year, making this feature available-cross browser (since July) and unlocking a lot of cool stuff. + + - key: picks.adam_argyle.name + t: | + `linear()` + - key: picks.adam_argyle.bio + t: Google + - key: picks.adam_argyle.description + t: | + The linear() easing function has enabled phenomenal finishing touches to interactions. + + - key: picks.andy_bell.name + t: | + Getting Stuck: All the Ways `position:sticky` Can Fail + - key: picks.andy_bell.bio + t: Designer, developer and founder of Piccalilli and Set Studio. + - key: picks.andy_bell.description + t: | + In all my years in CSS, `position: sticky` has to be one of the most *frustrating* capabilities, but it’s also extremely useful. I always wanted to write a guide to help people with that but luckily I don’t need to because Kilian nailed this one. + + - key: picks.miguel_angel_duran.name + t: | + `@view-transition` + - key: picks.miguel_angel_duran.bio + t: Twitch Content Creator + - key: picks.miguel_angel_duran.description + t: | + The new `@view-transition` CSS at-rule is a game-changer for 2024. It allows developers to create smooth, native transitions between pages or components with minimal code, significantly reducing the reliance on JavaScript-heavy solutions. This marks a major advancement for building dynamic, fluid interfaces in web development! + + - key: picks.sacha_greif.name + t: Sara Soueidan + - key: picks.sacha_greif.bio + t: Creator, State of CSS + - key: picks.sacha_greif.description + t: | + Even though we all work in the digital realm, it's important to remember that this is all made possible by actual, physical human beings that have to suffer the consequences of conflicts around the world. Sara was recently displaced from her home by war, and I can only hope she's able to resume her awesome work soon! + + - key: picks.augustin_mauroy.name + t: | + `:has()` + - key: picks.augustin_mauroy.bio + t: Web Developer & OSS Enthusiast + - key: picks.augustin_mauroy.description + t: | + The `:has` pseudo class allows you to create really creative things. But it also allows you to “go upstream”, for example a map that changes shape when you hover one of its child elements. + + - key: picks.lea_verou.name + t: Style Queries and `if()` + - key: picks.lea_verou.bio + t: Product Lead at Font Awesome + - key: picks.lea_verou.description + t: | + My pick would be style queries and inline `if()`. Once these two ship everywhere, the amount of things we can do with CSS variables will improve tenfold. + + # - key: picks.xxx.name + # t: State Queries + # - key: picks.xxx.bio + # t: + # - key: picks.xxx.description + # t: | + # I'd pick State Queries, even if we aren't there yet, I feel like this has been a missing piece for quite some time now. + + # Applying styles once an element becomes sticky or starts to overflow isn't a game changer persé, because it could've been achieved with JS before. But being able to achieve this without any JS is a great addition next to scroll driven animations and view transitions to bring the power of styling and animations back to CSS. + + - key: picks.ahmad_shadeed.name + t: Scroll-driven Animations + - key: picks.ahmad_shadeed.bio + t: Design Engineer and author of [Debugging CSS](https://debuggingcss.com/) + - key: picks.ahmad_shadeed.description + t: | + This is a game changer that will soon be supported in all major browsers. It's incredible that what once required a lot of JavaScript is now achievable with just a few lines of CSS. + + - key: picks.josh_comeau.name + t: Temani Afif + - key: picks.josh_comeau.bio + t: Indie Hacker and Educator + - key: picks.josh_comeau.description + t: | + Temani is pushing the limits of what can be done with CSS. His experiments always blow my mind! + + # - key: picks.xxx.name + # t: + # - key: picks.xxx.bio + # t: + # - key: picks.xxx.description + # t: | + + ########################################################################### + # 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. + - key: sponsors.tokyodev.description + t: Find your dream developer job in Japan today. + + ########################################################################### + # FAQ/About + ########################################################################### + + - key: faq.how_long_will_survey_take_css2024 + t: How long will answering the survey take? + - key: faq.how_long_will_survey_take_css2024.description + t: > + Depending on how many questions you answer (all questions can be skipped), + filling out the survey should take around 15-20 minutes. + + - key: faq.learn_more_css2024 + t: Where can I learn more? + - key: faq.learn_more_css2024.description + t: You can learn more about this survey in [our announcement post](https://dev.to/sachagreif/the-2024-state-of-css-survey-is-now-open-4o5h). + + - key: faq.survey_design_css2024 + t: How was this survey designed? + - key: faq.survey_design_css2024.description + t: > + This survey was designed as the results of an [open design process](https://github.com/Devographics/surveys/issues/245) involving browser vendors and the web development community. + + - key: faq.results_released_css2024 + t: When will the results be released? + - key: faq.results_released_css2024.description + t: The survey will run from August 17 to September 7, 2024, and the survey results will be released shortly after. + + - key: about.content + t: > + The 2023 State of CSS survey ran from August 17 to September 12 2024, and collected 9,704 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 was created to identify upcoming trends in the web development ecosystem in order to help developers make technological choices. + + + As such, this survey is 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 2024](https://web.dev/blog/interop-2024). + + + ### Survey Design + + This survey was designed collaboratively [on GitHub](https://github.com/Devographics/surveys/issues/245). + + ### 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 + + Apart from t-shirt sales, funding from this project comes from a variety of sources: + + - Our partner [Frontend Masters](https://frontendmasters.com/) sponsors the survey in exchange for featuring relevant links to their courses at the bottom of each page. + + - The [Google Chrome](https://www.google.com/chrome/) team set aside a sponsoring budget this year to help design and run the survey. + + - [TokyoDev](https://www.tokyodev.com/) is also sponsoring the survey on an ongoing basis. + + ### 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/249) + + - [Other non-technical issues](https://github.com/Devographics/surveys/issues) + + - [Join our Discord](https://discord.gg/tuWRUWVyJs)