From 5828d0140b48006c9f3607111445122ba5dde995 Mon Sep 17 00:00:00 2001
From: DrakesBot12 <drakesweb.exe@gmail.com>
Date: Thu, 11 Jun 2026 17:17:53 +0300
Subject: [PATCH 1/6] docs: optional

---
 css/optional/demos/basic/index.html | 80 +++++++++++++++++++++++++++++
 css/optional/index.md               | 76 ++++++++++++++++++++++-----
 2 files changed, 142 insertions(+), 14 deletions(-)
 create mode 100644 css/optional/demos/basic/index.html
diff --git a/css/optional/demos/basic/index.html b/css/optional/demos/basic/index.html
new file mode 100644
index 0000000000..f2c5069701
--- /dev/null
+++ b/css/optional/demos/basic/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Название демо — Title статьи — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+      font-size: 18px;
+    }
+
+    body {
+      min-height: 100vh;
+      padding: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+    }
+
+    form {
+      display: flex;
+      flex-direction: column-reverse;
+      gap: 1rem;
+    }
+
+    label {
+      display: flex;
+      gap: .5rem;
+      align-items: center;
+    }
+
+    input {
+      border-radius: 6px;
+      padding: 4px 8px;
+    }
+
+    input:optional {
+      border: 2px solid #d77d31;
+    }
+
+    input:required {
+      border: 2px solid #2e9aff;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <form>
+      <label>
+        Имя вашего котика:
+        <input type="text" name="cat-name">
+      </label>
+    
+      <label>
+        Email:
+        <input type="email" name="email" required>
+      </label>
+    </form>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/css/optional/index.md b/css/optional/index.md
index 8dc486ece8..198037c39b 100644
--- a/css/optional/index.md
+++ b/css/optional/index.md
@@ -1,10 +1,15 @@
 ---
 title: "`:optional`"
-description: "Показываем, какие поля заполнять необязательно."
+description: "Показывает элементы формы, которые не обязательны для заполнения."
 authors:
   - inventoris
+contributors:
+  - drakesbot12
 keywords:
   - псевдокласс
+  - формы
+  - optional
+  - валидация
 related:
   - html/form
   - html/required
@@ -16,40 +21,83 @@ tags:
 
 ## Кратко
 
-С помощью псевдокласса `:optional` можно выбрать элементы, заполнять которые необязательно. Это могут быть [`<input>`](/html/input/), [`<select>`](/html/select/) и [`<textarea>`](/html/textarea/) без атрибута [`required`](/html/required/).
+Псевдокласс `:optional` выбирает элементы формы, которые **не являются обязательными для заполнения**.
+
+Он применяется к:
+- [`<input>`](/html/input/)
+- [`<select>`](/html/select/)
+- [`<textarea>`](/html/textarea/)
+
+Если у элемента **нет атрибута [`required`](/html/required/)**, он считается необязательным и попадает под `:optional`.
 
 <aside>
 
-♻️ Существует псевдокласс с обратным значением: [`:required`](/css/required/). С его помощью можно выбрать обязательные к заполнению элементы.
+♻️ Противоположный псевдокласс — [`:required`](/css/required/), он выбирает обязательные поля формы.
 
 </aside>
 
 ## Пример
 
+```css
+input:optional {
+  border: 2px solid #d77d31;
+}
+
+input:required {
+  border: 2px solid #2e9aff;
+}
+```
+
 ```html
 <form>
-  <label>Имя вашего котика: <input></label>
+  <label>
+    Имя вашего котика:
+    <input type="text" name="cat-name">
+  </label>
+
+  <label>
+    Email:
+    <input type="email" name="email" required>
+  </label>
 </form>
 ```
 
-```css
-input:optional {
-  border-color: #d77d31;
-}
-```
+<iframe title="Демонстрация применения стилей :optional и :required" src="demos/basic/" height="200"></iframe>
 
 ## Как пишется
 
-Выбираем элемент без атрибута `required` и в селекторе используем `:optional`:
+Псевдокласс применяется к полям формы, у которых **не указан атрибут `required`**:
 
 ```css
-textarea:optional {
-  color: black;
+input:optional {
+  background-color: #fff8f1;
 }
 ```
 
 ## Как понять
 
-В формах важно визуально отмечать, какие поля следует обязательно заполнить, а какие можно пропустить. Так пользователям не придётся заполнять лишнее.
+Браузер автоматически определяет, какие поля формы обязательны для заполнения.
+
+- Если у элемента есть атрибут `required`, он считается обязательным
+- Если атрибута нет — поле считается необязательным и попадает под `:optional`
+
+Это позволяет:
 
-Псевдокласс `:optional` помогает улучшить опыт взаимодействия с формой. Визуально отмечаем, что нам не так уж нужно знать, и экономим драгоценное время и нервы пользователя.
+- визуально отделять важные поля от второстепенных
+- улучшать UX форм
+- уменьшать когнитивную нагрузку пользователя
+
+## Подсказки
+
+💡 Псевдокласс работает только с элементами формы, а не с любыми HTML-элементами.
+💡 `:optional` удобно использовать для стилизации второстепенных полей — например, дополнительных данных профиля.
+💡 Часто комбинируется с `:required`, чтобы явно разделить визуально важные и необязательные поля:
+```css
+input:required {
+  border-color: #2e9aff;
+}
+
+input:optional {
+  border-color: #d77d31;
+}
+```

From afe901197c6f0b70b486fe2faa2d400fb5e57d1c Mon Sep 17 00:00:00 2001
From: DrakesBot12 <drakesweb.exe@gmail.com>
Date: Thu, 11 Jun 2026 17:20:47 +0300
Subject: [PATCH 2/6] =?UTF-8?q?=D1=84=D0=BE=D1=80=D0=BC=D0=B0=D1=82=D0=B8?=
 =?UTF-8?q?=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/optional/demos/basic/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/css/optional/demos/basic/index.html b/css/optional/demos/basic/index.html
index f2c5069701..02950e4d99 100644
--- a/css/optional/demos/basic/index.html
+++ b/css/optional/demos/basic/index.html
@@ -77,4 +77,4 @@
     </form>
   </div>
 </body>
-</html>
\ No newline at end of file
+</html>

From f3aab57e44d86c8403a191843905faf56d62930b Mon Sep 17 00:00:00 2001
From: DrakesBot12 <drakesweb.exe@gmail.com>
Date: Thu, 11 Jun 2026 17:22:18 +0300
Subject: [PATCH 3/6] =?UTF-8?q?=D1=84=D0=BE=D1=80=D0=BC=D0=B0=D1=82=D0=B8?=
 =?UTF-8?q?=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/optional/demos/basic/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/css/optional/demos/basic/index.html b/css/optional/demos/basic/index.html
index 02950e4d99..5a827dfd0b 100644
--- a/css/optional/demos/basic/index.html
+++ b/css/optional/demos/basic/index.html
@@ -69,7 +69,7 @@
         Имя вашего котика:
         <input type="text" name="cat-name">
       </label>
-    
+
       <label>
         Email:
         <input type="email" name="email" required>

From 138f7f55c591709247e5184974abebeb6686a60e Mon Sep 17 00:00:00 2001
From: vitya-ne <9317613+vitya-ne@users.noreply.github.com>
Date: Wed, 15 Jul 2026 20:52:20 +0300
Subject: [PATCH 4/6] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F?=
 =?UTF-8?q?=D0=B5=D1=82=20=D0=BA=D0=BE=D0=BD=D1=84=D0=B8=D0=B3=20baseline?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/optional/index.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/css/optional/index.md b/css/optional/index.md
index 198037c39b..96083510e5 100644
--- a/css/optional/index.md
+++ b/css/optional/index.md
@@ -1,6 +1,10 @@
 ---
 title: "`:optional`"
 description: "Показывает элементы формы, которые не обязательны для заполнения."
+baseline:
+  - group: form-validity-pseudos
+    features:
+      - css.selectors.optional
 authors:
   - inventoris
 contributors:

From 41707adc8d98e0dcfa3708dc2979ee3a800f22e1 Mon Sep 17 00:00:00 2001
From: DrakesWeb <89761315+DrakesBot12@users.noreply.github.com>
Date: Fri, 17 Jul 2026 18:35:35 +0300
Subject: [PATCH 5/6] Update index.md

---
 css/optional/index.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/css/optional/index.md b/css/optional/index.md
index 96083510e5..5beab06e5e 100644
--- a/css/optional/index.md
+++ b/css/optional/index.md
@@ -20,7 +20,6 @@ related:
   - css/required
 tags:
   - doka
-  - placeholder
 ---
 
 ## Кратко

From 825063025d2c7a86e039fbe7cb76be0a2c99d33a Mon Sep 17 00:00:00 2001
From: DrakesBot12 <drakesweb.exe@gmail.com>
Date: Fri, 17 Jul 2026 18:49:42 +0300
Subject: [PATCH 6/6] =?UTF-8?q?=D1=83=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/optional/demos/basic/index.html | 20 ++++++++------------
 css/optional/index.md               |  6 +-----
 2 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/css/optional/demos/basic/index.html b/css/optional/demos/basic/index.html
index 5a827dfd0b..69297aedfb 100644
--- a/css/optional/demos/basic/index.html
+++ b/css/optional/demos/basic/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="ru">
 <head>
-  <title>Название демо — Title статьи — Дока</title>
+  <title>Демонстрация применения стилей :optional и :required — :optional — Дока</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -38,7 +38,7 @@
 
     form {
       display: flex;
-      flex-direction: column-reverse;
+      flex-direction: column;
       gap: 1rem;
     }
 
@@ -49,31 +49,27 @@
     }
 
     input {
+      border: 2px solid rgba(255, 255, 255, 0.5);
       border-radius: 6px;
       padding: 4px 8px;
     }
 
     input:optional {
-      border: 2px solid #d77d31;
-    }
-
-    input:required {
-      border: 2px solid #2e9aff;
+      border-color: #2e9aff;
     }
   </style>
 </head>
 <body>
   <div class="container">
     <form>
-      <label>
-        Имя вашего котика:
-        <input type="text" name="cat-name">
-      </label>
-
       <label>
         Email:
         <input type="email" name="email" required>
       </label>
+      <label>
+        Имя вашего котика:
+        <input type="text" name="cat-name">
+      </label>
     </form>
   </div>
 </body>
diff --git a/css/optional/index.md b/css/optional/index.md
index 5beab06e5e..1b05a86089 100644
--- a/css/optional/index.md
+++ b/css/optional/index.md
@@ -43,11 +43,7 @@ tags:
 
 ```css
 input:optional {
-  border: 2px solid #d77d31;
-}
-
-input:required {
-  border: 2px solid #2e9aff;
+  border-color: #2e9aff;
 }
 ```
 
