relativeMeister.com
Checkbox Hack in CSS: Website Slider ohne JavaScript
Dieses CSS Tutorial zeigt, wie wir mit dem Checkbox Hack in CSS einen Slider oder verschiedene Tabs ohne JavaScript programmieren können.Tags: Checkbox Hack | CSS lernen | CSS-Befehle | JavaScript | Programmieren lernen | Slider | Web-Development lernen | Webseiten erstellen lernen | Website-LayoutWorum geht´s?
In diesem CSS Tutorial werden wir lernen, was der Checkbox Hack in CSS ist, wofür er genutzt werden kann und warum er so nützlich ist. Außerdem werden wir besprechen, warum es Sinn machen kann, essentielle Funktionen deiner Website auch ohne JavaScript nutzbar zu machen.
1. Warum deine Website auch ohne JavaScript funktionieren sollte
JavaScript ist eine sehr nützliche und mächtige Programmiersprache in der Web-Programmierung, aber sie hat auch Nachteile:
- Man kann sie im Browser deaktivieren und
- JavaScript-Skripte könnten deine Website langsamer machen
1.1 Problem A: Deaktiviertes JavaScript
Vor allem aber: In manchen Institutionen wie bestimmten Schulen oder Unternehmen ist JavaScript standardmäßig deaktiviert.
Das hat Sicherheitsgründe – JavaScript kann auch für bösartige Vorhaben verwendet werden.
Wenn deine Website nun beispielsweise JavaScript verwendet, um Sprunglinks (die, die automatisch zu bestimmten Bereichen scrollen) ein wenig schöner zu animieren, dann wird das Deaktivieren von JavaScript Website-Besucher nicht davon abhalten, die Website zu nutzen.
Was aber, wenn deine gesamte Navigation beispielsweise auf JavaScript-Buttons basiert?
Richtig: Benutzer, die JavaScript (freiwillig oder unfreiwillig) deaktiviert haben, können deine Website nicht mehr nutzen.
Idealerweise sollten also zumindest die Grundfunktionen deiner Website wie Navigation etc. auch ohne JavaScript funktionieren.
1.2 Problem B: Langsamere Lade-/Ausführungs-Zeiten
Jeder JavaScript-Code, der ausgeführt werden soll, muss als erstes erstmal an das Gerät des Website-Besuchers übertragen werden.
Ist dieser Code sehr lang und ausführlich, dauert das Laden der Website länger, weil natürlich mehr übertragen werden muss.
Handelt es sich beim JavaScript-Code um sehr umständliche Funktionen, kann es auch sein, dass das Gerät des Website-Besuchers aufgrund irgendwelcher Berechnungen langsamer wird.
Deshalb gilt auch bei JavaScript: Weniger ist mehr.
Und eine Möglichkeit, weniger über JavaScript erledigen zu müssen, ist eben der Checkbox Hack über CSS.
2. Was ist der Checkbox Hack in CSS?
Der Checkbox Hack ist, wie der Name schon andeutet, ein „Hack“, das heißt eine Art „zusammengeschusterte Lösung“, um ein vor einiger Zeit noch schwieriges Problem zu lösen:
Wie erreicht man es, dass der Website-Besucher mit einem Klick etwas umschalten kann, ohne JavaScript zu benutzen?
Auch wenn es mittlerweile auch alternative Lösungen gibt und immer weniger Institutionen JavaScript grundsätzlich blocken, ist der Checkbox Hack mit CSS immer noch ein sehr nützliches Werkzeug im „Werkzeugkoffer“ der Web-Programmierung.
Mit Hilfe des Checkbox Hacks ist es beispielsweise möglich, zwischen zwei oder mehreren „Tabs“ umzuschalten, oder auch eine klassische Slideshow völlig ohne JavaScript zu realisieren.
Aber fangen wir mal klein an mit einem einfachen Beispiel.
3. Wie funktioniert der Checkbox Hack in CSS?
Wir beginnen mit dem HTML-Elementen:
3.1 Die HTML-Elemente für den Checkbox Hack in CSS
Um den Checkbox Hack nutzen zu können, brauchen wir – wenig überraschend – eine Checkbox.
Außerdem brauchen wir noch ein HTML-Element, das sich bei einem Klick verändern soll. Nehmen wir an, ein DIV soll seine Größe und Farbe verändern.
Und um den Checkbox Hack noch zu vervollständigen, fügen wir noch ein ganz bestimmtes HTML-Tag dazu, nämlich das <label>-Tag.
Das Ganze ordnen wir dann beispielsweise so untereinander an:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="checkbox">
<div></div>
<label></label>
</body>
</html>Damit der Checkbox Hack auch ordnungsgemäß funktioniert, geben wir unseren 3 HTML-Elementen noch jeweils eine ID:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="checkbox" id="cb">
<div id="div1"></div>
<label id="toggle"></label>
</body>
</html>Nun sind wir schon fast bereit für den CSS-Teil.
Aber zwei Sachen fehlen noch: Unser Label bekommt noch das zusätzliche Attribut „for“, wobei der Wert für dieses Attribut der ID der Checkbox entsprechen muss.
Außerdem bekommt es einen Text zwischen dem öffnenden und dem schließenden <label>-Tag.
Also in unserem Beispiel so:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="checkbox" id="cb">
<div id="div1"></div>
<label id="toggle" for="cb">Klick mich</label>
</body>
</html>Das Ergebnis ist eine Checkbox und der Text „Klick mich“ darunter.
Die Checkbox kann man direkt anklicken, oder auch durch das Label-Tag.
Durch das „for“-Attribut im Label mit dem gleichen Wert wie der ID der Checkbox sind die beiden nun gewissermaßen „verbunden“. Das Label schaltet die Checkbox ein oder aus.
Damit können wir zum CSS vom Checkbox Hack übergehen:
3.2 Der CSS-Teil vom Checkbox Hack
Der CSS-Teil vom Checkbox Hack gliedert sich in mehrere Teile.
Wir beginnen damit, die spätere Veränderung überhaupt erst sichtbar zu machen.
3.2.1 Die spätere Veränderung sichtbar machen
Als ersten Schritt geben wir unserem #div1 mal eine Breite, Höhe und Hintergrundfarbe. Außerdem soll eine mögliche Veränderung animiert sein:
#div1 {
width: 300px;
height: 200px;
background-color: red;
transition: all 0.2s ease-in;
}Du solltest nun ein rotes Rechteck sehen, wenn du deine Website neu lädst.
Jetzt kommt der interessanteste Teil des Checkbox Hacks dran.
3.2.2 Ein HTML-Element mit CSS auf die Checkbox reagieren lassen
Falls du dir unser CSS Tutorial zu erweiterten CSS Selektoren angesehen hast, kommt dir das, was jetzt kommt, vielleicht bekannt vor.
Wir werden jetzt den + Operator in CSS benutzen, um ein Geschwister-Element der Checkbox auszuwählen:
#cb + #div1 {
background-color: blue;
width: 500px;
height: 300px;
}Das HTML-Element #cb ist unsere Checkbox, und unser DIV #div1 hat
- dasselbe Eltern-Element wie unsere Checkbox, ist also ein Geschwister-Element und
- kommt im HTML-Code hinter der Checkbox vor.
Beides ist Voraussetzung dafür, dass das Prinzip funktioniert.
Unser DIV #div1 sollte nun blau eingefärbt sein.
Und jetzt kommt der eigentliche Checkbox Hack Trick an der Sache: Eine Checkbox kann in HTML einen Zustand :checked annehmen (eben falls sie angeklickt wurde).
Oder anders ausgedrückt: Man kann in CSS darauf reagieren, ob die Checkbox ein Häkchen hat oder nicht.
Und das geht so:
#cb:checked + #div1 {
background-color: blue;
width: 500px;
height: 300px;
}Nun sollte das DIV #div1 sowohl auf die Checkbox selbst als auch auf einen Klick auf unser Label reagieren.
3.2.3 Unseren CSS Checkbox Hack „verstecken“
Nun bleiben uns noch 2 Probleme zu lösen:
- Es würde unschön aussehen, wenn wir ständig irgendwo Checkboxen haben, die der Website-Benutzer auch sieht
- Der Website-Besucher weiß nicht, dass er auf das Label klicken kann
Beide Probleme lassen sich sehr einfach über CSS lösen.
Die Checkbox selbst machen wir mit „display: none;“ einfach unsichtbar.
Dem Label geben wir beim darüberfahren mit „cursor: pointer;“ einen anderen Mauszeiger, der zum Klicken animiert.
Hier ein Beispiel (Anmerkung: alle anderen Anweisungen sind nur Kosmetik):
#cb {
display: none;
}
#toggle {
cursor: pointer;
display: block;
transition: all 0.2s ease-in;
width: 100px;
text-align: center;
padding: 20px;
border: 2px solid purple;
background-color: orange;
}
#toggle:hover {
background-color: yellow;
}Nun haben wir ein DIV, dass sich beim Klick auf ein Label (das übrigens völlig frei auf der Website platziert werden kann) ändert – ganze ohne JavaScript.
Und das ist – in seiner Essenz – der Checkbox Hack in CSS.
4. Der erweiterte Checkbox Hack mit Radio Buttons
Will man noch einen Schritt weiter gehen, so wird man feststellen, dass das :checked-Attribut auch bei Radio Buttons existiert, und auch genauso verwendet werden kann.
Anstatt also zwischen 2 Zuständen umzuschalten wie beim klassischen Checkbox Hack mit einer Checkbox, kann man hier zwischen mehreren Zuständen umschalten.
Beispielsweise wäre es so recht einfach möglich, verschiedene Tabs auf einer Website (ähnlich wie im Browser selbst) zu erstellen, die man mit Klick auf den Tab-Titel umschalten kann.
Weil es dazu unzählige Anwendungsbeispiele gibt, werden wir eines behandeln, das sehr häufig gesucht wird: einen Slider ohne JavaScript mit dem erweiterten Checkbox Hack in CSS
5. Ein Slider ohne JavaScript mit dem erweiterten Checkbox Hack und Radio Buttons
Auch hier beginnen wir wieder mit unserem HTML-Code.
Allerdings ist dieser nun ein wenig aufwendiger.
Nehmen wir an, wir haben einen Slider mit drei Bildern, die wir durchschalten wollen.
5.1 Der HTML-Teil des Checkbox Hacks mit Radio Buttons
Dann brauchen wir drei Bilder, und jeweils einen Radio Button davor, z.B. so:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="radio" name="slider">
<img src="hund.jpg">
<input type="radio" name="slider">
<img src="katze.jpg">
<input type="radio" name="slider">
<img src="wal.jpg">
</body>
</html>Das wars für einen sehr vereinfachten Slider.
Den Rest fügen wir später dazu.
5.2 Der CSS-Teil des Checkbox Hacks mit Radio Buttons
Alles, was wir für den allereinfachsten Slider brauchen, ist folgendes:
- Alle Bilder grundsätzlich auf unsichtbar schalten
- Das Bild, das zum Radio Button gehört, der angeklickt wurde, anzeigen
Das schaffen wir mit nur sehr wenigen CSS-Befehlen:
img {
display: none;
}
input[type="radio"]:checked + img {
display: block;
}Wenn wir das Ganze ausprobieren, sehen wir anfangs gar nichts außer unseren Radio Buttons, weil noch keiner ausgewählt wurde.
Klickst du auf einen der Radio Buttons und dann auf die anderen, so kannst du zwischen ihnen umschalten.
Das ist mal die Grundfunktion des Sliders ohne JavaScript.
Damit der auch gut aussieht, müssen wir noch einige Dinge hinzufügen.
5.3 Unseren Slider ohne JavaScript optimieren
Als erstes lösen wir das Problem, dass anfangs gar nichts angezeigt wird.
5.3.1 Wie wir einen Radio Button vorauswählen
Das geht recht einfach, in dem wir einfach bei einem der Radio-Buttons im HTML-Code das Attribut „checked“ hinzufügen:
<input type="radio" name="slider" checked>
Dann wird der erste Radio Button (und damit unser erstes Bild) vorausgewählt.
5.3.2 Den Slider etwas schöner formatieren mit CSS Flexboxen
Im Folgenden passiert einiges auf einmal:
- Es wurde die ganze Slideshow in ein DIV mit der ID #slider gepackt, damit nur diese <img>-Tags usw. beeinflusst werden
- Das #slider-DIV bekam einen Rahmen, eine Größe etc.
- Alle Radiobuttons werden mit Hilfe vom „order“-Befehl unter allen Bildern angeordnet
- Die Bilder passen sich weitgehend an das Eltern-Element an
#slider input[type="radio"] {
order: 5;
}
#slider {
width: 300px;
height: 200px;
border: 5px solid black;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
}
#slider img {
max-width: 100%;
max-height: calc(100% - 20px);
display: none;
flex-basis: 100%;
flex-grow: 1;
flex-shrink: 1;
order: 1;
}
#slider input[type="radio"]:checked + img {
display: block;
flex-shrink: 0;
}5.3.3 „Weiter“-Pfeile einbauen
Was nun folgt, ist ohne den Einsatz von PHP ein wenig mühsam, aber möglich: Wir bauen „Weiter“- bzw. „Zurück“-Buttons ein.
Da wir nur 3 Bilder haben, brauchen wir an den „Enden“ der Slideshow glücklicherweise keine solchen Buttons.
Diejenigen die wir brauchen, bauen wir in unser HTML ein.
Damit das Ganze funktioniert, werden die Bilder und die jeweiligen Buttons jeweils in ein DIV „verpackt“:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="slider">
<input type="radio" name="slider" checked id="s1">
<div>
<img src="hund.jpg">
<label class="toRight" for="s2"> > </label>
</div>
<input type="radio" name="slider" id="s2">
<div>
<img src="katze.jpg">
<label class="toLeft" for="s1"> < </label>
<label class="toRight" for="s3"> > </label>
</div>
<input type="radio" name="slider" id="s3">
<div>
<img src="wal.jpg">
<label class="toLeft" for="s2"> < </label>
</div>
</div>
</body>
</html>Falls du dich fragst, was die komischen „<“ usw. sein sollen – das sind die Pfeile nach links und rechts. Weil die „normalen“ Pfeile auf der Tastatur ja HTML-Tags öffnen und schließen, muss man die gewissermaßen „umschreiben“. Und da verwendet man eben diese speziellen HTML-Codes dazu.
Der CSS-Code dazu ist etwas kompliziert, daher eine kurze Erklärung dazu:
- .toLeft und .toRight sind die Labels, die auf den jeweils nächsten Radio Button umschalten. Da sie sich fast gleichen, werden sie gemeinsam gestylt, bis auf den Abstand nach links bzw. rechts außen.
- Die Slideshow reagiert nun nicht mehr auf die Radio Buttons, in dem sie einzelne Bilder sichtbar oder unsichtbar macht, sondern das DIV rund um Bilder/Labels
#slider input[type="radio"] {
order: 5;
}
#slider {
width: 300px;
height: 200px;
border: 5px solid black;
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
#slider div img {
max-width: 100%;
max-height: calc(100% - 20px);
max-width: 100%;
flex-basis: 100%;
flex-grow: 0;
flex-shrink: 1;
margin: auto;
}
#slider div {
width: 100%;
height: calc(100% - 20px);
display: flex;
order: 1;
}
.toLeft,
.toRight {
position: absolute;
top: calc(50% - 25px);
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #ddd;
opacity: 0.7;
line-height: 50px;
text-align: center;
font-size: 30px;
font-weight: bold;
transition: all 0.2s ease-in;
cursor: pointer;
}
.toLeft:hover,
.toRight:hover {
background-color: #eee;
}
.toLeft {
left: 10px;
}
.toRight {
right: 10px;
}
#slider div {
display: none;
}
#slider input[type="radio"]:checked + div {
display: flex;
}
#slider input[type="radio"]:checked + div img {
flex-shrink: 0;
}
Das Endergebnis sieht schonmal ganz ok aus:
Man könnte nun noch einen Schritt weiter gehen, und den Wechsel der Bilder noch animieren, wie die Slideshow z.B. bei der erhalten.freiraumwels-Website gelöst wurde, aber das ist nicht mehr Teil dieses Tutorials. (Wer es trotzdem „nachbauen“ will: der Schlüssel liegt in Flexboxen, max-width bzw. max-height und dem CSS-Befehl transition).
Will man statt der Slideshow verschiedene „Tabs“ haben, ähnlich wie bei den meisten üblichen Browsern, so ist das Prinzip das Gleiche:
- Mehrere Radio Buttons
- Mehrere Labels, die auf die jeweiligen Radio Buttons zeigen
- Inhalte, die unsichtbar geschalten wurden
- Je nachdem, welcher Radio Button angeklickt wurde (:checked) , wird ein anderer Inhalt sichtbar gemacht
Wie du dir vielleicht vorstellen kannst, ist es relativ umständlich, hier „händisch“ eine größere Slideshow einzubauen.
Unser CSS erledigt zwar den Großteil der Arbeit für uns, aber wir müssen trotzdem „händisch“ den Aufbau der einzelnen Bilder, Buttons und DIVs vornehmen.
Sobald wir aber PHP können, können wir all diese Dinge z.B. aus einer Datenbank auslesen und für uns generieren lassen.
Dann wird das Ganze erst so richtig interessant 🙂