Використання initial у CSS

3 хв. читання

Ключове слово initial оточене містикою для багатьох розробників. Насправді це просто спосіб повернення базових значень властивостям CSS.

Зазвичай розробники використовують значення властивостей CSS за замовчуванням, наприклад auto, 0, normal, тощо. Я не знаю в чому річ, проте для мене, initial завжди залишався чимось невідомим. Тож я провів дослідження і виявив цікаву особливість CSS, що може спричинити непорозуміння між розробниками.

Що означає ключове слово initial?

Використовуючи initial ви зможете повернути кожну властивість CSS до її початкового значення згідно зі специфікацією, або до значення браузера за замовчуванням. Слід зазначити, що значення для різних браузерів можуть відрізнятися. Тож якщо ви захочете повернути властивості її початкове значення, просто напишіть у значення initial.

.element { 
    color: initial; 
}

У такому випадку кольором елемента стане чорний, адже у більшості браузерів ця властивість за замовчуванням має чорний колір.

.element { 
    width: initial;
    padding: initial;
}

Так само, ви можете задати початкове значення для і для інших властивостей, наприклад width (за замовчуванням стане auto) або padding (буде дорівнювати 0).

Також вам слід знати, що значення initial не залежить від елемента, до якого ви його застосуєте. Якщо ви використаєте його для div, то повернете значення властивості до display:inline, (саме так зазначено його початкове значення у браузері). Однак ваш div за замовчуванням матиме значення display: block. У цьому випадку значення властивості display: block було взяте з браузера за замовчуванням, наприклад, як розмір шрифту у ваших заголовках.

Оскільки у CSS ви можете робити певні речі більш ніж в один спосіб, ви не відчуєте ніяких проблем пов'язаних з незнанням базових значень властивостей.

Особисто для мене стало несподіванкою те, що досить багато людей путають initial з inherit. Можна помітити, що кожне з імен цих двох значень говорить саме за себе. Адже initial посилається на ініціалізоване значення, у той час, як inherit вказує на значення батьківського елемента. Тож, використовуючи initial, ви уникаєте каскаду і отримуєте значення властивостей за замовчуванням, згідно зі специфікацією CSS.

У яких випадках його варто використовувати?

Доволі складно дати відповідь на це запитання, адже ви самі зрозумієте коли вам варто використати саме initial, особисто для мене, зазвичай це ситуації у яких необхідно перезаписати значення властивості.

Якщо ви хочете, щоб ця властивість коректно працювала у старих браузерах, наприклад, ІE або Opera Mini, вам слід використовувати напряму базові значення властивостей, такі як 0, none, normal, auto, тощо.

css
Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.8K
Приєднався: 6 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація