Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CodePen
Webdesign

Совет: Добавляем @supports в CSS файлы ваших демо на CodePen

by
Difficulty:BeginnerLength:ShortLanguages:

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

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

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

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

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

Правило @supports

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

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

Уведомления

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

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

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

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

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

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.