css2023.yml

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

  - key: general.results.description
    t: Edição de 2023 da pesquisa anual sobre as últimas tendências no ecossistema CSS.

  - key: general.css2022.js2022_banner
    t: A pesquisa State of JS 2022 está aberta, você pode [respondê-la agora mesmo](https://survey.devographics.com/survey/state-of-js/2022?source=css2022)!

  - key: general.css2023.results_intro
    t: |

      Não vou mentir, se manter atualizado sobre CSS tem sido difícil ultimamente. Felizmente, este ano [Chen Hui Jing](https://chenhuijing.com/) assumiu a liderança do processo de design desta pesquisa, construindo-a a partir do trabalho feito por [Lea Verou](https://lea.verou.me/) no ano passado.

      Também tivemos a sorte de receber o suporte do time do Google Chrome, que (assim como outros navegadores) usa os resultados desta pesquisa para ajudar a guiar seus *roadmaps*.

      Graças a essa ajuda extra, fomos capazes de introduzir várias novas funcionalidades, começando pela possibilidade de **customizar gráficos**. Clicando no ícone de <span class="customize-chart-icon">“configurações”</span> ao lado de um gráfico, agora você pode filtrá-lo por salário, país ou qualquer outra variável que desejar!

      Com isso resolvido, vamos ver como o CSS evoluiu em 2023!

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

  - key: introduction.css2023
    t: |
      <span class="first-letter">O</span> CSS vem passando por um período de evolução sem precedentes. Com a introdução de `:has()`, container queries, subgrids e vários outros conceitos, novas funcionalidadades parecem chegar aos navegadores mensalmente.

      A consequência de todo esse crescimento é que as coisas podem ficar um pouco confusas. Por sorte, este ano tivemos [Chen Hui Jing](https://chenhuijing.com/) ajudando a desenhar a pesquisa e a nos guiar pela selva do CSS. 

      E falando da pesquisa, você sabia que os navegadores usam estes dados como parte da iniciativa [Interop](https://web.dev/interop-2023/) para priorizar quais funcionalidades podem ser trabalhadas no futuro?

      Por fim, esse ano introduzimos uma nova funcionalidade: agora você pode **customizar gráficos** com os seus próprios filtros. Estamos animados para ver que *insights* você vai ter!

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

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

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

  - key: sections.tshirt.description
    t: |
      ## Apoie a pesquisa com a camiseta do *State of CSS*

      Entre baixa qualidade de vídeo, fitas enormes e muitas rebobinações, não há muito que sentir falta em relação à era do vídeo cassete. Mas uma coisa de que a gente **sente** falta é dos designs maravilhosos dos anos 90 que costumavam vir nas embalagens de fitas VHS virgens. 

      Agora, graças ao talentoso Christopher Kirk-Nielsen você pode aproveitar esse visual retrô em toda sua beleza e, ao mesmo tempo, celebrar seu amor por CSS!

  - key: tshirt.about
    t: Sobre a camiseta

  - key: tshirt.description
    t: |
      Usamos uma camiseta de modelagem slim, com tecido *tri-blend*, super macio e de alta qualidade e estampada por nossos parceiros da Cotton Bureau.

  - key: tshirt.getit
    t: Peça agora

  - key: tshirt.price
    t: US$ 29 + envio

  - key: tshirt.designer.heading
    t: Sobre o Designer

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

  - key: tshirt.designer.bio
    t: |
      Criado na França e agora vivendo nos Estados Unidos, Chris não é apenas um grande desenvolvedor front-end, mas também um talentoso ilustrador focado em visuais retrô. Na verdade, te encorajamos a dar uma olhada nos seus outros [designs de camisetas](https://chriskirknielsen.com/designs)!

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

  - key: sections.user_info.description.css2023
    t: |
      A pesquisa desse ano chegou a **9.190** desenvolvedores ao redor do mundo.

  - key: sections.features.description.css2023
    t: |
      O CSS tem passado por uma ótima fase ultimamente, com várias de suas novas funcionalidades sendo pouco a pouco cada vez mais adotadas pelos desenvolvedores.

  - key: sections.css_frameworks.description.css2023
    t: |
      Tailwind CSS se destacou de novo como o grande *framework* UI que os desenvolvedores ficam felizes de seguir usando; enquanto isso, Open Props viu o surgimento de uma pequena legião de seguidores apaixonados.

  - key: sections.css_in_js.description.css2023
    t: |
      Depois de um crescimento inicial, parece que o setor de CSS-in-JS chegou a um platô, e, possivelmente, o fato de que o CSS nativo tem adotado muitas de suas vantagens é um grande contribuinte.

  - key: sections.other_tools.description.css2023
    t: |
      30 anos depois da invenção do navegador ainda estamos presenciando inovações no setor, com novos concorrentes como Brave e Arc e ferramentas especializadas como Polypane ganhando espaço no mercado.

  - key: sections.usage.description.css2023
    t: |
      Não importa como você usa CSS, os dados mostram que garantir que o seu código funciona em todos os browsers ainda é uma preocupação, especialmente para novas funcionalidades como o `:has()`.

  - key: sections.resources.description.css2023
    t: |
      Com uma variedade de blogs, canais do YouTube e podcasts dedicados ao assunto, a comunidade de CSS nunca esteve tão vibrante.

  ###########################################################################
  # 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: >
      Dividir as respostas em faixas de baixa e alta renda nos dá listas de países bem diferentes.

  - key: user_info.higher_education_degree_by_gender.description.css2023
    t: >
      A representatividade feminina foi mais alta do que o esperado entre as pessoas com ensino superior em áreas não relacionadas a CSS, possivelmente indicando muitas transições de carreira.

  - key: user_info.source_by_gender.description.css2023
    t: >
      Por mais que a contagem total baixa torne difícil desenhar conclusões concretas, a proporção de mulheres foi mais alta entre pessoas que chegaram até a pesquisa através de recomendação direta ou de dentro do ambiente de trabalho, especialmente se compararmos à proporção que chegou através de redes sociais como Twitter ou YouTube.

  - key: user_info.source_by_race_ethnicity.description.css2023
    t: >
      Novamente levando em consideração o tamanho amostral reduzido, quando olhamos para raça o YouTube se destaca como uma das fontes com mais diversidade de tráfego para a pesquisa.

  - key: user_info.average_income_by_company_size.description.css2023
    t: >
      Encontramos os respondentes mais bem pagos trabalhando para grandes empresas, apesar de também podermos notar uma leve vantagem de trabalhadores autônomos em relação a funcionários de empresas pequenas.

  - key: user_info.yearly_salary_usa_vs_the_world.description.css2023
    t: >
      Quando comparamos as rendas do EUA em relação ao resto do mundo fica claro que desenvolvedores dos Estados Unidos estão sobre-representados nas faixas de renda mais altas.

  ###########################################################################
  # 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
    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.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)