Всем привет! Сегодня мы с вами познакомимся с директивой 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'
}

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

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

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

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