WebKit Sibling Bug

Benjamin Hofmann Datum: 13. März 2015
Autor: Benjamin Hofmann


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…

Beispiele

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.

Quellen

[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

Kommentare

Selber kommentieren:






Weitere Beiträge zum Thema Technologie


Styling von Checkboxen und Radiobuttons

Autor: Benjamin Hofmann


Technologie // User Experience & Design


Wieder einmal ein Linktipp: Customizing web forms with CSS3 and WebKit Leider funktionieren diese Styles, so wie sie im Artikel dargestellt werden, nur in WebKit-basierten Browsern, also im Safari, Chrome oder den Standard-Browsern von Android und iOS. Aber wenn diese Styles nicht angewandt werden können springt der jeweilige Browser auf die normale Darstellung zurück, wie …


Beitrag lesen
23
FEB
12

Preload – was bringts?

Autor: Philip Dumas


Technologie


Im Laufe der Umsetzung des Grassau-Portals habe ich mich mal mit Preloading im html auseinandergesetzt. Benutzt wird das Ganze, um Resourcen wie z.B. Styles, Fonts etc. effizienter laden zu können und somit die Performance zu verbessern. Der Vorteil gegenüber dem ja inzwischen schon etwas älteren Prefetching ist, dass im Tag ein Type angegeben wird, der …


Beitrag lesen
28
FEB
17

Spamschutz-Alternative: MotionCAPTCHA

Autor: Stefan Oswald


Projekte // Technologie // Über den Tellerrand // User Experience & Design


Sehr interessanter Ansatz: > MotionCAPTCHA > Beispielseite Die Idee dahinter ist, dass der Benutzer eine vorgegebene Form (z.B. einen Kreis, einen Stern oder ein Häkchen) nach malen muss. Bots dürften daran zuverlässig scheitern. Der Autor betrachtet die derzeitige Version 0.2 als „Proof of Concept“ und noch nicht aus produktiv einsetzbare Lösung. Wir sollten das im …


Beitrag lesen
20
MAI
14

Apple Touch Icons nutzen

Autor: Bastian Schwarz


Projekte // Technologie // User Experience & Design


Ich habe mal ein wenig recherchiert und möchte hier das Ergebnis mitteilen. Die Apple Touch Icons können generell benutzt werden um Apps oder Webseiten auf z.B. den Startbildschirm zu pinnen. Ist bei der Webseite dann ein solches Icon hinterlegt wird das „Lesezeichen“ mit ihm hinterlegt und man erhält so einen schönen Wiedererkennungswert. Generell sollten die …


Beitrag lesen
17
OKT
12