CSS @podporuje

Detekce funkcí prostřednictvím JavaScriptu je osvědčeným postupem na straně klienta a ze všech správných důvodů, ale bohužel stejná funkce nebyla k dispozici v CSS. To, co nakonec děláme, je opakování stejných vlastností několikrát s každou předponou prohlížeče. Fuj. Další věc, kterou kontrolujeme pro podporu vlastností CSS pomocí JavaScriptu, což vede ke krátkým zábleskům obsahu, nadějnému kódu a podpoře a dalším problémům. Firefox, Chrome a Opera nedávno přidaly podporu pro CSS @supports (CSS) a CSS.supports (JavaScript) pro zjištění podpory prohlížeče pro danou direktivu stylu. Pojďme se podívat, jak to funguje!

Zobrazit ukázku

CSS @supports

CSS @supports direktivy jsou ve vašem kódu CSS stejně jako @media dotazy dělají:

@supports(prop:value) {
	/* more styles */
}

CSS @supports umožňuje vývojářům kontrolovat podporu stylu mnoha různými způsoby.

Základní kontroly majetku

Můžete provádět základní kontroly vlastností a hodnot:

@supports (display: flex) {
	div { display: flex; }
}

Toto je nejzákladnější použití @supports .

not Klíčové slovo

@supports lze spárovat s klíčovým slovem 'not' pro kontrolu absence podpory:

@supports not (display: flex) {
	div { float: left; } /* alternative styles */
}

Vícenásobné kontroly a podmínky

Vícenásobné kontroly vlastností CSS lze provést pomocí řetězení 'nebo' a 'and':

/* or */
@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {

    /* use styles here */
}

/* and */
@supports (display: flex) and (-webkit-appearance: caret) {
	
	/* something crazy here */
}

Můžete zřetězit více vícenásobné podmínky se závorkami, stejně jako ve většině ostatních programovacích jazyků:

/* and and or */
@supports ((display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex)) and (-webkit-appearance: caret) {

    /* use styles here */
}

@supports podmíněný vzor struktury odpovídá vzoru @media podmíněný vzor 's.

JavaScript CSS.supports

JavaScriptový protějšek CSS @supports je okno.CSS.supports . CSS.supports spec poskytuje dva způsoby použití. První způsob použití zahrnuje poskytnutí dvou argumentů:jeden pro vlastnost a druhý pro hodnotu:

var supportsFlex = CSS.supports("display", "flex");

Druhá metoda použití zahrnuje jednoduché poskytnutí celého řetězce k analýze:

var supportsFlexAndAppearance = CSS.supports("(display: flex) and (-webkit-appearance: caret)");

Skvělé, že můžete zkontrolovat podporu CSS oběma metodami – vyhnete se tak kontrole vlastností na přechodných uzlech a vytváření řetězců pro kontrolu podpory.

Než použijete metodu podpory pomocí JavaScriptu, je důležité funkci nejprve detekovat. Opera používá jiný název metody, takže to trochu hází:

var supportsCSS = !!((window.CSS && window.CSS.supports) || window.supportsCSS || false);

@supports Použití

Ve většině případů je nejlepší použití @supports je nastavení starší sady stylů jako záloha a následné zrušení těchto stylů a vylepšení, pokud je daná vlastnost podporována. Jeden skvělý případ použití pro @supports je rozložení. Některé okrajové prohlížeče nyní poskytují podporu pro flexbox, zatímco jiné zaostávají. V tomto případě můžete zadat kód:

section {
	float: left;
}

@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {

    section {
      display: -webkit-flex;
      display: -moz-flex;
    	display: flex;
    	float: none;
    }
}

Objeví se další případy dobrého použití, protože vývojáři budou mít více času experimentovat s novým @supports funkce.

Povolení @supports

Pokud chcete fušovat s novými funkcemi, jako je @support , měli byste investovat nějaký čas do instalace okrajových prohlížečů, jako jsou Canary, Firefox Nightly a Opera Next. Opera 12.1, WebKit Nightly a Firefox Nightly všechny podporují @supports . Staré verze Firefoxu poskytují podporu po [layout.CSS.supports-rule.enabled ] je povoleno.

Zobrazit ukázku

@supports je vítaným doplňkem specifikací CSS a JavaScriptu. Detekce funkcí je naším osvědčeným postupem číslo jedna pro podporu funkcí a @supports poskytuje vrstvu nižší úrovně než hacky, které používáme v posledních několika letech. Mám podezření, že uvidíme spoustu @support direktivy během několika příštích let, protože flexbox se stane užitečnějším a široce používaným!