Verschillende rendeer-engine's van webbrowsers

[Verwijderd]

Hallo,
Ik test gemaakte site's altijd met internet explorer en google chrome, omdat deze allebei een verschillende render-engine gebruiken. Nu is mijn vraag, is er ergens een overzichtje van welke tags allemaal in de verschillende browsers wel en niet werken? Loop vaak erg lang te zoeken naar de juiste manier van weergeven en dat gaat op den duurt heel erg vervelend worden.

[Eelke Spaak]

Verwijderd schreef op donderdag 29 maart 2012 @ 21:27:
Hallo,
Ik test gemaakte site's altijd met internet explorer en google chrome, omdat deze allebei een verschillende render-engine gebruiken. Nu is mijn vraag, is er ergens een overzichtje van welke tags allemaal in de verschillende browsers wel en niet werken? Loop vaak erg lang te zoeken naar de juiste manier van weergeven en dat gaat op den duurt heel erg vervelend worden.

Al gegoogled? Eerste hit op "browser css support"...

[Verwijderd]

Zo'n overzicht heb ik in 1931 ooit nog eens gemaakt ja. Blijkbaar zwerft die kennis niet meer op het internet en zal ik het opnieuw moeten doen. Als je even wacht dan post ik hier over een paar weken het resultaat.

