Naslagwerk voor JS en CSS voor IE vs. FireFox*

[Verwijderd]

Na jaren van spelenderwijs leren kan ik aardig overweg met javascript en stylesheets en daar goede dingen mee maken, onder andere een megasite op mijn werk. Maar ik werkte altijd met Internet Explorer en ontdekte onlangs dat nieuwe browsers die in opkomst zijn (zoals FireFox en Opera) zich geen raad weten met mijn javascripts en stylesheets. Er valt nog behoorlijk wat aan mijn eigen sites te doen om orde op zaken te stellen. Nu ben ik vast niet de enige die met dat probleem worstelt. Kent iemand websites die op deze problematiek ingaan, of websites met info over javascript en css, specifiek voor bijvoorbeeld FireFox? Alvast bedankt!

[Verwijderd]

www.w3.org

de enige echte specificatie, waar het precies zo staat zoals de meeste browsers het implementeren, behalve IE, maar daar heb je dan intussen wel genoeg ervaring mee lijkt me

waarschijnlijk heb je met spelenderwijs leren jezelf aangeleerd hoe het juist niet moet (maar wel werkt in IE) en heb je nu problemen in striktere browsers. Je kan beter leren hoe de regels zijn en je vervolgens door de bugs van IE heenwerken

[ Voor 42% gewijzigd door Verwijderd op 23-05-2006 08:56 ]

[Sebazztiaan]

Er zijn gewoon een paar dingen die je moet onthouden als je voor FF of Opera, of een andere nieuwe W3C compliant browser gaat werken.

Een mooi (en door mij vaak gebruikte hack is de CSS-child selector). Een voorbeeld, je weet dat IE geen alpha transparency ondersteund in PNG's, maar je WIL een drop shadow hebben, dus dan is het voor IE anders dan non IE

code:

body
{
    background: .gif img
}

html>body
{
    background .png 
}

Er zijn heel veel van deze hacks, maar omdat IE6 de child selector niet herkent ziet hij de tag niet. Omdat je deze later definieerd zal het CASCADING van het style sheet bij een moderne browser, voor alle 'body' tags binnen HTML de style weergeven.

Een algemene tip is: Werk in FF, als je je site maakt, daarna pas je hem aan voor de IE gebruikers. Zo werk je xHTML1.1 bijv. Lekker strict, gevalidate, en daarna hacks inbouwen waar IE de mist in gaat.

Enkele voorbeelden van dingen die IE niet pakt:

display:table; op een div
margin: 0 auto; (IE 5.5) voor centreren;
lineheigt: (groter dan de parent, zorgt ervoor dat de parent stretcht)

:hover op bijna niets behalve <img> en <a>, op te lossen door een stukje javascript, maar native wordt het niet ondersteunt. Maar mensen er is hoop, de bèta van IE7 beloofd het één en ander!

[crisp]

Als je dan al met 'hacks' gaat gooien (gebruik van de child-seletor is geen hack maar een filter overigens) leg dan liever conditional comments uit...

Nog een voorbeeld van iets dat IE niet snapt: XHTML (met XHTML mimetype - hetgeen eigenlijk verplicht is voor XHTML1.1), dus doe maar lekker gewoon HTML

Mijn advies: leer gewoon netjes HTML, CSS en javascript en je komt er spelenderwijs wel achter wat er niet werkt in IE. De specificaties op w3.org zijn dan gewoon een goede referentie hoewel vrij technisch.

[Verwijderd]

Bedankt! Ik ga hier wel uitkomen. Hier wreekt zich inderdaad de houding van: Het maakt niet uit hoe je het doet, als je het maar doet.
Een goede uitdaging voor mijn nieuwe (nog verder te ontwikkelen) site...

[djluc]

Op http://www.quirksmode.org vind je nogal wat tabellen met verschillen tussen browsers. Die heb ik nog al eens gebruikt bij het oplossen van bugjes.

[SPee]

www.w3schools.com

Vindt je veel informatie en uitleg over (X)HTML, CSS, Javascript, etc.

[BtM909]

Als het specifiek om bugs in diverse browsers gaat, dan is www.positioniseverything.net ook wel een goede aanvulling

[CaptBiele]

offtopic:
is het niet wat om een lijstje te maken met deze links, en die in de FAQ te proppen?
(kan niet inloggen in de huidige faq)

[djluc]

Dat is toch zo'n groepsproject o.i.d.? [rml][ W&G FAQ] groepsproject[/rml]

[Boelie-Boelie]

Veel browserverschillen kun je vermijden door door het gebruik van het juiste doctype (i.c.m. werken volgens webstandaarden): http://hsivonen.iki.fi/doctype/

[Verwijderd]

Uiteindelijk duurt het nog even voordat ik alles heb omgezet, dus heb ik op mijn site (nog in ontwikkeling) alvast een javascript gezet dat gebruikers van moderne browsers waarschuwt dat de site nog niet optimaal werkt. Wellicht kunnen lotgenoten daar hun voordeel mee doen.

code:

function chkBrowser(){
    var chkAgent1=navigator.userAgent;
    var chkVersion=navigator.appVersion.substring(0,3);
    var IE=chkAgent1.search(/MSIE/i);
    var Netscape=chkAgent1.search(/Netscape/i);
    var Mozilla=chkAgent1.search(/Mozilla/i);
    var compatible=chkAgent1.search(/compatible/i);
    var Browser = "";

    if (IE != -1 && compatible != -1 && Mozilla != -1 && Netscape == -1 && chkVersion == "4.0" ) Browser = "MSIE";
    var Boodschap = "Deze site is gemaakt voor Internet Explorer. Binnenkort zal -ie het ook in andere browsers doen, zoals in FireFox en Opera!";
    if (Browser == "") alert (Boodschap);}

[ Voor 7% gewijzigd door Verwijderd op 24-05-2006 13:23 ]

[crisp]

Hier een nette IE-check:

HTML:

<!--[if IE]>
<script type="text/javascript">
var ie = true;
</script>
<![endif]-->
<script type="text/javascript">
if (!window.ie) alert('Gelukkig, je gebruikt een echte browser :P');
</script>

[Wolfboy]

@TS: _nooit_ op useragent controleren, er zijn zoveel mogelijkheden om deze te veranderen, daarbij geven sommige browser IE useragents mee (Opera bijvoorbeeld) aangezien anders sommige sites niet willen werken (omdat er dus andere mensen zijn die ook dat soort controles gebruiken).

Als je IE wil detecteren pak dan crisp z'n script, maar wat nog beter is, controleer of een methode bestaat voordat je de methode gebruikt.

Voorbeeld:

JavaScript:

if(document.getElementById)element = document.getElementById('id_van_element');
else if(document.all)element = document.all['id_van_element'];

Dan werkt het tenminste altijd goed