diff --git a/files/uk/web/css/image/index.md b/files/uk/web/css/image/index.md index e82733f707..e91ed30550 100644 --- a/files/uk/web/css/image/index.md +++ b/files/uk/web/css/image/index.md @@ -13,19 +13,20 @@ browser-compat: css.types.image Тип даних `` може бути представлений у будь-який з наступних способів: -- Зображенням, заданим типом даних {{CSSxRef("url", "url()")}} +- Зображенням, заданим типом даних {{cssxref("url_value", "<url>")}} - Типом даних {{CSSxRef("<gradient>")}} - Частиною вебсторінки, означеною функцією {{CSSxRef("element","element()")}} - Зображенням, фрагментом зображення або суцільною одноколірною латкою, означеними функцією {{CSSxRef("image/image","image()")}} - Сумішшю двох або більше зображень, означеною функцією {{CSSxRef("cross-fade","cross-fade()")}}. - Вибіркою зображень, відібраною на основі роздільної здатності, означеною функцією {{CSSxRef("image/image-set","image-set()")}}. +- Згенерованим за допомогою функції {{CSSxRef("image/paint","paint()")}} [ворклетом малювання](/uk/docs/Web/API/CSS_Painting_API). ## Опис CSS може обробляти зображення наступних ґатунків: - Зображення з _природними розмірами_, як то JPEG, PNG та інші [растрові формати](https://uk.wikipedia.org/wiki/%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D0%B0_%D0%B3%D1%80%D0%B0%D1%84%D1%96%D0%BA%D0%B0). -- Зображення з _кількома природними розмірами_, що існують в декількох версіях всередині одного файлу, як то певні формати .ico. (У такому випадку природними розмірами будуть розміри найбільшого за площею та найподібнішого за співвідношенням сторін до контейнерних рамок зображення.) +- Зображення з _кількома природними розмірами_, що існують в декількох версіях всередині одного файлу, як то певні формати .ico. (У такому випадку природними розмірами будуть розміри найбільшого за площею та найподібнішого за {{glossary("aspect ratio", "співвідношенням сторін")}} до контейнерних рамок зображення.) - Зображення без природних розмірів, але з _природним співвідношенням сторін_ – ширини й висоти, подібно до SVG та інших [векторних форматів](https://uk.wikipedia.org/wiki/%D0%92%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D0%BD%D0%B0_%D0%B3%D1%80%D0%B0%D1%84%D1%96%D0%BA%D0%B0). - Зображення _і без природних розмірів, і без природного співвідношення сторін_, як то градієнт CSS. @@ -49,9 +50,10 @@ CSS визначає _конкретний розмір_ об'єкта на ос - Якщо заданий розмір визначає _лише ширину або лише висоту_, то відсутнє значення визначається на основі: природного співвідношення сторін — якщо воно є, — природних розмірів — якщо задане значення збігається з відповідним природним розміром, — або усталеним розміром об'єкта. - Якщо заданий розмір не визначає _ані ширини, ані висоти_, то конкретні розміри об'єкта обчислюються так, щоб вони відповідали природному співвідношенню сторін зображення, але не перевищували усталений розмір об'єкта за жодною з координат. Якщо зображення не має природного співвідношення сторін, то застосовується природне співвідношення сторін об'єкта, до котрого це зображення застосовується; якщо цей об'єкт не має природного співвідношення сторін, то відсутні значення висоти чи ширини беруться з усталених розмірів об'єкта. -> **Примітка:** Не всі браузери підтримують кожен тип зображення для кожної властивості. Деталі в [Сумісності з браузерами](#sumisnist-iz-brauzeramy). +> [!NOTE] +> Не всі браузери підтримують кожен тип зображення для кожної властивості. Деталі в [Сумісності з браузерами](#sumisnist-iz-brauzeramy). -## Занепокоєння щодо доступності +## Доступність Браузери не надають допоміжним технологіям жодної конкретної інформації про зображення тла. Це важливо перш за все для читачів з екрана, адже читач з екрана не оголосить присутність такого зображення, а отже – нічого не донесе користувачеві. Якщо зображення містить інформацію, котра є критичною для розуміння загального призначення сторінки, краще описати її в документі семантично. @@ -69,8 +71,8 @@ CSS визначає _конкретний розмір_ об'єкта на ос ```css example-good url(test.jpg) /* , за умови того, що test.jpg справді є зображенням */ linear-gradient(blue, red) /* */ -element(#realid) /* Частина вебсторінки, на котру вказано за допомогою функції element(), - за умови того, що ID "realid" фактично існує на сторінці */ +element(#real-id) /* Частина вебсторінки, на котру вказано за допомогою функції element(), + за умови того, що ID "real-id" фактично існує на сторінці */ image(ltr 'arrow.png#xywh=0,0,16,16', red) /* Ділянка 16x16, починаючи від верхнього лівого кута вихідного зображення, за умови того, що arrow.png – підтримуване зображення, інакше – @@ -85,7 +87,7 @@ image-set('test.jpg' 1x, 'test-2x.jpg' 2x) ### Недійсні зображення ```css example-bad -nourl.jpg /* Файл зображення повинен бути означений за допомогою функції url(). */ +no-url.jpg /* Файл зображення повинен бути означений за допомогою функції url(). */ url(report.pdf) /* Файл, на котрий вказує функція url(), повинен бути зображенням. */ element(#fakeid) /* ID елемента повинен існувати на сторінці. */ image(z.jpg#xy=0,0) /* Фрагмент повинен бути записаний у форматі xywh=#,#,#,# */ diff --git a/uk_spelling_additions.txt b/uk_spelling_additions.txt index fe3a6612b3..529504c523 100644 --- a/uk_spelling_additions.txt +++ b/uk_spelling_additions.txt @@ -89,6 +89,7 @@ воркерний ворклета ворклеті +ворклетом восьмицифрової гетер гетери