Spezielle CSS-Definitionen für iPad, iPhone und sonstige Touch-Geräte

28.02.2013

Über die neue ui.js wird das HTML-Tag per JavaScript mit browserspezifischen Klassen versehen, die es im CSS erlauben, gezielte Formatierungen durchzuführen.

Je nach Browser, Betriebssystem und Endgerät werden unterschiedliche Klassen gesetzt, die anschließend über CSS angesprochen werden können. So sind Sie z.B. in der Lage :hover Selektoren für iPads im Speziellen oder für Touch-Geräte im Allgemeinen zu deaktivieren. Neben den Media-Queries bieten diese erweiterten Klassen eine ergänzende Möglichkeit zur Formatierung rein über CSS.

Die gesetzten browser bzw. endgeräteabhängigen Klassen sind:

  • touch - Touch-Gerät
  • mobile - Mobiler Browser
  • ios - iOS Gerät, wie z.B. iPhone, iPod oder iPad
  • iphone - iPhone
  • ipad - iPad
  • ipod - iPod
  • saios - Safari auf iOS
  • crios - Chrome auf iOS

Beispiel für browserabhängige Hintergrundfarben

html.touch body   {background-color:red;}
html.ios body     {background-color:blue;}
html.ipad body    {background-color:yellow;}
html.iphone body  {background-color:black;}
html.ipod body    {background-color:green;}
html.crios body   {background-color:brown;}
html.saios body   {background-color:magenta;}

Negative CSS Selektoren

Um zu prüfen, ob ein Gerät Touch-Funktionen unterstützt, steht neben dem Selector touch auch der Negativselektor no-touch zur Verfügung. Sie können also über html.no-touch CSS für Geräte ohne Touchscreen definieren. Das Gleiche gilt für den Selektor für JavaScript-Funktionalität js und no-js.