Wie das römische Reich Aus Reinen CSS-Connect 4 Möglich

0
17

Experimente sind eine lustige Ausrede, um zu lernen, die neuesten tricks, denken, neue Ideen, und schieben Sie Ihre Grenzen. “Pure CSS” demos gewesen, die Sache für eine Weile, aber auch neue Möglichkeiten eröffnen, wie Browser und CSS selbst entwickelt. CSS-und HTML-Präprozessoren auch geholfen, die Szene vorwärts zu bewegen. Manchmal Präprozessoren sind für hardcoding jedes mögliche Szenario, zum Beispiel, lange strings von :geprüft und in angrenzenden Geschwister-Selektoren.

In diesem Artikel werde ich gehen Sie durch die key-Ideen von einer Reinen CSS-Connect 4 Spiel, das ich gebaut habe. Ich versuchte zu vermeiden, hardcoding so viel wie ich konnte in mein experiment und arbeitete ohne Präprozessoren, um den Fokus zu halten, ist der resultierende code kurz. Sie können sehen, all die Codes und das Spiel gleich hier:

Finden Sie den Stift, Reines CSS-Connect 4 von Bence Szabó (@finnhvman) auf CodePen.

Wesentliche Konzepte

Ich denke, es gibt einige Konzepte, die als wesentlich in der “pure-CSS” – genre. In der Regel form-Elemente verwendet werden, für die Verwaltung und Erfassung von user-Aktionen. Ich war aufgeregt, als ich Menschen gefunden, mit <button type=”reset”> zurücksetzen oder ein neues Spiel starten. Alles, was Sie tun müssen ist, wickeln Sie Ihre Elemente in ein <form> – tag und fügen Sie die-Taste. Meiner Meinung nach ist dies eine viel sauberere Lösung als die Seite zu aktualisieren.

Mein Erster Schritt war die Erstellung eines form-Elements dann werfen eine Reihe von Eingaben in es für die slots und fügen Sie die reset-Taste. Hier ist eine sehr einfache demonstration des <button type=”reset”> in Aktion:

Finden Sie die Stift-Pure HTML Form Reset von Bence Szabó (@finnhvman) auf CodePen.

Ich wollte schöne visuelle für diese demo, um eine volle Erfahrung. Stattdessen ziehen Sie in ein externes Bild für das board oder die Scheiben habe ich einen radial-gradient(). Eine schöne Ressource, die ich oft benutze, ist Lea Verou ist CSS3 Patterns Gallery. Es ist eine Sammlung von mustern aus, indem Sie Farbverläufe, und Sie sind editierbar zu! Ich currentcolor verwendet, die kamen, sehr praktisch für den disc-Muster. Ich habe ein header und wiederverwendet meinen Reinen CSS-Ripple-Taste.

An dieser Stelle wird das layout und der CD-Gestaltung war schon endgültig, nur das Spiel hat überhaupt nicht funktioniert

Drop-discs auf dem Brett

Als Nächstes habe ich aktiviert Benutzer, um Ihre abwechselnd Drop-discs auf den Connect-4-board. In Connect 4 Spieler (eine rote und eine gelbe) fallen Scheiben in Spalten abwechselnd. Es sind 7 Spalten und 6 Zeilen (42 slots). Jeder Steckplatz kann leer sein oder besetzt durch eine rote oder gelbe Scheibe. Also, ein slot kann drei Zustände (leer, rot oder gelb). Discs sank in der gleichen Spalte sind gestapelt auf einander.

Ich begann, indem Sie zwei Kontrollkästchen für jeden slot. Wenn Sie beide nicht markiert, ist der Steckplatz als leer, und wenn einer von Ihnen aktiviert ist, wird der entsprechende Spieler hat seine Disk.