[ Voor 1% gewijzigd door Verwijderd op 29-03-2012 21:49 . Reden: dat->zo'n (was verwarrend) ]

[_Thanatos_]

Je moet gewoon in de gangbare browsers testen, en niet blind aannemen dat "tags" in een specifieke browser wel of niet werken als dat ergens genoemd is. Er is meer dan tags, en er zijn meer dan twee layout engines in de wereld. Ook meer dan twee van de veelvuldig gebruikte.

Begin met kijken wat je publiek is. Als je al stats hebt: mooi, kijk welke browsers ze gebruiken en pak daar de 4 of 5 meestgebruikte van. Heb je ze niet, kun je naar globale stats kijken en/of een educated guess doen.

[noes]

De meest gebruikte browserengines zijn: Gecko (firefox, opera), webkit (chrome, safari, mobile safari en mobile android), mosaic (IE). Maar al die engines hebben verschillende versies. Waar jij naar op zoek bent is meer een goed ontwikkelpatroon, denk ik.


De makkelijkste manier (vind ik) om websites te bouwen, is tijdens het ontwikkelen continu te controleren en testen wat je doet in Firefox. Dmv Firebug kan je goed zien wat er misgaat in je HTML/CSS of JS. De Chrome console+inspector is ook erg krachtig, zou je ook kunnen gebruiken.

Nadat je klaar bent met een stap in je ontwikkelproces (bijv. net een uitklap menu gemaakt), test je in alle min of meer gangbare browsers. Meeste klanten verwachten: IE (6, indien legacy support) 7, 8 en 9, Safari 5, Chrome (laatste versie) en Firefox (laatste versie en evt 3.6 indien legacy support).

Zo kan je meteen ingrijpen als er iets niet goed gaat. Browsers kunnen iets wel ondersteunen, maar het toch anders weergeven of net anders interpreteren. Naar mate je meer websites bouwt, groeit je eigen kennis hierover en kan je vooraf bepaalde hindernissen voorkomen. Dan kunnen de stappen tot je test ook groter worden en wordt het ook vanzelf minder werk.

http://caniuse.com/ gebruik ik als ik vooraf wil weten of ik een specifieke feature gebruiken kan. Vooraf de weergave van tags zo goed als maar kan gelijktrekken tussen de browsers? Check de HTML5 Boilerplate CSS (http://html5boilerplate.com/).

[Bosmonster]

Gecko (firefox, opera), webkit (chrome, safari, mobile safari en mobile android), mosaic (IE).

Sorry hoor.. Maar:

Opera is Presto, geen Gecko.
IE is geen Mosaic (die bestaat niet eens, tenzij je de browser van 20 jaar geleden bedoelt), maar Trident

De engines zelf zijn ook helemaal niet zo boeiend overigens. Je test namelijk browsers (en versies), geen engines.

Nadat je klaar bent met een stap in je ontwikkelproces (bijv. net een uitklap menu gemaakt), test je in alle min of meer gangbare browsers.

Dit is wel waarheid als een koe. Ik zie te vaak dat developers een hele site ontwikkelen en achteraf eens gaan kijken in IE. Dan zie je door de bugs het bos niet meer en heb je vaak doorontwikkeld op code die in eerste instantie al niet goed functioneerde.

Dus idd continu, per onderdeel, direct xbrowser testen.

[ Voor 73% gewijzigd door Bosmonster op 30-03-2012 13:31 ]

[alex3305]

In plaats van Firebug kun je ook de Webkit debug gebruiken (F12 in Chrome). Deze werkt vind ik even goed eigenlijk. Verder klopt het niet helemaal wat je schreef over render engines. Opera gebruikt namelijk Presto, hun eigen render engine en Internet Explorer heeft Trident. Moasic werd gebruikt op OSX maar wordt inmiddels niet meer doorontwikkeld.

Op Wikipedia staat IMHO een erg mooi lijstje voor CSS layout engine verschillen: Wikipedia: Comparison of layout engines (Cascading Style Sheets) .Let ook op dat KHTML erg veel op Webkit lijkt, daarnaast wordt Konquerer niet veel gebruikt.

Mijn aanraden zou zijn om te ontwikkelen in Chrome (Safari), net wat je het beste schikt. En om daarna stijlen aan te passen aan de andere browsers. De Webkit engine is namelijk vrij vaak goed compatibel met zowel Gecko als de nieuwere Trident versies. Verder zou ik van Gecko één of twee versies terug ook proberen en voor IE vanaf versie 7 ontwikkelen. Opera kun je gewoon in testen maar heeft geen prioriteit hier.

Een laatste tip die ik je kan geven is om portable versies te gebruiken en IETester voor verschillende Trident versies.

[Verwijderd]

Bedankt voor de reacties allemaal. Ben nog maar met mijn eerste site bezig en soms zie je door de bomen het bos niet meer.


#mainmenu li a:hover, #mainmenu li a.active{
background: url("../images/hover.png") no repeat;
height: 75px;
color: #FFF;
overflow: visible;

Zit al even met deze functie, in IE werkt hij wel, maar in chrome kleurt hij alleen te tekst wit maar zet hij er het plaatje niet bij. Daarbij word de pagina in IE weer links uitgelijnd en in chrome weer gecentreerd.

[Mr_gadget]

Je kan op browsershots.org een screenshot van je site laten maken in heel veel verschillende browsers, hele handige site!

[alex3305]

Dus dit topic is meer een verkapt 'help mij'-topic doorgaand op jouw oude topic? Daar werden de juiste adviezen al in gegeven. Als het niet werkt, debuggen met Firebug of Webkit debugger. Dat werkt gewoon voldoende, maar je moet jezelf er wel even in verdiepen.

[NMe]

Verwijderd schreef op vrijdag 30 maart 2012 @ 13:37:
Bedankt voor de reacties allemaal. Ben nog maar met mijn eerste site bezig en soms zie je door de bomen het bos niet meer.


#mainmenu li a:hover, #mainmenu li a.active{
background: url("../images/hover.png") no repeat;
height: 75px;
color: #FFF;
overflow: visible;

Zit al even met deze functie, in IE werkt hij wel, maar in chrome kleurt hij alleen te tekst wit maar zet hij er het plaatje niet bij. Daarbij word de pagina in IE weer links uitgelijnd en in chrome weer gecentreerd.

Als je nou eens begon met "no repeat" veranderen in "no-repeat".

Verder ontbreekt het hier behoorlijk aan eigen inzet en dus gaat ook dit topic op slot. Ik ben in mijn vorige slotje vergeten je te verwijzen naar onze Quickstart, dus doe ik dat nu maar even. Topics die daar niet aan voldoen gaan gewoon dicht.