state_of_css.yml

locale: ua-UA
namespace: css
translations:
  ###########################################################################
  # General
  ###########################################################################

  - key: general.state_of_css.intro
    t: >
      CSS розвивається швидше, ніж будь-коли.


      Флексбокси, гріди, мультиколонки... Не кажучи вже про абсолютно нові парадигми, такі як CSS-in-JS.


      Після успішного проведення щорічного опитування "State of JavaScript"
      ми вирішили увійти в світ стилів і селекторів. Ми сподіваємося з вашою допомогою
      визначити актуальні тенденції, а також з'ясувати, що слід вивчати і використовувати в майбутньому!

  - key: general.results.description
    t: Щорічне опитування про останні тенденції в CSS.

  ###########################################################################
  # Sections
  ###########################################################################

  - key: sections.layout.title
    t: Розкладка
  - key: sections.layout.description
    t: Як ви маєте в своєму розпорядженні елементи на сторінці?

  - key: sections.shapes_graphics.title
    t: Фігури і графічні об'єкти
  - key: sections.shapes_graphics.description
    t: Управління фігурами і відображення елементів.

  - key: sections.interactions.title
    t: Взаємодії
  - key: sections.interactions.description
    t: Контроль взаємодії користувача зі сторінкою.

  - key: sections.typography.title
    t: Типографія
  - key: sections.typography.description
    t: Параметри і форматування тексту.

  - key: sections.animations_transforms.title
    t: Анімації та трансформації
  - key: sections.animations_transforms.description
    t: Анімація і трансформація елементів.

  - key: sections.accessibility.title
    t: Доступність
  - key: sections.accessibility.description
    t: Можливості та техніки доступності.

  - key: sections.media_queries.title
    t: Медіавирази
  - key: sections.media_queries.description
    t: Способи адаптації сайту до пристрою користувача або його перевагам.

  - key: sections.other_features.title
    t: Інші можливості
  - key: sections.other_features.description
    t: Інші CSS-можливості.

  - key: sections.units_selectors.title
    t: Одиниці виміру та селектори
  - key: sections.units_selectors.description
    t: Перевірте свої знання одиниць виміру і селекторів CSS.

  - key: sections.colors.title
    t: Кольори
  - key: sections.colors.description
    t: Можливості, що пов'язані з кольорами.

  - key: sections.pre_post_processors.title
    t: Пре/Постпроцесори
  - key: sections.pre_post_processors.description
    t: Утиліти, що розширюють можливості CSS.

  - key: sections.pre_post_processors_others.title
    t: Інші пре/постпроцесори

  - key: sections.css_frameworks.title
    t: CSS-фреймворки
  - key: sections.css_frameworks.description
    t: Бібліотеки з готовими компонентами і стилями.

  - key: sections.css_frameworks_others.title
    t: Інші CSS-фреймворки

  - key: sections.css_methodologies.title
    t: CSS-методології
  - key: sections.css_methodologies.description
    t: Систематизовані способи написання чистого CSS-коду.

  - key: sections.css_methodologies_others.title
    t: Інші CSS-методології.

  - key: sections.css_in_js.title
    t: Підхід CSS-in-JS
  - key: sections.css_in_js.description
    t: Бібліотеки для написання CSS в JavaScript-коді.

  - key: sections.css_in_js_others.title
    t: Інші бібліотеки CSS-in-JS.

  - key: sections.tools_others.title
    t: Інші інструменти
  - key: sections.tools_others.description
    t: Інші інструменти

  - key: sections.environments.title
    t: Оточення
  - key: sections.environments.description
    t: Для яких оточень ви пишете CSS?

  - key: sections.awards.title
    t: Нагороди
  - key: sections.awards.description
    t: Що привернуло більшу увагу в цьому році.

  ###########################################################################
  # Options
  ###########################################################################

  # CSS for print
  - key: options.css_for_print.0
    t: Я (майже) ніколи не пишу стилі для друку
  - key: options.css_for_print.0.short
    t: Ніколи

  - key: options.css_for_print.1
    t: Іноді я пишу стилі для друку
  - key: options.css_for_print.1.short
    t: Ніколи

  - key: options.css_for_print.2
    t: Пишу стилі для друку в більшості проектах
  - key: options.css_for_print.2.short
    t: Часто

  - key: options.css_for_print.3
    t: Приділяю особливу увагу CSS для друку
  - key: options.css_for_print.3.short
    t: В основному завжди

  # CSS for email
  - key: options.css_for_email.0
    t: Я (майже) ніколи не пишу стилі для поштових клієнтів
  - key: options.css_for_email.0.short
    t: Ніколи

  - key: options.css_for_email.1
    t: Іноді я пишу стилі для поштових клієнтів
  - key: options.css_for_email.1.short
    t: Ніколи

  - key: options.css_for_email.2
    t: Пишу стилі для поштових клієнтів в більшості проектах
  - key: options.css_for_email.2.short
    t: Часто

  - key: options.css_for_email.3
    t: Приділяю особливу увагу CSS для поштових клієнтів
  - key: options.css_for_email.3.short
    t: В основному завжди

  ###########################################################################
  # Features
  ###########################################################################

  # layout

  - key: features.grid
    t: Ґрід CSS (СSS Grid)
  - key: features.subgrid
    t: Сабґрід (Subgrid)
  - key: features.regions
    t: CSS-області (CSS Regions)
  - key: features.flexbox
    t: Флексбокс
  - key: features.multi_column
    t: Мультиколонки CSS
  - key: features.writing_modes
    t: Режими листа CSS
  - key: features.exclusions
    t: CSS-виключення
  - key: features.position_sticky
    t: "<code>position: sticky</code>"
  - key: features.logical_properties
    t: Логічні властивості
  - key: features.logical_properties.description
    t: <code>margin-block-start</code>, <code>padding-inline-end</code> і т.д.
  - key: features.aspect_ratio
    t: <code>aspect-ratio</code>
  - key: features.content_visibility
    t: <code>content-visibility</code>

  # shapes & graphics
  - key: features.shapes
    t: CSS-фігури (CSS Shapes)
  - key: features.object_fit
    t: <code>object-fit</code>
  - key: features.clip_path
    t: <code>clip-path</code>
  - key: features.masks
    t: CSS-маски
  - key: features.blend_modes
    t: Режими змішування (Blend Modes)
  - key: features.blend_modes.description
    t: Властивість <code>mix-blend-mode</code>
  - key: features.filter_effects
    t: CSS-фільтри
  - key: features.backdrop_filter
    t: <code>backdrop-filter</code>

  # interactions
  - key: features.scroll_snap
    t: Прив'язка прокрутки в CSS (Scroll Snap)
  - key: features.overscroll_behavior
    t: <code>overscroll-behavior</code>
  - key: features.overflow_anchor
    t: <code>overflow-anchor</code>
  - key: features.touch_action
    t: <code>touch-action</code>
  - key: features.pointer_events
    t: <code>pointer-events</code>

  # typography
  - key: features.web_fonts
    t: Веб-шрифти (@font-face)
  - key: features.variables_fonts
    t: Варіативні шрифти
  - key: features.line_breaking
    t: Властивості перенесення рядків
  - key: features.line_breaking.description
    t: <code>overflow-wrap</code>, <code>word-break</code>, <code>line-break</code>, <code>hyphens</code>
  - key: features.font_variant
    t: <code>font-variant-*</code>
  - key: features.initial_letter
    t: <code>initial-letter</code>
  - key: features.font_variant_numeric
    t: <code>font-variant-numeric</code>
  - key: features.font_display
    t: <code>font-display</code>
  - key: features.line_clamp
    t: <code>line-clamp</code>
  - key: features.leading_trim
    t: <code>leading-trim</code>
  - key: features.direction
    t: <code>direction</code>
  - key: features.direction.description
    t: Включаючи також HTML-атрибут <code>dir</code>.

  # animations & transforms
  - key: features.transitions
    t: CSS-переходи
  - key: features.transforms
    t: CSS-трансформації
  - key: features.animations
    t: CSS-анімації
  - key: features.perspective
    t: <code>perspective</code>

  # media queries
  - key: features.feature_support_queries
    t: Перевірка CSS-можливості (<code>@supports</code>)
  - key: features.prefers_reduced_motion
    t: <code>prefers-reduced-motion</code>
  - key: features.prefers_color_scheme
    t: <code>prefers-color-scheme</code>
  - key: features.color_gamut
    t: <code>color-gamut</code>

  # other features
  - key: features.variables
    t: CSS-змінні (кастомні властивості)
  - key: features.containment
    t: CSS-ізоляція (CSS Containment)
  - key: features.will_change
    t: <code>will-change</code>
  - key: features.calc
    t: <code>calc()</code>
  - key: features.houdini
    t: Houdini
  - key: features.comparison_functions
    t: Функції порівняння CSS
  - key: features.comparison_functions.description
    t: <code>min()</code>, <code>max()</code> и <code>clamp()</code>

  # knowledge score
  - key: features.knowledge_score
    t: Оцінка знань
  - key: features.knowledge_score.description
    t: Скільки CSS-можливостей знали учасники опитування?

  ###########################################################################
  # Units & Selectors
  ###########################################################################

  # units & selectors
  - key: features_others.units
    t: Одиниці виміру
  - key: features_others.units.description
    t: Які з цих одиниць виміру CSS ви використовували?

  - key: options.units.px
    t: px
  - key: options.units.pt
    t: pt
  - key: options.units.percent
    t: "%"
  - key: options.units.em
    t: em
  - key: options.units.rem
    t: rem
  - key: options.units.vh_vw
    t: vh, vw
  - key: options.units.vmin_vmax
    t: vmin, vmax
  - key: options.units.ch
    t: ch
  - key: options.units.ex
    t: ex
  - key: options.units.mm
    t: mm
  - key: options.units.cm
    t: cm
  - key: options.units.in
    t: in

  - key: features_others.pseudo_elements
    t: Псевдоелементи
  - key: features_others.pseudo_elements.description
    t: Які з цих CSS-псевдоелементів ви використовували?

  - key: options.pseudo_elements.before
    t: "::before"
  - key: options.pseudo_elements.after
    t: "::after"
  - key: options.pseudo_elements.first_line
    t: "::first-line"
  - key: options.pseudo_elements.first_letter
    t: "::first-letter"
  - key: options.pseudo_elements.selection
    t: "::selection"
  - key: options.pseudo_elements.placeholder
    t: "::placeholder"
  - key: options.pseudo_elements.marker
    t: "::marker"
  - key: options.pseudo_elements.backdrop
    t: "::backdrop"

  - key: features_others.combinators
    t: Комбінатори
  - key: features_others.combinators.description
    t: Які з цих CSS-комбінаторів ви використовували?

  - key: options.combinators.descendant
    t: div span (комбінатор нащадка)
  - key: options.combinators.child
    t: div > span (комбінатор безпосереднього потомка)
  - key: options.combinators.next_sibling
    t: div + div (комбінатор безпосереднього сусідства)
  - key: options.combinators.subsequent_sibling
    t: div ~ div (комбінатор сусідства)

  - key: features_others.tree_document_structure
    t: Структура дерева/документа
  - key: features_others.tree_document_structure.description
    t: Які з цих CSS-селекторів, пов'язаних зі структурою документа, ви використовували?

  - key: options.tree_document_structure.root
    t: :root
  - key: options.tree_document_structure.empty
    t: :empty
  - key: options.tree_document_structure.not
    t: :not()
  - key: options.tree_document_structure.nth_child
    t: :nth-child()
  - key: options.tree_document_structure.nth_last_child
    t: :nth-last-child()
  - key: options.tree_document_structure.first_child
    t: :first-child
  - key: options.tree_document_structure.last_child
    t: :last-child
  - key: options.tree_document_structure.only_child
    t: :only-child
  - key: options.tree_document_structure.nth_of_type
    t: :nth-of-type()
  - key: options.tree_document_structure.nth_last_of_type
    t: :nth-last-of-type()
  - key: options.tree_document_structure.first_of_type
    t: :first-of-type
  - key: options.tree_document_structure.last_of_type
    t: :last-of-type
  - key: options.tree_document_structure.only_of_type
    t: :only-of-type
  - key: options.tree_document_structure.lang
    t: :lang()
  - key: options.tree_document_structure.is
    t: :is()
  - key: options.tree_document_structure.where
    t: :where()
  - key: options.tree_document_structure.has
    t: :has()

  - key: features_others.attributes
    t: Атрибути
  - key: features_others.attributes.description
    t: Які з цих CSS-селекторів атрибутів ви використовували?

  - key: options.attributes.presence
    t: div[foo] (має певний атрибут)
  - key: options.attributes.equality
    t: div[foo="bar"] (має певний атрибут зі значенням)
  - key: options.attributes.starts_with
    t: div[foo^="bar"] (починається з)
  - key: options.attributes.ends_with
    t: div[foo$="bar"] (закінчується на)
  - key: options.attributes.contains_word
    t: div[foo~="bar"] (містить певний набір слів)
  - key: options.attributes.contains_substring
    t: div[foo*="bar"] (містить певний підрядок)

  - key: features_others.links_urls
    t: Посилання/URL-адреси
  - key: features_others.links_urls.description
    t: Які з цих CSS-селекторів псевдокласів, пов'язаних з посиланнями, ви використовували?

  - key: options.links_urls.any_link
    t: :any-link
  - key: options.links_urls.link_visited
    t: :link и :visited
  - key: options.links_urls.local_link
    t: :local-link
  - key: options.links_urls.target
    t: :target

  - key: features_others.interaction
    t: Взаємодія
  - key: features_others.interaction.description
    t: Які з цих CSS-селекторів взаємодії ви використовували?

  - key: options.interaction.hover
    t: :hover
  - key: options.interaction.active
    t: :active
  - key: options.interaction.focus
    t: :focus
  - key: options.interaction.focus_within
    t: :focus-within
  - key: options.interaction.focus_visible
    t: :focus-visible

  - key: features_others.form_controls
    t: Управління полями форми
  - key: features_others.form_controls.description
    t: Які з цих CSS-селекторів форми ви використовували?

  - key: options.form_controls.enabled_disabled
    t: :enabled и :disabled
  - key: options.form_controls.read_only_write
    t: :read-only и :read-write
  - key: options.form_controls.placeholder_shown
    t: :placeholder-shown
  - key: options.form_controls.default
    t: :default
  - key: options.form_controls.checked
    t: :checked
  - key: options.form_controls.indeterminate
    t: :indeterminate
  - key: options.form_controls.valid_invalid
    t: :valid и :invalid
  - key: options.form_controls.user_invalid
    t: :user-invalid
  - key: options.form_controls.in_out_range
    t: :in-range и :out-of-range
  - key: options.form_controls.required_optional
    t: :required и :optional

  ###########################################################################
  # Tools
  ###########################################################################

  - key: tools.atomiccss
    t: Підхід Utility-First/Atomic CSS

  ###########################################################################
  # Environments
  ###########################################################################

  - key: environments.browsers
    t: Браузери
  - key: environments.browsers.description
    t: В яких браузерах ви тестуєте?

  - key: environments.form_factors
    t: Форм-фактори
  - key: environments.form_factors.description
    t: Які розміри (форм-фактори) ви перевіряєте?

  - key: environments.css_for_print
    t: CSS для друку
  - key: environments.css_for_print.description
    t: Ви пишете стилі для друку?

  - key: environments.css_for_email
    t: CSS для поштових клієнтів
  - key: environments.css_for_email.description
    t: Ви пишете CSS-стилі для поштових клієнтів?

  - key: charts.axis_legends.css_for_print
    t: Періодичність
  - key: charts.axis_legends.css_for_email
    t: Періодичність

  ###########################################################################
  # Opinions
  ###########################################################################

  - key: opinions.css_easy_to_learn
    t: CSS легко вивчити
  - key: opinions.css_easy_to_learn.title
    t: Крива навчання

  - key: opinions.css_evolving_slowly
    t: CSS розвивається надто повільно
  - key: opinions.css_evolving_slowly.title
    t: Темп зміни

  - key: opinions.utility_classes_to_be_avoided
    t: Слід уникати допоміжних (несемантичних) класів (.center, .large-text і т.д.)
  - key: opinions.utility_classes_to_be_avoided.title
    t: Несемантичні класи

  - key: opinions.selector_nesting_to_be_avoided
    t: Слід уникати вкладених селекторів (.foo .bar ul li {...})
  - key: opinions.selector_nesting_to_be_avoided.title
    t: Вкладені селектори

  - key: opinions.css_is_programming_language
    t: CSS - це мова програмування
  - key: opinions.css_is_programming_language.title
    t: Мова програмування

  - key: opinions.enjoy_writing_css
    t: Мені подобається писати CSS
  - key: opinions.enjoy_writing_css.title
    t: Задоволення

  - key: opinions_others.css_missing_features.others
    t: Чого вам не вистачає в CSS?
  - key: opinions_others.css_missing_features.others.description
    t: Можливості, які ви хотіли б бачити в CSS.
  - key: opinions_others.css_missing_features.others.note
    t: >
      Ці дані були нормалізовані на основі відповідей у вільній формі.
      Подивитися оригінальні відповіді можна на сайті [whatsmissingfromcss.com](http://whatsmissingfromcss.com/).

  - key: opinions.sum_up_one_word_css
    t: CSS одним словом
  - key: opinions.sum_up_one_word_css.description
    t: Як ви б висловили свою думку про CSS одним словом?

  - key: happiness.state_of_the_web
    t: Наскільки ви задоволені поточним станом веб-технологій?

  - key: happiness.state_of_css
    t: Наскільки ви задоволені поточним станом CSS?