Diskuse JPW: Práce s filtery

	Autor	Zpráva
	Witiko Profil	#1 · Zasláno: 27. 3. 2011, 19:08:13 · Upravil/a: Witiko Odpovědět Citovat Rozhodnul jsem se, že se podělím o nepříjemnou zkušenost se systémem grafických filtrů, jež používá Internet Explorer od verze 5.5, jež by mohla ušetřit části z vás bolehlavů, jimiž jsem si musel projít já. Filtry se hodí na simulaci určitých css efektů, jako je rotace, stín za textem, průhlednost apod. - efektů, která Internet Explorer mimo filtrů standardně nepodporuje. Nějaké z filtrů funkcionalitou přesahují i dosavadní standard CSS, nicméně v zájmu funkčnosti napříč prohlížeči jim není dnes již přikládán nadměrný zájem. Z toho co jsem vyrozuměl jsou zde dva možné způsoby práce s filtry přes javascript: 1) <Element>.style.filter - zde je obsažen řetězec se všemi aplikovanými filtry, lze jej rozparsovat a pracovat s ním. 2) <Element>.filters - toto je pole veškerých aplikovaných filtrů. Pomocí syntaxe <Element>.filters.názevFiltru.hodnota nebo <Element>.filters.item("názevFiltru").hodnota lze zjišťovat a měnit hodnoty filtrů, pomocí <Element>.filters.item("názevFiltru").enabled pak filtr deaktivovat Pro čistotu práce jsem se (chybně) rozhodnul pro druhý způsob. Jádro problému spočívá ve faktu, že definovat filtr pomocí javascriptu nelze jinak, než přidáním do řetězce <Element>.style.filter, Internet Explorer přidávání položek do <Element>.filters neumožňuje. Ostatní operace (aktivace / deaktivace / změna hodnot) pak jde zdánlivě provést přes objektový model. U jednoho filtru je vše v pořádku, takže: element.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; // vytvoříme filtr element.filters["DXImageTransform.Microsoft.Alpha"].opacity = 20; // změníme hodnotu element.filters["DXImageTransform.Microsoft.Alpha"].enabled = false; // deaktivujeme filtr Proběhne přesně jak má. Při více filtrech však dojde k problému. Ten tkví v tom, že Internet Explorer neaktualizuje <Element>.style.filter řetězec na základě změn v objektovém modelu. Proto se při vytvoření libovolného jiného filtru navrátí všechny dříve definované filtry do stavu v jakém byly při definici. Ukázka: element.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; // vytvoříme filtr element.filters["DXImageTransform.Microsoft.Alpha"].opacity = 20; // změníme hodnotu element.filters["DXImageTransform.Microsoft.Alpha"].enabled = false; // deaktivujeme filtr Hodnota element.style.filter je stále "progid:DXImageTransform.Microsoft.Alpha(opacity=80)". element.style.filter += "progid:DXImageTransform.Microsoft.Glow(color=#aaaaaa, strength=8)"; Nový filtr se aplikuje a starý filtr se vrátí do stavu "opacity=80". Proto doporučuji při práci s filtry jednoduše parsovat <Element>.style.filter. Není to pěkné, ale alespoň si zachováte zdravý rozum a nebudete mít takovou chuť efekty pro MSIE jednoduše neoptimalizovat.
	Chamurappi Profil	#2 · Zasláno: 28. 3. 2011, 11:18:41 Odpovědět Citovat Reaguji na Witika: Vlastnost `style.filter` reprezentuje filtr přirazený atributem `style`, zatímco kolekce `filters` se týká všech filtrů aplikovaných na element. Poměrně čisté řešení tedy je přidat `filter` pomocí třídy ve stylopisu a poté mu dodatečně upravovat vlastnosti přes vlastnosti položky v kolekci `filters`. Nešikovné je, že pak nejde filtry jednoduše kombinovat, protože `filter` nastavený jednou třídou je přepsaný `filter`em nastaveným druhou třídou. Smutné je, že stejnou (a naprosto zbytečnou) vadu na kráse má i `transform`. V CSS čím dál víc chybí přičítání. „jež používá Internet Explorer od verze 5.5“ 4.0. „Nějaké z filtrů funkcionalitou přesahují i dosavadní standard CSS, nicméně v zájmu funkčnosti napříč prohlížeči jim není dnes již přikládán nadměrný zájem.“ Což je zajímavý jev. Když se mluví o kulatých rozích, lidi se předhánějí v okázalém zanedbávání Exploreru, ale pokud Explorer umí něco navíc, tak o to není zájem :-)
		Časová prodleva: 13 let

Vaše odpověď

Mohlo by se hodit