HTML5 in der mobilen Webentwickung - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 42

Platzieren Sie so viele Media Queries in Ihrem CSS, wie Sie möchten. Es gibt kein
Limit. Achten Sie aber darauf, dass sich Media Queries teilweise ergänzen können
und sich somit Definitionen gegebenenfalls überschreiben.
Sie haben gelernt, dass Sie Media Queries direkt in Ihre CSS-Datei schreiben können.
Allerdings können Sie auch direkt im HTML-Code über das link -Tag mit Media Que-
ries arbeiten und die Definitionen für den bestimmten Einsatzzweck in separate CSS-
Dateien auslagern. Dies erhöht die Übersichtlichkeit Ihrer WebApp.
<link rel="stylesheet" href="tablet-horizontal.css" media="only screen and
(min-device width: 768px) and (max-device-width: 1024px) and (orientation:
landscape)">
Mit diesem Code implementieren Sie eine CSS-Datei, deren Inhalt nur auf einem Tab-
let angewendet wird, dessen Bildschirmausmaße 1024 × 768 Pixel aufweist und wel-
ches im Querformat gehalten wird.
Keine automatische Optimierung für Mobile
Beachten Sie, dass Ihre WebApp nur durch die Definition von Media Queries nicht
für ein mobiles Endgerät optimiert ist. Ladezeiten von großen Bildern u. Ä. bleiben
natürlich bestehen, lediglich die Anzeige wird angepasst.
Automatische Silbentrennung
Besonders bei dem Einsatz von Blocksatz auf kleinen Bildschirmen kann es im Text
zu unschönen Löchern zwischen Wörtern kommen. Diese Löcher verringern die Les-
barkeit spürbar und sind zudem auch noch sehr unschön. Abhilfe schafft hier eine
automatische Silbentrennung per CSS (Abbildung 2.14). Silbentrennung war in der
Vergangenheit bereits mit JavaScript möglich, allerdings zu Lasten der Performance.
Mit CSS3 und der Definition hyphens übernimmt der Browser die Silbentrennung. Der
Wert none deaktiviert die Silbentrennung während manual nur dort trennt, wo im
HTML-Code ein sogenannter Soft-Hyphen gesetzt ist. Der Soft-Hyphen ist ein Zei-
chen, welches nicht im Fließtext auftaucht. Es signalisiert aber dem Browser, dass er
an dieser Stelle das Wort trennen darf und automatisch einen Bindestrich einfügen
soll. Soft-Hyphens werden im HTML-Code in Form von &shy; angegeben. Der Wert
auto ist jedoch am interessantesten, denn er aktiviert die automatische Silbentren-
nung.
.silbentrennung {
-webkit-hyphens: auto;
}