Wir wissen, dass verschiedene HTML-Elemente unterschiedliche Aufgaben haben. Das ist offensichtlich, wenn wir sie sehen können. Aber einige HTML-Elemente agieren hinter den Kulissen, und manchmal denken wir einfach nicht daran, dass sie mit Elementen verwandt sind, die für die visuelle Darstellung gedacht sind. Aber machen wir mal einen kleinen Ausflug und machen einige Elemente sichtbar, die es standardmäßig nicht sind, und schauen wir uns an, wie seltsam (und vielleicht nützlich!) das werden kann.
Wenn man HTML sieht wie
<p>I'm going to display this text.</p>Das ist ziemlich intuitiv. Der Browser wird dieses Paragraph-Element mit Text anzeigen.
Aber dieser Absatz existiert in einem größeren HTML-Dokument, wie zum Beispiel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body>
<p>I'm going to display this text.</p>
</body>
</html>Warum wird „Meine Website“ nicht genauso angezeigt wie der Absatz? Was ist der große Unterschied zwischen <title> und <p>? Nun, das liegt in der Natur von Code. Verschiedene Dinge tun verschiedene Dinge. Aber in diesem Fall können wir ziemlich leicht nachvollziehen, warum es nicht angezeigt wird.
Wenn wir dieses HTML-Dokument in einem Browser öffnen und das <title>-Element untersuchen, zeigt es uns, dass das User-Agent-Stylesheet dieses Element auf display: none; setzt. Nun, das ergibt Sinn! Das ist genau das, was wir verwenden, wenn wir Dinge auf Websites komplett ausblenden wollen.
Hinzu kommt, dass das Elternelement des <title>-Elements, nämlich <head>, ebenfalls auf display: none; steht.
Hier wird es lustig.
User-Agent-Styles lassen sich sehr einfach überschreiben! Jeder Wert, der aus unserem CSS kommt, wird sie überschreiben. Probieren wir also das hier aus
<style>
head, title {
display: block;
}
</style>LOLZ, da ist es! Genau wie ein Absatz
Und wir haben genauso viel Kontrolle darüber wie über alles andere, was bedeutet, dass wir es perfekt stylen können
Und es kann noch seltsamer werden… Sehen Sie diesen <style>-Block, der sich ebenfalls im <head> befindet? Den können wir aus genau demselben Grund nicht sehen, warum wir den <title> nicht sehen konnten: Er ist auf display: none; gesetzt. Das können wir ändern, um ihn ebenfalls sichtbar zu machen.
Wenn wir schon dabei sind, können wir ihn auch so aussehen lassen wie in unserem Code-Editor, indem wir Leerräume respektieren und eine Monospace-Schriftart verwenden
head, title, style {
display: block;
}
style {
font-family: monospace;
white-space: pre;
}
Ha! Was zum Teufel!
Jetzt können wir noch einen Schritt seltsamer werden. Dieser Style-Block? Er kann editierbar werden, denn das ist etwas, was jedes HTML-Element dank des contenteditable-Attributs tun kann.
<style contenteditable>
...
</style>Nun kann dieser sichtbare <style>-Block genau wie eine <textarea> bearbeitet werden, und das CSS wird sofort auf das Dokument angewendet.
Definitiv eines der seltsamsten Dinge, zu denen HTML und CSS fähig sind.
Man könnte dies ein CSS-Quine nennen („ein selbstreferenzierendes Programm, das ohne externen Zugriff seinen eigenen Quellcode ausgeben kann“). Alex Sexton veröffentlichte 2013 ein Beispiel dafür und nennt Anne van Kesteren und Mathias Bynens als Vorreiter. Ich habe gesehen, wie Lea Verou es für Live-Coding in Konferenzvorträgen nutzt!