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

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

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

Разработчики очень ленивые. Именно поэтому браузеры нам много чего прощают. Они втихую подправляют множество распространенных HTML ошибок и делают нашу жизнь легче. Относительно CSS браузеры работают слегка по-другому. Они уже не исправляют наши ошибки, а просто игнорируют те строки кода, которые не понимают. То есть мы можем использовать новые CSS функции, а браузеры, которые их не поддерживают, просто не будут их применять. Звучит круто, но не всегда результат совпадает с нашими потребностями. Хорошей практикой является писать современную стильную разметку, но в то же время следить за тем, чтобы она хорошо смотрелась в старых браузерах. К примеру, вы хотите стилизовать первую букву в тексте. Такая форма декорации используется в начале параграфа. Первая буква будет занимать несколько строк, а также у нее будут отступы от основного текста:

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

Это можно реализовать одним современным способом – при помощи CSS свойства initial-letter:

p::first-letter{
  margin-right: 0.5em;

  color: red;
  font-size: 20px;

  -webkit-initial-letter: 4; 
  initial-letter: 4; // how many lines of text letter will go deep
}

Свойство поддерживается только в последней версии Safari. Посмотрим на результат:


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Директива @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.5em;

 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);

Вот и все! Настоятельно рекомендую прочитать статью Шарлотты Джексон. Отличная статья, после нее вы точно захотите пользоваться этой директивой, если у вас оставались сомнения.

Автор: Khrystyna Skvarok

Источник: https://medium.com/

Редакция: Команда webformyself.


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree