css2022.yml

locale: hu-HU
translations:
  ###########################################################################
  # General
  ###########################################################################

  - key: general.results.description
    t: A CSS ökoszisztéma legújabb trendjeiről szóló éves felmérés 2022-es kiadása.

  - key: general.css2022.js2022_banner
    t: A State of JS 2022 felmérés jelenleg is fut, [itt vehetsz részt](https://survey.devographics.com/survey/state-of-js/2022?source=css2022)!

  - key: general.css2022.results_intro
    t: |
      A CSS példátlan ütemben fejlődik. Nem csak új funkciók és tulajdonságok jelennek meg, de a nyelv alapjai is újraépülnek és fejlődnek az új innovációknak köszönhetően, mint pl. az egymásbaágyazás és lépcsőzetes rétegek.

      Szerencsére idén segítséget kaptunk valakitől, aki a változások élén áll: a W3C munkacsoport tagja, [Lea Verou](https://lea.verou.me/) választotta ki az idei kérdéseket, különös hangsúlyt fektetve az új és közelgő CSS funkciók kiemelésére.

      És mi több, a felmérés eredményei segítenek a böngészők fejlesztőinek a fejlesztési prioritások meghatározásában és a böngészők közötti kompatibilitás javításában.

      Most, hogy mindezt tisztáztuk, lássuk, hogyan fejlődött a CSS 2022-ben!

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

  - key: introduction.css2022
    t: |
      <span class="first-letter">Ú</span>gy gondoltuk, hogy a CSS már eléggé fejlett nyelv, köszönhetően a Flexbox, a Grid és a CSS változók fejlődésének. De kiderült, hogy ez még nem is a végső formája.

      Szülő szelektorok, natív egymásbaágyazás, konténer lekérdezések, lépcsőzetes rétegek… A forradalmi új funkciók listája, amelyek hamarosan érkeznek, elég sokkoló, ha belegondolunk.

      Szerencsére a legjobb idegenvezetőt kaptuk, akit kérhettünk: [Lea Verou](http://lea.verou.me/) vezette az idei felmérés tervezését, és az eredmény egy olyan felmérés, amely remélhetőleg átfogja az összes kulcsfontosságú innovációt, amelyről tudnod kell.

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

      U.I.: Idei újítás: megadtuk a lehetőségek a felmérésben résztvevőknek, hogy megjegyzéseket fűzzenek a felmérésben szereplő funkciókhoz és könyvtárakhoz! Győződj meg róla, hogy megnézed ezeket a megjegyzéseket a grafikonok oldalsávjában! 

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

  - key: sections.tshirt.title
    t: Póló

  - key: sections.tshirt.description
    t: |
      ## Támogasd a felmérést a State of CSS pólóval

      A rossz videóminőség, a nagyméretű kazetták és a visszatekerés között nem sok minden hiányzik a VHS korszakból. De egy dolog, amit *hiányolunk*, az a VHS kazettákra nyomtatott 90-es évek retro dizájnja.

      Most azonban, köszönhetően a tehetséges Christopher Kirk-Nielsen-nek, élvezheted ezt a retró dizájnt, miközben ugyanakkor a CSS iránti szeretetedet is kifejezheted!

  - key: tshirt.about
    t: A pólóról

  - key: tshirt.description
    t: |
      A pólók kiváló minőségű, szuper puha tri-blend anyagból készülnek, szűk fazonnal, a Cotton Bureau partnereinknél nyomtatva.

  - key: tshirt.getit
    t: Megrendelem

  - key: tshirt.price
    t: $29 USD + szállítási költség

  - key: tshirt.designer.heading
    t: A tervezőről

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

  - key: tshirt.designer.bio
    t: |
      Christopher Kirk-Nielsen egy francia származású, de jelenleg az Egyesült Államokban élő fejlesztő, aki nem csak egy fantasztikus front-end fejlesztő, hanem egy tehetséges illusztrátor is, aki a retró vizuális megjelenítésre specializálódott. Valójában arra is ösztönözzük, hogy nézd meg a [többi pólótervét](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 `hézag` tulajdonság a Flexbox számára olyan hasznos kiegészítés, hogy nem meglepő,
      hogy 2023-ban **{value}**-os fejlődésen esett át

  # - 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: |
      **{value}** kommenttel, a Subgrid volt, amelyiket a legtöbb visszajelzést kapta, és egyéb funkciók még közel sem érték el ezt a számot.

  - key: award.tool_satisfaction_award.comment
    t: |
      A CSS-in-JS megoldások közül az Open Props az egyetlen, amelyiknek nagyon magas, **{value}**-os az elégedettségi mutatója.

  # - 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: |
      **{value}** megemlítéssel, a Panda volt a legtöbbet említett eszköz a szabadon válaszolható kérdések között.

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

  - key: conclusion.css2022
    t: |
      <span class="first-line">[Tavaly](https://2021.stateofcss.com/en-US/conclusion/), Kilian azt jósolta, hogy a CSS írásának módja örökre megváltozik, és az idei eredmények alátámasztják a jóslatát.</span>

      Az [Interop 2022](https://wpt.fyi/interop-2022) összehozta a böngészőket, hogy közösen dolgozzanak a közös célokért, és több funkció is a "soha nem fog megtörténni" kategóriából a "most már megtörténik" kategóriába került. A szülő szelektorok (`:has()`) és a konténer lekérdezések (`@container`) két nagy példa erre. Évek óta a fejlesztőkbe verték, hogy ezek nem történhetnek meg a teljesítménybeli következmények miatt, de kiderült, hogy mindkettő lehetséges.

      A Subgrid másrészről pedig mindig is tervben volt, csak egy nagyon nagy munka volt. Most már támogatja a Firefox és a Safari is, és a Chrome-ban is aktívan megvalósítják, így valószínűleg jövőre sokkal magasabb lesz a használata.

      Azt jósolom, hogy 2023-ban a CSS legnagyobb sztárjai a natív egymásbaágyazás és a színmanipuláció lesznek.
      Az egymásbaágyazás jelenleg [a fő oka](https://twitter.com/leaverou/status/806936438797307904), hogy az emberek még mindig preprocesszorokat használnak, így a natív használatra való áttérés nagyon felszabadító lesz.

      A színmanipulációval való munka a CSS-ben is sokkal izgalmasabb lesz. Jelenleg széles körben bevezetésre kerülő funkciók sora van. 2023 végére valószínűleg széles színtartományú színekre és eszközfüggetlen színekre (`color()`, `lab()`, `lch()`, `oklab()`, `oklch()`) is számíthatunk, és alapvető módon manipulálhatjuk őket a `color-mix()` segítségével.

      Mindez együtt azt jelenti, hogy a CSS számára 2023 valószínűleg nagyon izgalmas év lesz. Várom az összes lenyűgöző implementációt, legyenek azok akár a fentiekben említettek, akár nem. Micsoda fantasztikus időszak a CSS írására!

  - key: conclusion.css2022.bio
    t: W3C Technical Architecture Group Member, MIT CSAIL

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

  - key: picks.my_pick
    t: "A 2022-es választásom:"
  - key: picks.intro
    t: Megkérdeztük a CSS közösség tagjait, hogy osszák meg a évi választásukat.

  - key: picks.david_east.name
    t: CSS Subgrid
  - key: picks.david_east.bio
    t: A webes fejlesztés támogatásáért küzdő
  - key: picks.david_east.description
    t: |
      A CSS Subgrid lehetővé teszi, hogy a gyermek elemek örököljék a szülőik rács tulajdonságait.
      Hamarosan sokkal könnyebb lesz az elemeket elrendezni az egész oldalon ugyanazon rácsok mentén.

  - key: picks.bramus_van_damme.name
    t: A `:has()` szelektor
  - key: picks.bramus_van_damme.bio
    t: Chrome Developer Relations Engineer at Google
  - key: picks.bramus_van_damme.description
    t: |
      Ezt a szelektort sokan a "szülő szelektor"-nak hívják, de ez a név nem igazságos, 
      mivel csak egy kis részét fedi le annak, amire képes. Ez a szelektor alapvetően 
      megváltoztatta, hogy hogyan írok CSS-t.

  - key: picks.kevin_j_powell.name
    t: Jhey Tompkins
  - key: picks.kevin_j_powell.bio
    t: CSS evangélista
  - key: picks.kevin_j_powell.description
    t: |
      Jhey mindig a CSS határait feszegeti azzal, hogy szórakoztató és lenyűgöző demókat és Codepeneket készít.
      Az összes új CSS funkcióval, amelyek az utóbbi időben érkeztek, Jhey az első, aki elmagyarázza, hogyan működnek.

  - key: picks.samuel_kraft.name
    t: A `:has()` szelektor
  - key: picks.samuel_kraft.bio
    t: Design mérnök
  - key: picks.samuel_kraft.description
    t: |
      Az új `:has()` szelektor nagyon erőteljes és új lehetőségeket nyit ki a CSS-ben.
      Ez a szuper cikk Jen Simmonstól elmagyarázza a részleteket és bemutatja a gyakorlati példákat.

  - key: picks.josh_comeau.name
    t: Modern CSS
  - key: picks.josh_comeau.bio
    t: Szoftverfejlesztő és oktató
  - key: picks.josh_comeau.description
    t: |
      A CSS nagyon sokat változott az elmúlt években.
      Stephanie bemutatja, hogyan lehet kihasználni a modern CSS funkciókat,
      hogy régi problémákat új módon oldjunk meg.

  - key: picks.adam_argyle.name
    t: A `:has()` szelektor
  - key: picks.adam_argyle.bio
    t: UI/CSS fejlesztői kapcsolatok a Google-nál
  - key: picks.adam_argyle.description
    t: |
      A CSS még erősebb lett az UI interakciók összehangolásában a komponensek között.
      Még csak a kezdetén vagyunk a `:has()` szelektornak, de már most nagyon izgalmas dolgokat lehet vele csinálni.

  - key: picks.eric_w_bailey.name
    t: “Stíluskészítés állapotfüggő, szemantikus szelektorokkal” Ben Myers által
  - key: picks.eric_w_bailey.bio
    t: Akadálymentesítési szakértő és CSS kocka
  - key: picks.eric_w_bailey.description
    t: |
      Ben bemutatja, hogy ARIA attribútum szelektorok használatával hogyan 
      lehet egyszerűen és hatékonyan összekapcsolni a megjelenést az állapottal.

  - key: picks.michelle_barker.name
    t: Interop 2022
  - key: picks.michelle_barker.bio
    t: Író és alkotó a  CSS { In Real Life } front-end blogon
  - key: picks.michelle_barker.description
    t: |
      Az Interop egy kollaboráció az összes nagyobb böngészőgyártó között, 
      amely 15 kulcsfontosságú területre összpontosít, beleértve a CSS új
      funkcióit is, mint a konténer lekérdezések, lépcsőzetes rétegek és színfunkciók.

  - key: picks.gift_egwuenu.name
    t: CSS tanulása
  - key: picks.gift_egwuenu.bio
    t: Developer Advocate at Cloudflare
  - key: picks.gift_egwuenu.description
    t: |
      Ez az én javasolatom a CSS tanulásához az alapoktól kezdve, 
      arra is használom, hogy bármikor utána tudjak nézni bármilyen CSS tulajdonságnak.

  - key: picks.ahmad_shadeed.name
    t: Konténer lekérdezések
  - key: picks.ahmad_shadeed.bio
    t: Szerzője a [Debugging CSS](https://debuggingcss.com/) könyvnek, ír a [ishadeed.com](http://ishadeed.com) oldalon
  - key: picks.ahmad_shadeed.description
    t: |
      Ha egy dolgot kéne kiemelnem 2022-ben, az a konténer lekérdezések lenne.
      Végre itt vannak egy stabil böngészőben valahol a közeledben

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

  - key: picks.jen_simmons.name
    t: A `:has()` szelektor
  - key: picks.jen_simmons.bio
    t: Web technológia evangélista az Apple-nél
  - key: picks.jen_simmons.description
    t: |
      Két évtizeden keresztül a "szülő szelektor" volt a legtöbbet kért funkció a CSS-ben.
      Majd 2022-ben, teljes meglepetésre, megérkezett a `:has()` szelektor, hogy megoldja ezt és még sok más problémát.

  - key: picks.sara_soueidan.name
    t: A `:has()` szelektor
  - key: picks.sara_soueidan.bio
    t: Független, befogadó tervezőmérnök
  - key: picks.sara_soueidan.description
    t: |
      Már nagyon vártuk a CSS konténer lekérdezéseket, 
      de aztán a `:has()` szelektor érkezett,
      és úgy éreztük, hogy "ez minden, amiről nem is tudtunk, hogy mindig is ezt akartuk".

  - key: picks.adam_wathan.name
    t: Üres CSS változók
  - key: picks.adam_wathan.bio
    t: A Tailwind CSS alkotója
  - key: picks.adam_wathan.description
    t: |
      Nem sokan tudják, de a `--my-var: ;` teljesen érvényes CSS,
      és sokkal hasznosabb, mint gondolnád.
      A Tailwind CSS-ben gyakran használjuk, hogy egyetlen CSS tulajdonságot
      több osztályra bontsunk.

  # - 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: Webfejlesztő és a Polypane alkotója
  - key: picks.kilian_valkhof.description
    t: |
      2021-ben indult Compat 2021 néven, a böngészőmotorok fejlesztői 
      elkezdték koordinálni, hogy mely funkciókat prioritizálják. 
      Nem csak a böngészők közötti különbségeket csökkenti, hanem 
      növeli az új funkciók, mint a `@layer` bemutatási sebességét is.

  # - 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: Fejleszd a készségeidet mélyreható, modern front-end fejlesztői kurzusokkal.
  - key: sponsors.nijibox.description
    t: A ambíciózus fejlesztők böngészője. Készíts reszponzív, akadálymentesített és gyors weboldalakat könnyedén.
  - key: sponsors.renderatl.description
    t: A legnagyobb tech konferencia, amelynek dedikált Design & CSS szekciója van.
  - key: sponsors.google_chrome.description
    t: Köszönjük a Google Chrome csapatának a munkánk támogatását.

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

  - key: about.content
    t: >
      A 2022-es State of CSS felmérés 2022. október 1. és november 1. között futott, és 14 310 választ gyűjtött össze. A felmérés [Sacha Greif](https://sachagreif.com/) (én) által készült, aki a felméréshez egy nyílt forráskódú csapatot és tanácsadókat is felkért.

      Az idei logót és pólót tavaly tervezte és animálta [Christopher Kirk-Nielsen](http://chriskirknielsen.com/).

      ### A felmérés célja

      Ez a felmérés a [State of JavaScript](https://stateofjs.com/) felméréshez hasonlóan arra szolgál, hogy azonosítsa a webfejlesztési ökoszisztéma közelgő trendjeit, hogy segítsen a fejlesztőknek technológiai döntéseket hozni.

      Mint ilyen, ezek a felmérések arra összpontosítanak, hogy mi várható a következő években, és nem arra, hogy mi a jelenleg a legnépszerűbb, ezért a jelenleg legelterjedtebb funkciók vagy technológiák nem mindig szerepelnek.

      Továbbá, a felmérés adatai arra is szolgálnak, hogy a böngészőgyártók prioritizálják a funkciókat és segítsék az olyan kezdeményezéseket, mint az [Interop 2022](https://web.dev/interop-2022/).

      ### A felmérés tervezése

      Ebben az évben a felmérés tervezését [Lea Verou](https://lea.verou.me/) vezette, aki a Google Chrome csapatának támogatásával készítette el a kérdéseket, amelyeket nyilvánosan [a GitHub-on](https://github.com/orgs/Devographics/projects/1) kezeltünk. Minden kérdés opcionális volt.

      Továbbá, a jövőben a felmérés tervezését, felülvizsgálatát és visszajelzését egy [Munkacsoport levelezőlistán](https://www.devographics.com/working-group/) keresztül is koordináljuk.

      ### A felmérés közönsége

      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. 

      ### A projekt finanszírozása

      A felmérés finanszírozását több forrásból fedeztük:

      - **Póló eladások**. 

      - **Szponzorált linkek**: az oldal alján található ajánlott források linkei a partnerünk, a [Frontend Masters](https://frontendmasters.com/) által biztosítottak. 

      - **Szponzorált grafikonok**: tavaly óta bárki directben támogathat egy-egy grafikont $10 vagy annál több összeggel, és ezután a Twitter avatarjuk megjelenik mellette.

      - **Google**: ebben az évben a [Google Chrome](https://www.google.com/chrome/) csapata külön költségvetést szánt arra, hogy Lea-t felbérelje a felmérés tervezéséhez, valamint közvetlenül támogatott engem is, hogy segítse a munkámat.

      - **Nijibox**: A Japánban található [Nijibox](https://nijibox.jp/) szintén nagylelkűen támogatta a munkámat, hogy segítsen a felmérések fenntarthatóbbá tételében.

      ### Technikai áttekintés

      [Itt](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb) találsz egy részletesebb technikai áttekintést arról, hogy hogyan futnak a felmérések. A kódunk [nyílt forráskódú](https://github.com/Devographics/Monorepo/). 

      - **Adat gyűjtés**: [Next.js](https://nextjs.org/) app fut a [Vercel](https://vercel.com/)-en.

      - **Adat tárolás/feldolgozás**: MongoDB & MongoDB Aggregations fut a [MongoDB Atlas](https://cloud.mongodb.com/)-on.

      - **Adat API**: Node.js GraphQL API fut a [Render](https://render.com/)-en.

      - **Eredmények oldala**: [Gatsby](https://www.gatsbyjs.com/) React app fut a [Netlify](https://netlify.com/)-en.

      - **Adatvizualizáció**: [Nivo](https://nivo.rocks/) React dataviz library.

      - **Betűtípusok**: [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono) és [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue).

      ### Visszajelzés

      - [Egy technikai probléma jelentése](https://github.com/Devographics/Monorepo/issues)
      - [Javaslat a következő évre](https://github.com/Devographics/surveys/issues/66)
      - [Egyéb nem technika probléma jelentése](https://github.com/Devographics/surveys/issues)
      - [Csatlakozz a Discordunkhoz](https://discord.gg/tuWRUWVyJs)
      - [Csatlakozz a Devographics Munkacsoportjához](https://www.devographics.com/working-group/), hogy részt vegyél a jövőbeli felmérések tervezésében és felülvizsgálatában.

  - key: options.other_pain_points_freeform.css_nesting
    aliasFor: features.css_nesting
  - key: options.other_pain_points_freeform.select
    t: Kiválasztás
  - key: options.other_pain_points_freeform.functions
    t: Funkciók

  - key: options.interoperability_features_freeform.at_container
    aliasFor: features.at_container
  - key: options.interoperability_features_freeform.flexbox_gap
    aliasFor: features.flexbox_gap
  - key: options.interoperability_features_freeform.css_nesting
    aliasFor: features.css_nesting
  - key: options.interoperability_features_freeform.viewport_units
    aliasFor: features.viewport_units
  - key: options.interoperability_features_freeform.ios
    t: iOS
  - key: options.interoperability_features_freeform.functions
    t: Funkciók
  - key: options.interoperability_features_freeform.internet_explorer
    t: Internet Explorer

  - key: options.missing_features_freeform.css_nesting
    aliasFor: features.css_nesting
  - key: options.missing_features_freeform.select
    t: Kiválasztás
  - key: options.missing_features_freeform.at_container
    aliasFor: features.at_container
  - key: options.missing_features_freeform.functions
    t: Funkciók
  - key: options.missing_features_freeform.svg
    t: SVG