Визначення підтримки властивостей з допомогою @supports CSS

17

Від автора: З моменту свого виникнення браузерна підтримка CSS3 була непостійною, виконання підтримки властивостей не просто хороша ідея, а найкраща практика.

Хоча така перевірка звичайно робиться за допомогою JavaScript, було б ідеально проводити її всередині CSS, і ось де @supports виходить на перший план. Правило CSS @supports дає нам просте і чисте визначення можливостей браузера, який не покладається на інші техніки, і працює навіть при вимкненому JavaScript’е.

Браузерна підтримка

На жаль, як у випадку з багатьма класними прийомами, у цього правила є проблема, так як старі браузери його не підтримують, і навіть деякі нові версії її позбавлені. Під час написання статті його підтримують Chrome, Opera, мобільний і десктоповый Firefox, а останні версії Safari і Internet Explorer – ні. Альтернативним варіантом створення підтримки правила буде застосування «милиць», але це означає використання JavaScript’а.

Правило @supports

В CSS добре те, що він забезпечує відмінну деградацію, що означає, якщо щось не підтримується, то воно не зруйнує вашої сторінки, а просто буде проігноровано.

Ідея, що стоїть за @supports, полягає в просуванні ще на крок вперед. Вона дає вам можливість написати альтернативний код, який буде читатися, якщо переважні властивості не підтримуються в окремому браузері.

При створенні нового правила @supports ви побачите, що код сильно схожий на медиазапросы; навіть оператори ті ж самі. Вийде щось на зразок цього:

@supports(property: value) {
/* Стилі, якщо умова відповідає */
}

Якщо потрібно протестувати, наприклад, підтримує браузер контур тексту, ви застосуєте наступний простий код:

@supports(-webkit-text-stroke: 1px black) {
h1 {
-webkit-text-stroke: black 1px;
}
}

Браузер, що підтримує контур тексту, прочитає, що знаходиться всередині дужок, а той, який не підтримує, навіть не спробує цього зробити. Одним з застосовних правилом @supports операторів є not. Він перевіряє, чи не підтримує браузер певну властивість, а альтернативний код укладений в дужки. На прикладі контуру – ви можете застосувати його для додавання тіні тексту, яка створить схожий вигляд:

@supports not (-webkit-text-stroke: 1px black) {
h1 {
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
}

Застосування тут оператора not означає, що код всередині дужок буде прочитаний, тільки якщо переважний властивість не підтримується. Він працює як else-затвердження для умовного пропозиції без оператора. Оператор or дає можливість тестувати більше однієї умови одночасно, і поверне true при будь-якому відповідно. Це дуже зручно для властивостей, застосовують різні вендорные префікси для різних браузерів. Наприклад, для перевірки підтримки переходу transition можна використовувати наступне:

@supports(transition: width 500ms) or (-webkit-transition: width 500ms) {
div {
transition: width 500ms;
transition: width 500ms;
}
}

Багатьом властивостям CSS потрібні додаткові вендорные префікси і оператор or дозволяє перевірити їх одночасно. Потрібно всього один повернення true, щоб код всередині дужок був прочитаний.

Останній використовується @supports оператор – це and, який тестує більше однієї умови одночасно, повертаючи true, тільки якщо всі вони відповідають. Синтаксис схожий на or:

@supports(border-radius: 5px) and (box-shadow: 1px 1px 3px #000) {
div {
border-radius: 5px;
box-shadow: 1px 1px 3px #000;
}
}

Його ви можете не застосовувати так часто, як інші, але він виявиться корисним для тестування підтримки множинних властивостей.

Фінальні роздуми

На мою думку, @supports є прекрасним доповненням до специфікації CSS. З-за важливості браузерної підтримки при створенні правил CSS, визначення підтримуваних властивостей – життєво важливий етап процесу. Застосування для визначення CSS замість надії на Javascript прискорює продуктивність і робить все трохи елегантніше.

За іронією долі, єдина проблема – це нестача його власної підтримки. Однак CSS добре деградує, і якщо браузер не підтримує @supports, то просто проігнорує його і прочитає те, що знаходиться поза дужками. Я впевнений, що в світлі його корисності ми почнемо бачити це правило все частіше.