IE Hacks

Webdesign is niet altijd even makkelijk. Een godde webdesigner houdt rekening met de diverse schermgrootten (ook deze van smartphone en tablet, wat men responsive webdesign noemt), diverse browsers, enz.

Wij gaan in deze tutorial dieper in op het browserprobleem. Niet alleen bestaan er enorm veel browsers, elke versie werkt ook nog eens anders. Hét grote probleem zit hem bij Internet Explorer. Vooral in versie 6, 7 en 8.

Welke browsers worden gebruikt?

De meest courante browsers zijn Internet Explorer, Chrome, Firefox, Safari en Opera (in volgorde van vaakst gebruikt, in de benelux).

Op http://gs.statcounter.com kan je checken welke browser momenteel het vaakst gebruikt wordt.

Het aandeel van IE 6, 7 en 8 is een 15-tal percent, wat te groot is om te negeren. Vooral IE6 is een grote ramp.

Een webdesigner heeft twee keuzes: ofwel negeert hij het browserprobleem ofwel bouwt hij zijn site zo zodat deze in elke browser identiek vertoond wordt. Indien de verschillen beperkt blijven tot details (tekstgrootte, marges), kunnen we nog begrip vertonen voor de eerste opinie, maar indien de site volledig onleesbaar wordt, dan moet er toch actie ondernomen worden.

Hoe worden de problemen veroorzaakt?

Er zijn diverse problemen:

1// Het eerste probleem zit erin dat vele browser marges, padding, borders, tekstgrootte en andere vormgeving anders beschouwen.

2// Het tweede probleem zit hem in HTML5 en CSS3. Deze twee talen zijn relatief nieuw en worden enkel in de nieuwste browsers ondersteund. Op www.caniuse.com kan je checken wat je allemaal wél en niet kan gebruiken.

We vinden op caniuse.com dat mediaqueries niet werken in IE 6 tem 8.

Hoe spoor je het probleem op?

Elke site heeft zijn eigen maatregelen nodig. Er is dus geen vaste set waaraan je je moet houden. Je voelsprieten moeten wel uitsteken bij gebruik van HTML5 en CSS3.

Installeer en test in diverse browsers

De beste methode is de site in diverse browsers testen. Je kan haast elke browser gratis installeren op je computer. * aanrader

Er zijn wel wat beperkingen. Zo kan je maar één versie van Internet Explorer op één computer installeren. Op Mac kan je zelf helemaal geen Internet Explorer installeren.

-       Firefox: http://www.mozilla.org/nl/firefox

-       Safari (windows): http://support.apple.com/kb/dl1531

-       Opera: http://www.opera.com/computer

-       Chrome: http://www.google.com/intl/nl/chrome/browser/

Simulatie via websites

Je kan je site ook testen via websites, die browsers imiteren.

-       browsershots.org

-       browserstack.com

-       netrenderer.com     * aanrader

Simulatie vanuit Dreamweaver

Ben je in bezit van Adobe Dreamweaver? Dan kan je werken met het BrowserLab. Je moet dan wel een Adobe-account (gratis) hebben of maken.

Simulatie vanuit de browser

Tegenwoordig simuleren bepaalde browsers ook andere browsers of oudere versies.

In Internet Explorer druk je op F12.  * aanrader

Wijzig onderaan de Browsermodus naar IE8 of 7.

Ook Safari simuleert browsers, maar niet vlekkenloos.

Ga naar de voorkeuren en vink bij Geavanceerd de optie "Toon "aan.

Je krijgt nu een nieuwe menu "Ontwikkel" waarbij je een browser kan

Een eerste oplossing

Een oplossing voor het verschil in marges, padding, tekstgrootte, lijsttypen, enz. Is het gebruik van een CSS-reset. Dit is een lapje code die je in je CSS-bestand plaatst (helemaal in het begin).

Deze code zet diverse waarden van praktisch elk element op nul. Een erg gekende CSS-reset is die van Eric Meyer: http://meyerweb.com/eric/tools/css/reset/

Plaats deze code in je CSS-bestand (helemaal in het begin):

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

      margin: 0;

      padding: 0;

      border: 0;

      font-size: 100%;

      font: inherit;

      vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

      display: block;

}

body {

      line-height: 1;

}

ol, ul {

      list-style: none;

}

blockquote, q {

      quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

      content: '';

      content: none;

}

table {

      border-collapse: collapse;

      border-spacing: 0;

}

Een tweede oplossing

Zie je nu bij simulatie toch nog problemen opduiken? Dan heb je nood aan CSS Hacks. Deze zijn nodig bij menu’s die niet correct vertoond worden, onleesbare titels, foutief gepositioneerde divs, enz.

Een CSS hack is een ingreep die je in CSS doet. De code wordt door enkel de relevante browser gelezen en uitgevoerd. Meestal doet men deze ingrepen voor IE. Ofwel enkel voor IE6, ofwel voor IE 6, 7 8 afzonderlijk, ofwel voor IE6, 7 én 8.

Maak je responsive sites? Besef goed dat mediaqueries niet worden uitgevoerd door IE6 tem 8! Je zal dus een IE-hack moeten uitvoeren.

Er zijn twee opties:

OPTIE 1: Koppelen naar volledig bestand via conditionele css.
Indien je veel ingrepen moet doen, kunnen deze best in een apart bestand terecht komen.

Meestal volstaat ie6, 7 en 8 in één bestand: ie.css. Maar je kan ook voor elke versie een apart bestand maken: ie6.css, ie7.css, ie8.css. Deze naamgeving is vrij.

Plaats deze code tussen de ‹head›-tags van je html- (of php-) pagina.

<!--[if lte IE 8]>
    <link rel="stylesheet" href="ie.css" type="text/css">
<![endif]-->

OPTIE 2: individuele hacks

Er zijn ook hacks die je in het algemene CSS-bestand kan plaatsen.

Voor de aparte IE-versies zijn dit:

voor IE8 en lager  

color: red\9;

voor IE7 en lager

*color : purple;

voor enkel IE6

_color : blue; 

voor enkel IE10 is er geen echte hack. Je kan het als volgt doen:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

   #ie10 { color: red; }

}

Voor Firefox, moet je een prefix gebruiken:

@-moz-document url-prefix() {

  #selector {

     color: red;

  }

}

Voor Chrome en Safari (beiden gebruiken dezelfde engine):

@media screen and (-webkit-min-device-pixel-ratio:0){

   #selector {

     color: red;

   }

}

 

Gerelateerd:

 

Meer van dit lekkers

BEKIJK ALLE TUTORIALS!

Sharing is caring

Iets bijgeleerd? Deel deze tutorial!

U bent niet alleen

deze pagina
totaal

© 2000 - 2016 Zelfstudie.be - Alle rechten voorbehouden

Website laten maken: kerfuffle.be - Website publiceren: zelfhosting.com