In letzter Zeit habe ich immer mehr Entwickler gesehen, die mithilfe von Tricks Toggle-Zustände mit reinem CSS erstellen konnten. Dadurch können Sie das JavaScript überspringen, ohne die Interaktion zu beeinträchtigen. Wie funktioniert das? Ist das eine akzeptable Praxis?
Heute untersuchen wir zwei verschiedene Methoden für die Verwendung eines Kontrollkästchens, um ein Klickereignis zu erstellen, das mit gutem altem HTML und CSS zwischen zwei Bildern wechselt. Zum Abschluss noch eine kurze Diskussion über Semantik und die Vor- und Nachteile dieser Technik.
Wie eine Katze häuten
Sie erstellen im Wesentlichen ein Kontrollkästchen in HTML, um es auszublenden und die Funktionalität zu stehlen.Bei jedem CSS-Trick gibt es immer eine Handvoll verschiedene Möglichkeiten, um die Aufgabe zu erfüllen, die Sie anstreben. Was wir heute hier tun, ist zu lernen, wie man Kontrollkästchen verwendet, um zwei Zustände zu erstellen, die zwischen HTML und CSS umgeschaltet werden können. In Anbetracht dieses Ziels können wir leicht mindestens zwei Wege finden, um dieses Ziel zu erreichen. Selbst innerhalb dieser beiden Hauptstrategien werden Sie feststellen, dass es mehrere Wege gibt, die wir nehmen können.
Beide Methoden beinhalten einige fragwürdige CSS-Tricks. Sie erstellen im Wesentlichen ein Kontrollkästchen in HTML, um es auszublenden und die Funktionalität zu stehlen. Die erste Methode dehnt das Ankreuzfeld einfach auf die volle Größe des Bereichs aus, den Sie anklickbar machen möchten, und verwendet keine Beschriftung.
Die zweite Methode nutzt die interessante Funktionalität von Labels, die einem Kontrollkästchen zugeordnet sind. Selbst wenn Sie das Kontrollkästchen selbst ausblenden, kann das Etikett tatsächlich gestaltet, positioniert und angeklickt werden, um den Umschalter zu aktivieren. Dies gibt uns ein völlig flexibles Element, mit dem wir arbeiten können, das zwei mögliche Zustände hat.
Lasst uns eintauchen und jede dieser Methoden genauer betrachten.
Methode 1
Der erste Weg, dieses Experiment anzugreifen, besteht darin, unser Kontrollkästchen dazu zu bringen, die gesamte Größe unseres Objekts aufzufressen und es dann zu verstecken. Um dies zu erreichen, ist alles, was Sie technisch benötigen, ein div, das ein Kontrollkästchen mit einer angewendeten Klasse enthält. Wenn Sie weiter gehen möchten, können Sie weitere Attribute wie "Name" hinzufügen. Wir werden auch ein Bild einfügen, damit wir etwas umschalten können.
Nun ist es an der Zeit, den fragwürdigen Schritt zu tun, unser gesamtes Image in ein großes Kontrollkästchen zu verwandeln. Wählen Sie dazu das? Klasse, die wir zuvor eingerichtet haben und dieselbe Höhe und Breite verwenden, die wir schon immer verwendet haben.
Stellen Sie als Nächstes die Position auf absolut und setzen Sie die Position links, oben, Rand und Auffüllung zurück, um sicherzustellen, dass der Startpunkt dort ist, wo wir ihn haben möchten. Dies funktioniert zusammen mit unserer vorherigen relativen Positionierung, so dass unser Kontrollkästchen nun den gesamten Bereich des Bildes einnehmen kann. Um sicherzustellen, dass das Kontrollkästchen über allem bleibt, setzen Sie den Z-Index-Wert auf einen beliebigen Wert.
Setzen Sie schließlich die Deckkraft des Kontrollkästchens auf 0, um es vollständig auszublenden. Das Interessante dabei ist, dass durch das Ausblenden des Kontrollkästchens die Funktionalität nicht deaktiviert wird. Wenn Sie nun auf eine beliebige Stelle des Bildes klicken, wird das Kontrollkästchen ein- und ausgeschaltet.
Unser verstecktes Kontrollkästchen funktioniert, aber wir haben es noch nicht eingerichtet. Wie bereits erwähnt, möchten wir die Deckkraft des HTML-Bilds umschalten, so dass wir einen Selektor einrichten können, der alle Eingaben mit dem "Toggle" -Objekt auszeichnet. Klasse, die geprüft wird, verwenden Sie dann die gleichgeordnete Auswahl, um das Bild auszurichten und die Deckkraft auf Null zu setzen. Um den Effekt ein wenig schöner zu gestalten, werfen Sie einen einfachen Übergang.
Versuch es
Damit ist Methode eins alle beendet. Unten sollte ein Link zur CodePen-Seite angezeigt werden. Schau es dir an und komm dann für den Rest zurück!
Demo: Klicken Sie hier, um es auf CodePen zu sehen.
Methode 2
Wenn die erste Methode nicht zur Verfügung steht, ist es an der Zeit, die Methode # 2 zu erkunden, bei der ein Kontrollkästchen-Label verwendet wird. Dies wird direkt vor der Eingabe hinzugefügt. Beachten Sie, dass das für? value stimmt mit der ID für das Kontrollkästchen überein. Wir werden auch beide Bilder in unseren HTML-Code werfen, um die Dinge zu ändern.
CSS
Wieder beginnen wir damit, dem div einige grundlegende Stile hinzuzufügen. Hier gibt es nichts wirklich Besonderes, nur einige Abmessungen und Positionierung.
Nun zu etwas Neuem.Denken Sie daran, dass diese Methode die Verwendung des Ankreuzfelds anstelle des Ankreuzfelds beinhaltet. Stellen Sie dazu die Anzeige auf blockieren und geben Sie einige Abmessungen an. Wir haben den Text eingefügt? Click Me? Im obigen HTML-Code müssen wir das also auch gestalten. Im Wesentlichen transformieren wir nur das Label, um es wie eine Schaltfläche aussehen zu lassen.
Im Hover-Modus habe ich die Farben geändert und den Mauszeiger hinzugefügt, um die Vorstellung zu verstärken, dass es sich um ein anklickbares Element handelt.
Jetzt ist es an der Zeit, das Kontrollkästchen wieder auszublenden, aber wir werden ein wenig anders vorgehen, indem wir nur zeigen, dass wir es können. Durch das Zuweisen einer absoluten Positionierung und einiger verrückter Positionswerte schießen wir das tatsächliche Kontrollkästchen außer Sicht. Denken Sie daran, dies funktioniert, weil wir immer noch auf das Label-Element klicken können, um den Umschalter abzubrechen.
Um diese Version fertig zu stellen, benötigen wir drei weitere Style-Blöcke. Die erste Position positioniert das zweite Bild direkt unter dem ersten Bild. Von hier aus verwenden wir den gleichen Code wie beim letzten Mal, um die Deckkraft beim Umschalten zu ändern und einen schönen Übergang hinzuzufügen.
Versuch es
Wir haben die zweite Methode jetzt fertiggestellt, probieren Sie es aus, indem Sie auf den Link klicken.
Demo: Klicken Sie hier, um es auf CodePen zu sehen.
Ist dies nicht der Job von JavaScript?
Ohne Zweifel ist das ein paar lustige Sachen. Mit nur ein bisschen CSS und HTML konnten wir ein nettes Klickereignis erstellen. Die Vorteile sind klar: kurzer Code, kein JavaScript, einfache Implementierung usw.
Leider sind beide Methoden, die wir oben beschrieben haben, in manchen Kreisen ziemlich tabu. Dies liegt daran, dass beide wirklich eine Bastardisierung des Checkbox-Elements sind. Wir verwenden das Element nicht wirklich? Semantisch? Das bedeutet, wie es wirklich verwendet werden sollte, stattdessen stehlen wir einfach seine Funktionalität und wickeln sie um andere Objekte.
Wie schlimm ist das also? Es hängt davon ab, mit wem Sie sprechen. Ein alter Schulkodierer wird Ihnen sagen, dass dies schlechte Nachrichten sind. Verwenden Sie JavaScript-Dummy, dafür ist es da! Trotzdem verwenden viele der eindrucksvolleren CSS-Tutorials, die kürzlich online veröffentlicht wurden, ähnliche Tricks (eine Variante verwendet stattdessen Radiobuttons), obwohl sie dies nicht wirklich ausführlich erklären. Einige davon sind so großartig, dass Sie einfach nicht widerstehen können, Semantik in den Wind zu werfen und an dem vorbeizuziehen, was Sie bisher nur mit CSS möglich hätten.
Mit diesem Artikel versuchte ich zu erklären, wie diese Technik auf einer grundlegenden Ebene funktioniert, und weist darauf hin, dass sie zumindest als kontrovers betrachtet wird.
Sollte ich dies öfter verwenden?
Ich schreibe CSS-Tutorials für den Lebensunterhalt. Jeden Tag versuche ich, an große Dinge zu denken, die ich Ihnen beibringen kann. Methoden wie diese stellen ein interessantes Dilemma dar. Sie eröffnen so großartige Möglichkeiten, erstaunliche reine CSS-Demos zu erstellen. Einige halten es jedoch für Zeitverschwendung angesichts der fragwürdigen semantischen Anwendung.
Hier werfe ich es Ihnen, den Design Shack-Lesern, zurück. Was denkst du? Soll ich dir cooles Zeug zeigen, auch wenn es semantische Opfer bringt? Möchten Sie weitere coole Demos sehen, die mit den beiden in diesem Artikel beschriebenen Methoden erstellt wurden? Wie kannst du diesen Trick verbessern? Ich würde gerne deine Gedanken hören!