Повний скидання: використання початкових значень CSS

23

Від автора: за своїм визначенням розробка стилів включає в себе установку CSS властивостям нових значень. Складні стилі, в кінцевому рахунку, доходять до такої точки, коли необхідно «потерти» CSS значення, тобто скинути їх на початкові. В окремих випадках початкові значення відомі, їх легко запам’ятати. В інших властивостей ж все не так. На щастя, сучасний CSS дає нам простий спосіб скидання властивостей.

Тисни на кнопку

Скажімо, ви задали зображень властивість float: left за замовчуванням:

img { float: left; }

І потім вам потрібно скинути обтікання зображень з певними умовами (зображення з класом .recall)… а ви не пам’ятаєте, чи варто float: none або щось ще.

Іншими словами, ви знаєте, що за замовчуванням обтеканий бути не повинно, але ви не пам’ятаєте, як це зробити. І щоб не шукати способи, краще додайте наступний рядок коду:

img.recall { float: initial; }

Поширена помилка, що значення initial скидає властивість до значення, яке вперше було поставлено в стилях, або до значення за замовчуванням, прописаному в специфікації CSS. Невірно ні те, ні інше: значення initial скидає властивість до значення за замовчуванням у браузері користувача.

У більшості випадків початкове значення буде однаковим у всіх браузерах. Значення initial зокрема корисно в ряді випадків.

Способи використання

Значення initial можна використовувати для скидання кольору. У переважній більшості браузерів початковий колір основного тексту чорний. Код нижче скидає колір для заголовків:

body { color: hsl(333, 50%, 25%); }
h1, h2, h3 { color: initial; }

Чорний не завжди є кольором за замовчуванням, це залежить від конкретних розробників браузерів (і користувачів). Тобто код нижче:

aside { font-family: initial; }

… по-різному буде працювати у браузерах. Шрифт за замовчуванням не завжди буде Times New Roman, так як у всіх браузерах різні налаштування за замовчуванням.

Для значення initial є ще кілька способів застосування:

скидання z-index до значення за замовчуванням;

скидання margin і transform до значень за замовчуванням.

Обмеження

Одна з основних причин рідкісного використання initial в CSS – повна відсутність підтримки в IE, хоча в інших браузерах значення працює вже багато років. В MS Edge нещодавно з’явилася підтримка даного значення… а значить, initial все частіше зустрічатися в стилях в майбутньому.