css2022.yml

locale: pt-BR
translations:
    ###########################################################################
    # General
    ###########################################################################

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

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

    - key: general.css2022.results_intro
      t: |
          O CSS continua progredindo a uma taxa sem precedentes. Não apenas estamos vendo novos recursos e propriedades, mas até mesmo os fundamentos da linguagem estão sendo reestruturados e aprimorados graças a inovações como aninhamento (nesting) e camadas de cascata. 
          
          Felizmente, este ano recebemos ajuda de alguém na vanguarda de todas essas mudanças: a membra do grupo de trabalho da W3C, [Lea Verou](https://lea.verou.me/), selecionou as perguntas da pesquisa deste ano, com um foco especial em destacar os novos e futuros recursos do CSS. 

          Além disso, os resultados da pesquisa também ajudarão os fornecedores de navegadores a priorizar seus roteiros e trabalhar em direção a uma melhor compatibilidade entre navegadores. 

          Com tudo isso resolvido, vamos ver como o CSS evoluiu em 2022!
    
    ###########################################################################
    # Introduction
    ###########################################################################

    - key: introduction.css2022
      t: |
          <span class="first-letter">A</span>chávamos que o CSS já havia se transformado em uma linguagem bastante formidável, graças a avanços como Flexbox, Grid e Variáveis CSS. Mas parece que isso nem era sua forma final. 
          
          Seletor pai, aninhamento nativo, consultas de contêiner, camadas de cascata... A lista de recursos absolutamente revolucionários que estão chegando em breve é bastante impressionante quando você para pra pensar. 
          
          Felizmente, temos o melhor guia que poderíamos pedir para nos ajudar a navegar por essas águas: [Lea Verou](http://lea.verou.me/) assumiu a liderança no design da pesquisa deste ano, e o resultado é uma pesquisa que esperamos abranger todas as inovações-chave das quais você deve estar ciente. 

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

          P.S. Também novo neste ano: concedemos aos respondentes a capacidade de **deixar comentários** sobre qualquer recurso ou biblioteca mencionada na pesquisa! Não deixe de verificar esses comentários na barra lateral de cada gráfico. 
          
    ###########################################################################
    # Tshirt
    ###########################################################################

    - key: sections.tshirt.title
      t: Camiseta

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

          Entre a má qualidade de vídeo, as volumosas fitas cassete e ter que rebobinar, não há muito a sentir falta da era do VHS. Mas uma coisa que *sentimos* falta são as incríveis visuais dos anos 90 que costumavam adornar as fitas VHS em branco. 

          Mas agora, graças ao talentoso Christopher Kirk-Nielsen, você pode aproveitar toda essa nostalgia retrô enquanto celebra seu amor pelo CSS ao mesmo tempo!

    - key: tshirt.about
      t: Sobre a camiseta

    - key: tshirt.description
      t: |
          Nós usamos uma camiseta de alta qualidade, super macia, feita de uma mistura tríplice, com um ajuste slim, impressa pelos nossos parceiros na Cotton Bureau. 

    - key: tshirt.getit
      t: Compre

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

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

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

    - key: tshirt.designer.bio
      t: |
          Originalmente da França, mas agora baseado nos Estados Unidos, Chris não é apenas um incrível desenvolvedor front-end, mas também um talentoso ilustrador especializado em visuais retrô. incentivamos você a também conferir os [outros designs de camisetas dele](https://chriskirknielsen.com/designs)!
            
    ###########################################################################
    # 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


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

    - key: award.feature_adoption_delta_award.comment
      t: |
        A propriedade `gap` para Flexbox é uma adição tão útil que não é surpreendente ver uma 
        progressão de **{value}** em 2022

    # - 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: Com **{value}** comentários, nenhuma outra funcionalidade chegou perto de gerar tanto feedback quanto o Subgrid.

    - key: award.tool_satisfaction_award.comment
      t: |
        De todas as soluções CSS-in-JS, os Módulos CSS são os únicos que mantiveram uma 
        taxa de retenção incrivelmente alta de **{value}**.

    # - 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: |
        Com **{value}** menções, o navegador Arc foi a ferramenta mais mencionada de longe em perguntas livres. 


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

    - key: conclusion.css2022
      t: |
          <span class="first-line">[Ano passado](https://2021.stateofcss.com/en-US/conclusion/), Kilian previu que a forma como escrevemos CSS estava prestes a mudar para sempre, e os resultados deste ano validam sua previsão.</span>

          O [Interop 2022](https://wpt.fyi/interop-2022) uniu os navegadores trabalhando em direção aos mesmos objetivos, e várias funcionalidades foram de "isso nunca vai acontecer" para "isso está acontecendo agora". Seletores pai (:has()) e consultas de container (@container) são dois grandes exemplos nessa categoria. Por anos, foi enfatizado aos desenvolvedores que essas coisas não poderiam acontecer devido a implicações de desempenho, no entanto, acabou que ambas eram possíveis. 

          Subgrid, por outro lado, sempre esteve no roteiro; era apenas um trabalho muito extenso. Agora é suportado tanto pelo Firefox quanto pelo Safari e está sendo ativamente implementado no Chrome, então provavelmente veremos um uso muito maior no próximo ano.

          Eu prevejo que as estrelas de 2023 serão o Aninhamento nativo e a manipulação de cores. O Aninhamento é atualmente [a razão principal](https://twitter.com/leaverou/status/806936438797307904) pela qual as pessoas ainda usam pré-processadores, então poder contar com isso nativamente será incrivelmente libertador. 

          Trabalhar com cores em CSS também está prestes a ficar muito mais empolgante. Uma série de recursos está sendo implementada em todas as frentes enquanto falamos. Até o final de 2023, provavelmente poderemos contar com cores de amplo espectro e cores independentes de dispositivo (`color()`, `lab()`, `lch()`, `oklab()`, `oklch()`), e poderemos manipulá-las de maneira básica por meio de `color-mix()`. 

          Tudo isso junto significa que 2023 provavelmente será um ano muito emocionante para o CSS. Estou ansioso por todas as implementações incríveis que estão por vir, independentemente de minhas previsões se confirmarem ou não. Que momento fantástico para estar escrevendo CSS!

    - key: conclusion.css2022.bio
      t: Membro do Grupo de Arquitetura Técnica da W3C, MIT CSAIL
      
    ###########################################################################
    # Picks
    ###########################################################################

    - key: picks.my_pick
      t: 'Minhas escolhas de 2022: '
    - key: picks.intro
      t: Pedimos aos membros da comunidade CSS que compartilhassem sua "escolha do ano"

    - key: picks.david_east.name
      t: CSS Subgrid
    - key: picks.david_east.bio
      t: Defensor do desenvolvimento na web
    - key: picks.david_east.description
      t: |
            O CSS Subgrid permite que os elementos filhos herdem as propriedades de grade de seus pais. 
            Em breve, será muito mais fácil posicionar elementos nas mesmas linhas de grade em toda a página.

    - key: picks.bramus_van_damme.name
      t: O Seletor `:has()`
    - key: picks.bramus_van_damme.bio
      t: Engenheiro de Relações com Desenvolvedores do Chrome no Google
    - key: picks.bramus_van_damme.description
      t: |
            Você pode conhecê-lo como o chamado "seletor pai", mas esse nome não diz o bastante, 
            pois cobre apenas uma pequena parte do que ele pode fazer. 
            Esse seletor basicamente mudou a maneira como escrevo meu CSS.

    - key: picks.kevin_j_powell.name
      t: Jhey Tompkins
    - key: picks.kevin_j_powell.bio
      t: Evangelista CSS
    - key: picks.kevin_j_powell.description
      t: |
            Jhey está sempre desafiando os limites do que podemos fazer com CSS com demonstrações e Codepens divertidos e impressionantes. Com todos os novos recursos sendo incorporados recentemente ao CSS, Jhey está na vanguarda, explicando como eles funcionam.

    - key: picks.samuel_kraft.name
      t: O Seletor `:has()`
    - key: picks.samuel_kraft.bio
      t: Engenheiro de Design
    - key: picks.samuel_kraft.description
      t: |
            O novo seletor :has() é super poderoso e desbloqueia novas possibilidades de estilização. Este excelente artigo de Jen Simmons o analisa com explicações e exemplos práticos.
            
    - key: picks.josh_comeau.name
      t: Modern CSS
    - key: picks.josh_comeau.bio
      t: Desenvolvedor de software e educador
    - key: picks.josh_comeau.description
      t: |
            O CSS mudou muito nos últimos anos. 
            Stephanie nos mostra como aproveitar os recursos modernos 
            do CSS para resolver problemas antigos de maneiras novas.

    - key: picks.adam_argyle.name
      t: The `:has()` Selector
    - key: picks.adam_argyle.bio
      t: UI/CSS DevRel at Google
    - key: picks.adam_argyle.description
      t: |
            O CSS torna-se ainda mais forte ao orquestrar a interação de IU entre componentes. 
            Mal arranhamos a superfície do impacto de :has() em nossos estilos.

    - key: picks.eric_w_bailey.name
      t: “Style with Stateful, Semantic Selectors” de Ben Myers
    - key: picks.eric_w_bailey.bio
      t: Defensor da acessibilidade e entusiasta do CSS
    - key: picks.eric_w_bailey.description
      t: |
            Ben demonstra como utilizar seletores de atributos ~
            ARIA pode vincular de maneira simples e poderosa a aparência ao estado.

    - key: picks.michelle_barker.name
      t: Interop 2022
    - key: picks.michelle_barker.bio
      t: Escritor e criador do blog de front-end CSS { In Real Life }
    - key: picks.michelle_barker.description
      t: |
            Interop é uma colaboração entre todos os principais fornecedores de navegadores, 
            concordando em 15 áreas-chave de foco para implementação, incluindo novos recursos 
            revolucionários de CSS como consultas de contêiner, camadas de 
            cascata e funções de cor. 

    - key: picks.gift_egwuenu.name
      t: Learn CSS
    - key: picks.gift_egwuenu.bio
      t: Developer Advocate em Cloudflare
    - key: picks.gift_egwuenu.description
      t: |
            Minha recomendação de recurso para qualquer pessoa que queira aprender CSS desde o início. 
            Eu também o uso como referência sempre que preciso consultar qualquer propriedade CSS. 

    - key: picks.ahmad_shadeed.name
      t: Container Queries
    - key: picks.ahmad_shadeed.bio
      t: Autor de [Debugging CSS](https://debuggingcss.com/), Escrevendo em [ishadeed.com](http://ishadeed.com)
    - key: picks.ahmad_shadeed.description
      t: |
            Se eu tivesse que escolher um destaque para 2022, seriam as container queries! 
            Elas finalmente chegaram a um navegador estável perto de você

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

    - key: picks.jen_simmons.name
      t: O Seletor :has()
    - key: picks.jen_simmons.bio
      t: Evangelista de tecnologias web na Apple
    - key: picks.jen_simmons.description
      t: |
            Por duas décadas, o "seletor pai" foi um recurso muito solicitado para o CSS. 
            Então, em 2022, para total surpresa, a pseudo-classe :has() chegou para resolver isso e muito mais.

    - key: picks.sara_soueidan.name
      t: O Seletor :has()
    - key: picks.sara_soueidan.bio
      t: Engenheiro de design independente e inclusivo
    - key: picks.sara_soueidan.description
      t: |
            Estivemos desejando e esperando pelas consultas de contêiner CSS por muito tempo. 
            Mas então `:has()` chegou pouco depois, e pareceu ser "tudo o que nunca soubemos que sempre quisemos". 

    - key: picks.adam_wathan.name
      t: CSS Variables vazias
    - key: picks.adam_wathan.bio
      t: Criador do Tailwind CSS
    - key: picks.adam_wathan.description
      t: |
            Muitas pessoas não sabem disso, mas `--my-var: ;`  é CSS totalmente válido, 
            e é muito mais útil do que você pensa. Nós o usamos o tempo todo no 
            Tailwind CSS para decompor uma única propriedade CSS em várias classes.

    # - 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: Interop 2022
    - key: picks.kilian_valkhof.bio
      t: Desenvolvedor web e criador do Polypane
    - key: picks.kilian_valkhof.description
      t: |
          Iniciado em 2021 como Compat 2021, os fabricantes de motores de navegador começaram 
          a coordenar quais recursos priorizam. Isso não apenas está fechando as várias lacunas 
          de recursos que existem entre os navegadores, mas também está aumentando a velocidade 
          com que novos recursos como @layer são implementados em diversos navegadores.

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



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

    - key: sponsors.frontendmasters.description
      t: Aprimore suas habilidades com cursos de engenharia de front-end modernos e aprofundados.
    - key: sponsors.nijibox.description
      t: O navegador para desenvolvedores ambiciosos. Construa websites responsivos, acessíveis e rápidos com facilidade.
    - key: sponsors.renderatl.description
      t: A maior conferência de tecnologia com uma trilha dedicada a Design e CSS.
    - key: sponsors.google_chrome.description
      t: Agradecimentos à equipe do Google Chrome por apoiar nosso trabalho.

    ###########################################################################
    # FAQ/About
    ###########################################################################
        
    - key: about.content
      t: >
          A pesquisa State of CSS de 2022 ocorreu de 1º de outubro a 1º de novembro de 2022, e coletou 14.310 respostas. A pesquisa é conduzida por mim, [Sacha Greif](https://sachagreif.com/), com a ajuda de uma equipe de colaboradores e consultores de código aberto. 

          O logotipo e a camiseta deste ano foram reutilizados do ano passado, quando foram projetados e animados por [Christopher Kirk-Nielsen](http://chriskirknielsen.com/).

          ### Objetivos da Pesquisa

          Esta pesquisa, juntamente com a pesquisa [State of JavaScript](https://stateofjs.com/), foi criada para identificar tendências futuras no ecossistema de desenvolvimento web, a fim de ajudar os desenvolvedores a fazerem escolhas tecnológicas. 

          Como tal, essas pesquisas têm o foco de antecipar o que está por vir nos próximos anos, em vez de analisar o que é popular agora. Por isso, as características ou tecnologias que estão atualmente mais difundidas nem sempre estão incluídas. 

          Além disso, os dados da pesquisa também são utilizados pelos fornecedores de navegadores para priorizar recursos e informar iniciativas como o [Interop 2022](https://wpt.fyi/interop-2022).

          ### Design da Pesquisa

          Este ano, o design da pesquisa foi liderada por [Lea Verou](https://lea.verou.me/) graças a uma bolsa de financiamento da equipe do Google Chrome, e gerenciado publicamente [no GitHub](https://github.com/orgs/Devographics/projects/1). Todas as perguntas da pesquisa eram opcionais. 

          Além disso, daqui para frente também coordenaremos o design da pesquisa, revisão e feedback por meio de uma [lista de discussão do Grupo de Trabalho](https://www.devographics.com/working-group/).

          ### Público da Pesquisa

          A pesquisa estava acessível online de forma aberta, e os respondentes não foram filtrados ou selecionados de nenhuma maneira. Os respondentes eram principalmente uma mistura de participantes de pesquisas anteriores (notificados por meio de uma lista de discussão dedicada) e tráfego de mídia social. 

          ### Financiamento do Projeto

          O financiamento para este projeto provém de diversas fontes:

          - **Venda de camisetas**. 
          
          - **Links Patrocinados**: os links para recursos recomendados na parte inferior de cada página são fornecidos pelo nosso parceiro [Frontend Masters](https://frontendmasters.com/).
          
          - **Gráficos Patrocinados**: desde o ano passado, qualquer pessoa também pode optar por patrocinar diretamente um gráfico por $10 ou mais e ter seu avatar do Twitter exibido ao lado dele.
          
          - **Google**: este ano, a equipe do [Google Chrome](https://www.google.com/chrome/) reservou um orçamento para contratar Lea para ajudar no design da pesquisa, além de me financiar diretamente para apoiar meu trabalho. 

          - **Nijibox**: A [Nijibox](https://nijibox.jp/) com base no Japão, também generosamente concordou em patrocinar meus esforços para tornar essas pesquisas anuais mais sustentáveis. 

          ### Visão Técnica

          Você pode encontrar uma visão técnica mais detalhada de como as pesquisas são realizadas [aqui](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). Nosso código é [open-source](https://github.com/Devographics/Monorepo/). 

          - **Coleta de Dados**: [Next.js](https://nextjs.org/) rodando no [Vercel](https://vercel.com/).

          - **Armazenamento/Processamento de Dados**: MongoDB & Agregações do MongoDB rodando no [MongoDB Atlas](https://cloud.mongodb.com/).
          
          - **API de Dados**: API GraphQL Node.js rodando no [Render](https://render.com/). 
          
          - **Site de Resultados**: [Gatsby](https://www.gatsbyjs.com/) React app rodando no [Netlify](https://netlify.com/).
          
          - **Visualizações de Dados**: Biblioteca de visualização de dados React [Nivo](https://nivo.rocks/). 
          
          - **Fontes**: [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono) e [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue).

          ### Feedback

          - [Reportar um problema técnico](https://github.com/Devographics/Monorepo/issues)
          - [Fazer uma sugestão para o próximo ano](https://github.com/Devographics/surveys/issues/66)
          - [Outros problemas não técnicos](https://github.com/Devographics/surveys/issues)
          - [Participar do Discord](https://discord.gg/tuWRUWVyJs)
          - [Participar do Grupo de Trabalho da Devographics](https://www.devographics.com/working-group/) para participar do design e revisão de pesquisas futuras.