Es gibt keine HTML Befehle

[Gunnar Bittersmann]

@@Christian Huml

Wie sieht es mit CSS Anweisung aus?

Beim Militär heißt’s Befehl, im zivilen Leben Dienstanweisung. Das läuft aufs selbe hinaus. Nicht verwenden. Schon gar nicht mit Deppenleerzeichen.

Befehlen und Anweisungen ist Folge zu leisten. So funktioniert aber weder HTML noch CSS. Und das ist auch gut so. So können HTML und CSS erweitert werden.

Nicht so bspw. JavaScript. Was tut ein alter Browser bei

document.querySelectorAll('table').forEach(tableElement => {
	/* do something */
});

Ein ganz alter steigt schon bei querySelectorAll() aus. Steigt aus heißt: er quittiert den Dienst. Er desertiert. Nachfolgende Befehle werden nicht mehr ausgeführt.

Ein etwas neuerer alter Browser versteht querySelectorAll() und auch forEach(); kann aber mit => nichts anfangen. Selbes Resultat: Dienstverweigerung. Neues JavaScript läuft nicht in alten Browsern und müsste übersetzt werden.

Was hingegen tut ein alter Browser bei

<picture>
	<source srcset="logo.svg" type="image/svg+xml"/>
	<img srcset="[e-mail] 2x" src="logo.png" alt="Logo"/>
</picture>

Mit <picture> kann er nichts anfangen. Er macht aber weiter! ‚Ah, da ist Inhalt drin. Mal sehn, ob ich davon was verstehe.‘ <source> – nö. Er macht aber weiter! <img> kennt er; srcset aber nicht. Bleibt das übrig, was er versteht:

<img src="logo.png" alt="Logo"/>

Das heißt, das Bild wird angezeigt bzw. der Alternativtext ausgegeben! Ein alter Browser zeigt weder Vektorgrafik an noch hochaufgelöstes Bild an, aber er zeigt was an! Die Seite ist voll funktionsfähig.

Was tut ein alter Browser bei

@keyframes heartbeat
{
	start { transform: scale(1) }
	end { transform: scale(1.2) }
}

#heart
{
	animation: heartbeat .5s ease-in-out infinite alternate;
	color: red;
}

Mit @keyframes kann er nichts anfangen. Er macht aber weiter! Nach den } steigt er wieder ein. #heart kann er lesen. animation – nö. Er macht aber weiter! Bleibt das übrig, was er versteht:

#heart
{
	color: red;
}

Das Herz wird dargestellt. Nicht animiert wie in neuen Browsern – aber es ist rot!

HTML und CSS sind in ihrer Natur gänzlich anders als JavaScript. (Vielleicht ist das der Grund, warum so viele JavaScript-Programmierer HTML und CSS nicht verstehen.) Anstatt völliger Befehlsverweigerung setzen Browser das um, was sie können.

Das gibt’s ein Wort für: resilience (Belastbarkeit; Ausfallsicherheit). Jeremy Keith hat ein Buch drüber geschrieben. Frei verfügbar, auch als Hörbuch. Unbedingt empfehlenswert!

LLAP 🖖