Die möglichen Zustand, dass Sie beide überprüft sollte vermieden werden, indem Sie zu verbergen, wenn einer von Ihnen aktiviert ist. Diese Checkboxen sind unmittelbare Geschwister so, wenn die ersten ein paar aktiviert ist, können Sie verstecken die beiden mittels :checked pseudo-Klasse und dem benachbarten sibling combinator (+). Was ist, wenn der zweite aktiviert ist? Sie können verstecken die zweite, aber wie sich das erste? Gut, es gibt keine vorherigen sibling-Selektor, das ist einfach nicht, wie CSS-Selektoren arbeiten. Ich hatte zur Ablehnung dieser Idee.

Eigentlich eine checkbox kann drei Zustände von selbst, kann es in den unbestimmten Zustand. Das problem ist, dass man es nicht in unbestimmten Zustand, mit HTML allein. Selbst wenn man das könnte, mit dem nächsten Klick auf die checkbox würde immer machen es zu verwandeln in aktivierten Zustand. Zwingt der zweite Spieler, doppelklicken Sie auf, wenn Sie sich bewegen, ist unzuverlässig und nicht akzeptabel.

Ich saß auf der MDN-doc :unbestimmte und bemerkt, dass die radio-Eingänge haben auch unbestimmten Zustand. Radio-buttons mit dem gleichen Namen gibt, in diesem Zustand, wenn Sie alle deaktiviert. Wow, das ist ein tatsächlicher Ausgangszustand! Was wirklich von Vorteil ist, dass die Prüfung der letzteren Geschwister hat auch einen Einfluss auf die ehemaligen! Also füllte ich das board mit 42 Paaren von radio-Eingänge.

Im Nachhinein clever Bestellung und Nutzung von Etiketten mit entweder checkboxes oder radio-buttons gemacht hätte, den trick, aber ich habe nicht betrachten Sie die Etiketten, um eine option zu halten, den code einfacher und kürzer.

Ich wollte große Flächen für Interaktion, um schön UX, so dass ich dachte, es ist sinnvoll, damit die Spieler einen Zug zu machen, indem Sie auf eine Spalte. Ich stapelte Kontrollen der gleichen Spalte auf jeder anderen durch das hinzufügen von absoluten und relativen Positionierung auf die entsprechenden Elemente. Auf diese Weise werden nur die untersten leeren Steckplatz ausgewählt werden konnte innerhalb einer Spalte. Ich sorgfältig die Zeit einstellen, die der übergang von der Scheibe fallen pro Reihe und Ihre timing-Funktion ist eine annähernd quadratische Kurve ähneln realistische freien fall. So weit die Teile des Puzzles kamen auch zusammen, obwohl die animation unten zeigt deutlich, dass nur der rote Spieler konnten Ihre Bewegungen.

Obwohl die Bedienelemente sind alle dort, nur rot-discs können gelöscht werden auf dem board

