Home > kruimelpad

vorige 64 volgende

inhoud

Test verkleinde versie (reset)

Internet Explorer zaken

Weg met de IE-FOUC!

  • Met name op langzamer of zwaar belaste computers kan Internet Explorer (in ieder geval t/m IE7) een hinderlijke flits laten zien als van pagina wordt gewisseld.
    Dit is een zg. "FOUC" (Flash Of Unstyled Content). Bij een pagina-wissel schoont IE namelijk eerst de oude pagina op, gaat dan aan het rekenen voor de nieuwe pagina, en toont dan de nieuwe pagina. Maar het rekenen kost tijd.
  • In de tussentijd is zijn er dus geen background-kleuren of background-images (een lege pagina heeft alleen de standaard witte background). Het duurt maar een fractie van een seconde, maar net lang genoeg om een waarneembare flits te veroorzaken.
  • Andere browsers doen het slimmer: die laten de oude pagina staan tot de nieuwe helemaal berekend is.
  • IE moet dus gedwongen worden de oude pagina even te laten staan tijdens het aanmaken van de nieuwe. Nu heeft IE in de tijd van de eerste browseroorlog een snufje bedacht dat andere browsers niet hadden: het maken van een "Transition", een pagina-overgang, zo ongeveer als bij een Powerpoint-presentatie. Het is geen officiële html die in de html-standaard is opgenomen, maar het werkt via een <meta> instructie en de pagina blijft daarmee valid html.
  • Gedurende de overgang blijft de oude pagina in beeld, en kan er dus geen flits optreden.
  • Gekozen kan worden voor de overgang "blend" (infaden). Met wat experimenteren kan de tijd van de overgang ingesteld worden.

Gerealiseerd in deze stap:

  • Ten behoeve van Internet Explorer deze <meta> in de <head> opgenomen (zo hoog mogelijk, meteen na de meta met de charset):
<!-- anti IE "fouc" -->
<meta http-equiv="Page-Enter" content="blendTrans(Duration=.35)">
  • Resultaat in IE7: het Twitterblok doet niet mee, maar de rest van de pagina (header, linkerfiguur en kolommen) blijft mooi stil staan zonder flits bij een pagina-wisseling.
  • NB: een <meta> kan van alles en nog wat bevatten, ook browser-specifieke informatie. Dit maakt de html-code niet invalid!

In het echt testen in IE8 en IE 9

  • Deze heb ik hier niet aan boord - zal nog door anderen gedaan moeten worden. Blijft op het ToDo-lijstje open staan met vraagteken.

ToDo lijstje

Kleine header voor lage resoluties, plus bijbehorend javascriptje.
Real life testen in IE8 en IE9.
Flits bij pagina-wissel in IE wegwerken.
Images zo nodig bijwerken.
Images optimaliseren.
Toegankelijkheid en hidden navigatie verbeteren.
HTML-code opschonen.
CSS-code en javascript in apart stylesheet/js-bestand.
PHP-header met charset aanmaken.
Favicon maken en in de html zetten.
Spelling en tikfouten nalopen.
Google-optimalisatie.
Test-inhoud uitproberen.
PHP-includes voor menu en zijkolommen.
Na elke wijziging testen op css, html, WCAG en Webrichtlijnen.

vorige 64 volgende

Twitter

[vultekst]
[vultekst]
[vultekst]
[vultekst]
[rechterkolom]
[vultekst]
[vultekst]
[vultekst]
[vultekst]