VisionEars wordt Mulberries Agency

Wij gaan vanaf 1 september verder onder de naam Mulberries Agency. Naast de vertrouwde service die je van ons gewend bent hebben we ons ook gespecialiseerd op het gebied van Marketing Automation en Experiment Marketing.

Bekijk hier de website van Mulberries Agency Sluit popup

Download je gratis ebook: Marketing automation - 6 systemen vergeleken

Zoek je naar software om meer leads te converteren? Download onze gratis ebook waarin wij de 6 meest gebruikte softwarepakketten met elkaar vergelijken!

Download je gratis ebook: Infograpic stappenplan

Voor een geslaagde infographic heb je meer nodig dan goede data en een mooi design. Het moet een verhaal vertellen dat aansluit bij de doelgroep. Download ons heldere stappenplan en ga voor die perfecte infographic.

Download je gratis ebook: 10 tips voor een optimale webshop homepagina

De homepagina van je webshop is enorm belangrijk, want het is de first impression die telt. Een geoptimaliseerde homepagina is belangrijk voor het succes van je webshop.

Gratis consult: snelheidsoptimalisatie

Een snelle(re) website draagt bij aan de gebruikerservaring en levert meer conversies en dus omzet op. Wij helpen je graag op weg!

Wie onderstaand formulier invult, ontvangt een uitnodiging van een gratis consult. Tijdens dit gesprek bekijken we de betreffende website(s) en bespreken we samen alle mogelijkheden en valkuilen.

Gratis consult: Webshop optimalisatie

Voor een geslaagde webshop heb je meer nodig dan mooi design. Een goede gebruikerservaring, technisch in orde en zoekmachine geoptimaliseerd. Neem contact op voor een GRATIS consult. Wij nemen je webshop onder de loep zodat jij precies weet waar je kansen liggen en nog meer rendement uit je webshop kan halen.

Download jouw gratis ebook
  • Blog

15
Aug 2012
Web & interaction design

CSS voor IE

15 aug 2012 | Kevin | Web & interaction design

CSS hacks

CSS hacks, buiten de zwakheden van IE uit om styles toe te voegen die alleen IE moet gebruiken. Bijvoorbeeld:

div.myClassName {
    margin-left: 10px;
    _margin-left 9px; /* target IE-only */
}

Alle goede browsers, die zich aan de regels van het W3C houden, zoals Chrome en Firefox negeren de regel "_margin-left" omdat dit geen geldige css regel is. Alleen IE hanteerd zijn eigen regels en staat de underscore wel toe. Hoewel dit natuurlijk niet wenselijk is, is het in deze situatie wel handig. Omdat IE op heel veel vlakken in CSS zijn eigen regels hanteerd, en de standaarden van het W3C negeert, kan het zijn dat uitlijning van bepaalde elementen in Firefox met een linker marge van 10 px klopt, maar in IE met 9 px zou kloppen. In zo'n geval zou de underscore kunnen worden gebruikt om enkel IE de marge van 9 px te laten gebruiken, andere browsers negeren deze namelijk.

Deze techniek heeft echter een groot nadeel, namelijk dat je css bestand niet meer "W3C valid CSS" is. Alle webdevelopers zouden natuurlijk altijd moeten streven naar volledig "W3C valid CSS". Daarbij wordt de leesbaarheid van je stylesheet minder, en het onderhouden hiervan moeilijker naarmate je meer en meer van deze hacks toepast. Zeker wanneer je afzonderlijke hacks voor de verschillende versies van IE probeert in te bouwen.

Conditional stylesheets

Een alternatief voor de rommelige en "niet nette" CSS hacks is het toevoegen van "conditional stylesheets" aan je html:


In het bovenstaande voorbeeld wordt het bestand style.css in de map css geladen door alle browsers, inclusief IE browsers. Maar omdat sommige elementen aleen op IE 7 net iets anders uitgelijnd moeten worden, wordt er onder het "standaard" stylesheet een tweede stylesheet toegevoegd, dat alleen door IE 7 wordt geladen, vanwege de if-statement ervoor. In dit stylesheet kunnen uitzonderingen voor IE 7 worden opgenomen, die de standaard styles overschrijven.

Hoewel deze techniek geen invloed heeft op de validatie van je css of html, is het nog steeds geen wenselijke situatie. Het zorgt voor onhandige en lastig te onderhouden code, omdat een CSS regel over meerdere bestanden verdeeld staat. Verder heeft het laden van nog een extra stylesheet - en in sommige gevallen, waar je uitzonderingen wilt opnemen voor meerdere versies van IE, zelfs een aantal extra stylesheets - invloed op de snelheid van je site. Conditional stylesheets zorgen voor extra "requests" en staan in de "head" van je site, waardoor de rest van de site pas geladen wordt nadat deze bestanden volledig zijn gedownload.

Wat is dan wel een goede oplossing om je site netjes te tonen op alle browsers, zonder het gebruik van javascript.

Conditional classes

Een goede techniek om dit veel voorkomende probleem op te lossen is het gebruik van "conditional classes". Dit werkt als volgt:






Door deze code toe te voegen aan je html code op de plek waar je normaal gesproken het "" element zou hebben staan, wordt er een extra class aan het "" element toegevoegd voor elke versie van IE. Op deze manier kun je je css code als volgt eenvoudig aanpassen aan de grillen van IE:

div.myClassName {
    margin-left: 10px;
}
.ie div.myClassName {
    margin-left 9px; /* target IE-only */
}

De bovenstaande code geeft alle divs met classe "myClassName" een linker marge van 10 px, maar divs met een classe "myClassName" die "descendents" zijn van het html element met de classe "ie" krijgen een linker marge van 9 px. Door het gebruiken van deze techniek bij het oplossen van problemen met IE's eigen interpretatie van CSS behoud je het overzicht in je CSS bestanden. Deze techniek heeft geen invloed op de snelheid van je site, en zowel je CSS als html zijn W3C valid. 

Een kleine waarschuwing is wel op zijn plek bij het gebruiken van deze techniek. In veel gevallen is het niet nodig om specifieke CSS code voor IE te schrijven. Vaak kunnen verschillen tussen browsers simpel worden opgelost door je CSS en html code van tevoren goed te overdenken en op een logische manier te schrijven. Het is niet verstandig om met behulp van deze techniek "slordig" te gaan programmeren en te pas en te onpas CSS regels te schrijven voor enkel IE. Echter, voor alle gevallen waar het ├ęcht niet anders kan, is dit een van beste manieren om met IE's grillen om te gaan.

 

Deel deze blog post:

Kevin van Beers | Inbound marketing specialist

Kevin is inbound marketing specialist bij VisionEars. Naast social media heeft hij ook een passie voor marketing automation.

Neem contact met mij op Contact
blog comments powered by Disqus
© 2008-2019 - VisionEars B.V. - Meetbaar online succes