xq's Digitalwerkstatt

CSS3-Hacks auf dieser Website

Da ich ein großer Freund von JavaScript bin, ist alles auf dieser Website ausschließlich in JS programmiert. NICHT.

Ich finde, auf zu vielen Websites wird JavaScript für Sachen eingesetzt, für die es nicht gedacht ist:

Da diese Sachen problemlos und sehr bequem mit CSS funktionieren, sollte man diese auch mit CSS lösen.

Eine pure CSS-Lösung hat auch den Vorteil, dass die Website ihre Funktion nicht einstellt, wenn ein Script-Blocker aktiviert ist. Lösungen, die mit JavaScript implementiert werden, funktionieren eben dann nicht mehr.

Es gibt nun auch ein paar Tricks, wie man komplexere Konstrukte auch mit ausschließlich CSS3 lösen kann. Diese möchte ich im Folgenden vorstellen:

Die Menüs dieser Seite sind hierfür ein passendes Beispiel, aber da diese nur kontextsensitiv durch Media Queries existieren, gibt es hier nochmal ein kleines Beispiel:

?

Ich bin ein Beispielinhalt für einen Dropdown!

Der Code hierfür ist denkbar einfach:

.demo-dropdown {
    background-color: red;
    position: relative;
    width: 4em;
    height: 4em;
}
.demo-dropdown .content {
    background-color: green;
    display: none;
    position: absolute;
    left: 4em;
    top: 0;
    width: 30em;
    height: 4em;
}
.demo-dropdown:hover .content {
    display: inline-block;
}
<div class="demo-dropdown">
    ?
    <div class="content">
        Ich bin ein Beispielinhalt für einen Dropdown!
    </div>
</div>

Hier wird nur der :hover-Selektor verwendet. Dieser selektiert das Objekt nur, wenn sich aktuell die Maus darüber befindet. Da der :hover-Selektor auch auf die Kind-Elemente greift, schließt sich das Dropdown auch nicht, wenn man die Maus aus dem Parent-Element bewegt.

Wie auch viele andere Websites habe ich hier Bilder, die man mit einem einfachen Klick in den Vollbild schicken kann und mit einem weiteren Klick wieder schließen.

Wenn man das ganze ohne JavaScript lösen möchte, muss man ein bisschen tricksen. Hierfür gibt es praktischerweiße den Selektor :checked, mit welchem man den Zustand einer Check Box oder eines Radio Buttons abfragen kann:

Der Code dafür enthält keine Magie, nur eine Abfrage über den Nachbar-Selektor “+” sowie dem Selektor “:checked”:

#demo-button-state::after {
    content: 'Unchecked';
}
#demo-button:checked ~ #demo-button-state::after {
    content: 'Checked';
}

Wenn man nun eine Check Box in einen <label>-Tag packt, passiert folgendes:

Jedes Element im <label>-Element wird als Klickfläche für dei Check Box gewertet, selbst wenn die Check Box selbst nicht sichtbar ist:

Nun braucht man noch ein paar gestylte Elemente, um das aufklickbare Bild zu vervollständigen:

<label class="image">
    <input type="checkbox" name="checkbox" value="value">
    <img class="thumb" src="thumbnail.jpg" />
    <img class="image" src="fullscreen.png" />
</label>

Das Bild mit class="thumb" ist das Vorschaubild, welches im normalen Textfluss angezeigt wird. Das zweite Bild (class="image") wird standardmäßig ausgeblendet und nur angezeigt, wenn die Checkbox angekreuzt wird:

image.input:checked ~ img.image {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

Spoiler

Spoiler sind eine Abwandlung der Popup-Bilder:
Der zu versteckende Teil wird nur angezeigt, wenn die Checkbox im Label angekreuzt ist.

Hier wird zusätzlich noch ein ::before-Selektor verwendet, um ein Pseudoelement zu erzeugen, welches den Header des Spoilers erzeugt.

Gallerien

Auf die Gallerie bin ich besonders stolz. Sie ist eine Erweiterung der Popup-Bilder und funktioniert grundlegend nach dem selben Prinzip:

Radio Buttons werden hierbei für die Selektion der einzelnen Gallerie-Einträge verwendet. Jeder Button stellt hierbei ein Bild bereit, das er einblendet, wenn er ausgewählt (:checked) ist.