Когда ваши демо-версии в CodePen зависят от передовых CSS, будет не плохо предупредить людей. Покажем уведомление, если браузеры не поддерживают наши демки, используя правило @support, чтобы сделать удобный многоразовый объект CodePen.

Конечный результат

Вот то, что мы хотим сделать; многоразовое уведомление, чтобы показать неподдерживаемый CSS. Он будет храниться почти полностью в своем собственном pen’е, который мы можем добавить к другим демкам через ссылку External CSS:

Вы увидите, что мы используем это в уроках по CSS на Tuts+, например в этих:

• 

  Better CSS Drop Caps With “initial-letter”

  Drop caps are a form of decoration sometimes used at the beginning of a block of text; the initial letter running several lines deep and indenting the body...
• 

  Having Fun With Tomorrow’s CSS: Backdrop Filters

  In this tutorial we will look into an emerging CSS toy going by the name of “Backdrop Filter”.

Правило @supports

CSS @supports существует уже несколько лет и располагает довольно приличной поддержкой браузеров. Это позволяет нам запрашивать функции и применять CSS только в том случае, если браузер поддерживает определенные свойства. Это предотвращает от применения стилей только на половину и даже позволяет нам вывести предупреждение, если мы его укажем.

Чтобы это заработало, нужно просто обернуть стили в условие, вот так:

1

@supports (display: grid) {

2

  div {

3

    /* when CSS Grid is supported, do something */

4

  }

5

}

Уведомления

Давайте сделаем пару быстрых уведомлений:

Мы добавим текстовое сообщение через псевдо-элемент, чтобы мы могли управлять им из одного места. Эти надписи в конечном счете будут использоваться во многих демках, поэтому хранение содержания отдельно означает, что мы можем изменить их все за один раз.

1

.support-initial-letter::after {

2

    content: "✋🏼 Hold on there cowboy; initial-letter is unsupported in your browser.";

3

}

не поддерживаются. Давайте добавим условие для этого::

1

@supports (initial-letter: 1) or (-webkit-initial-letter: 1) {

2

  .support-initial-letter::after {

3

    display: none;

4

  }

5

}

«если initial-letter или -webkit-initial-letter поддерживаются, не отображать уведомление .support-initial-letter»..

1

<div class="support-backdrop-filter"></div>

@supports в своих pen; Джен Симмонс делает это, Рэйчел Эндрю делает это, и мы это делаем. Вытягивание стилей уведомлений во внешний pen — это отличный способ управлять такими вещами, не захламляя разметку. Обновляйте сообщения, добавляйте новые свойства CSS, применяйте временный стиль, сходите с ума! Сообщите нам, как вы используете @supports в комментариях..

• Определение свойств CSS: Modernizr или Feature Queries?>
  
• supports на MDNN
• dding External Resources на CodePenn