Директива @support та її JS двійники. Можна використовувати!

35

Від автора: вчора я прочитала чудову статтю «директива @supports змінить ваше життя» за авторством Шарлотти Джексон. Я нарешті виділила час на те, щоб познайомитися з цією старонова функцією. Давайте швиденько розглянемо цю директиву.

Розробники дуже ледачі. Саме тому браузери нам багато чого прощають. Вони нишком підправляють безліч поширених HTML помилок і роблять наше життя легше. Щодо CSS браузери працюють трохи по-іншому. Вони вже не виправляють наші помилки, а просто ігнорують ті рядки коду, які не розуміють. Тобто ми можемо використовувати нові CSS функції, а браузери, які не підтримують, просто не будуть їх застосовувати. Звучить круто, але не завжди результат співпадає з нашими потребами. Хорошою практикою є писати сучасну стильну розмітку, але в той же час стежити за тим, щоб вона добре виглядала в старих браузерах. Наприклад, ви хочете стилізувати першу літеру в тексті. Така форма декорації використовується на початку параграфа. Перша буква буде займати кілька рядків, а також у неї будуть відступи від основного тексту:

Директива @support и ее JS двойники. Можно использовать!

Це можна реалізувати одним сучасним способом – за допомогою CSS властивості initial-letter:

p::first-letter{
margin-right: 0.5 em;
color: red;
font-size: 20px;
-webkit-initial-letter: 4;
initial-letter: 4; // how many lines of text letter will go deep
}

Властивість підтримується тільки в останній версії Safari. Подивимося на результат:

Директива @support и ее JS двойники. Можно использовать!

Код можна подивитися на Codepen. Ліворуч показано скріншот з браузера Safari, праворуч – Opera/Chrome. Червона літера «L» звичайного розміру з відступами зовсім не виглядає. В цьому випадку браузер не робить за нас нашу роботу. Щоб не допустити такого поганого результату, необхідно перевіряти браузер на підтримку певної властивості.

Визначення властивостей CSS через JS – досить поширена клієнтська практика (старий добрий Modernizr). До появи директиви @supports такий функціонал в CSS був недоступний. А тепер він у нас є у всіх браузерах крім IE11. Розберемо приклад:

@supports (display: flex) {
div { display: flex; }
}

Директива @supports схожа на @media запит у вашому коді CSS. З її допомогою можна перевіряти підтримку стилів різними способами. Спосіб вище – найпростіший. Можна також використовувати оператори not/or/and для створення більш складних виразів, які складаються з кількох виразів. Точно так само, як ви робите в @media запитах. Подивитися API та приклади можна на MDN. Повертаючись до нашої першої букві, тепер ваш код буде виглядати так:

@supports (initial-letter: 4) or (-webkit-initial-letter: 4) {
p::first-letter{
margin-right: 0.5 em;
color: red;
font-size: 20px;
-webkit-initial-letter: 4;
initial-letter: 4;
}
}

За замовчуванням жодної декорації, стилі застосовуються тільки до браузерів, що підтримують властивість initial-letter. До речі, я взяла цей приклад з виступу Джен Сіммонс «даний напрям мистецтва в інтернеті». Подивіться, не пошкодуєте.

JS двійник директиви @supports — window.CSS.supports – статичний метод, що повертає Логічне значення, яке вказує, чи підтримує браузер передане CSS властивість чи ні. Метод можна викликати двома способами:

var result = CSS.supports(«display», «flex»);
// або
var result = CSS.supports(«(display: flex)»);

Різниця в наборі параметрів. Перший спосіб дозволяє перевірити підтримку пари властивість/значення. Другий спосіб бере один параметр і перевіряє його на підтримку @supports. Підтримка даного методу в браузерах майже така ж, як у директиви @supports. Всі сучасні браузери крім IE11, а також часткова підтримка в Opera Mini (там використовується старий синтаксис window.supportsCSS). Якщо ви працюєте в IE11 або нижче, не забудьте зробити перевірку:

var supportsCSS = !!((window.CSS && window.CSS.supports) || window.supportsCSS || false);

От і все! Настійно рекомендую прочитати статтю Шарлотти Джексон. Відмінна стаття, після неї ви точно захочете користуватися цією директивою, якщо у вас залишалися сумніви.