Die anklickbaren Bereiche von radio-Eingänge visualisiert mit farbigen, aber semi-transparenten Rechtecke. Die gelben und roten Eingänge sind gestapelt übereinander, sechs mal(=sechs Zeilen pro Spalte, verlässt den roten Eingang von der untersten Zeile, die oben auf dem Stapel. Die Mischung aus rot und gelb entsteht die orangish Farbe, die gesehen werden kann auf dem board zu starten. Je weniger leere Felder sind in einer Spalte, die weniger intensiv diese orangish Farbe bekommt, da die radio-Eingänge werden nicht angezeigt, wenn Sie nicht mehr :unbestimmt. Durch den roten Eingang immer genau über den gelben Eingang in jeden slot, nur der rote Spieler ist in der Lage, bewegt.

Tracking schaltet

Ich hatte nur eine schwache Vorstellung und viel Hoffnung, dass ich irgendwie lösen switching stellt sich zwischen die beiden Spieler mit dem general sibling Selektor. Das Konzept war, dass der rote Spieler nehmen wiederum, wenn die Anzahl der aktivierten Eingänge war auch (0, 2, 4, etc.) und lass den gelben Spieler nehmen wiederum bei dieser Nummer war seltsam. Bald erkannte ich, dass der general sibling Selektor nicht (und sollte nicht!) so, wie ich es wollte.

Dann eine sehr offensichtliche Wahl war, um experiment mit der N-TEN Selektoren. Jedoch zieht es zu nutzen, um der geraden und ungeraden keywords, lief ich in eine Sackgasse. Das :nth-child-Selektor “zählt” die Kinder in eine übergeordnete, unabhängig von Art, Klasse, eine pseudo-Klasse, was auch immer. Das :nth-of-type-Selektor “zählt” die Kinder eines Typs in einem übergeordneten, unabhängig von Klasse oder pseudo-Klasse. Das problem ist also, dass Sie nicht rechnen kann, basiert auf der :checked-Zustand.

Auch CSS-Zähler zählen auch, also warum nicht, Sie auszuprobieren? Eine gemeinsame Nutzung der Zähler ist die Anzahl der überschriften (auch in mehreren Ebenen) in einem Dokument. Gesteuert werden Sie durch CSS-Regeln, können beliebig reset an jeder beliebigen Stelle und deren Inkrement (oder Dekrement!) Werte kann eine beliebige ganze Zahl. Die Zähler werden angezeigt, indem der Zähler () – Funktion in der content-Eigenschaft.

Der einfachste Schritt war die Einrichtung einen Zähler und zählen die :überprüft die Eingaben in der Connect-4-raster. Es gibt nur zwei Probleme mit diesem Ansatz. Die erste ist, die Sie nicht ausführen Arithmetik auf einen Zähler zu erkennen, ob Ihr gerade oder ungerade ist. Das zweite ist, dass Sie nicht gelten CSS-Regeln, um Elemente auf Basis der counter-Wert.

Ich schaffte es zu überwinden das erste Problem, indem der Zähler mit binären. Der Wert der Zähler zunächst auf null. Wenn der rote Spieler überprüft Ihren radio-Taste wird der Zähler um eins erhöht. Wenn der gelbe Spieler überprüft Ihren radio-Taste wird der Zähler um eins verringert, und so weiter. Daher der Wert der Zähler entweder null oder eins, gerade oder ungerade.

Die Lösung des zweiten Problems Bedarf viel mehr Kreativität (sprich: hack). Wie bereits erwähnt Zähler können angezeigt werden, sondern nur in den ::before und ::after pseudo-Elemente. Das ist ein no-brainer, aber wie können Sie auf andere Elemente? Zumindest der counter Wert ändern kann, das die Breite der pseudo-element. Unterschiedliche zahlen haben unterschiedliche breiten. Charakter 1 ist in der Regel dünner als 0, aber das ist etwas, was sehr schwer zu kontrollieren. Wenn die Anzahl der Zeichen ändern, anstatt das Zeichen selbst ist die resultierende Breite ändern mehr kontrollierbar ist. Es ist nicht ungewöhnlich, dass römische Ziffern mit CSS-Countern. Eins und zwei vertreten, die in römischen Ziffern sind die gleichen Zeichen, einmal und zweimal und so sind Ihre breiten in Pixel.

Meine Idee war, befestigen Sie die radio-buttons, die einem Spieler (gelb) auf der linken Seite, und befestigen Sie die radio-buttons der anderen Spieler (rot) das Recht Ihrer gemeinsamen übergeordneten container. Zunächst werden die roten Tasten, die überlagert werden auf die gelben buttons, dann die Breite ändern des Containers würde bewirken, dass die roten Tasten, um “Weg” und zeigen die gelben buttons. Eine ähnliche real-world-Konzept ist die Schiebe-Fenster mit zwei Scheiben, eine Scheibe befestigt ist (gelbe Tasten), die andere ist verschiebar (red buttons) über den anderen. Der Unterschied ist, dass im Spiel nur die Hälfte der Fenster sichtbar ist.

So weit, So gut, aber ich war immer noch nicht zufrieden mit der font-size (und die anderen font-Eigenschaften) indirekt Steuern der Breite. Ich dachte letter-spacing würde gut passen, hier, da es erhöht nur die Größe einer dimension. Unerwartet, sogar einen Brief hat Zeichenabstand (was gerendert wird, nach dem Brief), und zwei Buchstaben machen die Buchstaben-Abstand zweimal. Vorhersehbar breiten sind entscheidend, damit diese zuverlässig. Zero-width-Zeichen zusammen mit single-und double-spacing funktionieren würde, aber es ist gefährlich, um die schriftart-Größe auf null. Definition von großen Buchstaben-Abstand (in Pixel) und klein (1px) font-size, machten es fast konsistent über alle Browser, ja ich spreche sub-Pixel.

Ich brauchte die container-Breite auf die Alternative zwischen der anfänglichen Größe (=w) und mindestens das doppelte der ursprünglichen Größe (>=2w) in der Lage sein, um Sie vollständig zu verstecken und zeigen der gelben buttons. Wir sagen v ist die gerenderte Breite ‘ich’ – Charakter (untere römischen Darstellung variiert je nach Browser), und c ist die gerenderte Breite (Konstante) von dem letter-spacing. Ich brauchte, v + c = w, um wahr zu sein, aber es kann nicht sein, denn c und w sind ganze zahlen, aber v ist nicht integer. Landete ich mit min-width und max-width-Eigenschaften beschränken die möglichen Werte für die Breite, also ich habe auch die möglich-counter-Werten auf ‘ich’ und ‘iii’, um sicherzustellen, dass der text breiten Unterlauf und überlauf der Einschränkungen. In den Gleichungen dieser sah aus wie v + c < w, 3v + 3c – > 2w und v << c, gibt die 2/3w < c < B ist. Die Schlussfolgerung ist, dass die Buchstaben-Abstand ist etwas kleiner als die erste Breite.

Ich habe die Argumentation so weit als wenn die pseudo-element-Anzeige der Zähler Wert war, die Eltern der radio-buttons ist es nicht. Jedoch ist mir aufgefallen das die Breite der pseudo-element ändert die Breite des übergeordneten Elements, und in diesem Fall die übergeordneten container des radio-buttons.

Wenn Sie denken, konnte nicht gelöst werden, mit arabischen Ziffern? Du hast Recht, den Wechsel der Zähler-Wert zwischen so etwas wie ‘1’ und ‘111’ würde auch funktionieren. Dennoch, römische zahlen Gaben mir die Idee in den ersten Platz, und Sie waren auch eine gute Ausrede für die clickbaity-Titel, so hielt ich Sie.

Die Spieler ziehen abwechselnd, beginnend mit dem Spieler rot

Anwendung der Technik diskutiert, macht der übergeordnete container des radio-Eingänge doppelte in die Breite, wenn eine rot-Eingang ist aktiviert und macht es der ursprünglichen Breite, wenn ein gelb-Eingang aktiviert ist. In der ursprünglichen Breite container die rote Eingaben sind über den gelben, aber in der doppelten Breite container, die rote Eingaben sind weggezogen.

Muster zu erkennen

Im wirklichen Leben, das Anschließen von 4 Ausschuss nicht sagen, ob Sie gewonnen oder verloren haben, aber ordnungsgemäße Bereitstellung von feedback ist Teil der guten user experience in der software. Das nächste Ziel ist es, zu erkennen, ob ein Spieler das Spiel gewonnen hat. Um das Spiel zu gewinnen, ein Spieler muss die vier discs in einer Spalte, Zeile oder Diagonale Linie. Dies ist eine sehr einfache Aufgabe zu lösen, die in vielen Programmiersprachen, aber in reinem CSS-Welt, das ist eine enorme Herausforderung. Es brechen zu Teilaufgaben ist die Art und Weise, diesen Ansatz systematisch.

Ich benutzt ein flex-container als parent des radio-buttons und-Scheiben. Eine gelbe radio-Taste, ein rotes radio-button und ein div für die disc gehören ein Ablagefach. So ein Ablagefach wird wiederholt, 42 mal und in Spalten angeordnet sind, dass wickeln. Folglich werden die Schlitze in einer Spalte benachbart sind, die macht zu erkennen, vier in einer Spalte der einfachste Teil mit dem benachbarten Selektor:

<div class=”grid”>
<input type=”radio” name=”slot11″>
<input type=”radio” name=”slot11″>
<div class=”disc”></div>
<input type=”radio” name=”slot12″>
<input type=”radio” name=”slot12″>
<div class=”disc”></div>

<input type=”radio” name=”slot16″>
<input type=”radio” name=”slot16″>
<div class=”disc”></div>

<input type=”radio” name=”slot21″>
<input type=”radio” name=”slot21″>
<div class=”disc”></div>

</div>
/* Rote, vier in einer Spalte selector */
input:checked + .disc + input + input:checked + .disc + input + input:checked + .disc + input + input:checked ~ .Ergebnis

/* Gelb vier in einer Spalte selector */
input:checked + Eingang + .disc + input:checked + Eingang + .disc + input:checked + Eingang + .disc + input:checked ~ .Ergebnis

Dies ist eine einfache, aber hässliche Lösung. Es gibt 11 Typ-und Klassen-Selektoren miteinander verkettet pro Spieler um den Fall abzudecken, vier in einer Spalte. Hinzufügen eines div mit der Klasse .Ergebnis, nachdem die Elemente des slots macht es möglich, bedingt anzeigen die Ergebnis-Nachricht. Es gibt auch ein problem mit fälschlicherweise die Erfassung von vier in einer Spalte, wo die Spalte umgebrochen wird, aber lasst uns einfach diese Frage beiseite.

Einen ähnlichen Ansatz für die Erfassung von vier in einer Reihe, wäre wirklich eine schreckliche Idee. Es wäre 56 Selektoren miteinander verkettet pro Spieler (wenn ich die Mathematik richtig), nicht zu erwähnen, dass Sie hätte ein ähnliches Problem mit falscher Erkennung. Dies ist eine situation, wo der :nth-child(An+B [S]) oder die Spalte combinators wird kommen praktisch in die Zukunft.

Für eine bessere Semantik könnte man fügen Sie ein neues div-Element für jede Spalte und ordnen Sie die slot-Elemente in sich. Diese änderung würde auch die Beseitigung der Möglichkeit von false-Erkennung erwähnt. Dann erkennen vier in einer Reihe gehen könnte wie: wählen Sie eine Spalte, in der die erste rot-radio-Eingang aktiviert ist, und wählen Sie die angrenzende Geschwister-Spalte, wo sich der erste rote-radio-Eingang aktiviert ist, und so auf zwei mal. Das klingt sehr umständlich und würde die “Eltern” – Selektor.

Die Auswahl der Eltern ist nicht machbar, aber die Auswahl der Kind ist. Wie würde erkennen, vier in einer Reihe gehen Sie mit zur Verfügung combinators und Selektoren? Wählen Sie eine Spalte, und wählen Sie dann Ihren ersten red-radio-Eingabe, falls aktiviert, und wählen Sie die angrenzende Spalte, wählen Sie dann Ihren ersten red-radio-Eingabe, falls aktiviert, und so auf zwei mal. Es klingt immer noch umständlich, aber möglich. Der trick ist, nicht nur in CSS sondern auch in der HTML -, der nächsten Spalte werden die Geschwister von der radio buttons in der vorherigen Spalte erstellen einer verschachtelten Struktur.

<div class=”grid-column”>
<input type=”radio” name=”slot11″>
<input type=”radio” name=”slot11″>
<div class=”disc”></div>

<input type=”radio” name=”slot16″>
<input type=”radio” name=”slot16″>
<div class=”disc”></div>

<div class=”Spalte”>
<input type=”radio” name=”slot21″>
<input type=”radio” name=”slot21″>
<div class=”disc”></div>

<input type=”radio” name=”slot26″>
<input type=”radio” name=”slot26″>
<div class=”disc”></div>

<div class=”Spalte”>

</div>
</div>
</div>
/* Rote, vier in einer Reihe-Selektoren */
input:nth-of-type(2):checked ~ .Spalte > input:nth-of-type(2):checked ~ .Spalte > input:nth-of-type(2):checked ~ .Spalte > input:nth-of-type(2):checked ~ .Spalte::nach,
input:nth-of-type(4):checked ~ .Spalte > input:nth-of-type(4):checked ~ .Spalte > input:nth-of-type(4):checked ~ .Spalte > input:nth-of-type(4):checked ~ .Spalte::nach,

input:nth-of-type(12):checked ~ .Spalte > input:nth-of-type(12):checked ~ .Spalte > input:nth-of-type(12):checked ~ .Spalte > input:nth-of-type(12):checked ~ .Spalte::nach

Auch die Semantik Durcheinander und diese Selektoren sind nur für den roten Spieler (eine weitere Runde geht der gelbe Spieler), auf der anderen Seite, es funktioniert. Ein kleiner Vorteil ist, dass es keine falsch erkannte Zeilen oder Spalten. Die display-Mechanismus, der das Ergebnis musste auch geändert werden, mit dem ::after-pseudo-element der passenden Spalte ist eine konsequente Lösung, wenn der richtige styling angewendet wird. Als Ergebnis dieser, eine gefälschte achte Spalte Hinzugefügt werden, nachdem der Letzte slot.

Wie im code-snippet vor, bestimmte Positionen innerhalb einer Spalte verglichen werden, um zu erkennen, vier in einer Reihe. Die gleiche Technik kann verwendet werden, für die Erfassung von vier in einer diagonalen durch eine Anpassung dieser Positionen. Beachten Sie, dass die diagonalen können in zwei Richtungen.

input:nth-of-type(2):checked ~ .Spalte > input:nth-of-type(4):checked ~ .Spalte > input:nth-of-type(6):checked ~ .Spalte > input:nth-of-type(8):checked ~ .Spalte::nach,
input:nth-of-type(4):checked ~ .Spalte > input:nth-of-type(6):checked ~ .Spalte > input:nth-of-type(8):checked ~ .Spalte > input:nth-of-type(10):checked ~ .Spalte::nach,

input:nth-of-type(12):checked ~ .Spalte > input:nth-of-type(10):checked ~ .Spalte > input:nth-of-type(8):checked ~ .Spalte > input:nth-of-type(6):checked ~ .Spalte::nach

Die Anzahl der Selektoren erhöht haben, gewaltig in den Finallauf, und dies ist definitiv ein Ort, wo die CSS-Präprozessoren konnte reduzieren die Länge der Erklärung. Dennoch denke ich, die demo ist mäßig kurz. Es sollte irgendwo in der Mitte auf der Skala von hardcoding einen Selektor für jede mögliche gewinnende Muster auf die Verwendung von 4 magischen Selektoren (Spalte, Zeile, zwei diagonalen).

Eine Meldung wird angezeigt, wenn ein Spieler gewinnt

Das schließen von Schlupflöchern

Jede software hat edge-Fällen, und Sie müssen behandelt werden. Die möglichen Ergebnisse eines Connect 4 Spiel sind nicht nur die roten, oder gelben Spieler zu gewinnen, aber keiner der Spieler gewinnen füllen der Vorstand bekannt, wie ziehen. Technisch diesem Fall nicht das Spiel kaputt oder produzieren Fehler, was fehlt, ist die Rückmeldung an den Spieler.

Das Ziel ist, zu erkennen, Wann gibt es 42 :checked radio buttons auf dem board. Dies bedeutet auch, dass keiner von Ihnen sind in der :unbestimmten Zustand. Das ist die eine Auswahl für jeden radio-Gruppe. Radio-buttons sind ungültig, wenn Sie :unbestimmt, andernfalls sind Sie gültig. Also ich habe das required-Attribut für jeden Eingang, dann das :gültige pseudo-Klasse auf dem Formular zu erkennen, ziehen.

Die Unentschieden-Meldung wird angezeigt, wenn das Brett gefüllt wird

Abdeckung der Unentschieden führte ein bug. In dem sehr seltenen Falle, dass die gelben Spieler auf die Letzte Runde, sowohl in der Gewinn-und zeichnen-Meldungen werden angezeigt. Dies ist, weil die Erfassung und Darstellung der Methode dieser Ergebnisse sind orthogonal. Ich arbeitete, um das Problem, indem Sie sicherstellen, dass die win-Nachricht hat einen weißen hintergrund und ist über die draw-Nachricht. Ich hatte auch eine Verzögerung für den fade-in-übergang von der Auslosung Nachricht, so dass es nicht bekommen würde, gemischt mit der Gewinn-Nachricht übergang.

Die gelb gewinnt-Nachricht wird über das Unentschieden verhindern, dass es angezeigt werden

Während eine Menge von radio-buttons verbergen sich hinter einander durch die absolute Positionierung, die alle diejenigen, die in unbestimmten Zustand, kann immer noch zugegriffen werden, durch drücken der Tabulatortaste durch die Kontrollen. Dies ermöglicht es Spielern, um die drop ihrigen DVDs in beliebige slots. Ein Weg um dies zu umgehen, ist, einfach verbieten Tastatur-Interaktionen durch das tabindex-Attribut: die Einstellung -1 bedeutet, dass es nicht sein sollte, erreichen Sie über die sequentielle navigation mit der Tastatur. Ich hatte zu ergänzen, die jedem radio input mit diesem Attribut zu beseitigen, diese Lücke.

<input type=”radio” name=”slot11″ tabindex=”-1″ required>
<input type=”radio” name=”slot11″ tabindex=”-1″ required>
<div class=”disc”></div>

Einschränkungen

Der wesentliche Nachteil ist, dass der Vorstand nicht reagiert und es könnten Fehlfunktionen auf kleinen viewports durch die unzuverlässige Lösung des tracking schaltet. Ich wagte es nicht, nehmen das Risiko der Umgestaltung, um eine ansprechende Lösung, die aufgrund der Art der Umsetzung, fühlt es sich viel sicherer mit hardcoded Dimensionen.

Ein weiteres Problem ist die klebrige bewegen Sie den Mauszeiger auf touch-Geräten. Hinzufügen einige Interaktion Medien-Anfragen an die richtigen stellen ist der einfachste Weg, um dies zu heilen, aber es würde beseitigen die Freifall-animation.

Man könnte denken, dass der :unbestimmten pseudo-Klasse ist bereits weit verbreitet, und es ist. Das problem ist, dass es nur teilweise unterstützt werden, die in einigen Browsern. Beachten Sie Hinweis 1 in der Kompatibilitäts-Tabelle: MS IE und Edge unterstützen es nicht auf radio-buttons. Wenn Sie die demo in diesen Browsern wird der cursor wiederum in der nicht-erlaubten cursor auf dem board, dies ist eine unbeabsichtigte, aber etwas graceful degradation.

Nicht alle Browser unterstützen :unbestimmt auf radio-buttons

Fazit

Vielen Dank für so dass es auf den letzten Abschnitt! Schauen wir uns einige zahlen an:

  • 140 HTML-Elemente
  • 350 (angemessenen) Zeilen CSS
  • 0 JavaScript
  • 0 externe Ressourcen

Insgesamt bin ich mit dem Ergebnis zufrieden und das feedback war großartig. Ich habe sicher viel gelernt macht diese demo und ich hoffe, ich könnte eine Menge schreiben dieses Artikels!