Как да използвам правилото @supports във вашия CSS

Използвали ли сте някога някаква форма на CSS откриване на функции като Modernizr за да разграничите поведението на вашия CSS въз основа на това дали дадена функция се поддържа? Обзалагам се, че повечето от вас имат. Въпреки че каскадният характер на CSS ни позволява да осигурим резервни копия за много функции на CSS само чрез писане на множество декларации, понякога се нуждаем от по-задълбочен контрол върху това, което се прилага, когато някои от нашите най-модерни bling не са там.

Обмисли граница-изображение . Когато не се поддържа, обикновено искаме да предоставим резервен вариант заден план и различен граница , което не трябва да се прилага кога граница-изображение се прилага. Друг често срещан случай са нови модули за оформление (Flexbox, Grid Layout и Regions); когато не са налични, трябва да кодираме алтернативно оформление, като използваме свойства, които могат да влязат в конфликт с тези технологии, което означава, че не могат да съществуват съвместно.



За щастие, CSS WG проектира елегантно и чисто CSS решение, известно време наречено Правило @supports . С това правило, примерният граничен образ ще бъде написан като:



.foo { border: 15px solid transparent; border-image: url(fancyborders.png) 33%; } @supports not (border-image: url(foo.png) 33%) { .foo { border: 3px solid rgba(0,0,0,.3); background: url(alternative-bg.png) beige; } }

Това се нарича „заявка за функция“, която е подобна на медийна заявка. На практика ще искате да проверите и за префиксирани версии:

@supports not (border-image: url(foo.png) 33%) or (-moz-border-image: url(foo.png) 33%) or (-webkit-border-image: url(foo.png) 33%) { ...

Освен това или , и и не , са налични оператори, позволяващи всякакъв вид сложна логическа логика. Тези правила могат да бъдат вложени, което значително опростява вашия код, когато използвате много сложни заявки за функции.



Има уловка. Неразумно е да се използва @поддържа за функции, които браузърите са поддържали преди да поддържат @поддържа себе си. Следователно все още не можем да го използваме за много неща. Той обаче вече се поддържа от Firefox 22+, Chrome 28+ и Opera 12.1+. Ако IE 11 и Safari 7 също го поддържат, можем да започнем да го използваме за функции, въведени в или след тези версии.

как да нарисувам pin up art

CSG WG също осъзна, че използването на префикси за @поддържа би погубило целта (тъй като авторите ще трябва да напишат няколко правила няколко пъти). Следователно всеки браузър, който поддържа @поддържа прави това без префикс. Няма такова нещо като @ -webkit-поддържа . Когато браузърите не бяха сигурни относно своите имплементации, те го скриха зад флаг, както Firefox направи във версии 17-27.

wacom бамбук таблет ctl-460

Може би си мислите, че това е чудесно за CSS, но това не ви помага да откривате CSS функции чрез JavaScript, което понякога е необходимо. За щастие, той идва и със собствен елегантен JavaScript API: CSS.supports () . Използва се така:



if (CSS.supports('border-image', 'url(foo.png) 33%')) { ... }

Тази функция също е лесна за попълване, така че може да бъде достъпна в браузъри, които не са наваксали. Надяваме се в бъдеще да можем да открием поддръжка за други функции на CSS, като например @rules и селектори, а не само свойства и стойности.

Думи: Леа Веру

Леа Веру преди това е работила като адвокат за разработчици в W3C и в момента прекарва дните си в писане и проектиране на първата си книга, озаглавена CSS Secrets, която трябва да бъде публикувана с O'Reilly през 2014 г.

Тази статия първоначално се появи в нетно списание брой 248.

Хареса ли ви това? Прочетете тези!