From 1ba70416a41a646c03c15e70cf9fd0b964a76c79 Mon Sep 17 00:00:00 2001
From: Vitalii Perehonchuk <vitalii_perehonchuk@epam.com>
Date: Mon, 3 Feb 2025 16:58:11 +0200
Subject: [PATCH 1/2] update(CSS): web/css/_doublecolon_placeholder

---
 files/uk/web/css/_doublecolon_placeholder/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/uk/web/css/_doublecolon_placeholder/index.md b/files/uk/web/css/_doublecolon_placeholder/index.md
index 9fc7dc38f..714eba348 100644
--- a/files/uk/web/css/_doublecolon_placeholder/index.md
+++ b/files/uk/web/css/_doublecolon_placeholder/index.md
@@ -135,4 +135,4 @@ input::placeholder {
 
 - Псевдоклас {{cssxref(":placeholder-shown")}} оформлює елемент, який _має_ активний заповнювач.
 - Споріднені елементи HTML: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}
-- [Форми HTML](/uk/docs/Learn/Forms)
+- [Форми HTML](/uk/docs/Learn_web_development/Extensions/Forms)

From e02c0e3fac2e2737181c59c6e4f5e6fbc4e1b3b2 Mon Sep 17 00:00:00 2001
From: Vitalii Perehonchuk <vitalii_perehonchuk@epam.com>
Date: Mon, 3 Feb 2025 17:16:45 +0200
Subject: [PATCH 2/2] update(CSS): web/css/_doublecolon_placeholder

---
 .../web/css/_doublecolon_placeholder/index.md | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/files/uk/web/css/_doublecolon_placeholder/index.md b/files/uk/web/css/_doublecolon_placeholder/index.md
index 714eba348..66cc5a834 100644
--- a/files/uk/web/css/_doublecolon_placeholder/index.md
+++ b/files/uk/web/css/_doublecolon_placeholder/index.md
@@ -89,6 +89,7 @@ input::placeholder {
   color: red;
   font-size: 1.2em;
   font-style: italic;
+  opacity: 0.5;
 }
 ```
 
@@ -98,31 +99,40 @@ input::placeholder {
 
 ### Непрозорий текст
 
-Частина браузерів (наприклад, Firefox) задає усталене значення {{cssxref("opacity")}} для заповнювачів меншим за 100%. Якщо ви хочете, щоб текст-заповнювач був повністю непрозорим, задайте значення `opacity` рівним `1`.
+Частина браузерів робить текст заповнювача прозорішим. Якщо потрібен цілком непрозорий текст, слід задати значення властивості {{CSSXref("color")}} явно. Можна скористатися значенням [`currentColor`](/uk/docs/Web/CSS/color_value#kliuchove-slovo-currentcolor), щоб задати той же колір, що заданий для відповідного елемента поля.
 
 #### HTML
 
 ```html
-<input placeholder="Усталена непрозорість" />
-<input placeholder="Повна непрозорість" class="force-opaque" />
+<input placeholder="Колір, заданий браузером" />
+<input placeholder="Той же колір, що в полі" class="explicit-color" />
+<input placeholder="Текст напівпрозорого кольору" class="opacity-change" />
 ```
 
 #### CSS
 
 ```css
-::placeholder {
+input {
+  font-weight: bold;
   color: green;
 }
 
-.force-opaque::placeholder {
-  opacity: 1;
+.explicit-color::placeholder {
+  /* використовувати той же колір, що і в елементі поля, щоб не дати браузеру задати усталений колір */
+  color: currentColor;
 }
-```
 
-#### Результат
+.opacity-change::placeholder {
+  /* прозоріший текст */
+  color: color-mix(in srgb, currentColor 70%, transparent);
+}
+```
 
 {{EmbedLiveSample("neprozoryi-tekst", 200, 60)}}
 
+> [!NOTE]
+> Зверніть увагу на те, що різні браузери використовують для тексту заповнювача різні кольори. Наприклад, Firefox використовує колір елемента поля з непрозорістю 54%, а Chrome використовує колір `darkgray`. Якщо потрібен однаковий колір тексту-заповнювача у всіх браузерах, слід задавати властивість `color` явно.
+
 ## Специфікації
 
 {{Specifications}}