Bei kleineren Anpassungen in einem unserer Projekte ist heute im alten Standard-Browser von Android ein Bug[1] aufgefallen, der dazu führte, dass die Listenelemente mit initial verstecktem Inhalt diesen beim Anklicken nicht anzeigten.
Nach einer kurzen Recherche bin ich hier auch auf die Lösung gestoßen, den Checkbox Hack on Mobile Webkit[2]. Klingt fies, ist aber nur eine kleine Vorsichtsmaßnahme, die man beim HTML und CSS zusammenklöppeln beachten sollte.
Bei der Verwendung des General Sibling (~
) Selektoren in CSS in Verbindung mit einer Pseudoklasse (:hover
, :checked
, …) wird in diesen alten Versionen von WebKit immer nur das nächste Element angesprochen, also quasi das Verhalten des Adjacent Sibling Selektors (+
) nachgebildet. Zum besseren Verständnis ein paar…
Ausgangssituation ist folgendes CSS, welches einen nachfolgenden Paragraphen im HTML einblenden soll, sobald eine vorhergehende Checkbox angehakt wurde:
p {display:none;} input:checked ~ p {display:block;}
Folgendes HTML wird nicht funktionieren, da der versteckte Paragraph nicht das exakt nächste Element zur Checkbox ist, die diesen beim :checked Status einblenden soll.
<input id="foo" type="checkbox" /> <label for="foo">Aus-/Einklappen</label> <p>Initial versteckter Content.</p>
Stellt man das HTML hingegen so um, dass die Checkbox und der Paragraph direkt nacheinander und auch exakt in dieser Reihenfolge ausgespielt werden, greift das CSS und der Paragraph wird angezeigt sobald die Checkbox angehakt wurde.
<label for="foo">Aus-/Einklappen</label> <input id="foo" type="checkbox" /> <p>Initial versteckter Content.</p>
Man sieht also: Kleine Änderung, große Wirkung. Und leider kann man diesen alten Browser noch nicht ganz vernachlässigen. Aktuell hat er weltweit gesehen immer noch ca. 20% Marktanteil[3]. Der Bug ist in aktuelleren Versionen von WebKit behoben worden, so dass Chrome und Safari nicht mehr davon betroffen sind.
[1] https://css-tricks.com/webkit-sibling-bug/
[2] https://css-tricks.com/forums/topic/checkbox-hack-on-mobile-webkit/#post-106539
[3] http://gs.statcounter.com/#mobile+tablet-browser-ww-monthly-201402-201502
Wie können wir Schülerinnen und Schüler für die Informatik begeistern – und ihnen spannende berufliche…
Was ist AR,MR,VR und XR? Und wie ist es selber in der virtuellen Welt zu…
Vergangene Woche fand unser jährliches Netzwerk-Event der imx.Daten-und Serviceplattform statt. So viel sei vorab gesagt…
imx.Platform-Kunden nutzen bereits seit einigen Jahren Services aus dem Bereich der Künstlichen Intelligenz (KI), wenn…
Wie geht man am besten an einen Blogbeitrag über den Jahresauftakt #imxkickoff2024 des infomax-Teams vergangene…
Phil, Stefan und Vroni berichten vom Tag der Ausbildung in Traunstein, der größten Bildungsmesse in…