Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

CSS supports

Всем привет! Сегодня мы с вами познакомимся с директивой supports которая проверяет поддержку стилевых свойств в браузере. Причем мы можем проверять поддержку не только с помощью css, но и через javascript. Поехали!

Итак, для того чтобы пользоваться директивой supports в CSS нам достаточно написать @supports(условие){}. Выглядит все это примерно так:

@supports (display: grid){
	div:after{
    		Content:"Свойство поддерживается в браузере";
	}
	div{
		display:grid;
	}

}

Здесь мы проверяем поддержку свойства grid в браузере. Если данное свойство будет поддерживаться браузером, то у нас применяться стили находящиеся в фигурных скобах.

Допустим свойство поддерживается браузером только с использованием вендорных префиксов. Тогда мы можем воспользоваться оператором or(или).

@supports (user-select:all) or (-moz-user-select:all) or (-ms-user-select: all){
    div{
        -webkit-user-select: all;
        -moz-user-select: all;
        -ms-user-select: all;
    }
}

Через оператор or мы перечисляем свойство user-select с использованием вендорных префиксов и если хотя бы одно условие выполняется у наc применяются стили в скобках.

Заметьте мы заведомо не знаем какое из условий будет выполнено поэтому перечисляем свойство user-select со всеми префиксами.

Мы можем пользоваться и другими операторами and(и) not(не), пример:

@supports (display:grid) and (grid-template-columns: repeat(4, 22%)) {
    div{
        display:grid;
        grid-template-columns: repeat(4, 22%);
    }
    div:after{
        Content:"поддерживается"
    }
}

Здесь мы воспользовались оператором and для проверки поддержки свойств display:grid и grid-template-columns. Причем данное условие будет выполнено только в случае если будут поддерживаться оба свойства.

Обратную проверку мы можем совершить через оператор not:

div{
    display:grid;
    grid-template-columns: repeat(4, 22%);
}

@supports not((display:grid) and (grid-template-columns: repeat(4, 22%))) {
    div{
        display:block;
        width:22%;
        float:left;
    }
   
}

Здесь мы проверяем если свойства не поддерживаются браузером, то мы меняем их на потенциально поддерживаемые всеми браузерами.

Помимо css мы можем проверять поддержку свойств стилей через javascript. Делается это довольно просто:

if(window.CSS.supports('display','grid')){
    console.log('Свойства grid поддерживаются браузером');
    document.querySelector('div').style.display = 'grid';
}else{
    console.log('Свойства  grid не поддерживаются браузером');
    document.querySelector('div').style.display = 'block';
}

Через объект css и его метод supports() мы проверяем поддерживание свойства в браузере.

Если метод supports() возвращает true значит данное свойство поддерживается в браузере, если false значит нет.

Обратное условие мы можем указывать через отрицание:

if(!window.CSS.supports('display','grid')){
    console.log('Свойства  grid не поддерживаются браузером');
    document.querySelector('div').style.display = 'block';
}

Проверку условия с использованием операторов or и and мы можем осуществлять в таком формате:

if(window.CSS.supports('(display:grid) and (grid-template-columns: repeat(4, 22%)')){
    console.log('Свойства grid поддерживаются браузером');
    document.querySelector('div').style.display = 'grid'
}

Все условие мы записываем одно строкой.

Вот так теперь мы можем проверять поддержку стилевых свойств в разных браузерах и исходя из этого задавать стили.

На этом дорогие друзья данная статья подошла к концу. Надеюсь данный материал был для вас полезен.

Желаю Вам удачи и успехов в программировании! Пока!

Оцените статью

Еще статьи

Group by sql

Теги текста HTML

scroll js

Таймеры JavaScript

CSS before after

CSS перенос слов

shelve python

Комментарии

Проверочный код

В данном разделе пока нет комментариев!

История

    ПОДПИСКА

    • Подпишись и получай информацию о выходе новых статей на почту! Просто введите свою почту, нажмите кнопку подписаться. На почту должно будет прийти сообщение с потверждением подписки. Если сообщение не пришло проверьте раздел спам или попробуйте другую почту. Также по всем техническим проблемам вы можете написать в поддержку

    НОВОСТИ

    • Всем привет! Запустил новый сервис для поиска и бесплатного скачивания, прослушивания аудиокниг. Здесь вы можете найти множество литературы и прослушать ее. Вскоре возобновлю написание статей.