| Autor | Zpráva | ||
|---|---|---|---|
| Witiko Profil |
#1 · Zasláno: 16. 5. 2010, 12:38:54 · Upravil/a: Witiko
Jako každý, kdo se kdy snažil vytvořit generické řešení na změnu průhlednosti elementů, i já se potýkám s MSIE a jeho filtry. Mým problémem je konkrétně vypnutí ClearType vyhlazování fontů při použití jakéhokoliv filtru.
Tento příklad samozřejmě funguje: .withFilter {
filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=20);
...
}
.withoutFilter {
...
}Při změně třídy prvku dojde správně k vypnutí / zapnutí filtru a s ním i antialiasingu. Můj problém je, že se snažím o změnu průhlednosti dynamicky, nějak takto:
function(Element, opacity) {
...
Element.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=" + opacity*100 + ")";
- nebo -
Element.style.filter = "alpha(opacity=" + opacity*100 + ")";
...
}
Z výše zmíněných problémů s textem bych byl při přiřazení opacity 100 rád, kdybych měl nějakou možnost filtr zcela vypnout. Problém je, že toto řešení nechce fungovat: Element.style.filter = "none"; Element.style.filter = ""; Zkusil jsem si vytvořit pomocnou třídu, kterou bych elementu při dosažení opacity 100 přiřadil, ale stále se setkávám s neúspěchem: .withoutFilter {
filter: none;
}Aktuálně tedy využívám značně neelegantního řešení: definice tříd pro každou hodnotu opacity od 0 do 100. Toto řešení se mi však nelíbí, navíc je nutné opacity Math.round()ovat, rád bych měl čistě javascriptové řešení. Při hledání na googlu jsem narazil na spoustu článků zabývajících se filter tématikou, ale na žádný, který by se zabýval jejich vypnutím. P.S.: Zdá se, že se stejným problémem se aktuálně potýká google. Po otevření v MSIE a fade-inu textu a vrchní lišty je veškerý tento text zubatý a nevyhlazený. |
||
| Witiko Profil |
#2 · Zasláno: 16. 5. 2010, 17:18:48
Pokud se někdo s tímto problémem již potýkal, velice bych uvítal jakékoliv rady, nebo vodítko. Jsem díky tomuto problému na mrtvém bodě s vývojem frameworku.
|
||
| Chamurappi Profil |
#3 · Zasláno: 17. 5. 2010, 16:50:13
Reaguji na Witika:
„kdybych měl nějakou možnost filtr zcela vypnout“ Pracuješ s filtrem nastaveným skrz atribut style. Celý obsah atributu style můžeš měnit ve style.cssText — když odtamtud zcela zmizí filter, měl by zmizet i neblahý efekt odcleartypování. Není to ovšem nijak zvlášť hezký postup, musel bys opatrně přežvýkat všechny stylové deklarace v tom atributu, abys je nepoškodil.
„filter: none;“ Tahle hodnota bohužel také vypíná ClearType :-) „navíc je nutné opacity Math.round()ovat“ 1) K čemu potřebuješ víc než sto úrovní průhlednosti? Jak dokonalé oko na to bude koukat? 2) Explorer parametr opacity ve filtru alpha stejně zaokrouhluje na celé číslo.
„rád bych měl čistě javascriptové řešení“ Přesněji řečeno: chceš řešení, které pracuje s atributem style. Co je na tom čistého?
Přepínání tříd mi nepřipadá až tak neelegantní. Dle mého názoru by dobře napsaný skript (stejně jako dobře vychovaný kodér) měl užívat atribut style jen v opravdu dobře odůvodněných případech.
„Jsem díky tomuto problému na mrtvém bodě s vývojem frameworku.“ Líbí se mi tvá snaha. Spousta tvůrců frameworků na tenhle problém dlabe, asi v domnění, že ošklivě hranaté a hůř čitelné písmo je nutná daň za krásnou průhlednost. |
||
| Witiko Profil |
#4 · Zasláno: 17. 5. 2010, 17:08:09 · Upravil/a: Witiko
Chamurappi:
„Přesněji řečeno: chceš řešení, které pracuje s atributem style. Co je na tom čistého?“ Nevím, jednoduše se mi zdá čistší řešení, které pomocí jedné řádky scriptu způsobí změnu průhlednosti objektu, než řešení zahrnující zbytečné vytvoření 100 css tříd jen kvůli MSIE. Chápu, že je lepší mít data od scriptu oddělena, v tohle případě je ale jediná datová část předávána jako atribut funkce a těch 100 tříd je tu skutečně navíc. Samozřejmě pokud se jedná o definici vzhledu, který je pokaždé stejný, je definitivně lepším řešením definovat pro daný vzhled třídu mimo script, použití style vlastnosti je tu naprosto mimo. Dokonce i spousta na první pohled dynamických řešení lze definovat bez pomoci javascriptu pomocí chytře zapsaného css. V tomto případě si ale skutečně myslím, že je použití .style atributu oprávněné, protože zde nepracujeme s žádnými konstatními veličinami a definice třídy pro každý bod průhlednosti je nelogická vzhledem k dynamické povaze problému. Řešení přes .style.cssText rozhodně je řešení, ale řešení už velmi "hacky" přičemž každý prohlížeč mi může předložit daný css text ve vlastním formátování. Chamurappi: „Jak dokonalé oko na to bude koukat?“ Jde o přizpůsobení funkci fade a show, které si vezmou čas animace v milisekundách a rozdíl mezi dvěmi hodnotami průhlednosti. Poté daný čas vydělí (1000 / FramesPerSecond) a zaroundují. Výsledná cifra je poté vydělena rozdílem hodnot průhlednosti a výsledkem je číslo, které se k aktuální hodnotě průhlednosti přičte / odečte po (1000 / FramesPerSecond) milisekundách. Ve skutečnosti je pravda, že lidské oko nejspíš rozdíly mezi jednotlivými body průhlednosti nepozná a bylo by možné dosáhnout většího výkonu, jen pokud by se zaokrouhlená číslice lišila, aktuálně dochází ke změnám (alespoň ve firefoxu a prohlížečích podporujících opacity vlastnost) každých (1000 / FramesPerSecond) = 40 milisekund (v případě, že interpret stíhá, pokud má právě na práci něco jiného, mnoho volání intervalu se vůbec nemusí provést) ať už je daná změna jakkoliv malá. |
||
|
Časová prodleva: 14 let
|
|||
0