Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Обзор условных инструкций CSS

28 февраля 2015 | Опубликовано в css | 2 Комментариев »

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

 

 


Для начала коротко расскажем о, вероятно, уже известных Вам media queries. Это условные инструкции, с помощью которых можно задать стили веб-странице, в зависимости от свойств компьютера пользователя. Например, можно задать следующие условные инструкции в файле стилей CSS:

@media screen and (min-width: 1000px) {

   /* CSS Goes here! */
}

Код, который помещен в фигурные скобки применится только к экранам с шириной более 1000px. Есть и другие media queries, касающиеся разрешения и других свойств. Вероятно, Вы знакомы со многими из них. Но Вы можете еще не знать, что спецификация условных инструкций также рассказывает о двух других условных инструкциях. Пока что они поддерживаются только браузером Firefox: начиная с версии 6.0 поддерживается условная инструкция @document, а с версии 17.0 — @supports.

Условная инструкция @supports

Предположим, что один браузер поддерживает определенное свойство, а другой — не поддерживает. Тогда понадобится обходной путь в виде скрипта для браузеров, которые не поддерживают это свойство. Так вот, условная инструкция @supports может с этим помочь, проверяя, поддерживается ли указанное свойство в данном браузере.

Например, по какой-то причине Вы хотите, чтобы некоторый код CSS применялся только к браузеру, который поддерживает модель гибкого окна CSS. Тогда можно сделать следующее:

@supports (display: flex) {
    /* Put some CSS here */
}

Код CSS в фигурных скобках будет задействован только если браузер поддерживает модель гибкого окна CSS. После этого можно задать другой код CSS, который переписывает вышеуказанный код CSS, если браузер не поддерживает модель гибкого окна CSS, например:

/* If flexbox isn't supported, backup CSS goes here */
@supports (display: flex) {
    /* Flexible box CSS goes here */
}

Как и с media queries, можно осуществлять проверку для нескольких условий, используя операторы «или» и «и»:

@supports (display: flex) and (box-shadow: 0 0 10px rgba(0,0,0,0.1)) { 
    /* If box shadows and the flex box are supported */
}
@supports ((display: flex) and (animation-duration: 1s)) or ((diplay: flex) and (transition-duration: 1s)) {
    /* If flex box and animation duration are supported, or if flex box and transition duration are supported */
}

Отрицание 

Можно проверить, поддерживает ли браузер определенное свойство, используя оператор «не». Например, код CSS в фигурных скобках ниже будет применен, только если модель гибкого окна не поддерживается:

@supports not(display: flex) {
    /* Back up CSS goes here */
} 

Условная инструкция @document

Условная инструкция @document задает стили указанной странице. Например, с ее помощью станет возможно задать стили определенной странице с помощью CSS:

@document url('http://www.inserthtml.com/') {
    /* CSS goes here */
}

Или можно применить стили ко всему, что расположено в определенной папке:

@document url-prefix('http://www.inserthtml.com/css') {
    /* CSS goes here */
} 

Преимущества 

Ускорение загрузки 

Предположительно, можно воспользоваться этим способом, чтобы использовать один универсальный заголовок, который выбирает, какие файлы включать, основываясь на возможностях браузера пользователя. Например, давайте предположим, что у Вас есть какие-то дополнительные свойства, например, тени блока, радиус границы и т. д., которые предназначены для новых браузеров. А браузер Internet Explorer может стать большой проблемой, так как он не поддерживает многие свойства, но ему все равно придется загружать файл CSS. Используя условную инструкцию @supports, можно уменьшить основной файл CSS и включить дополнительные свойства в отдельный файл CSS, таким образом улучшая время загрузки страницы:

<link rel="stylesheet" type="text/css" href="style.css" />

<!-- Optional extras -->
<style>

@supports (box-shadow: 0 0 10px rgba(0,0,0,0.1)) {
    @import url('box-shadow.css');
}
</style>

Один файл стилей для всего сайта 

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

/* Some regular CSS here */
div {
   ...
}

@supports (display: flexbox) {
    /* If supported, do this CSS */
}

@document url('http://www.inserthtml.com/page.html') {
    /* CSS for specific page */
} 
@media print {
    /* Media CSS */
}

Автор урока Johnny Simpson

Перевод — Дежурка

Смотрите также:




Комментарии

  1. weliant
    Thumb up Thumb down 0

    Отличная статья! Вот бы быстрей все это поддерживаться начало! А @support, получается, заменит библиотеку modernizer?

    Ответить

  2. Анна
    Thumb up Thumb down 0

    Если @document и @supports поддерживаются только современным FF, то в чем смысл их использования?

    Напишу я конструкцию из примера "@supports (box-shadow: 0 0 10px rgba (0,0,0,0.1)) "

    box-shadow поддерживается, например, хромом, но хром не поймет, что это стили для него, потому что не понимает @supports

    с @supports not еще хуже выходит.

    Ответить

Оставить ответ


5 − пять =

Вставить изображение