CSS3 v praxi: rotácia elementov pre všetky prehliadače (IE5.5+)

Prednedávnom som na svoju nenavštevovanú doménu peteroravec.com (SEO pokusy) nahodil zaujimavú CSS3 fotogalériu v JQuery. Script drag and dropu som našiel hotový a až na pár zmien som ho veľmi neupravoval. Chcel som ale aby to bolo originálne a hlavne fungujúce vo všetkých prehliadačoch tak aby fotografie mali tiene a boli rôzne pootáčané. V dnešnej dobe kedy sa píše o HTML5 , CSS3 riešeniach sa to zdalo jednoduché až na Internet Explorer ktorý ignoruje čo sa dá.

Tiež sa tu prejavila značná rozdielnosť v rýchlosti renderovania tejto fotogalérie.

V posledných verziách Chromu, Firefoxu a Opera prehliadača nebol s podporou CSS3 rotation žiadny problém i keď je potrebné ich zapísať pomocou prefixu pre konkrétny prehliadač. Ako sa ukázalo Internet Explorer (vôbec som nečakal, že mi to uľahčí) nepodporuje nič poriadne z CSS3 a tak som musel siahnuť po jeho vlastných (hnusných) riešeniach aby som docielil "požadovaný" efekt.

Rotácia elementov

Pomocou CSS3 môžete naklopiť ľubovoľný HTML element (DIV, text, obrázky, formuláre. celé stránky) do rôzneho uhlu. Vzhľadom na to, že reálna podpora CSS3 ešte hodnú dobu nebude už dnes môžeme želaný efekt docieliť CSS zápismi pre jednotlivé rendrovacie enginy konkrétneho prehliadača. Pre moje použie som si vystačil s otočením alementov len pod uhlom a nie aj do priestoru.

Pre bežné moderné prehliadače je to možné zapísať takto:

-webkit-transform: rotate(-25deg); /* zápis pre Chrome a Safari */
-moz-transform: rotate(-25deg);    /* zápis pre Firefox */
-o-transform:rotate(-25deg);       /* zápis pre Operu od verzie 9 */
rotation: -25deg;                  /* štandardný zápis, zatiaľ nepodporovaný */

Internet Explorer a rotácia objektov

Na otočenie elementov v IE môžete použiť 2 spôsoby. Ak potrebujete pootočiť element vždy o 90 stupňov tak použite nasledujúci zápis:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

• 0 - bez otočenia
• 1 - otočené o 90 stupňov
• 2 - otočené o 180 stupňov
• 3 - otočené o 270 stupňov

V prípadoch kedy potrebujete niečo otočiť o 90 stupňov v IE je táto možnosť určite jednoduchšia ako nasledujúca.

Otočenie elementov v IE o ľubovoľný uhol? Ufff... ale dá sa to!

Na moju galériu som potreboval aby fotografie boli pootáčané v ľubovoľnom uhle. Dalo by sa to spraviť tak, že si vytvorím už pootáčané obrázky v PNG ale veľkosť takýchto obrázkov bez kompresie by bola veľmi veľká a nikto by nečakal tak dlho aby sa mu stránka natiahla. Všetky ostatné prehlaidače sa dali ľahko vyriešiť a jediný oriešok (alebo radšej orech) na rozlúsknutie bol už len IE.

Pre otočenie elementov v IE existuje filter s názvom: progid:DXImageTransform.Microsoft.Matrix. Ten okrem otáčania umožňuje aj naklápanie v priestore a scaling. Ako je zvykom tak syntax Microsoft filtrov pre IE je tak ťažkopádny, že si ho proste nezapamätáte ani za nič. Na prvý pohľad tam ani nie je nič logické a napríklad také otočenie elementu o 45° vy sa zapísalo nejak takto:

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678,sizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678,sizingMethod='auto expand');

Ako vypočítať hodnoty pre otočenie?

Najjednoduchšie je použiť CSS Matrix Rotation generátor ktorý Vám vygeneruje CSS pre otočenie elementu pre všetky prehliadače. Viac informácií o parametroch filtra nájdete na Microsoftackej stránke.

Výkon prehliadača a antialiasing

Ak si pozriete moju galériu na peteroravec.com v rôznych prehliadačoch tak rýchlo zistíte, že rýchlosť stránky je rôzna (i keď aplikovaných efektov je veľa). V Google Chrome (verzia 5.0.375.125 beta) je galéria rýchla ale má strašne zubaté hrany obrázkov. V ostatných prehliadačoch sú hrany ostré a pekné ale aj rýchlosť sa tu mení. U mňa na PC (quad core 2,4GB) vo Firefoxe presun fotiek myšou mierne seká. V Opere a IE to ide lepšie.

Tieto nedostatky dúfam vyrieši podpora GPU ktorá má byť vo Firefoxe 3.7 a najnovšom IE9. Uvidíme do budúcnosti.

I keď sme si teraz ukázali ako dosiahnuť určitý efekt vo všetkých prehlidačoch nie je to ideálne riešenie a chce to pevné nervy. Obávam sa ale, že na časy kedy už nebudeme riešiť podporu CSS3 si počkáme aspoň 5 rokov kým sa svet nezbaví IE6, IE7 a IE8. V prípade, že sa Vám podobné riešeni nepáči pozrite si otáčanie elementov založené na Javascripte a Jquery. http://code.google.com/p/jqueryrotate/

Podobné články

• 22. November 2008 -- Najvhodnejšia šírka webu? 960 Grid system
• 5. September 2008 -- Ako vytvoriť ikonku v adresnom riadku prehliadača – FavIcon
• 28. August 2008 -- Internet Explorer 6 je brzda internetu
• 16. Júl 2008 -- Prečo používať beztabuľkový layout v HTML? Tabuľkový sa už nenosí!
• 14. Júl 2008 -- Ako horizontálne vycentrovať obsah – DIV na stred v CSS?