Dec
6
Snabbtips: Använd CSS3 i IE med ett par enkla Javaskript hack
Dom senaste månaderna har jag jobbat med en rad roliga projekt och en sån propagandamaskin jag är att tjata på klienter att det är okej att använda CSS3 redan idag. Ibland är kunderna otroligt skeptiska eller kan det vara så att kunden vill verkligen att det ska se lika ut i olika webbläsare. En gemensam nämnare som åter kommer upp är hur löser jag runda hörn, box-skuggningar, pseudo klasser osv utan en rad olika Javaskript hack i alla dem vanligaste webbläsare.
Två små Javaskript bibliotek som verkar göra sitt jobb är..
Modernizr
Detta bibliotek stödjer CSS3 och HTML5 som Multiple backgrounds, box-shadow, Drag and Drop, CSS Gradients och många fler. Besök sidan för mer information. Något som kan vara användbart i många olika typer av projekt.
Selectivizr
Selectivizr gör så du kan använda pseudo-klasser i Internet Explorer. Att använda pseudo-klasser (:nth-child(N)) sparar tid och möda och även roligt att använda. Se mer om pseudo-klasser på Sohtanaka och en kort se värd video kan du se på net.tutsplus.
Johan jobbar som Interaktiondesigner på Cypoint där han får syssla med interaktionsdesign, webbdesign och visuell kommunikation som är riktat till E-handel, webb och mobila lösningar. Se mer om Johan Pettersson.
Lena (December 30, 2010 at 00:34)
Hej!
Jag kan förstå om kunderna är oroliga – ett javascript är ju ingen garanti för tillgänglighet eftersom alla inte har javascript påslaget på datorn. Så ur tillgänglighet/användbarhetsaspekt ska man aldrig låta en web site förlita sig på javascript för att fungera. Runda hörn går att få med css 2.1 och det finns filter även för IE (liksom web-kit) vad gäller de vanligaste effekterna. Om man absolut måste använda genealogi eller andra deklarationer (som kanske inte är så vanliga) bör man noga överväga syftet med det. Men visst, jag håller med – stilmallen optimeras betydligt med css3 och det är trist att hela tiden vara tvungen att ta hänsyn till den webbläsaren.
mvh/Lena
Johan (December 30, 2010 at 12:43)
Hej Lena och tack för en bra kommentar,
Håller med dig i många punkter , speciellt det gäller användbarhetsaspekten men just i mina fall så har kundernas webbsidor inte kunnat användas utan Javaskriptet påslaget. Då sidorna har varit helt beroende på det, vilket man ser blir mer vanligt på varje större webbsida idag.
Hoppas du kan hjälpa mig och rikta mig hur man kan använda dom vanliga effekterna som runda hörn i IE utan JS så skulle det vara tacksamt.
Gott nytt!
Aaarvid (January 13, 2011 at 16:20)
Känns som att dom flesta kunderna bryr sig mer om att utseendet ska vara lika i alla webbläsare än tillgänglighet/användbarhet.
När det handlar om utseende så tycker jag att det inte alls behöver se lika ut i alla webbläsare. En sida går inte sönder för att det inte är rundade hörn i IE exempelvis. Dom som besöker sidan kommer inte heller att veta att det ska vara rundade hörn, så dom kommer inte märka nånting.
Förutsätter då att man bygger sidan så att den fortfarande ser respektabel ut i olika webbläsare.
Jag försöker alltid övertyga kunderna att det inte måste se lika ut.
Johan (January 13, 2011 at 17:01)
Det vi som jobbar i industrin som bestämmer i slutändan. Skulle alla utvecklare fortsätta anpassa till IE6 så skulle aldrig dem stora företagen ha tanken att byta upp sig.
Det är vi som driver trenderna framåt och användarna får anpassa sig och inte vice-versa! (det finns undantag)
Den här artikeln läste jag idag som stämmer otroligt bra in på detta ämne:
http://inspectelement.com/articles/use-css3-now/
Aaarvid (January 16, 2011 at 18:00)
Självklart, håller med. Finns ju dock undantag som du säger.
Mycket bra artikel, tack för den!