css2025.yml

locale: ua-UA
translations:
  - key: general.css2025.html2025_banner
    t: |
      Пройдіть опитування про стан HTML та допоможіть сформувати майбутнє вебу! →

  - key: general.css2025.survey_intro
    t: |

      У мене є лише один пункт у списку побажань до CSS на 2025 рік — повільніший темп!

      Після років стрімких нововведень, здається, розробникам браузерів варто ненадовго зупинитися: узгодити стандарти, виправити несумісності між браузерами і дати решті з нас змогу наздогнати.

      Все ж таки ми, мабуть, чули про вкладену сітку, :has() та анімації, керовані гортанням, а також про інші покращення CSS — але скільки з нас їх направду використовували, не кажучи вже про досконале опанування?

      Ось чому це опитування буде дуже цікавим. Це шанс побачити, які з нових CSS-функцій останніх років уже були прийняті спільнотою, а які — все ще у нашому списку "на потім".

      Тож ще раз, будь ласка, приєднуйтеся до цьогорічного "Стану CSS"!

  - key: introduction.css2025
    t: |
      <span class="first-letter">Я</span>к не пробачити повільне впровадження всіх цих новомодних функцій CSS. Зрештою, чи справді вони нам потрібні? А якщо потрібні, то чи працюють вони надійно в різних браузерах? 


      Але оскільки індикатори бази сумісності один за одним стають зеленими, а вдоволення від нових функцій і властивостей залишається високим, навіть найбільш неохочі з нас, здається, змушені визнати, що певні функції, як-от `:has()`, `aspect-ratio` та каскадні шари, виправдали своє місце в наших таблицях стилів. 


      Єдине питання — *коли*. Занадто рано, і ви зіткнетеся з проблемними моментами раннього впровадження. Занадто пізно, і ви пропустите покращення, які зекономлять час. 


      На щастя, наразі є надійна екосистема інструментів та джерел, присвячених відповіді на це питання, починаючи з цього ж опитування! 


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

  ###########################################################################
  # Charts
  ###########################################################################

  - key: features.features_intro_css2025
    aliasFor: features.features_intro_css2024

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

  - key: sections.user_info.description.css2025
    t: |
      Цього року в опитуванні взяли участь **5506** розробників з усього світу.

  - key: sections.features.description.css2025
    t: |
      Не секрет, що CSS додає нові функції з рекордною швидкістю, тому цього року ми запитали про щонайменше *50* із них!

  - key: sections.tools.css2025
    t: Бібліотеки й інструменти

  - key: sections.tools.description.css2025
    t: |
      Незважаючи на численні можливості, відкриті новими функціями CSS, розробники досі покладаються на певний інструментарій та бібліотеки для підтримання свого робочого процесу — принаймні поки що.

  - key: sections.usage.description.css2025
    t: |
      Незалежно від того, як ви використовуєте CSS, все ще проблемно переконатися у працездатності коду в усіх браузерах — особливо для нових функцій, як-от `:has()`.

  - key: sections.resources.description.css2025
    t: |
      Будьте певні: з огляду на кількість нових функцій CSS, які безупинно з'являються, у нас найближчим часом не вичерпається матеріал для публікацій у блогах, подкастів, відео та курсів про СSS!

  ###########################################################################
  # Takeaways
  ###########################################################################

  # - key: user_info.country.takeaway.css2025
  #   t: >
  #     The survey remains U.S.-centric, but European countries continue

  - key: features.all_features.takeaway.css2025
    t: >
      Серед усіх функцій в опитуванні `:has()` є і найуживанішою, і найбільш улюбленою. Також варто відзначити: вкладена сітка посіла друге місце в рейтингу найулюбленіших функцій, тимчасом як `aspect-ratio` є другим за використанням і третім за ставленням користувачів. 


      Одразу після **вкладеної сітки** найбільше коментарів отримав `line-clamp` — і багато з них від респондентів із негативним ставленням до нього. 


      Найменш використовуваними виявилися `sibling-count` та `sibling-index`, що логічно, адже їхнє підтримання браузерами недавнє й обмежене. А найменш улюбленими загалом стали **тригонометричні функції**… без сумніву, через слово "тригонометрія"! 


      Нарешті, обов'язково застосуйте фільтр **Статус бази сумісності: "Широко доступно"**, щоб дізнатися, які функції можна використати вже сьогодні!

  - key: features.features_ratios_over_time.takeaway.css2025
    t: >
      Якщо подивитися на тенденції з часом і в контексті, вимальовується доволі цікава картина. Функцією з найбільшим приростом використання за рік стала `text-wrap: pretty`, а з найбільшим зростанням *впізнаваності* — `light-dark()`. 


      Зі свого боку **колірні функції** вирізняються тим, що займають нижні позиції за використанням, що може означати, що вони ще не знайшли свою аудиторію. 


      Нарешті, вкладка "Схвалення" дає змогу побачити різницю у позитивному сприйнятті між тими, хто цікавився функцією, і тими, хто направду її використовував. Наприклад, **якірне позиціонування** демонструє падіння до **-12%**, що може означати, що API є менш зручним, ніж очікувалося.

  - key: features.layout_pain_points.takeaway.css2025
    t: >
      Хоч **сітка** є безсумнівно потужною, ця потужність супроводжується стрімкою кривою навчання, яка може перетворити використання цієї комплексної функції на справжню проблему. 


      Далі в рейтингу — робота з висотою, переповненням, позиціонуванням і вирівнюванням, які досі є поширеними викликами для CSS-розробників.

  - key: features.shapes_graphics_pain_points.takeaway.css2025
    t: >
      Тепер, коли більш-менш освоїли прямокутники, ми почали звертати увагу на ширший світ трикутників, кіл і багатокутників. На жаль, малювання цих **складних фігур** досі залишається непростим завданням у разі використання самого лиш CSS. 


      Тому багато хто з нас вдається до **SVG** —  утім він теж не без перешкод.

  - key: features.colors_pain_points.takeaway.css2025
    t: >
      Багато респондентів хотіли б, щоб CSS вийшов за межі дихотомії світлого/темного режимів і надав більше інструментів для повноцінного управління темами, а також краще забезпечував належний **контраст** під час вибору кольорів. 


      І хоч нові колірні простори, як-от `oklch()`, справді дивовижні, вони тако само мають свої проблеми.

  - key: features.interactions_pain_points.takeaway.css2025
    t: >
      Поки багато хто з нас чекає на краще підтримання **анімацій, керованих гортанням**, інші звертають увагу на потенційні **проблеми доступності** нових шаблонів взаємодії, наприклад, **каруселей**. 


      Ще однією поширеною проблемою була складність "анімування до `auto`", що, на щастя, [тепер можливо](https://developer.chrome.com/docs/css-ui/animate-to-height-auto)!

  - key: features.typography_pain_points.takeaway.css2025
    t: >
      Керування вертикальним вирівнюванням тексту (відомим як **leading**) у браузері було проблемою стільки, скільки я пам'ятаю. На щастя, `text-box-edge` і `text-box-trim` обіцяють дати нам більш гнучкі інструменти для якісної роботи з типографікою онлайн.

  - key: features.math_features_pain_points.takeaway.css2025
    t: >
      Багато респондентів висловлювали претензії до `calc()`, особливо щодо роботи з одиницями вимірювання в обчисленнях.

  - key: features.other_features_pain_points.takeaway.css2025
    t: >
      Без сюрпризів, та **підтримання браузерами** залишається головною проблемою для CSS-функцій, згаданих у цьому розділі.

  - key: features.reading_list.takeaway.css2025
    t: >
      Маловідомий `::target-text` (про нього не чули 82% респондентів) очолив рейтинг доданого до списку читання — функцій, про які хотіли дізнатись більше.

  # other_tools

  - key: tools.css_frameworks.takeaway.css2025
    t: >
      Tailwind очолює рейтинг фреймворків і, здається, більше подобається менш досвідченим розробникам (медіанний досвід — 10 років), тимчасом як більш досвідчені респонденти використовують власні або внутрішні фреймворки (медіанний досвід — 15 років). 


      Водночас варто зазначити, що **47%** учасників опитування або взагалі не використовують фреймворк, або пропустили це питання.

  - key: tools.css_in_js.takeaway.css2025
    t: >
      **CSS Modules** зі своїм досить легким підходом залишаються популярними, тоді як **Styled Components** досі утримують друге місце.

  - key: tools.pre_post_processors.takeaway.css2025
    t: >
      **Sass** усе ще на першому місці, але загальне використання препроцесорів поступово зменшується, адже сам CSS переймає дедалі більше їхніх функцій.

  - key: tools.utilities.takeaway.css2025
    t: >
      **Prettier** — перевірений вибір для будь-якого розробника, але дещо нижче є багато менш відомих інструментів, які теж варто спробувати.

  - key: tools.browsers.takeaway.css2025
    t: >
      Коли йдеться про браузери, недаремно є поняття "велика четвірка", а показники їхнього використання майже не змінилися, як порівняти з минулим роком.

  # usage

  - key: usage.form_factors.takeaway.css2025
    t: >
      Хоч середовища тестування не демонструють значних змін за рік, обнадійливо бачити невелике зростання кількості респондентів, які тестують за допомогою лише клавіатури чи екранних зчитувальних пристроїв (screen readers). 


      Також варто зазначити, що як порівняти з розміром компанії, то тестувати за допомогою екранних зчитувальних пристроїв частіше схильні великі компанії.

  - key: usage.what_do_you_use_css_for.takeaway.css2025
    t: >
      CSS починав свій шлях як система для компонування та розмітки документів, але тепер цілком очевидно, що інтерактивні застосунки є його основним варіантом використання — факт, який безперечно впливає на еволюцію мови останнім часом.

  - key: usage.industry_sector.takeaway.css2025
    t: >
      Багато з нас створюють інструменти, призначені для подальшого використання всередині спільноти розробників, що значно полегшує впровадження нових функцій без надмірних хвилювань щодо сумісності між браузерами.

  - key: usage.css_interoperability_features.takeaway.css2025
    t: >
      **Якірне позиціонування** не тільки зберегло свою першу позицію, а й майже подвоїло відсоток респондентів, які зазначили його у відповідях. 


      Також **View Transition API** піднялося на третє місце, тоді як **контейнерні запити за стилями** піднялися на шалені **11 позицій** у рейтингу. 


      З іншого боку, **вкладеність CSS** і `:has()` втратили позиції, що логічно, адже ці функції тепер підтримуються всіма основними браузерами.

  - key: usage.css_missing_features.takeaway.css2025
    t: >
      **Домішки (mixins)** досі залишаються найбажанішою функцією серед розробників, а одразу за ними — **компонування masonry**. Обидві можна реалізувати іншими способами, як-от через препроцесори або JavaScript, проте було б чудово побачити їхнє нативне підтримання у CSS!

  - key: usage.css_general_pain_points.takeaway.css2025
    t: >
      **Підтримання браузерами** досі основна проблема CSS у 2025 році, проте той факт, що лише відносно невеликі 10% респондентів її згадали, свідчить про нещодавні покращення у цій сфері.

  - key: usage.favorite_new_features.takeaway.css2025
    t: >
      Хоч `:has()` усе ще на першому місці, він дещо втратив позиції, тоді як **View Transition API** і особливо **якірне позиціонування** (який піднявся на 8 позицій) почали ширше впроваджуватися.

  - key: usage.gamechanger_feature.takeaway.css2025
    t: >
      Кожна нова функція CSS має своє призначення, але лише деякі з них справді змінюють правила гри. Виявилося, що **сітка**, `:has()` і **вкладеність CSS** найбільше вплинули на те, як ми пишемо CSS останніми роками.

  - key: usage.baseline_awareness.takeaway.css2025
    t: >
      Ми хотіли дізнатися, наскільки респонденти знайомі з індикатором бази (Baseline) сумісності браузерів (який ви можете бачити в усіх цих результатах опитування!). 


      Попри наші хитрі фейкові варіанти відповідей, переважна більшість із вас успішно впоралась із запитанням! Зокрема молодші респонденти продемонстрували вищу обізнаність щодо бази сумісності, без сумніву, завдяки нещодавній інтеграції Baseline у Fortnite (…жартуємо).

  - key: usage.css_pace_of_change.takeaway.css2025
    t: >
      Прийняття нової функції зазвичай є багатоступеневим процесом: спершу ви кілька разів чуєте про неї протягом місяців чи років, доки не сформуєте чітке уявлення про її призначення. Потім ви можете спробувати її в експериментальному побічному проєкті, перш ніж нарешті впровадити для широкого загалу. 


      Ця діаграма показує, що більшість із нас наразі перебуває саме посередині цього шляху — дізналися і випробували лише частину функцій, представлених у цьому опитуванні.

  - key: usage.state_of_the_web_happiness.takeaway.css2025
    t: >
      Рівень задоволеності вебом загалом залишався доволі стабільним протягом останніх років, без суттєвих коливань.

  - key: usage.state_of_css_happiness.takeaway.css2025
    t: >
      Натомість рівень задоволеності саме CSS демонструє чітку тенденцію до зростання останніми роками, що добре корелює з високими темпами розвитку цієї мови.

  # resources
  - key: resources.podcasts.takeaway.css2025
    t: >
      **Syntax** досі домінує у світі подкастів і навіть зумів додати чималу слухацьку аудиторію — **+8%**! 


      Почесні згадки отримують **подкаст від Kevin Powell** та **Podrocket** — обидва піднялися на 4 позиції.

  - key: resources.video_creators.takeaway.css2025
    t: >
      **Kevin Powell** викарбував нішу короля CSS на YouTube, але творці з більш загальним фокусом, як-от **Theo** та **The Primeagen**, теж намагаються не відставати. 


      **Syntax** успішно продовжує перехід у відеоформат, додавши **5%** та **5 позицій** за рік.

  - key: resources.people.takeaway.css2025
    t: >
      **Josh**, **Kevin**, **Adam** та **Una** продовжують очолювати рейтинги впливових діячів у сфері CSS — про це свідчить навіть той факт, що ви й так знали, про кого я, хоч і не вказав їхніх прізвищ.

  - key: resources.web_platform_resources.takeaway.css2025
    t: >
      **MDN** — чудове безкоштовне джерело для вивчення CSS, але аж ніяк не єдине, що видно з цього короткого списку корисних посилань.

  - key: resources.other_surveys.takeaway.css2025
    t: >
      Хоч респонденти здебільшого беруть участь і в інших опитуваннях нашого формату "State of", а також в опитуванні **Stack Overflow**, варто знати й про **JetBrains Developer Ecosystem Survey**.

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

  - key: award.most_used_feature_award.comment
    t: |
      `:has()` було широко впроваджено спільнотою — його використали {value}!

  - key: award.least_used_feature_award.comment
    t: |
      Лише {value} використання — і `sibling-count` досі далекий від мейнстриму.

  - key: award.most_loved_feature_award.comment
    t: |
      Оскільки {value} респондентів мають позитивне ставлення до `:has()`, він посідає перше місце в нашому рейтингу.

  - key: award.most_hated_feature_award.comment
    t: |
      Лише {value} респондентів справді ненавидять тригонометрію, але цього досить, щоб **тригонометричні функції** опинилися на самому дні рейтингу тих, хто подобається :(

  - key: award.largest_awareness_progression_award.comment
    t: |
      Як порівняти з минулим роком, іще {value} респондентів більше не блукають у темряві щодо `light-dark()`!

  - key: award.largest_usage_progression_award.comment
    t: |
      Використання зросло на {value}: `text-wrap: pretty` демонструє дуже гарні результати!

  - key: award.most_commented_feature_award.comment
    t: |
      **Вкладена сітка (Subgrid)** отримала понад {value} коментарів — частково тому, що вона була на початку опитування, але також і через те, що це направду варта схвалення функція!

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

  - key: faq.how_long_will_survey_take_css2025
    aliasFor: faq.how_long_will_survey_take_css2024
  - key: faq.how_long_will_survey_take_css2025.description
    aliasFor: faq.how_long_will_survey_take_css2024.description

  - key: faq.learn_more_css2025
    t: Де я можу дізнатися більше?
  - key: faq.learn_more_css2025.description
    t: Ви можете дізнатися більше про це опитування у [нашому анонсі](https://dev.to/sachagreif/the-2024-state-of-css-survey-is-now-open-4o5h).

  - key: faq.survey_design_css2025
    t: Як було розроблено це опитування?
  - key: faq.survey_design_css2025.description
    t: >
      Опитування було розроблено унаслідок [відкритого процесу розробки](https://github.com/Devographics/surveys/issues/289) із залученням постачальників браузерів і спільноти веброзробки.

  - key: faq.results_released_css2025
    t: Коли будуть опубліковані результати?
  - key: faq.results_released_css2025.description
    t: Опитування триватиме із 1 червня до 1 липня 2025 року, і його результати будуть опубліковані незабаром після завершення.

  - key: about.content.css2025
    t: >
      Опитування "Cтан CSS 2025" тривало із 1 червня до 15 липня 2025 року та зібрало 5506 відповідей. Опитування проводив [Devographics](https://www.devographics.com/) із допомогою команди консультантів та учасників проєктів із відкритим програмним кодом. 


      Логотип і футболку "Стан CSS" розробив та анімував [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). 


      ### Цілі опитування 

      Це опитування було створено для визначення майбутніх тенденцій в екосистемі веброзробки, щоб допомогти розробникам здійснити вибір з-поміж наявних технологій. 


      Так опитування зосереджено більше на передбаченні того, що станеться протягом наступних кількох років, ніж на аналізі того, що популярно саме зараз, — ось чому деякі функції чи технології іноді можуть не згадуватися попри широке впровадження. 


      Постачальники браузерів також використовують ці дані, щоб визначати пріоритетні напрями діяльності та узасаднювати ініціативи, як-от [Interop 2025](https://web.dev/blog/interop-2025). 


      ### Розробка опитування 

      Опитування було розроблено колегіально [на платформі GitHub](https://github.com/Devographics/surveys/issues/245). 

      ### Аудиторія опитування 

      Опитування було повністю відкрите та доступне онлайн, респонденти жодним чином не відфільтровувалися та не відбиралися. Респонденти складалися здебільшого з учасників минулих опитувань (сповіщених електронною поштою за спеціальним списком розсилання) та тих, хто прийшов через соціальні мережі. 

      ### Фінансування проєкту 

      Окрім як із продажу футболок, цей проєкт фінансується з різних джерел: 

      - Наш партнер [Frontend Masters](https://frontendmasters.com/) спонсорує опитування в обмін на розміщення відповідних посилань на їхні курси у нижній частині кожної сторінки. 

      - Цього року команда [Google Chrome](https://www.google.com/chrome/) виділила спонсорський бюджет, щоб допомогти розробити та провести опитування. 

      - [TokyoDev](https://www.tokyodev.com/) також регулярно спонсорує це опитування. 

      ### Технічний огляд 

      Більш детальний технічний огляд того, як проводяться опитування, [тут](https://dev.to/sachagreif/how-the-devographics-surveys-are-run-2023-edition-1p6a). Код проєкту є [відкритим](https://github.com/Devographics/Monorepo/). 

      ### Зворотний зв'язок 


      - [Повідомити про технічну проблему](https://github.com/Devographics/Monorepo/issues) 

      - [Додати пропозицію на наступний рік](https://github.com/Devographics/surveys/issues/249) 

      - [Інші нетехнічні проблеми](https://github.com/Devographics/surveys/issues) 

      - [Завітати у наш Discord-чат](https://discord.gg/tuWRUWVyJs) 

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

  - key: picks.my_pick.css2025
    t: "Мій вибір 2025: "
  - key: picks.intro
    t: Ми покликали спільноту CSS поділитися своїм "вибором року"

  # https://linear-easing-generator.netlify.app/
  - key: picks.josh_comeau.name
    t: |
      Генератор функції плавності `linear()`
  - key: picks.josh_comeau.bio
    t: Інді-розробник та освітній діяч
  - key: picks.josh_comeau.description
    t: |
      Функція плавності з часом `linear()` дуже швидко стала однією з моїх найулюбленіших сучасних функцій, а цей чудовий інструмент дає змогу легко й швидко генерувати "пружинки" (springs) у CSS із JS-логіки!

  # https://developer.mozilla.org/en-US/docs/Web/CSS/if
  - key: picks.ahmad_shadeed.name
    t: |
      `if()`
  - key: picks.ahmad_shadeed.bio
    t: Дизайн-інженер, автор [debuggingcss.com](https://debuggingcss.com)
  - key: picks.ahmad_shadeed.description
    t: |
      Разом із `:has()` і запитами за стилями, `if()` допоможе нам робити ще більше умовних речей у CSS.

  # https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap
  - key: picks.kilian_valkhof.name
    t: |
      `text-wrap: balance;`
  - key: picks.kilian_valkhof.bio
    t: Автор [Polypane](https://polypane.app/)
  - key: picks.kilian_valkhof.description
    t: |
      Не пам'ятаю, коли востаннє з'являлася нова властивість CSS, яку можна було просто додати в будь-який, навіть старий, файл стилю. Це маленький чарівний однорядковий запис, який робить ваші заголовки значно кращими без жодних побічних ефектів. Додайте його у свої `reset`-файли!

    # https://codepen.io/thebabydino/pen/LEExpVg
  - key: picks.ana_tudor.name
    t: Поєднання функцій
  - key: picks.ana_tudor.bio
    t: CSS Mad Scientist
  - key: picks.ana_tudor.description
    t: |
      Мій вибір — це не одна функція, що змінює все, а спосіб комбінувати кілька функцій разом. 

      Наприклад, вкладена сітка + новий `corner-shape` (або функція clip-path `shape()`) для отримання залежних від контенту форми з увігнутими заокругленнями, які не обов'язково мають бути круглими.

  # https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units/Using_CSS_math_functions
  - key: picks.amit_sheen.name
    t: Математичні функції в CSS
  - key: picks.amit_sheen.bio
    t: Веброзробник та креативний програміст
  - key: picks.amit_sheen.description
    t: |
      Математика — це мова Всесвіту, самого життя, і без неї ми не могли б нічого описати, виміряти чи збудувати чітко й зрозуміло. 

      Тож той факт, що тепер ми можемо використовувати ці функції нативно в CSS, лише розширює наші можливості та відкриває цілий світ нових рішень.

  # https://miocene.io/
  - key: picks.sacha_greif.name
    t: Julia Miocene
  - key: picks.sacha_greif.bio
    t: Мейнтейнер State of CSS
  - key: picks.sacha_greif.description
    t: |
      Коли днями налагоджуєш верстку чи додаєш стилі до форм, легко забути, що програмування клієнтської частини може просто приносити задоволення. Дивовижна робота від Julia нагадує про радість і креативність, які можна знайти в CSS, — якщо лише виокремити на це час.

  # https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API
  - key: picks.julia_miocene.name
    t: View Transition API
  - key: picks.julia_miocene.bio
    t: Дизайнерка продукту, UX-інженерка, аніматорка "чистим" CSS
  - key: picks.julia_miocene.description
    t: |
      Мій вибір року — View Transition API. Воно допомогло мені позбутися JS-коду та складних анімаційних трюків. Тепер я можу анімувати згенерований контент і взаємодії користувача з легкістю ✨

  # https://modern-fluid-typography.vercel.app/
  - key: picks.ana_rodrigues.name
    t: |
      Генератори кеглю шрифтів із clamp
  - key: picks.ana_rodrigues.bio
    t: Розробниця клієнтської частини в [Hactar.is](https://hactar.is/)
  - key: picks.ana_rodrigues.description
    t: |
      Мій вибір року — це всі генератори кеглю шрифтів із clamp, які створюють і поширюють люди. Чудово, що вони всі настільки різні, що годяться для різних стилів навчання. Особливо, якщо читання документації саме по собі не допомагає зрозуміти, як щось працює.

  # https://piccalil.li/blog/
  - key: picks.saron_yitbarek.name
    t: Picalilli
  - key: picks.saron_yitbarek.bio
    t: Євангелістка вебу в Apple
  - key: picks.saron_yitbarek.description
    t: |
      Я вже певний час спостерігаю за Piccalili й обожнюю те, що в них є безкоштовні технічні статті поряд із поглибленими платними курсами, тож ви можете обрати формат навчання, який вам більше до снаги. І як бізнес вони дуже уважно ставляться до вебспільноти й приймають етичні бізнес-рішення, що дають їм змогу робити чудову роботу без неприємного відчуття щодо способів заробітку.

  # https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark
  - key: picks.sara_joy.name
    t: |
      Функція `light-dark()`
  - key: picks.sara_joy.bio
    t: Розробниця клієнтської частини
  - key: picks.sara_joy.description
    t: |
      Коли починаєш використовувати `color-scheme` у CSS, застосування `light-dark()` для визначення кольорів залежно від світлого або темного режиму видається очевидним кроком. Наразі із задоволенням стежу за [цією гілкою обговорення](https://github.com/w3c/csswg-drafts/issues/10577) про те, яку ще логіку ми зможемо використовувати в майбутньому, щоб запитувати color-scheme і змінювати CSS умовно.

  - key: frontendmasters.learning_path
    t: |
      Ваш шлях до того, щоб стати старшим веброзробником

  - key: frontendmasters.learning_path.description
    t: |
      Хочете покращити свою кар'єру? Заглибтеся у JavaScript, React, швидкодію у вебі, CSS, розгортання вебсайтів, TypeScript та функціональне програмування, щоб перейти від молодшого до старшого рівня вже сьогодні.

  ###########################################################################
  # Figures
  ###########################################################################

  - key: figure.figure_has_usage.css2025
    t: Відсоток респондентів, які використовували `:has()`.

  - key: figure.figure_light_dark_awareness.css2025
    t: Приріст відсотка респондентів, які чули про `light-dark()`, за рік.

  - key: figure.figure_css_in_js.css2025
    t: Відсоток респондентів опитування, які використовують CSS-in-JS.

  - key: figure.figure_anchor_positioning.css2025
    t: Приріст відсотка респондентів, які хотіли б використовувати функцію якірного позиціонування, за рік.

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

  - key: conclusion.css2025.amit_sheen
    t: |

      <span class="first-line">Це вже не той CSS, який ми знали (і це добре).</span> 

      Після перегляду результатів опитування очевидно, що CSS вже не є мовою "лише" для додавання стилів. Він пережив фундаментальні зміни, узявши на себе значно більшу роль у створенні компонувань, анімацій, забезпеченні сумісності та, звісно ж, доступності. Ця зміна допомагає переосмислити ідентичність CSS — не як застарілої мови стилів, а як сучасного, виразного набору інструментів, який нарешті отримує заслужене визнання. 

      Також цей зсув змінив те, як ми пишемо CSS. Інтерактивні вебзастосунки витіснили статичні сторінки як основний варіант використання, нативні функції мови замінюють багато абстракцій фреймворків і препроцесорів, а ширше підтримання браузерами дало розробникам упевненість досліджувати нові можливості. Нарешті люди охочіше експериментують, тестуючи функції одразу після їхньої появи, адже вони вірять, що покращення стандартів й інструментів зробить упровадження більш плавним. 

      Ще одним символом цієї трансформації, на якому опитування не зосереджувалося, є оновлений логотип CSS. Для мене він означає початок нового етапу: мова відмовилася від цифри три на своєму значку і разом із нею — від прикутості до минулої версії. Натомість з'явився свіжий, сучасний знак, який демонструє упевненість і готовність рухатися до світлішого майбутнього. 

      Незважаючи на цей відчутний дух оновлення, опитування також нагадує, у чому CSS і досі поступається. Попри прогрес, багато респондентів досі зіштовхуються зі складнощами у створенні складних компонувань та високою швидкістю змін, і кажуть, що контроль висоти, переповнення та вирівнювання може бути доволі виснажливим і дратівливим. Є чіткий запит на певні функції, як-от домішки, компонування masonry та умовна логіка, які принесли б зручності препроцесорів безпосередньо в мову. І хоч різниця між браузерами вже не домінує у списку скарг, вона все ж не зникла повністю, тож роботи ще чимало. 

      Поряд із цими викликами опитування виділяє й деякі успіхи. Селектор `:has`, контейнерні запити та `subgrid` (вкладена сітка) перейшли зі списків бажаного до щоденного практикування, і респонденти називають їх одними з найулюбленіших функцій. Нові ініціативи, як-от індикатор Baseline (база сумісності) та проєкт Interop, підвищили впевненість у тому, що нові функції швидко дозріють, роблячи раннє впровадження менш ризикованим. Це зростання довіри до мови та її екосистеми пояснює, чому задоволення від роботи із CSS продовжує підніматися вгору, тоді як загальна задоволеність вебтехнологіями залишається стабільною. 

      Дивлячись уперед, цей момент радше відчувається як початок, а не як завершення. Опитування показує спільноту, готову приймати нові інструменти, яка прагне усунути наявні прогалини й упевнену, що мова продовжить еволюціонувати. Якщо ми збережемо цю допитливість і співпрацю, CSS і надалі розвиватиметься так, що сьогодні важко уявити, а наступне опитування продемонструє ще багатший ландшафт. 

      Якщо 2025 рік був про стабілізацію неможливого, то 2026 може стати роком втілення давніх мрій. Для тих, хто любить CSS, ніколи ще не було кращого часу для експериментів, навчання й участі у формуванні того, що буде далі.

  - key: conclusion.css2025.amit_sheen.bio
    t: Веброзробник та креативний програміст