diff --git a/css2023.yml b/css2023.yml index 65d7ba5..00f52e7 100644 --- a/css2023.yml +++ b/css2023.yml @@ -1,538 +1,538 @@ locale: nb-NO translations: - ########################################################################### - # General - ########################################################################### + ########################################################################### + # General + ########################################################################### - - key: general.results.description - t: 2023-utgaven av den årlige undersøkelsen om de nyeste trendene i CSS-økosystemet. + - key: general.results.description + t: 2023-utgaven av den årlige undersøkelsen om de nyeste trendene i CSS-økosystemet. - - key: general.css2022.js2022_banner - t: "**State of JS 2022-undersøkelsen** er nå åpen, og du kan [ta den her](https://survey.devographics.com/survey/state-of-js/2022?source=css2022)!" + - key: general.css2022.js2022_banner + t: "**State of JS 2022-undersøkelsen** er nå åpen, og du kan [ta den her](https://survey.devographics.com/survey/state-of-js/2022?source=css2022)!" - - key: general.css2023.results_intro - t: | + - key: general.css2023.results_intro + t: | - For å være helt ærlig så har det ikke vært lett å holde tritt med CSS i det siste. Heldigvis tok [Chen Hui Jing](https://chenhuijing.com/) ledelsen av designprosessen for undersøkelsen i år, og bygget videre på arbeidet gjort av [Lea Verou](https://lea.verou.me/) i fjor. + For å være helt ærlig så har det ikke vært lett å holde tritt med CSS i det siste. Heldigvis tok [Chen Hui Jing](https://chenhuijing.com/) ledelsen av designprosessen for undersøkelsen i år, og bygget videre på arbeidet gjort av [Lea Verou](https://lea.verou.me/) i fjor. - Vi var også heldige nok til å få støtte fra Google Chrome-teamet, som (sammen med andre nettleserleverandører) bruker disse resultatene for å veilede deres veikart. + Vi var også heldige nok til å få støtte fra Google Chrome-teamet, som (sammen med andre nettleserleverandører) bruker disse resultatene for å veilede deres veikart. - Takket være all denne ekstra hjelpen, kunne vi introdusere en rekke nye funksjoner, som muligheten til å **tilpasse diagrammer**. Ved å klikke på “innstillinger”-ikonet ved siden av et diagram, kan du nå filtrere det etter lønn, land eller hvilken som helst annen variabel du ønsker! + Takket være all denne ekstra hjelpen, kunne vi introdusere en rekke nye funksjoner, som muligheten til å **tilpasse diagrammer**. Ved å klikke på “innstillinger”-ikonet ved siden av et diagram, kan du nå filtrere det etter lønn, land eller hvilken som helst annen variabel du ønsker! - Med alt dette ute av veien, la oss se hvordan CSS utviklet seg i 2023! + Med alt dette ute av veien, la oss se hvordan CSS utviklet seg i 2023! - ########################################################################### - # Introduction - ########################################################################### + ########################################################################### + # Introduction + ########################################################################### - - key: introduction.css2023 - t: | - CSS gjennomgår en periode med enestående fremgang. Mellom `:has()`, container-spørringer, subgrid og mye mer, kommer det nye funksjoner i nettlesere nesten hver måned. + - key: introduction.css2023 + t: | + CSS gjennomgår en periode med enestående fremgang. Mellom `:has()`, container-spørringer, subgrid og mye mer, kommer det nye funksjoner i nettlesere nesten hver måned. - Konsekvensen av all denne veksten er at ting kan bli litt overveldende. Heldigvis hadde vi i år [Chen Hui Jing](https://chenhuijing.com/) til å hjelpe med å designe undersøkelsen og guide oss gjennom CSS-jungelen. + Konsekvensen av all denne veksten er at ting kan bli litt overveldende. Heldigvis hadde vi i år [Chen Hui Jing](https://chenhuijing.com/) til å hjelpe med å designe undersøkelsen og guide oss gjennom CSS-jungelen. - Og for å snakke om undersøkelsen, visste du at nettleserleverandører bruker dataene fra den som en del av [Interop](https://web.dev/interop-2023/) initiativet for å hjelpe til med å prioritere hvilke funksjoner de skal jobbe med neste gang? + Og for å snakke om undersøkelsen, visste du at nettleserleverandører bruker dataene fra den som en del av [Interop](https://web.dev/interop-2023/) initiativet for å hjelpe til med å prioritere hvilke funksjoner de skal jobbe med neste gang? - Til slutt introduserer vi en ny funksjon i år: muligheten til å **tilpasse diagrammer** med dine egne data-filtre. Vi er spente på å se hvilke nye innsikter du kommer opp med! + Til slutt introduserer vi en ny funksjon i år: muligheten til å **tilpasse diagrammer** med dine egne data-filtre. Vi er spente på å se hvilke nye innsikter du kommer opp med! - – Sacha Greif + – Sacha Greif - ########################################################################### - # Tshirt - ########################################################################### + ########################################################################### + # Tshirt + ########################################################################### - - key: sections.tshirt.title - t: T-skjorte + - key: sections.tshirt.title + t: T-skjorte - - key: sections.tshirt.description - t: | - ## Støtt undersøkelsen med State of CSS T-skjorten + - key: sections.tshirt.description + t: | + ## Støtt undersøkelsen med State of CSS T-skjorten - Videokvalitet, klumpete kassetter og behovet for å spole tilbake er ting vi ikke savner fra VHS-epoken. Men en ting vi *savner* er de fantastiske 90-tallsvisuelle elementene som pleide å pryde tomme VHS-kassetter. + Videokvalitet, klumpete kassetter og behovet for å spole tilbake er ting vi ikke savner fra VHS-epoken. Men en ting vi *savner* er de fantastiske 90-tallsvisuelle elementene som pleide å pryde tomme VHS-kassetter. - Og nå, takket være den talentfulle Christopher Kirk-Nielsen, kan du nyte all denne retro-stilen samtidig som du feirer kjærligheten din for CSS! + Og nå, takket være den talentfulle Christopher Kirk-Nielsen, kan du nyte all denne retro-stilen samtidig som du feirer kjærligheten din for CSS! - - key: tshirt.about - t: Om t-skjorten + - key: tshirt.about + t: Om t-skjorten - - key: tshirt.description - t: | - Vi bruker en høykvalitets og supermyk t-skjorte med en slim fit, med print fra vår parner, Cotton Bureau. + - key: tshirt.description + t: | + Vi bruker en høykvalitets og supermyk t-skjorte med en slim fit, med print fra vår parner, Cotton Bureau. - - key: tshirt.getit - t: Kjøp den + - key: tshirt.getit + t: Kjøp den - - key: tshirt.price - t: USD $29 + frakt + - key: tshirt.price + t: USD $29 + frakt - - key: tshirt.designer.heading - t: Om designeren + - key: tshirt.designer.heading + t: Om designeren - - key: tshirt.designer.name - t: Christopher Kirk-Nielsen + - key: tshirt.designer.name + t: Christopher Kirk-Nielsen - - key: tshirt.designer.bio - t: | - Opprinnelig fra Frankrike, men nå basert i USA, er Chris ikke bare en fantastisk front-end utvikler, men også en talentfull illustratør som spesialiserer seg på det retrovisuelle. Vi oppfordrer deg også til å sjekke ut hans [andre t-skjortedesign](https://chriskirknielsen.com/designs)! + - key: tshirt.designer.bio + t: | + Opprinnelig fra Frankrike, men nå basert i USA, er Chris ikke bare en fantastisk front-end utvikler, men også en talentfull illustratør som spesialiserer seg på det retrovisuelle. Vi oppfordrer deg også til å sjekke ut hans [andre t-skjortedesign](https://chriskirknielsen.com/designs)! - ########################################################################### - # Sections Introductions - ########################################################################### + ########################################################################### + # Sections Introductions + ########################################################################### - - key: sections.user_info.description.css2023 - t: | - This year's survey reached **9,190** developers throughout the world. + - key: sections.user_info.description.css2023 + t: | + Årets undersøkelse nådde ut til **9,190** utviklere over hele verden. - - key: sections.features.description.css2023 - t: | - CSS har hatt medvind i det siste, og mange av de nye funksjonene som er introdusert, - blir sakte men sikkert tatt i bruk av flere og flere utviklere. + - key: sections.features.description.css2023 + t: | + CSS har hatt medvind i det siste, og mange av de nye funksjonene som er introdusert, + blir sakte men sikkert tatt i bruk av flere og flere utviklere. - - key: sections.css_frameworks.description.css2023 - t: | - Igjen skiller Tailwind CSS seg ut som det ene store UI-rammeverket som utviklere er glade for å fortsette å bruke, mens Open Props genererer en liten, men ivrig tilhengerskare. + - key: sections.css_frameworks.description.css2023 + t: | + Igjen skiller Tailwind CSS seg ut som det ene store UI-rammeverket som utviklere er glade for å fortsette å bruke, mens Open Props genererer en liten, men ivrig tilhengerskare. - - key: sections.css_in_js.description.css2023 - t: | - Etter en viss innledende vekst ser det ut til at CSS-in-JS-sektoren har stabilisert seg, og det - faktum at innebygd CSS selv tar i bruk mange av sine viktigste fordeler, er sannsynligvis en stor medvirkende faktor. + - key: sections.css_in_js.description.css2023 + t: | + Etter en viss innledende vekst ser det ut til at CSS-in-JS-sektoren har stabilisert seg, og det + faktum at innebygd CSS selv tar i bruk mange av sine viktigste fordeler, er sannsynligvis en stor medvirkende faktor. - - key: sections.other_tools.description.css2023 - t: | - 30 år etter oppfinnelsen av nettleseren ser vi fortsatt innovasjon på dette området med nye aktører som Brave og Arc, samt spesialiserte verktøy som Polypane som får økt markedsandel. + - key: sections.other_tools.description.css2023 + t: | + 30 år etter oppfinnelsen av nettleseren ser vi fortsatt innovasjon på dette området med nye aktører som Brave og Arc, samt spesialiserte verktøy som Polypane som får økt markedsandel. - - key: sections.usage.description.css2023 - t: | - Uansett hvordan du bruker CSS, viser dataene at det fortsatt er en bekymring å sikre at koden din fungerer på tvers av alle nettlesere, spesielt for nyere funksjoner som `:has()`. + - key: sections.usage.description.css2023 + t: | + Uansett hvordan du bruker CSS, viser dataene at det fortsatt er en bekymring å sikre at koden din fungerer på tvers av alle nettlesere, spesielt for nyere funksjoner som `:has()`. - - key: sections.resources.description.css2023 - t: | - Mellom blogger, YouTube-kanaler og podcaster er CSS-samfunnet mer livlig enn noen gang. + - key: sections.resources.description.css2023 + t: | + Mellom blogger, YouTube-kanaler og podcaster er CSS-samfunnet mer livlig enn noen gang. - ########################################################################### - # Charts - ########################################################################### + ########################################################################### + # 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: 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: > - Om vi deler respondenter i to grupper, høy inntekt og lav inntekt, får vi to - veldig forskjellige lister med land. - - - key: user_info.higher_education_degree_by_gender.description.css2023 - t: > - Representasjonen av kvinner var høyere enn forventet blant respondentene med høyere - utdanning i områder som ikke er relatert til CSS, - noe som potensielt indikerer mange karriereskift. - - - key: user_info.source_by_gender.description.css2023 - t: > - Selv om de lave totalene gjør det vanskelig å trekke noen konklusjoner, - var andelen kvinner høyest blant respondentene som kom over undersøkelsen - gjennom arbeidsplassen sin eller via muntlig omtale, - spesielt sammenlignet med sosiale nettverk som Twitter eller YouTube. - - - key: user_info.source_by_race_ethnicity.description.css2023 - t: > - Igjen, med tanke på den lave utvalgsstørrelsen, skiller - YouTube seg ut som en av de mest mangfoldige kildene til trafikk til undersøkelsen når man vurderer rase og etnisitet. - - - key: user_info.average_income_by_company_size.description.css2023 - t: > - Vi finner at de best betalte respondentene jobber for store selskaper, selv om det er - verdt å merke seg at selvstendig næringsdrivende har en liten inntektsfordel sammenlignet med små selskaper. - - - key: user_info.yearly_salary_usa_vs_the_world.description.css2023 - t: > - Når man sammenligner inntektene i USA med resten av verden, - blir det klart at amerikanske utviklere er overrepresentert i de høyere inntektsgruppene. - - ########################################################################### - # Awards - ########################################################################### - - - key: award.feature_adoption_delta_award.comment - t: | - `gap`-egenskapen for Flexbox er en så nyttig tillegg at det ikke er - overraskende at vi vil se en **{verdi}** progresjon i 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: Med **{verdi}** kommentarer, var det ingen annen funksjon som kom i nærheten av å generere like mye tilbakemelding som Subgrid. - - - key: award.tool_satisfaction_award.comment - t: | - Av alle CSS-in-JS-løsningene er Open Props den eneste som har - opprettholdt en skyhøy **{verdi}** bevaringsgrad. - - # - 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: | - Med **{value}** omtaler, var Panda det klart mest omtalte spørsmålet i friformatet. - - ########################################################################### - # Conclusion - ########################################################################### - - - key: conclusion.css2023.chen_hui_jing - t: | - Bruken av nyere CSS-funksjoner har vært økende, mens bruken av CSS-rammeverk har hatt en liten tilbakegang. - - Dette kan tyde på at utviklere begynner å bli vant til tanken om at man ikke nødvendigvis må vente på å bruke de nyeste CSS-funksjonene, fordi nettlesere tar raskere igjen gapet enn tidligere. - - Med økt bevissthet rundt innebygde CSS-funksjoner som nesting og `:has()` (som kan fungere som en foreldreselektor, men er mye mer enn det!), ser det ut til at vi står på terskelen til utbredt adopsjon. - - Av alle disse funksjonene hadde jeg en personlig favoritt for året, og det er `text-wrap: balance`. Den gir en enkel løsning med én linje for en forespørsel jeg har fått gjentatte ganger gjennom hele min webutviklingskarriere: "Kan vi justere overskriften slik at det siste ordet ikke står alene?" - - Det var også interessant at så mange utviklere mente at animering til auto og mursteinslayout var manglende CSS-funksjoner. Det er sant at det alltid har vært utfordrende for nettlesere å fastslå elementdimensjoner (spesielt høyde) når de ikke er eksplisitt deklarert. - - Men som [Lea Verou](https://lea.verou.me/) nevnte i fjor, med initiativer som [Interop](https://wpt.fyi/interop-2023) som bringer nettlesere sammen, kan funksjoner som tidligere ble ansett som umulige, nå potensielt bli en realitet! - - - key: conclusion.css2023.chen_hui_jing.bio - t: Developer Experience Engineer @ Interledger Foundation - - ########################################################################### - # Picks - ########################################################################### - - - key: picks.my_pick - t: "Mine valg for 2023: " - - key: picks.intro - t: Vi spurte medlemmer fra CSS-samfunnet om å dele sine "årets valg" - - # - 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: :has()-selektoren - # - 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: | - Ahmads blogg er en kilde til kunnskap og inspirasjon, med dyptgående utforskninger av ulike temaer, inkludert flotte visuelle eksempler og brukstilfeller. - - # - key: picks.samuel_kraft.name - # t: :has()-selektoren - # - 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: Instruktør, CSS for JavaScript Developers - - key: picks.josh_comeau.description - t: | - Denne podcasten er en herlig rundtur gjennom en rekke viktige og moderne - CSS-funksjoner. Den er ledet av Una Kravets og Adam Argyle, - to helt fantastiske mennesker. - - key: picks.adam_argyle.name - t: Zag.js - - key: picks.adam_argyle.bio - t: Google Chrome Developer Relations - - key: picks.adam_argyle.description - t: | - De talentfulle personene som jobber borte hos ChakraUI bygger virkelig neste generajons - komponenter og ideer, lurer på hva det neste de kommer med blir. - - # - 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: | - :has()-selektoren - - key: picks.jhey_tompkins.bio - t: CEO for Fancy CSS - - key: picks.jhey_tompkins.description - t: | - :has() er magien som lar deg kombinere andre API-er som container-spørringer, ankerposisjonering, osv. Jeg gleder meg til å se hvordan samfunnet finner nye og innovative måter å bruke det på. - - # - 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 animasjoner - - key: picks.ahmad_shadeed.bio - t: Design Engineer og forfatter for [ishadeed.com](https://ishadeed.com/) - - key: picks.ahmad_shadeed.description - t: | - Hvis jeg hadde gått 2 år tilbake i tid, hadde jeg aldri trodd - at CSS skulle ha scroll-driven animasjoner. Men bare se nå! - - # - key: picks.georgedoescode.name - # t: - # - key: picks.georgedoescode.bio - # t: - # - key: picks.georgedoescode.description - # t: | - - # - key: picks.jen_simmons.name - # t: :has()-selektoren - # - 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: Ingeniør innen inkluderende design og pedagog - - key: picks.sara_soueidan.description - t: | - Min stemme går til `color-contrast()` fordi jeg mener det fortjener mer oppmerksomhet. - Det er en av de få funksjonene som gjør det _enklere_ for oss utviklere å designe for brukerne våre. - Støtte for dette i alle nettlesere kan ikke komme raskt nok. - - - key: picks.adam_wathan.name - t: Lightning CSS - - key: picks.adam_wathan.bio - t: Skaperen av Tailwind CSS - - key: picks.adam_wathan.description - t: | - En ekstremt rask, alt-i-ett CSS-behandlingsverktøy som håndterer ting som vendor-prefikser, minifisering og transpilerer moderne funksjoner, samtidig som det er en fantastisk plattform for andre utviklere å bygge CSS-verktøy på. - - # - 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: Skaper av Polypane, nettleseren for utviklere. - - key: picks.kilian_valkhof.description - t: | - Utviklervektøyene i alle nettlesere er kraftige. Disse små tipsene - hjelper deg med å få mest mulig ut av dem, uansett hvilken nettleser du bruker. - - - 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: | - Overskrifter bør skinne og være lette å lese, selv om skjermer kan være vanskelige - å forutsi. Jeg har kjempet mot de irriterende soloordene på linjeslutt (hei, enker!), - men gjett hva? Her kommer `text-wrap: balance` – en magisk one-liner-fix! - - # - 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: "Spørsmål 01" - - key: quiz.quiz_dave_shea.question - t: > - I mai 2003 lanserte Dave Shea et nettsted som viste frem CSS sin fleksibilitet og tilpasningsevne. Hva het dette nettstedet? - - 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/) gjorde stort inntrykk med å demonstrere hva som var mulig når du holdt markup og styling adskilt. - - key: quiz.quiz_dave_shea.description - aliasFor: quiz.quiz_dave_shea.question - - - key: quiz.quiz_css_spec - t: "Spørsmål 02" - - key: quiz.quiz_css_spec.question - t: > - Hvilken av disse organisasjonene opprettholder CSS-spesifikasjonene? - - 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: > - W3C's [CSS-arbeidsgruppe](https://www.w3.org/groups/wg/css) opprettholder CSS-spesifikasjonen, som deretter implementeres i nettleserne. - - key: quiz.quiz_css_spec.description - aliasFor: quiz.quiz_css_spec.question - - ########################################################################### - # Sponsors - ########################################################################### - - - key: sponsors.frontendmasters.description - t: Utvikle ferdighetene dine med dyptgående, moderne kurs innen front-end. - - key: sponsors.polypane.description - t: Nettleseren for ambisiøse utviklere. Bygg responsive, tilgjengelige og raske nettsider med letthet. - - key: sponsors.nijibox.description - t: Konsulenter innen UX og produktutvikling i hjerte av Tokyo. - - key: sponsors.renderatl.description - t: Den største teknologikonferansen med et dedikert Design- og CSS-spor. - - key: sponsors.google_chrome.description - t: Takk til Google Chrome teamet for støtten til vårt arbeid. - - ########################################################################### - # FAQ/About - ########################################################################### - - - key: about.content - t: > - **2023 State of CSS-undersøkelsen** ble gjennomført fra 15. juni til 15. juli 2023 og samlet inn 9 108 svar. Undersøkelsen er drevet av [Devographics](https://www.devographics.com/), med hjelp fra et team av bidragsytere og konsulenter innen åpen kildekode. - - **State of CSS-logoen og T-skjorten** ble designet og animert av [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). - - ### Undersøkelsens mål + - key: user_info.country_low_vs_high_income.description.css2023 + t: > + Om vi deler respondenter i to grupper, høy inntekt og lav inntekt, får vi to + veldig forskjellige lister med land. + + - key: user_info.higher_education_degree_by_gender.description.css2023 + t: > + Representasjonen av kvinner var høyere enn forventet blant respondentene med høyere + utdanning i områder som ikke er relatert til CSS, + noe som potensielt indikerer mange karriereskift. + + - key: user_info.source_by_gender.description.css2023 + t: > + Selv om de lave totalene gjør det vanskelig å trekke noen konklusjoner, + var andelen kvinner høyest blant respondentene som kom over undersøkelsen + gjennom arbeidsplassen sin eller via muntlig omtale, + spesielt sammenlignet med sosiale nettverk som Twitter eller YouTube. + + - key: user_info.source_by_race_ethnicity.description.css2023 + t: > + Igjen, med tanke på den lave utvalgsstørrelsen, skiller + YouTube seg ut som en av de mest mangfoldige kildene til trafikk til undersøkelsen når man vurderer rase og etnisitet. + + - key: user_info.average_income_by_company_size.description.css2023 + t: > + Vi finner at de best betalte respondentene jobber for store selskaper, selv om det er + verdt å merke seg at selvstendig næringsdrivende har en liten inntektsfordel sammenlignet med små selskaper. + + - key: user_info.yearly_salary_usa_vs_the_world.description.css2023 + t: > + Når man sammenligner inntektene i USA med resten av verden, + blir det klart at amerikanske utviklere er overrepresentert i de høyere inntektsgruppene. + + ########################################################################### + # Awards + ########################################################################### + + - key: award.feature_adoption_delta_award.comment + t: | + `gap`-egenskapen for Flexbox er en så nyttig tillegg at det ikke er + overraskende at vi vil se en **{verdi}** progresjon i 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: Med **{verdi}** kommentarer, var det ingen annen funksjon som kom i nærheten av å generere like mye tilbakemelding som Subgrid. + + - key: award.tool_satisfaction_award.comment + t: | + Av alle CSS-in-JS-løsningene er Open Props den eneste som har + opprettholdt en skyhøy **{verdi}** bevaringsgrad. + + # - 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: | + Med **{value}** omtaler, var Panda det klart mest omtalte spørsmålet i friformatet. + + ########################################################################### + # Conclusion + ########################################################################### + + - key: conclusion.css2023.chen_hui_jing + t: | + Bruken av nyere CSS-funksjoner har vært økende, mens bruken av CSS-rammeverk har hatt en liten tilbakegang. + + Dette kan tyde på at utviklere begynner å bli vant til tanken om at man ikke nødvendigvis må vente på å bruke de nyeste CSS-funksjonene, fordi nettlesere tar raskere igjen gapet enn tidligere. + + Med økt bevissthet rundt innebygde CSS-funksjoner som nesting og `:has()` (som kan fungere som en foreldreselektor, men er mye mer enn det!), ser det ut til at vi står på terskelen til utbredt adopsjon. + + Av alle disse funksjonene hadde jeg en personlig favoritt for året, og det er `text-wrap: balance`. Den gir en enkel løsning med én linje for en forespørsel jeg har fått gjentatte ganger gjennom hele min webutviklingskarriere: "Kan vi justere overskriften slik at det siste ordet ikke står alene?" + + Det var også interessant at så mange utviklere mente at animering til auto og mursteinslayout var manglende CSS-funksjoner. Det er sant at det alltid har vært utfordrende for nettlesere å fastslå elementdimensjoner (spesielt høyde) når de ikke er eksplisitt deklarert. + + Men som [Lea Verou](https://lea.verou.me/) nevnte i fjor, med initiativer som [Interop](https://wpt.fyi/interop-2023) som bringer nettlesere sammen, kan funksjoner som tidligere ble ansett som umulige, nå potensielt bli en realitet! + + - key: conclusion.css2023.chen_hui_jing.bio + t: Developer Experience Engineer @ Interledger Foundation + + ########################################################################### + # Picks + ########################################################################### + + - key: picks.my_pick + t: "Mine valg for 2023: " + - key: picks.intro + t: Vi spurte medlemmer fra CSS-samfunnet om å dele sine "årets valg" + + # - 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: :has()-selektoren + # - 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: | + Ahmads blogg er en kilde til kunnskap og inspirasjon, med dyptgående utforskninger av ulike temaer, inkludert flotte visuelle eksempler og brukstilfeller. + + # - key: picks.samuel_kraft.name + # t: :has()-selektoren + # - 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: Instruktør, CSS for JavaScript Developers + - key: picks.josh_comeau.description + t: | + Denne podcasten er en herlig rundtur gjennom en rekke viktige og moderne + CSS-funksjoner. Den er ledet av Una Kravets og Adam Argyle, + to helt fantastiske mennesker. + - key: picks.adam_argyle.name + t: Zag.js + - key: picks.adam_argyle.bio + t: Google Chrome Developer Relations + - key: picks.adam_argyle.description + t: | + De talentfulle personene som jobber borte hos ChakraUI bygger virkelig neste generajons + komponenter og ideer, lurer på hva det neste de kommer med blir. + + # - 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: | + :has()-selektoren + - key: picks.jhey_tompkins.bio + t: CEO for Fancy CSS + - key: picks.jhey_tompkins.description + t: | + :has() er magien som lar deg kombinere andre API-er som container-spørringer, ankerposisjonering, osv. Jeg gleder meg til å se hvordan samfunnet finner nye og innovative måter å bruke det på. + + # - 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 animasjoner + - key: picks.ahmad_shadeed.bio + t: Design Engineer og forfatter for [ishadeed.com](https://ishadeed.com/) + - key: picks.ahmad_shadeed.description + t: | + Hvis jeg hadde gått 2 år tilbake i tid, hadde jeg aldri trodd + at CSS skulle ha scroll-driven animasjoner. Men bare se nå! + + # - key: picks.georgedoescode.name + # t: + # - key: picks.georgedoescode.bio + # t: + # - key: picks.georgedoescode.description + # t: | + + # - key: picks.jen_simmons.name + # t: :has()-selektoren + # - 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: Ingeniør innen inkluderende design og pedagog + - key: picks.sara_soueidan.description + t: | + Min stemme går til `color-contrast()` fordi jeg mener det fortjener mer oppmerksomhet. + Det er en av de få funksjonene som gjør det _enklere_ for oss utviklere å designe for brukerne våre. + Støtte for dette i alle nettlesere kan ikke komme raskt nok. + + - key: picks.adam_wathan.name + t: Lightning CSS + - key: picks.adam_wathan.bio + t: Skaperen av Tailwind CSS + - key: picks.adam_wathan.description + t: | + En ekstremt rask, alt-i-ett CSS-behandlingsverktøy som håndterer ting som vendor-prefikser, minifisering og transpilerer moderne funksjoner, samtidig som det er en fantastisk plattform for andre utviklere å bygge CSS-verktøy på. + + # - 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: Skaper av Polypane, nettleseren for utviklere. + - key: picks.kilian_valkhof.description + t: | + Utviklervektøyene i alle nettlesere er kraftige. Disse små tipsene + hjelper deg med å få mest mulig ut av dem, uansett hvilken nettleser du bruker. + + - 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: | + Overskrifter bør skinne og være lette å lese, selv om skjermer kan være vanskelige + å forutsi. Jeg har kjempet mot de irriterende soloordene på linjeslutt (hei, enker!), + men gjett hva? Her kommer `text-wrap: balance` – en magisk one-liner-fix! + + # - 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: "Spørsmål 01" + - key: quiz.quiz_dave_shea.question + t: > + I mai 2003 lanserte Dave Shea et nettsted som viste frem CSS sin fleksibilitet og tilpasningsevne. Hva het dette nettstedet? + - 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/) gjorde stort inntrykk med å demonstrere hva som var mulig når du holdt markup og styling adskilt. + - key: quiz.quiz_dave_shea.description + aliasFor: quiz.quiz_dave_shea.question + + - key: quiz.quiz_css_spec + t: "Spørsmål 02" + - key: quiz.quiz_css_spec.question + t: > + Hvilken av disse organisasjonene opprettholder CSS-spesifikasjonene? + - 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: > + W3C's [CSS-arbeidsgruppe](https://www.w3.org/groups/wg/css) opprettholder CSS-spesifikasjonen, som deretter implementeres i nettleserne. + - key: quiz.quiz_css_spec.description + aliasFor: quiz.quiz_css_spec.question + + ########################################################################### + # Sponsors + ########################################################################### + + - key: sponsors.frontendmasters.description + t: Utvikle ferdighetene dine med dyptgående, moderne kurs innen front-end. + - key: sponsors.polypane.description + t: Nettleseren for ambisiøse utviklere. Bygg responsive, tilgjengelige og raske nettsider med letthet. + - key: sponsors.nijibox.description + t: Konsulenter innen UX og produktutvikling i hjerte av Tokyo. + - key: sponsors.renderatl.description + t: Den største teknologikonferansen med et dedikert Design- og CSS-spor. + - key: sponsors.google_chrome.description + t: Takk til Google Chrome teamet for støtten til vårt arbeid. + + ########################################################################### + # FAQ/About + ########################################################################### + + - key: about.content + t: > + **2023 State of CSS-undersøkelsen** ble gjennomført fra 15. juni til 15. juli 2023 og samlet inn 9 108 svar. Undersøkelsen er drevet av [Devographics](https://www.devographics.com/), med hjelp fra et team av bidragsytere og konsulenter innen åpen kildekode. + + **State of CSS-logoen og T-skjorten** ble designet og animert av [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + + ### Undersøkelsens mål - Denne undersøkelsen, sammen med [State of JavaScript](https://stateofjs.com/) undersøkelsen, ble opprettet for å identifisere kommende trender i webutviklingsøkosystemet for å hjelpe utviklere med å ta teknologiske valg. - - Som sådan fokuserer disse undersøkelsene på å forutsi hva som kommer de neste årene, snarere enn å analysere hva som er populært nå, noe som er grunnen til at funksjoner eller teknologier som for tiden er mest utbredte ikke alltid er inkludert. + Denne undersøkelsen, sammen med [State of JavaScript](https://stateofjs.com/) undersøkelsen, ble opprettet for å identifisere kommende trender i webutviklingsøkosystemet for å hjelpe utviklere med å ta teknologiske valg. + + Som sådan fokuserer disse undersøkelsene på å forutsi hva som kommer de neste årene, snarere enn å analysere hva som er populært nå, noe som er grunnen til at funksjoner eller teknologier som for tiden er mest utbredte ikke alltid er inkludert. - I tillegg brukes data fra undersøkelsen av nettleserleverandører for å prioritere funksjoner og informere om initiativer som [Interop 2023](https://web.dev/interop-2023/). + I tillegg brukes data fra undersøkelsen av nettleserleverandører for å prioritere funksjoner og informere om initiativer som [Interop 2023](https://web.dev/interop-2023/). - ### Undersøkelsesdesign + ### Undersøkelsesdesign - I år ble designet av undersøkelsen ledet av [Chen Hui Jing](https://chenhuijing.com/) takket være et tilskudd fra Google Chrome-teamet. Alle spørsmål i undersøkelsen var valgfrie. + I år ble designet av undersøkelsen ledet av [Chen Hui Jing](https://chenhuijing.com/) takket være et tilskudd fra Google Chrome-teamet. Alle spørsmål i undersøkelsen var valgfrie. - ### Målgruppen for undersøkelsen + ### Målgruppen for undersøkelsen - Undersøkelsen var åpent tilgjengelig på nettet, og respondenter ble ikke filtrert eller utvalgt på noen måte. Respondentene var primært en blanding av respondenter fra tidligere undersøkelser (varslet gjennom en dedikert e-postliste) og trafikk fra sosiale medier. + Undersøkelsen var åpent tilgjengelig på nettet, og respondenter ble ikke filtrert eller utvalgt på noen måte. Respondentene var primært en blanding av respondenter fra tidligere undersøkelser (varslet gjennom en dedikert e-postliste) og trafikk fra sosiale medier. - ### Prosjektfinansiering + ### Prosjektfinansiering - Finansieringen av dette prosjektet kommer fra en rekke kilder: + Finansieringen av dette prosjektet kommer fra en rekke kilder: - - **T-skjortesalg**. + - **T-skjortesalg**. - - **Sponsede lenker**: lenkene til anbefalte ressurser nederst på hver side er levert av vår partner [Frontend Masters](https://frontendmasters.com/). + - **Sponsede lenker**: lenkene til anbefalte ressurser nederst på hver side er levert av vår partner [Frontend Masters](https://frontendmasters.com/). - - **Sponsede diagrammer**: fra i fjor kan alle også velge å direkte sponse et diagram for $10 eller mer, og få Twitter-profilbildet sitt vist ved siden av det. + - **Sponsede diagrammer**: fra i fjor kan alle også velge å direkte sponse et diagram for $10 eller mer, og få Twitter-profilbildet sitt vist ved siden av det. - - **Google**: i år avsatte [Google Chrome](https://www.google.com/chrome/) teamet et budsjett for å ansette Lea til å hjelpe med designet av undersøkelsen, samt finansierte meg direkte for å støtte arbeidet mitt. + - **Google**: i år avsatte [Google Chrome](https://www.google.com/chrome/) teamet et budsjett for å ansette Lea til å hjelpe med designet av undersøkelsen, samt finansierte meg direkte for å støtte arbeidet mitt. - - **Nijibox**: Det Japan-baserte selskapet [Nijibox](https://nijibox.jp/) har også vennligst akseptert å sponse mine bestrebelser for å gjøre disse årlige undersøkelsene mer bærekraftige. + - **Nijibox**: Det Japan-baserte selskapet [Nijibox](https://nijibox.jp/) har også vennligst akseptert å sponse mine bestrebelser for å gjøre disse årlige undersøkelsene mer bærekraftige. - ### Teknisk oversikt + ### Teknisk oversikt - Du kan finne en mer grundig teknisk oversikt over hvordan undersøkelsene gjennomføres [her](https://dev.to/sachagreif/how-the-devographics-surveys-are-run-2023-edition-1p6a). Koden vår er [åpen kildekode](https://github.com/Devographics/Monorepo/). + Du kan finne en mer grundig teknisk oversikt over hvordan undersøkelsene gjennomføres [her](https://dev.to/sachagreif/how-the-devographics-surveys-are-run-2023-edition-1p6a). Koden vår er [åpen kildekode](https://github.com/Devographics/Monorepo/). - ### Tilbakemelding + ### Tilbakemelding - - [Rapporter et teknisk problem](https://github.com/Devographics/Monorepo/issues) + - [Rapporter et teknisk problem](https://github.com/Devographics/Monorepo/issues) - - [Kom med et forslag til neste år](https://github.com/Devographics/surveys/issues/193) + - [Kom med et forslag til neste år](https://github.com/Devographics/surveys/issues/193) - - [Andre ikke-tekniske problemer](https://github.com/Devographics/surveys/issues) + - [Andre ikke-tekniske problemer](https://github.com/Devographics/surveys/issues) - - [Bli med i vår Discord](https://discord.gg/tuWRUWVyJs) + - [Bli med i vår Discord](https://discord.gg/tuWRUWVyJs) diff --git a/css2024.yml b/css2024.yml index 973cb76..6ef1d56 100644 --- a/css2024.yml +++ b/css2024.yml @@ -1,538 +1,576 @@ locale: nb-NO translations: - ########################################################################### - # General - ########################################################################### + ########################################################################### + # General + ########################################################################### - - key: general.results.description - t: Den 2024-utgaven av den årlige undersøkelsen om de nyeste trendene i CSS-økosystemet. + - key: general.results.description + t: 2024-utgaven av den årlige undersøkelsen som tar for seg de siste trendene innen CSS-økosystemet. - - key: general.css2024.results_intro - t: | + - key: general.css2024.survey_intro + t: | - Det er fantastisk å være vitne til hvor raskt CSS fortsetter å utvikle seg. Mens det siste tiåret har handlet om å bygge et solid grunnlag for layout (Flexbox, Grid) og syntaks (variabler), lover fremtiden å gå mye lenger enn de fleste av oss noen gang har drømt om. + Det er ganske utrolig å være vitne til hvor raskt CSS utvikler seg nå. Mens det siste tiåret har handlet om å bygge grunnlaget for layouts (Flexbox, Grid) og variabler, visker fremtiden om å gå mye lenger enn de fleste av oss hadde trodd om CSS. - Vil du beregne kvadratroten eller kosinus i CSS-en din? Bruke det til å bygge scroll-triggered animasjoner? Og kanskje begrense alt dette slik at det ikke får noen uønskede effekter? Nå kan du gjøre alt dette, og mye mer! + Vil du beregne en kvadratrot eller cosinus i CSS? Bruke det til å lage animasjoner som trigges av scrolling? Og kanskje begrense det hele slik at det ikke har uønskede effekter? Nå kan du gjøre alt dette, og mye mer! - Derfor er denne undersøkelsen viktigere enn noen gang, ikke bare som en måte å følge med på egen fremgang, men også som et verktøy for å la nettleserleverandører vite hva vi alle mener om denne nye retningen. + Dette er grunnen til at denne undersøkelsen er viktigere enn noensinne, ikke bare som en måte å holde oversikt over egen fremgang, men også som et verktøy for å la nettleserleverandører vite hva vi alle mener om denne nye retningen. - Så igjen, bli med på årets State of CSS! + Så nok en gang, bli med på årets "State of CSS"! - ########################################################################### - # Introduction - ########################################################################### + - key: features.features_intro_css2024 + t: | + Velkommen til undersøkelsen! Den første delen handler om å dele dine erfaringer om forskjellige CSS-funksjoner: - - key: introduction.css2024 - t: | - CSS gjennomgår en periode med enestående fremgang. Mellom `:has()`, container-spørringer, subgrid og mye mer, kommer det nye funksjoner i nettlesere nesten hver måned. - Konsekvensen av all denne veksten er at ting kan bli litt overveldende. Heldigvis hadde vi i år [Chen Hui Jing](https://chenhuijing.com/) til å hjelpe med å designe undersøkelsen og guide oss gjennom CSS-jungelen. + - **Aldri hørt om**: det er første gang du ser dette – eller du har hørt om det, men har ingen anelse om hva det gjør. - Og for å snakke om undersøkelsen, visste du at nettleserleverandører bruker dataene fra den som en del av [Interop](https://web.dev/interop-2023/) initiativet for å hjelpe til med å prioritere hvilke funksjoner de skal jobbe med neste gang? + - **Hørt om det**: du har lest om det eller lært det, men ikke tatt det i bruk enda. - Til slutt introduserer vi en ny funksjon i år: muligheten til å **tilpasse diagrammer** med dine egne data-filtre. Vi er spente på å se hvilke nye innsikter du kommer opp med! + - **Brukt det**: du har brukt det minst en gang, selv om det bare var for å prøve det ut. - – Sacha Greif - ########################################################################### - # Tshirt - ########################################################################### + Forresten, hvis du vil fortelle oss mer om noen av valgene dine, er det bare å klikke på "kommentar"-ikonet! - - key: sections.tshirt.title - t: T-skjorte + ########################################################################### + # Introduction + ########################################################################### - - key: sections.tshirt.description - t: | - ## Støtt undersøkelsen med State of CSS T-skjorten + - key: introduction.css2024 + t: | + La meg komme med en spådom: vi kommer til å se tilbake på 2024 som året da CSS endret seg fra “Klassisk CSS” til “Nye CSS”. - Videokvalitet, klumpete kassetter og behovet for å spole tilbake er ting vi ikke savner fra VHS-epoken. Men en ting vi *savner* er de fantastiske 90-tallsvisuelle elementene som pleide å pryde tomme VHS-kassetter. + Klassisk CSS er hvordan vi har skrevet CSS i årevis: med et begrenset sett med funksjoner, og dekket språkets begrensninger med med verktøy som CSS-bibliotek, pre og post-prosessorer, og streng metodikk. - Og nå, takket være den talentfulle Christopher Kirk-Nielsen, kan du nyte all denne retro-stilen samtidig som du feirer kjærligheten din for CSS! + På den andre siden har vi nye CSS, som med åpne armer har tatt imot Subgrid, `:has()`, variabler, container queries, og mange av de andre nye og spennende CSS-funksjonene som er blitt introdusert de siste årene. Dette er funksjoner som gjør at vi ikke lengre trenger ekstra verktøy, og kan gjøre ting som vi tidligere trengte JavaScript til. - - key: tshirt.about - t: Om t-skjorten + Alt dette er mulig takket være en fornyet forpliktelse fra leverandører av nettlesere til å faktisk *få dette til å fungere* – og jeg kan ikke unngå å føle at vi knapt har begynt å utforske alt det nye CSS kan tilby. - - key: tshirt.description - t: | - Vi bruker en høykvalitets og supermyk t-skjorte med en slim fit, med print fra vår parner, Cotton Bureau. + – Sacha Greif - - key: tshirt.getit - t: Kjøp den + ########################################################################### + # Tshirt + ########################################################################### - - key: tshirt.price - t: USD $29 + frakt + - key: sections.tshirt.title + t: T-skjorte - - key: tshirt.designer.heading - t: Om designeren + - key: sections.tshirt.description + t: | + ## Støtt undersøkelsen med State of CSS T-skjorten - - key: tshirt.designer.name - t: Christopher Kirk-Nielsen + Videokvalitet, klumpete kassetter og behovet for å spole tilbake er ting vi ikke savner fra VHS-epoken. Men en ting vi *savner* er de fantastiske 90-tallsvisuelle elementene som pleide å pryde tomme VHS-kassetter. - - key: tshirt.designer.bio - t: | - Opprinnelig fra Frankrike, men nå basert i USA, er Chris ikke bare en fantastisk front-end utvikler, men også en talentfull illustratør som spesialiserer seg på det retrovisuelle. Vi oppfordrer deg også til å sjekke ut hans [andre t-skjortedesign](https://chriskirknielsen.com/designs)! + Og nå, takket være den talentfulle Christopher Kirk-Nielsen, kan du nyte all denne retro-stilen samtidig som du feirer kjærligheten din for CSS! - ########################################################################### - # Sections Introductions - ########################################################################### + - key: tshirt.about + t: Om t-skjorten - - key: sections.user_info.description.css2024 - t: | - Årets undersøkelse nådde **9,190** utviklere verden over. + - key: tshirt.description + t: | + Vi bruker en høykvalitets og supermyk t-skjorte med en slim fit, med print fra vår parner, Cotton Bureau. - - key: sections.features.description.css2024 - t: | - CSS har hatt medvind i det siste, og mange av de nye funksjonene som er introdusert, - blir sakte men sikkert tatt i bruk av flere og flere utviklere. + - key: tshirt.getit + t: Kjøp den - - key: sections.css_frameworks.description.css2024 - t: | - Igjen skiller Tailwind CSS seg ut som det ene store UI-rammeverket som utviklere er glade for å fortsette å bruke, mens Open Props genererer en liten, men ivrig tilhengerskare. + - key: tshirt.price + t: USD $29 + frakt - - key: sections.css_in_js.description.css2024 - t: | - Etter en viss innledende vekst ser det ut til at CSS-in-JS-sektoren har stabilisert seg, og det - faktum at innebygd CSS selv tar i bruk mange av sine viktigste fordeler, er sannsynligvis en stor medvirkende faktor. + - key: tshirt.designer.heading + t: Om designeren - - key: sections.other_tools.description.css2024 - t: | - 30 år etter oppfinnelsen av nettleseren ser vi fortsatt innovasjon på dette området med nye aktører som Brave og Arc, samt spesialiserte verktøy som Polypane som får økt markedsandel. + - key: tshirt.designer.name + t: Christopher Kirk-Nielsen - - key: sections.usage.description.css2024 - t: | - Uansett hvordan du bruker CSS, viser dataene at det fortsatt er en bekymring å sikre at koden din fungerer på tvers av alle nettlesere, spesielt for nyere funksjoner som `:has()`. + - key: tshirt.designer.bio + t: | + Opprinnelig fra Frankrike, men nå basert i USA, er Chris ikke bare en fantastisk front-end utvikler, men også en talentfull illustratør som spesialiserer seg på det retrovisuelle. Vi oppfordrer deg også til å sjekke ut hans [andre t-skjortedesign](https://chriskirknielsen.com/designs)! - - key: sections.resources.description.css2024 - t: | - Mellom blogger, YouTube-kanaler og podcaster er CSS-samfunnet mer livlig enn noen gang. + ########################################################################### + # Sections Introductions + ########################################################################### - ########################################################################### - # Charts - ########################################################################### + - key: sections.user_info.description.css2024 + t: | + Årets undersøkelse nådde ut til **9,704** utviklere over hele verden. - - 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: sections.features.description.css2024 + t: | + Det er ingen hemmelighet at CSS legger til nye funksjoner i rekordfart – og det er derfor undersøkelsen inneholder flere enn *50* av dem i år! - - key: user_info.country_low_vs_high_income.description.css2024 - t: > - Om vi deler respondenter i to grupper, høy inntekt og lav inntekt, får vi to - veldig forskjellige lister med land. - - - key: user_info.higher_education_degree_by_gender.description.css2024 - t: > - Representasjonen av kvinner var høyere enn forventet blant respondentene med høyere - utdanning i områder som ikke er relatert til CSS, - noe som potensielt indikerer mange karriereskift. - - - key: user_info.source_by_gender.description.css2024 - t: > - Selv om de lave totalene gjør det vanskelig å trekke noen konklusjoner, - var andelen kvinner høyest blant respondentene som kom over undersøkelsen - gjennom arbeidsplassen sin eller via muntlig omtale, - spesielt sammenlignet med sosiale nettverk som Twitter eller YouTube. - - - key: user_info.source_by_race_ethnicity.description.css2024 - t: > - Igjen, med tanke på den lave utvalgsstørrelsen, skiller - YouTube seg ut som en av de mest mangfoldige kildene til trafikk til undersøkelsen når man vurderer rase og etnisitet. - - - key: user_info.average_income_by_company_size.description.css2024 - t: > - Vi finner at de best betalte respondentene jobber for store selskaper, selv om det er - verdt å merke seg at selvstendig næringsdrivende har en liten inntektsfordel sammenlignet med små selskaper. - - - key: user_info.yearly_salary_usa_vs_the_world.description.css2024 - t: > - Når man sammenligner inntektene i USA med resten av verden, - blir det klart at amerikanske utviklere er overrepresentert i de høyere inntektsgruppene. - - ########################################################################### - # Awards - ########################################################################### - - - key: award.feature_adoption_delta_award.comment - t: | - `gap`-egenskapen for Flexbox er en så nyttig tillegg at det ikke er - overraskende at vi vil se en **{value}** progresjon i 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: Med **{value}** kommentarer, var det ingen annen funksjon som kom i nærheten av å generere like mye tilbakemelding som Subgrid. - - - key: award.tool_satisfaction_award.comment - t: | - Av alle CSS-in-JS-løsningene er Open Props den eneste som har - opprettholdt en skyhøy **{value}** bevaringsgrad. - - # - 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: | - Med **{value}** omtaler, var Panda det klart mest omtalte spørsmålet i friformatet. - - ########################################################################### - # Conclusion - ########################################################################### - - - key: conclusion.css2024 - t: | - Etter hvert som bruken av nyere CSS-funksjoner har økt, har bruken av CSS-rammeverk vært på en nedadgående kurve. - - Dette kan være en indikasjon på at folk begynner å bli vant til tanken om at man ikke nødvendigvis må vente med å bruke nyere CSS-funksjoner, fordi nettleserne holder tritt mye raskere enn før. - - Med høy bevissthet rundt innebygde CSS-funksjoner som nesting og `:has()` (som kan fungere som en foreldreselektor, men er mye mer enn det!), ser det ut som vi er på terskelen til bred adopsjon. - - Av alle disse funksjonene hadde jeg en personlig favoritt i år, og det er `text-wrap: balance`. Det gir en enkel løsning på et spørsmål jeg har fått gjennom hele min karriere innen webutvikling: "kan vi justere overskriften slik at det siste ordet ikke står alene?" - - Det var også interessant at så mange utviklere mente at animasjon til auto og murverks-layout var manglende CSS-funksjoner. Det er sant at det alltid har vært vanskelig for nettlesere å bestemme elementdimensjoner (spesielt høyde) når de ikke er eksplisitt deklarert. - - Men som [Lea Verou](https://lea.verou.me/) nevnte i fjor, med initiativer som [Interop](https://wpt.fyi/interop-2023) som bringer nettleserne sammen, kan funksjoner som tidligere ble ansett som umulige, nå potensielt bli en realitet! - - - key: conclusion.css2024.bio - t: Developer Experience Engineer @ Interledger Foundation - - ########################################################################### - # Picks - ########################################################################### - - - key: picks.my_pick - t: "Mine valg for 2023: " - - key: picks.intro - t: Vi spurte medlemmer fra CSS-samfunnet om å dele sine "årets valg" - - # - 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: :has()-selektoren - # - 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: | - Ahmads blogg er en kilde til kunnskap og inspirasjon, med dyptgående utforskninger av ulike temaer, inkludert flotte visuelle elementer og brukstilfeller. - - # - key: picks.samuel_kraft.name - # t: :has()-selektoren - # - 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: Instruktør, CSS for JavaScript Developers - - key: picks.josh_comeau.description - t: | - Denne podcasten er en herlig gjennomgang av en rekke viktige - og moderne CSS-funksjoner. - Den er ledet av Una Kravets og Adam Argyle, to fantastiske mennesker. - - - key: picks.adam_argyle.name - t: Zag.js - - key: picks.adam_argyle.bio - t: Google Chrome Developer Relations - - key: picks.adam_argyle.description - t: | - De talentfulle folkene hos ChakraUI holder på å utvikle noen banebrytende komponenter og ideer. - Jeg kan ikke vente med å se hva mer de kommer med. - - # - 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: | - :has() selektoren - - key: picks.jhey_tompkins.bio - t: CEO for Fancy CSS - - key: picks.jhey_tompkins.description - t: | - :has() er magien som lar deg kombinere andre API-er som container-spørringer, ankerposisjonering osv. Jeg er spent på å se hvordan CSS-verden finner nye og innovative måter å bruke det på. - - # - 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 animasjoner - - key: picks.ahmad_shadeed.bio - t: Designingeniør og forfatter for [ishadeed.com](https://ishadeed.com/) - - key: picks.ahmad_shadeed.description - t: | - Hvis jeg går 2 år tilbake i tid, hadde jeg aldri gjettet - at CSS ville hatt scroll-driven animasjoner. Men, der er vi nå! - - # - key: picks.georgedoescode.name - # t: - # - key: picks.georgedoescode.bio - # t: - # - key: picks.georgedoescode.description - # t: | - - # - key: picks.jen_simmons.name - # t: :has()-selektoren - # - 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: Ingeniør innen inkluderende design og pedagog - - key: picks.sara_soueidan.description - t: | - Min stemme går til color-contrast() fordi jeg mener det fortjener mer oppmerksomhet. - Det er en av de få funksjonene som gjør det _enklere_ for oss (utviklere) - å designe for brukerne våre. Implementasjon i alle nettlesere kan ikke komme fort nok. - - - key: picks.adam_wathan.name - t: Lightning CSS - - key: picks.adam_wathan.bio - t: Skaperen av Tailwind CSS - - key: picks.adam_wathan.description - t: | - Et ekstremt raskt, alt-i-ett CSS-prosesseringsverktøy som håndterer ting som prefikser, minifisering og transpilering, samtidig som det er en fantastisk plattform for andre utviklere å bygge CSS-verktøy på. - - # - 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: Utviklerverktøyene - - key: picks.kilian_valkhof.bio - t: Skaperen av Polypane, nettleseren for utviklere. - - key: picks.kilian_valkhof.description - t: | - Utviklerverktøyene i alle nettlesere er superkraftige. Disse - kortfattede tipsene hjelper deg å få mest mulig ut av dem, uansett hvilken nettleser du bruker. - - - 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: | - Overskrifter skal skinne og være lette å lese, selv om skjermene kan være - vanskelige å forutsi. Jeg har kjempet mot de irriterende ensomme ordene på linjeavslutningen (hei, enkeord!), - men gjett hva? Her kommer text-wrap: balance – en enlinjes-fiks som er ren magi! - - # - 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: "Spørsmål 01" - - key: quiz.quiz_dave_shea.question - t: > - I mai 2003 lanserte Dave Shea et nettsted som viste frem CSS' fleksibilitet og tilpasningsevne. Hva het dette nettstedet? - - 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/) gjorde et stort inntrykk ved å demonstrere hva som var mulig når man holdt markup og styling adskilt. - - key: quiz.quiz_dave_shea.description - aliasFor: quiz.quiz_dave_shea.question - - - key: quiz.quiz_css_spec - t: "Spørsmål 02" - - key: quiz.quiz_css_spec.question - t: > - Hvilke av disse organisasjonene vedlikeholder CSS-spekken? - - 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: > - W3C's [CSS Working Group](https://www.w3.org/groups/wg/css) vedlikeholder CSS-spekken, som videre implementeres i nettlesere. - - key: quiz.quiz_css_spec.description - aliasFor: quiz.quiz_css_spec.question - - ########################################################################### - # Sponsors - ########################################################################### - - - key: sponsors.frontendmasters.description - t: Utvikle ferdighetene dine med dyptgående, moderne kurs innen front-end. - - key: sponsors.polypane.description - t: Nettleseren for ambisiøse utviklere. Bygg responsive, tilgjengelige og raske nettsider med letthet. - - key: sponsors.nijibox.description - t: UX- og produktutviklingsrådgivning i hjertet av Tokyo. - - key: sponsors.renderatl.description - t: Den største teknologikonferansen med et dedikert Design- og CSS-spor. - - key: sponsors.google_chrome.description - t: Takk til Google Chrome teamet for støtten til vårt arbeid. + - key: sections.tools.css2024 + t: Bibliotek og verktøy - ########################################################################### - # FAQ/About - ########################################################################### + - key: sections.tools.description.css2024 + t: | + Til tross for de mange mulighetene som kommer med de nye funksjonene i CSS, er utviklere fortsatt avhengige av verktøy og biblioteker for best mulig arbeidsflyt, enn så lenge. - - key: about.content - t: > - 2023 State of CSS-undersøkelsen ble gjennomført fra 15. juni til 15. juli 2023 og samlet inn 9 108 svar. Undersøkelsen drives av [Devographics](https://www.devographics.com/) med hjelp fra et team av open-source-frivillige og konsulenter. + - key: sections.usage.description.css2024 + t: | + Uansett hvordan du bruker CSS, viser dataene at det fortsatt er en bekymring å sikre at koden din fungerer på tvers av alle nettlesere, spesielt for nyere funksjoner som `:has()`. - State of CSS-logoen og T-skjorten ble designet og animert av [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + - key: sections.resources.description.css2024 + t: | + Med alle de nye CSS-funksjonene som slippes, kommer vi ikke til å gå tom for materiale til å lage blogginnlegg, podcaster, vidoer og nye kurs om med det første! - ### Mål med undersøkelsen + ########################################################################### + # Charts + ########################################################################### - Denne undersøkelsen, sammen med [State of JavaScript](https://stateofjs.com/) undersøkelsen, ble laget for å identifisere kommende trender i webutviklingsøkosystemet for å hjelpe utviklere med å ta teknologiske valg. + # user_info - Som sådan fokuserer disse undersøkelsene på å forutsi hva som kommer de neste årene, snarere enn å analysere hva som er populært nå, noe som er grunnen til at funksjoner eller teknologier som er mest utbredte i dag ikke alltid er inkludert. + - key: user_info.country.takeaway.css2024 + t: > + Mens USA fortsatt representerte den største enkeltgruppa, var vi glade for å se en god mix av land blant resten av respondentene våre – selv om Asia dessverre fortsatt er underrepresentert. - I tillegg brukes undersøkelsesdataene også av nettleserleverandører for å prioritere funksjoner og informere initiativer som [Interop 2023](https://web.dev/interop-2023/). + - key: user_info.locale.takeaway.css2024 + t: > + Mange takk til våre frivillige oversettere som gjør undersøkelsen tilgjengelig på så mange forskjellige språk! + - key: user_info.completion_stats.takeaway.css2024 + t: > + Selv om det er en lang undersøkelse, var det et stort flertall av respondenter som tok seg tid til å fullføre hele, fra start til slutt! - ### Utforming av undersøkelsen + - key: user_info.age.takeaway.css2024 + t: > + CSS gjør det ikke så bra blant Gen Alpha respondenter, muligens fordi de er for opptatt med å spille Fortnite. - I år ble designet av undersøkelsen ledet av [Chen Hui Jing](https://chenhuijing.com/) takket være et økonomisk tilskudd fra Google Chrome-teamet. Alle spørsmål i undersøkelsen var valgfrie. + Vent litt, Fortnite er fortsatt en greie sant..? - ### Deltagere i undersøkelsen + - key: user_info.years_of_experience.takeaway.css2024 + t: > + Denne diagrammet viser at de fleste respondentene var så heldige at de aldri måtte håndtere posisjonering basert på `float`. - Undersøkelsen var åpen og tilgjengelig på nettet, og respondentene ble ikke filtrert eller valgt ut på noen måte. Respondentene bestod hovedsakelig av en blanding av tidligere respondenter (informert gjennom en dedikert e-postliste) og trafikk fra sosiale medier. + - key: user_info.company_size.takeaway.css2024 + t: > + Jo større selskapet er, desto høyere er lønnen. Selv om dataene våre viser at hvis du er dyktig nok, kan du ha en god lønn uansett størrelsen på selskapet ditt. - ### Prosjektfinansiering + - key: user_info.yearly_salary.takeaway.css2024 + t: > + Selv om vi ofte hører historier om seksifrede lønninger fra Silicon Valley, er realiteten at de fleste front-end-utviklere over hele verden tjener langt mindre, noe som blir tydelig når vi sammenligner USA med resten av verden. - Finansieringen av dette prosjektet kommer fra flere kilder: + - key: user_info.higher_education_degree.takeaway.css2024 + t: > + Selv om det å ha en utdanning vil sikre at du tjener mer, viser det seg at den ikke nødvendigvis må være relatert til programmering – et godt tegn for mange av oss som oppdaget lidenskapen for webutvikling senere i livet. - - **T-skjorte-salg**. + - key: user_info.gender.takeaway.css2024 + t: > + Canada, Spania, Storbritania og USA hadde høyeste andelen kvinnelige respondenter. - - **Sponsede lenker**: lenkene til anbefalte læringsressurser nederst på hver side er levert av vår partner [Frontend Masters](https://frontendmasters.com/). + Vår data viser også at kvinners inntekt ligger noe lavere sammenlignet med andre grupper. Grunnene for dette er utenfor scopet av denne undersøkelsen, men det begynner å bli synlig at kvinner i vår industri har noen unike utfordringer. - - **Sponsede diagrammer**: siden i fjor kan hvem som helst velge å direkte sponse et diagram for $10 eller mer, og få sitt Twitter-profilbilde vist ved siden av det. + - key: user_info.race_ethnicity.takeaway.css2024 + t: > + Fleste av ikke-hvite respondenter var i gruppene for yngre og de med mindre erfaring – noe som forhåpentligvis peker mot en pågående diversifisering av bransjen. - - **Google**: i år har [Google Chrome](https://www.google.com/chrome/) teamet satt av et budsjett for å ansette Lea til å hjelpe med å designe undersøkelsen, samt finansiert meg direkte for å støtte mitt arbeid. + - key: user_info.disability_status.takeaway.css2024 + t: > + Takket være den utrøttelige innsatsen til forkjempere for tilgjengelighet, aksepterer vi nå at funksjonshemminger (både permanente og midlertidige) bør tas i betraktning som en del av design- og utviklingsprosessen. - - **Nijibox**: Japan-baserte [Nijibox](https://nijibox.jp/) har også generøst gått med på å sponse mine tiltak for å gjøre disse årlige undersøkelsene mer bærekraftige. + - key: user_info.source.takeaway.css2024 + t: > + Mens de fleste respondentene kjente til undersøkelsen fra tidligere år, fant en veldig stor andel av deltakerne oss via Kevin Powell. + # features - ### Teknisk Oversikt + - key: features.all_features + t: Funksjoner - Du kan finne en mer detaljert teknisk oversikt over hvordan undersøkelsene gjennomføres [her](https://dev.to/sachagreif/how-the-devographics-surveys-are-run-2023-edition-1p6a). Koden vår er [åpen kildekode](https://github.com/Devographics/Monorepo/). + - key: features.all_features.takeaway.css2024 + t: > + Filtereffekter (som `blur()`, `contrast()`, osv.) var den uventede mest brukte CSS-funksjonen i 2024, med 75,4 % av respondentene som hadde brukt dem; mens `:has()` kom på en nær andreplass med 72,8 %. - ### Tilbakemelding + Når det gjelder rangering etter meninger, viste det seg derimot at Subgrid var den mest likte funksjonen, der 51,5 % av respondentene sier seg villige til å bruke den igjen. - - [Rapporter et teknisk problem](https://github.com/Devographics/Monorepo/issues) + Den minst brukte funksjonen? Ingen annen enn `hanging-punctuation`, med 84,7 % av respondentene som aldri engang hadde hørt om den! - - [Kom med et forslag for neste år](https://github.com/Devographics/surveys/issues/193) + - key: features.reading_list.takeaway.css2024 + t: > + Leselisten lar deg lagre elementer du ønsker å lære mer om etter at du har fullført undersøkelsen. - - [Andre ikke-tekniske problemer](https://github.com/Devographics/surveys/issues) + Så det er ingen tilfeldighet at den minst kjente funksjonen, `hanging-punctuation`, også topper våre rangeringer for leselisten som den funksjonen utviklere har lagret mest! - - [Bli med i vår Discord](https://discord.gg/tuWRUWVyJs) + # tools + + - key: tools.css_frameworks.takeaway.css2024 + t: > + Når det gjelder CSS-rammeverk og UI-biblioteker, fortsetter Tailwind CSS å ligge milevis foran de andre, mer tradisjonelle konkurrenter. + + - key: tools.css_in_js.takeaway.css2024 + t: > + Selv om noe av appellen til CSS-in-JS kanskje har blitt foreldet av nyere CSS-funksjoner som variabler, viser nylige innovasjoner som typede styles og byggsteg-kompilering at dette området fortsatt har mye å tilby. + + - key: tools.pre_post_processors.takeaway.css2024 + t: > + Sass/SCSS er fortsatt i ledelsen her, men det blir interessant å se om bruken vil forbli stabil nå som mange av nøkkelfunksjonene deres har blitt adoptert inn i CSS-kjernen. + + - key: tools.utilities.takeaway.css2024 + t: > + Det mangler ingenting i forbindelse med formattering, minifisering og andre måter å tweake CSS-koden din på så den passer din stil best. + + - key: tools.browsers.takeaway.css2024 + t: > + Selv om de fire store nettleserne dominerer dette diagrammet, sniker Arc seg sakte oppover rangeringene og har økt fra 7,8 % til 12 % i bruk fra år til år. + + # usage + + - key: usage.form_factors.takeaway.css2024 + t: > + Et oppmuntrende tegn på tilgjengelighetens økende betydning er at testing med skjermlesere har økt fra 16,6 % til 19 % fra år til år. + + - key: usage.what_do_you_use_css_for.takeaway.css2024 + t: > + Selv om disse dataene ikke er overraskende, er det en fin påminnelse om at CSS kan gjøre mye mer enn bare å formatere nettsider. + + - key: usage.industry_sector.takeaway.css2024 + t: > + Visste du at du kan filtrere dataene fra denne undersøkelsen etter bransje? Bare klikk på "Legg til filtre…" på hvilket som helst diagram! + + - key: usage.usage_type.takeaway.css2024 + t: > + Enten du bygger nettsider profesjonelt eller bare prøver deg litt, finnes det ingen feil måte å bruke CSS på! + + - key: usage.design_methodology.takeaway.css2024 + t: > + Selv om et stort flertall av respondentene bruker CSS til å implementere allerede eksisterende design, blir det interessant å se om dette endrer seg etter hvert som designapper utvikler seg, og AI-verktøy blir i stand til å gå direkte fra idé til kode. + + - key: usage.css_js_balance.takeaway.css2024 + t: > + Selv i sammenheng med en CSS-undersøkelse viser det seg at et flertall av respondentene fortsatt tilbringer mesteparten av tiden sin på å skrive JavaScript. Bare tiden vil vise om også dette vil endre seg nå som CSS blir mer kraftfullt. + + - key: usage.css_interoperability_features.takeaway.css2024 + t: > + Få ting føles verre enn å vite at en ny funksjon ville løst problemet ditt perfekt, men at du ikke kan bruke den på grunn av dårlig nettleserstøtte. + + + Dette er tilfellet med Anchor Positioning, en ny funksjon som er på vei, men som dessverre ikke har noe bred støtte enda. + + + Container Queries, derimot, *er* [tilgjengelige på et grunnleggende nivå](https://web.dev/blog/cq-stable) og klare til bruk, til tross for at de fortsatt dukket opp i svarene til mange respondenter! + + - key: usage.css_missing_features.takeaway.css2024 + t: > + I fravær av en tryllestav som lar oss mane fram hvilken som helst CSS-funksjon vi kan drømme om, er det beste vi kan håpe på at disse dataene kan bidra til å presse nettleserleverandørene i riktig retning! + + + Den gode nyheten: betinget logikk, mixins og murverkslayouts er alle under utvikling i en eller annen form! + + - key: usage.css_pain_points.takeaway.css2024 + t: > + Selv om nettleserstøtte forblir et evig problem med CSS, viser Tailwind CSS seg også å være en kilde til frustrasjon for noen – mens andre klager på at det ikke brukes nok! + + - key: usage.favorite_new_features.takeaway.css2024 + t: > + Den etterlengtede funksjonen, god implementering og nettleserstøtte: `:has()` har alt, og topper rangeringen av den beste nye CSS-funksjonen i 2024! + + - key: usage.state_of_the_web_happiness.takeaway.css2024 + t: > + Selv om vi elsker å klage over tilstanden til ting, viser det seg at vi er overraskende stabilt fornøyd gjennom årene. + + - key: usage.state_of_css_happiness.takeaway.css2024 + t: > + Vi ser til og med en liten økning når det gjelder CSS spesifikt, noe som beviser at det harde arbeidet fra nettleserleverandører, arbeidsgrupper og CSS-samfunnet generelt ikke går ubemerket hen! + + # resources + + - key: resources.blogs_news_magazines.takeaway.css2024 + t: > + Til tross for at CSS-Tricks har gjennomgått et eierskapsbytte de siste årene, har det klart å beholde sin førsteplass når det gjelder CSS-blogger. + + - key: resources.courses.takeaway.css2024 + t: > + Gratistjenester som MDN og YouTube-videoer er viktige verktøy for å lære CSS, men det er også verdt å nevne at Josh Comeaus materiale er gull verdt. + + - key: resources.podcasts.takeaway.css2024 + t: > + Syntaksen beholder kanskje sin toppplassering for nå, men Web Standards og The CSS Podcast viser at man kan ha relativt stor suksess ved å ta for seg et spesifikt språk eller tema. + + - key: resources.video_creators.takeaway.css2024 + t: > + Kevin Powell viser nok en gang at ingen andre helt måle seg med hans rekkevidde og popularitet innen CSS på YouTube. + + - key: resources.people.takeaway.css2024 + t: > + Mens Kevin nok en gang tar ledelsen her, er det fint å se at Adam, Una, Josh og Leas arbeid blir anerkjent av samfunnet! + + - key: resources.other_surveys.takeaway.css2024 + t: > + Du blir ikke overrasket over å høre at vi anser undersøkelser som et essensielt læringsverktøy – og av den grunn er vi alltid på utkikk etter nye konkurrenter... Host host, venner! + + ########################################################################### + # Awards + ########################################################################### + + - key: award.most_used_feature_award.comment + t: | + **Filtereffekter** har vært rundt en stund, og de er fortsatt like nyttige som alltid! + + - key: award.least_used_feature_award.comment + t: | + `hanging-punctuation` vinner prisen for å være den minst kjente CSS-funksjonen! + + - key: award.most_loved_feature_award.comment + t: | + Med {value}% av respondentene som har et positivt inntrykk av **Subgrid**, tar den førsteplassen i rangeringen vår. + + - key: award.most_commented_feature_award.comment + t: | + **Subgrid** fikk over {value} kommentarer, delvis fordi det dukket opp tidlig i undersøkelsen, men også fordi det absolutt er en prisverdig funksjon! + + ########################################################################### + # Conclusion + ########################################################################### + + - key: conclusion.css2024.ahmad_shadeed + t: | + + I løpet av de siste to årene har CSS utviklet seg så mye at det å holde seg oppdatert med alle de nye funksjonene føles som en fulltidsjobb. Dette betyr at det er mange emner og ideer å utforske og eksperimentere med. + + For eksempel, etter å ha blitt etterspurt i mange år, viste CSS `:has()` seg å være en av de mest kraftfulle tilleggene til CSS og reduserte betydelig behovet for JavaScript. For meg er det sammenlignbart med overgangen fra å bruke float til Flexbox, som gjorde det mulig for oss å lage nesten hvilken som helst layout vi kunne forestille oss. + + CSS **container size og style queries** er også med å endre på hvordan vi kan bygge komponenter som må fungere flere steder. Foreløpig er det bare container queries som har full støtte på tvers av alle nettlesere, selv om implementasjonen fortsatt er noe begrenset. + + Når jeg ser frem mot 2025, håper jeg å se bredere bruk av container queries, full nettleserstøtte for **scroll-driven animasjoner**, style queries og **ankerposisjonering**. Hva mer kan vi be om? + + - key: conclusion.css2024.ahmad_shadeed.bio + t: Design Engineer og forfatter av [Debugging CSS](https://debuggingcss.com/) + + ########################################################################### + # Picks + ########################################################################### + + - key: picks.my_pick + t: "Mine valg for 2024: " + - key: picks.intro + t: Vi spurte medlemmer fra CSS-samfunnet om å dele sine "årets valg" + + - key: picks.chris_coyier.name + t: Google's tilskudd til CSS + - key: picks.chris_coyier.bio + t: Skaper av Codepen & vert for Shoptalk Show + - key: picks.chris_coyier.description + t: | + Det er fristende å si noe om den drivkraften tli CSS Google har vært, spesielt det siste året. Rachel Andrew, Adam Argyle, Bramus Van Damme, Una Kravets, Tab Atkins, fantasai – og de gjør alle store og spennende ting offentlig. + + - key: picks.temani_afif.name + t: | + `@property` er blitt tilgjengelig + - key: picks.temani_afif.bio + t: Skaper av [css-challenges.com](https://css-challenges.com) + - key: picks.temani_afif.description + t: | + Jeg vil sannsynligvis si at støtten for `@property` i Firefox i år, gjør denne funksjonen tilgjengelig på tvers av nettlesere (siden juli) og låser opp mange kule muligheter. + + - key: picks.adam_argyle.name + t: | + `linear()` + - key: picks.adam_argyle.bio + t: Google + - key: picks.adam_argyle.description + t: | + linear() easing-funksjonen har gjort fin-tuning på avslutninger av interaksjoner mye bedre. + + - key: picks.andy_bell.name + t: | + Getting Stuck: All the Ways `position:sticky` Can Fail + - key: picks.andy_bell.bio + t: Designer, utviklger og grunnlegger av Piccalilli og Set Studio. + - key: picks.andy_bell.description + t: | + I løpet av alle mine år med CSS må `position: sticky` være en av de mest *frustrerende* funksjonene, samtidig som den kan være ekstremt nyttig. Jeg har alltid ønsket å skrive en guide for å hjelpe folk med dette, men heldigvis trenger jeg ikke å gjøre det nå som Kilian har skrevet dette mesterverket. + + - 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: | + Det nye `@view-transition` CSS-at-regelen er en gamechanger i 2024. Den lar utviklere lage jevne, native overganger mellom sider eller komponenter med minimalt med kode, noe som betydelig reduserer avhengigheten av løsninger som tungt lener seg på JavaScript. Dette markerer et stort fremskritt for å bygge dynamiske, flytende grensesnitt på web! + + - key: picks.sacha_greif.name + t: Sara Soueidan + - key: picks.sacha_greif.bio + t: Skaper av State of CSS + - key: picks.sacha_greif.description + t: | + Selv om vi alle jobber i den digitale sfæren, er det viktig å huske at alt dette er muliggjort av faktiske, fysiske mennesker som må lide konsekvensene av konflikter rundt om i verden. Sara ble nylig fordrevet fra hjemmet sitt på grunn av krig, og jeg kan bare håpe hun snart kan gjenoppta sitt fantastiske arbeid! + + - key: picks.augustin_mauroy.name + t: | + `:has()` + - key: picks.augustin_mauroy.bio + t: Webutvikler & OSS entusiast + - key: picks.augustin_mauroy.description + t: | + `:has`-pseudo-klassen lar deg gjøre virkelig kreative ting. Men den lar deg også "gå mot strømmen", for eksempel en kartvisning som endrer form når du holder musen over ett av barnelementene. + + - key: picks.lea_verou.name + t: Style Queries og `if()` + - key: picks.lea_verou.bio + t: Product Lead hos Font Awesome + - key: picks.lea_verou.description + t: | + Mitt valg ville være style queries og inline `if()`. Når disse to blir tilgjengelige overalt, vil vi 10x'e mulighetene vi har med CSS-variabler! + + # - 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 animasjoner + - key: picks.ahmad_shadeed.bio + t: Design Engineer og forfatter av [Debugging CSS](https://debuggingcss.com/) + - key: picks.ahmad_shadeed.description + t: | + Dette er en gamechanger som snart vil få støtte i alle store nettlesere. Det er utrolig at det som en gang krevde mye JavaScript nå kan oppnås med bare noen få linjer med CSS. + + # - key: picks.xxx.name + # t: + # - key: picks.xxx.bio + # t: + # - key: picks.xxx.description + # t: | + + # - key: picks.xxx.name + # t: + # - key: picks.xxx.bio + # t: + # - key: picks.xxx.description + # t: | + + ########################################################################### + # Quiz + ########################################################################### + + - key: quiz.quiz_dave_shea + t: "Spørsmål 01" + - key: quiz.quiz_dave_shea.question + t: > + I mai 2003 lanserte Dave Shea et nettsted som viste CSSs fleksibilitet og tilpasningsevne. Hva var navnet på dette nettstedet? + - 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/) gjorde et stort inntrykk ved å demonstrere hva som var mulig når man holdt markup og styling adskilt. + - key: quiz.quiz_dave_shea.description + aliasFor: quiz.quiz_dave_shea.question + + - key: quiz.quiz_css_spec + t: "Spørsmål 02" + - key: quiz.quiz_css_spec.question + t: > + Hvilken av disse organisasjonene opprettholder CSS-spesifikasjonene? + - 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: > + W3C's [CSS-arbeidsgruppe](https://www.w3.org/groups/wg/css) opprettholder CSS-spesifikasjonen, som deretter implementeres i nettleserne. + - key: quiz.quiz_css_spec.description + aliasFor: quiz.quiz_css_spec.question + + ########################################################################### + # Sponsors + ########################################################################### + + - key: sponsors.frontendmasters.description + t: Utvikle ferdighetene dine med dyptgående, moderne kurs innen front-end. + - key: sponsors.polypane.description + t: Nettleseren for ambisiøse utviklere. Bygg responsive, tilgjengelige og raske nettsider med letthet. + - key: sponsors.nijibox.description + t: Konsulenter innen UX og produktutvikling i hjerte av Tokyo. + - key: sponsors.renderatl.description + t: Den største teknologikonferansen med et dedikert Design- og CSS-spor. + - key: sponsors.google_chrome.description + t: Takk til Google Chrome teamet for støtten til vårt arbeid. + + ########################################################################### + # FAQ/About + ########################################################################### + + - key: faq.how_long_will_survey_take_css2024 + t: Hvor lang tid tar å besvare undersøkelsen? + - key: faq.how_long_will_survey_take_css2024.description + t: > + Avhengig av hvor mange spørsmål du svarer på (alle spørsmål er valgfrie), + bør det ta omtrent 15-20 minutter å fullføre undersøkelsen. + + - key: faq.learn_more_css2024 + t: Hvor kan jeg lære mer? + - key: faq.learn_more_css2024.description + t: Du kan lære mer om denne undersøkelsen på [vår annonseringspost](https://dev.to/sachagreif/the-2024-state-of-css-survey-is-now-open-4o5h). + + - key: faq.survey_design_css2024 + t: Hvordan ble undersøkelsen utformet? + - key: faq.survey_design_css2024.description + t: > + Denne undersøkelsen ble utformet som resultatene av en [åpen designprosess](https://github.com/Devographics/surveys/issues/245) som involverte nettleserleverandører og webutviklingssamfunnet. + + - key: faq.results_released_css2024 + t: Når blir resultatene publisert? + - key: faq.results_released_css2024.description + t: Undersøkelsen vil pågå fra 17. august til 7. september 2024, og resultatene vil bli publisert noen uker senere. + + - key: about.content + t: > + The 2024 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. + + + **State of CSS-logoen og T-skjorten** ble designet og animert av [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + + + ### Undersøkelsens mål + + Denne undersøkelsen, sammen med [State of JavaScript](https://stateofjs.com/) undersøkelsen, ble opprettet for å identifisere kommende trender i webutviklingsøkosystemet for å hjelpe utviklere med å ta teknologiske valg. + + Som sådan fokuserer disse undersøkelsene på å forutsi hva som kommer de neste årene, snarere enn å analysere hva som er populært nå, noe som er grunnen til at funksjoner eller teknologier som for tiden er mest utbredte ikke alltid er inkludert. + + I tillegg brukes data fra undersøkelsen av nettleserleverandører for å prioritere funksjoner og informere om initiativer som [Interop 2024](https://web.dev/blog/interop-2024). + + + ### Undersøkelsesdesign + + Denne undersøkelsen ble utformet i fellesskap [på GitHub](https://github.com/Devographics/surveys/issues/245). + + ### Målgruppen for undersøkelsen + + Undersøkelsen var åpent tilgjengelig på nettet, og respondenter ble ikke filtrert eller utvalgt på noen måte. Respondentene var primært en blanding av respondenter fra tidligere undersøkelser (varslet gjennom en dedikert e-postliste) og trafikk fra sosiale medier. + + ### Prosjektfinansiering + + Bortsett fra t-salg kommer finansieringen av dette prosjektet fra en rekke kilder: + + - Vår partner [Frontend Masters](https://frontendmasters.com/) sponser undersøkelsen i bytte mot å få frem relevante lenker til kursene deres nederst på hver side. + + - [Google Chrome](https://www.google.com/chrome/) teamet har satt av et sponsorbudsjett i år for å hjelpe med å designe og gjennomføre undersøkelsen. + + - [TokyoDev](https://www.tokyodev.com/) sponser også undersøkelsen aktivt. + + ### Teknisk oversikt + + Du kan finne en mer grundig teknisk oversikt over hvordan undersøkelsene gjennomføres [her](https://dev.to/sachagreif/how-the-devographics-surveys-are-run-2023-edition-1p6a). Koden vår er [åpen kildekode](https://github.com/Devographics/Monorepo/). + + ### Tilbakemelding + + + - [Rapporter et teknisk problem](https://github.com/Devographics/Monorepo/issues) + + - [Kom med et forslag til neste år](https://github.com/Devographics/surveys/issues/249) + + - [Andre ikke-tekniske problemer](https://github.com/Devographics/surveys/issues) + + - [Bli med i vår Discord](https://discord.gg/tuWRUWVyJs) diff --git a/surveys.yml b/surveys.yml index f99b97f..1c7e781 100644 --- a/surveys.yml +++ b/surveys.yml @@ -450,7 +450,7 @@ translations: t: Du kan lære mer om [fjorårets undersøkelse her](https://2021.stateofcss.com/en-US/about/). - key: faq.survey_design_css2022 - t: Hvordan var undersøkelsen satt opp? + t: Hvordan ble undersøkelsen utformet? - key: faq.survey_design_css2022.description t: I år, takker være Google's [UI fond](https://web.dev/ui-fund/), kunne [Lea Verou](https://lea.verou.me/) ta styring og lede den [prosessen med utformingen av undersøkelsen](https://github.com/orgs/Devographics/projects/1/views/1) på GitHub. @@ -479,7 +479,7 @@ translations: t: Du kan lære mer om denne undersøkelsen på [vår annonseringspost](https://dev.to/sachagreif/the-2023-state-of-css-survey-is-now-open-18bk). - key: faq.survey_design_css2023 - t: Hvordan var undersøkelsen satt opp? + t: Hvordan ble undersøkelsen utformet? - key: faq.survey_design_css2023.description t: > I år, takker være Google's [UI Fond](https://web.dev/ui-fund/), @@ -498,7 +498,7 @@ translations: t: Du kan lære mer om [fjorårets undersøkelse her](https://2021.stateofjs.com/en-US/about/). # - key: faq.survey_design_js2022 - # t: Hvordan var undersøkelsen satt opp? + # t: Hvordan ble undersøkelsen utformet? # - key: faq.survey_design_css2022.description # t: This year, thanks to a grant from Google's [UI Fund](https://web.dev/ui-fund/), [Lea Verou](https://lea.verou.me/) was able to take the lead and managed the [open survey design process](https://github.com/orgs/Devographics/projects/1/views/1) on GitHub. @@ -546,7 +546,7 @@ translations: t: Du kan lære mer om denne undersøkelsen på [vår annonseringspost](https://lea.verou.me/blog/2023/design-state-of-html/). - key: faq.survey_design_html2023 - t: Hvordan var undersøkelsen satt opp? + t: Hvordan ble undersøkelsen utformet? - key: faq.survey_design_html2023.description t: > Undersøkelsen ble utformet av [Lea Verou](https://lea.verou.me), med innspill fra nettleserleverandører samt grupper som [WebDX Community Group](https://www.w3.org/community/webdx/). @@ -589,7 +589,7 @@ translations: t: Du kan lære mer om denne undersøkelsen på [vår annonseringspost](https://dev.to/sachagreif/announcing-the-first-ever-state-of-react-survey-3k6b). - key: faq.survey_design_react2023 - t: Hvordan var undersøkelsen satt opp? + t: Hvordan ble undersøkelsen utformet? - key: faq.survey_design_react2023.description t: > Undersøkelsen ble utformet med innspill fra fellesskapet gjennom en [åpen tråd for tilbakemelding](https://github.com/Devographics/surveys/issues/85). @@ -645,7 +645,7 @@ translations: t: Du kan lære mer om denne undersøkelsen på [vår annonseringspost](https://dev.to/sachagreif/the-state-of-js-2023-survey-is-now-open-2hah). - key: faq.survey_design_js2023 - t: Hvordan var undersøkelsen satt opp? + t: Hvordan ble undersøkelsen utformet? - key: faq.survey_design_js2023.description t: > Undersøkelsen ble utformet med innspill fra fellesskapet gjennom en [åpen tråd for tilbakemelding](https://github.com/Devographics/surveys/issues/224).