Testen van website in diverse browsers?
Is er een 100% check om dit soort situaties te voorkomen?
Ik zag bijvoorbeeld laatst met de service 'Browsershots' (welke van een serie browsers screenshots maakt van een website die je opgegeven hebt) dat op het door hen gegenereerde screenshot iets niet in orde bleek...terwijl dat screenshot van een browser was die ik op mijn PC ook had staan...waar het wel in orde is.
Was beide WindowsXP...beide zelfde browserversie e.d., beide op 1024x768...etc. etc.
Kortom: Browsershots vertrouw ik niet meer voor 100%!
De screenshots die ik vraag aan vrienden en kenissen (ja, ik val iedereen gewoon lastig) beschouw ik tegenwoordig als uitgangspunt. Dat zijn in principe de eindgebruikers...met hun gekke grillen en instellingen en weet ik veel wat...en als het bij hun werkt lijkt het mij in orde.
Of toch niet...?
Kan iemand mijn eeuwige twijfel wegnemen en een 100% check noemen? Of moeten we gewoon berusten in het feit dat een website nu eenmaal nooit in 'alle tegenwoordig beschikbare browsers en versies van die browsers' hetzelfde zal worden weergegeven?
Edit:
En dit dus ook zo aan opdrachtgevers uitleggen?
Gewijzigd op 01/01/1970 01:00:00 door Erick Schluter
Als je echt alle gekke situaties af wil vangen, ben je wel even bezig. Er zijn een groot aantal verschillende browsers en van elke browser verschillende versies die mensen ook gebruiken.
Helemaal 100% zekerheid heb je nooit in deze gevallen, je moet uitgaan van de grootste gebruikersschare, en hun browsers.
Als jij ervoor zorgt dat je je:
a) goed aan de standaarden houd (heb je al een groot deel van de browsers te pakken waarin het dan goed is)
b) een reset.css gebruikt (omdat je dan de verschillen in hoe browsers iets standaard instellen, meestal margins/paddings, dan al wegneemt)
c) Het test in de meest gebruikte browsers (ie7, ie8, FF2 en hoger, Opera 10 en hoger, Safari)
Dan heb je goede kans dat je nooit iets hoort over dat een website niet goed werkt in browser die en die. Mensen met "bijzondere browsers" zijn er wel aan gewend geraakt om als het niet werkt dit in een andere browser te bekijken die door een grotere schare internetters wordt gebruikt.
Al mijn laatste projecten zijn XHTML strict - W3C gevalideerd, dit vind ik erg belangerijk en neemt inderdaad een hoop zorgen weg, maar niet allemaal.
Waarom browsers deze 'standaarden' negeren is mij echt een raadsel...wie volgt wie daarin? Frustrerend soms.
Anyhoe...
'reset.css'?
Klinkt bekend...Is dat waarin je zegt:
body{margin:0;padding:0;}
etc. etc.
Is er een zogeheten cheatsheet of prototype.css welke ik hiervoor kan gebruiken? Ik kan me herineren zoiets ooit gelezen te hebben...
Ik bedoel een lijst met CSS specificaties die 'alle standaard browser CSS' overzichtelijk presenteert?
Gewijzigd op 01/01/1970 01:00:00 door Erick Schluter
Vooral de Oude IE browsers zijn een probleem.
Voor het testen op oude IE browsers gebruik ik
IETester. Geweldig ding voor testen van de Microsoft browser.
Ook test ik in Chrome en Safari op mijn eigen PC...en een geheel nooit ter sprake komende browser 'Crazy Browser' genaamd?!
Ik zit altijd maar te twijfelen...
maar mischien is dat juist wel goed, keeps me sharp!
Duurt soms wel een beetje lang voordat je de uitslag hebt en je
kunt niet echt je site testen maar wel hoe de layout van de eerste
pagina weergegeven wordt..
Gewijzigd op 14/05/2010 11:17:45 door Jardin deparis
Natuurlijk moet je wel VMWare 'kopen', aantal OSen 'kopen', wordt heel 'duur', qua stroom om je computer een paar nachtjes te laten downloaden ;)
En gebruik meta tags om bepaalde dingen voor elke browser duidelijk te maken (content type/Language etc..) Ook een favicon werkt vaak niet in elke browser tenzij je de 2 meta tags hiervoor gebruikt.
Doctype mag ook niet ontbreken en een lang code in je <html> tag is ook nooit verkeerd.
Reset.css :
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
En gewoon vm's opzetten met diverse windows, linux en mac systemen met daarop elke denkbare browser.
Ook slim om dit te doen op een externe hdd zodat je je website anytime kunt checken.
Groet,
De maker van de bekendste reset zegt ook dat het een begin is, dat je er verder mee moet werken: klik.
Lees ook:
http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/
http://snook.ca/archives/html_and_css/no_css_reset/
http://meyerweb.com/eric/thoughts/2008/04/17/crafting-ourselves/
Ook IETester kent veel problemen, behalve de instabiliteit. Enkele bestanden (DLL's ed.) zijn gedeeld door de verschillende versies, waardoor het niet 100% te vertrouwen is. Uit eigen ervaring kan ik vertellen dat sites in IETester niet zoals de bedoeling te zien waren, maar op een Windows PC met de 'echte' IE wel.
De JavaScript engine van IETester is verder ook nog een zorgenkindje. Niet snel en werkt minder goed dan van de echte IE.
Ik ben bang dat er geen out-of-the-box oplossing is. Een combinatie van eerder genoemde systemen en programma's zal iedereen al een heel eind op weg helpen.