Detect Pseudo-Element Animation Support

Před časem jsem zveřejnil zajímavou drobnost od Daniela Buchnera, která vývojářům umožňuje detekovat vkládání uzlů DOM pomocí JavaScriptu a CSS animací; úžasný trik poháněný CSS animacemi. Lea Verou nedávno zveřejnila další detekční úryvek založený na animacích CSS:podpora detekce pseudoprvků animace. Tady je návod, jak to udělala!

CSS

Testovací případ může používat jakýkoli pseudoprvek; v tomto případě použijeme :before :

/**
 * Animation on pseudo-elements test
 */
@keyframes color { from,to { color: rgb(0, 255, 0); } }

.testElement:before {
	content: '(...testing animation support...)';
	color: rgb(255, 0, 0);
	animation: color 1s infinite;
	-webkit-animation: color 1s infinite;
}

Pseudoprvku je přiřazena jednoduchá barevná animace a náhodná kontrola generovaného obsahu vám řekne, zda je animace podporována (zelená) nebo ne (červená). V době tohoto příspěvku podporují animaci pseudoprvků pouze Firefox a Chrome.

Detekce JavaScriptu

Díky tipu od Ahmeda El Gabriho mohu představit metodu detekce animace pseudoprvků:

var color = window.getComputedStyle(
	document.querySelector('.testElement'), ':before'
).getPropertyValue('color')

if(color == 'rgb(0, 255, 0)') {
	// Supported! :)
}

Platí stejný princip; pokud je barva zelená, animace fungovala. JavaScriptová metoda detekce funkcí dělá všechno lepší!

Bohužel se nezdá, že by existovala metoda JavaScriptu pro testování vlastností generovaného obsahu, takže se zdá, že namátková kontrola je vše, na co se v tuto chvíli můžeme spolehnout. Doufejme, že někdo chytrý tam může přijít na efektivní způsob, jak získat výsledek testu! Mít spolehlivou metodu pro detekci animace pseudoprvků je vynikající; další nástroj k přidání do arzenálu!