Berkery!

Voor de internetters van het eerste uur een nostalgisch verhaal; het gaat namelijk over de ergste HTML-tag die ooit bedacht is: <BLINK>. Je ziet hem niet meer, maar in de tijd dat Netscape nog de populairste browser was wemelde het op het internet van pagina's met knipperende teksten.

Eind jaren '90 woedde er in internetland een zogenaamde 'Browseroorlog' tussen Microsoft en Netscape. Dit ging niet zozeer om het marktaandeel van de browser, maar wie de meest irritante extension kon verzinnen. Mircosoft bedacht de <marquee> (scrollende tekst), maar Netscape won deze oorlog glansrijk met <blink> (knipperende tekst). Beide zijn nooit in de W3C-aanbevelingen terecht gekomen, al is <blink> gereïncarneerd in de CSS-specificaties, daarover later meer. De slag om het marktaandeel werd gewonnen door Internet Explorer van Microsoft, en dat ondersteunde geen <blink>, zodat de meeste internetters van tegenwoordig het fenomeen geeneens kennen (marquee waarschijnlijk wel).

Voor historische redenen op deze pagina enkele methodes om toch te kunnen genieten van 'good old blink'. Allereerst, de gehate tag:

De tag

Zoals gezegd, de blink-tag werkt niet in Internet Explorer. Maar zo werkt ie:

<p>Lang leve <blink>blink!</blink></p>

Dat geeft:

---

Lang leve blink!

---

Duidelijk. Niks meer aan doen, maar ook niet gebruiken!

text-decoration: blink? wtf?

Een officiële W3C-aanbeveling is <blink> dus nooit geworden, maar het dook wel weer op in de CSS-specificatie als waarde van het property text-decoration. Hoera. Dan kan je bijvoorbeeld zo tekst laten knipperen:

#blinkerdeblink{
text-decoration: blink;
}

---

Lang leve text-decoration: blink!

---

Maar ook deze methode werkt niet in Internet Explorer. Dat is niet zozeer een bug in IE, maar een gevolg van deze bepaling van het W3C: "UAs must recognize the keyword 'blink', but are not required to support the blink effect.". Mmmm.

Als je toch knipperende tekst in IE wilt hebben zult wat moeten gaan scripten. Ik heb wat scripts van 't net geplukt en gecombineerd in eentje die je zo kunt gebruiken (als je dat door een verminderde hersencapaciteit of iets dergelijks hebt besloten):

Blink in Internet Explorer

Om een knipperende tekst te krijgen moet je dit ergens in je document zetten (bij voorkeur in de head van het document):

<!--[if IE]>
<script type="text/JavaScript">
function doIt(){
document.getElementById('blink').style.visibility =  (document.getElementById('blink').style.visibility == "hidden") ? "visible" : "hidden";
}
function Knipper(){
setInterval('doIt()',1000);
}
window.onload = Knipper;
</script>
<![endif]-->

De tekst die je wilt laten knipperen geef je de id 'blink' mee, bijvoorbeeld:

<p>Ik wil <span id="blink">knipperende tekst!</span></p>

Dit betekend wel dat je hem maar één keer op je pagina kunt gebruiken (doordat ik het attribuut "id" gebruik). Maar één keer is dan ook meer dan genoeg. Als iemand zin heeft om een methode te scripten die meerdere blinks toestaat, be my guest. En voor ik het vergeet:

Hier een demonstratie van het script!

En deze methode is 100% valide qua CSS en HTML.

---

Tags: html, webontwerp

Geplaatst op donderdag, april 15th, 2010, 07:46 onder ICT en internet. RSS 2.0 You can leave a response, or trackback from your own site.