Darstellungsprobleme auf Tablets beheben (Teil 2)

Dieser Ratgeber-Artikel ist die Fortsetzung von CSS-Tipps für Darstellungsprobleme auf Tablets.

CSS: Adaptive Layouts mit festen Elementen

Um ein nichtelastisches Bild in ein elastisches Layout einzubinden, können Sie die CSS3-Funktion calc nutzen und so nichtadaptive Einheiten in einem Layout auf Basis elastischer Einheiten wie em oder Prozente zu mischen.

So können Sie etwa ein 200 Pixel breites Bild von der vorab nicht definierten Breite seines elastischen Vaterelementes abziehen, um beispielsweise die Breite eines benachbarten Textkastens adaptiv festzulegen:

Allerdings verstehen sich auf diese Art Berechnungen nur aktuelle Desktop-Browser mit der Ausnahme von Opera; in Opera (aktuell in der Version 12.02) ist diese Funktion nicht einmal für die künftige Version 12.5 fest geplant. Zudem eignet sich diese Layoutmethode nicht für mobile User Agents. Nicht ein einziger mobiler Browser weiß mit der calc-Funktion etwas anzufangen. Insofern können Sie mit dieser Arbeitstechnik derzeit nur Desktop-Browser adressieren, und das nur, wenn Sie auf die Unterstützung von Opera verzichten können. Dennoch ist die Möglichkeit eines adaptiven Layouts mit der Einbindung fest in px bemessener Elemente vielversprechend.

CSS: "Elastische" Bilder ohne Javascript

Elastische Layouts auf Basis der Einheiten em oder rem eignen sich besonders gut für skalierbare Website-Inhalte wie Seiten mit viel Fließtext, doch auch Bilder oder Videos lassen sich in einem elastischen Layout ohne den Einsatz von Javascript "flexibilisieren". Um diesen Effekt zu erzielen, platzieren Sie das betreffende Bild oder Video in einem div-Element mit den folgenden Eigenschaften:

Die überschüssigen Pixel, die in den Container nicht mehr hinein passen, werden sauber beschnitten, ohne das Layout zu beeinträchtigen.

CSS: Zu geringe Textgröße

Beim Einsatz der em-Einheit tritt bei einigen Besuchern im Internet Explorer auf Grund einer benutzerspezifischen Einstellung ein Problem mit einer zu geringen Schriftgröße auf. Um dies zu verhindern, sei Ihnen geraten, die Schriftgröße des Vaterelementes in Prozent anzugeben und davon alle anderen Größen in em abzuleiten. Anstelle von

schreiben Sie daher lieber:

CSS: Unbenutzte CSS-Regeln

Falls Sie die unbenutzten CSS-Selektoren in Ihren Stylesheets aufspüren möchten, um sie von diesem Ballast zu bereinigen, können Sie eine Firefox-Erweiterung namens Dust Me Selectors zu Hilfe rufen. Die Projektseite der kostenlosen Erweiterung finden Sie hier.

Nach der Installation genügt ein Klick innerhalb des Dokumentfensters einer Website, um den Befehl Spider This Page aufrufen zu können. Das Tool crawlt entweder alle Dokumente, die von der aktuellen Website heraus zugänglich sind, oder ausgewählte Dokumente der aktuellen Site anhand einer XML-Sitemap. In der Liste der Fundstellen können Sie einzelne Selektoren manuell als benutzt oder unbenutzt markieren. Diese gegebenenfalls optimierte Liste der Ergebnisse können Sie anschließend als eine CSV-Datei ausgeben.

CSS: Abgekürzte Schreibweise nutzen

CSS-Regeln für die Darstellung von Texten, wie sie sie in diesem Beispiel sehen:

können Sie auch so ausdrücken:

Dadurch gewinnt das Stylesheet an Lesbarkeit und wird deutlich schlanker. Diese abgekürzte Schreibweise wird allerdings nur dann funktionieren, wenn Sie sowohl die Eigenschaft font-size als auch font-family deklarieren. Dabei muss die Eigenschaft font-family die Deklaration abschließen und zugleich direkt auf die Anweisung font-size folgen. Außerdem gilt es zu beachten, dass die Eigenschaften font-weight, font-style und font-variant, falls Sie diese nicht explizit deklarieren, jeweils den Wert normal annehmen. Das letzte Semikolon in einem Regelsatz können Sie im Übrigen weglassen.

CSS: Zwei CSS-Klassen pro Element anwenden

Einem Element können Sie mehr als nur eine Klasse zuweisen, in der Tat so viele Klassen, wie Sie möchten. Zum Beispiel:

Die einzelnen Klassen trennen Sie einfach mit je einem Freiraum. Das Element - in diesem Fall der betreffenden Absatz - ruft die CSS-Regeln aller zugehörigen Klassen auf. Sollten einige Regeln dieser Klassenselektoren im Widerspruch zueinander stehen, werden sie in der Reihenfolge angewendet, in der sie im Stylesheet vorkommen (also nicht in der Reihenfolge, in der sie das Markup aufruft).

CSS: Standardwerte für Ränder auslassen

Die Umrandung für ein Element wird generell wie folgt definiert:

Sollten Sie einige der Eigenschaften aus dieser Regel weglassen, würde der Standardwert angewendet, zum Beispiel:

Die Standardbreite der Umrandung entspricht dem Wert medium und dieser beträgt zwischen 3 und 4 Pixel. Die Standardfarbe der Umrandung entspricht der Textfarbe innerhalb derselben. Falls Sie ohnehin dieselben Eigenschaften deklarieren möchten, können Sie diese einfach ruhig weglassen.

CSS: Probleme mit der Eigenschaft min-height

Wer eine minimale Höhe eines Objektes mittels CSS erzwingen möchte, stößt schnell auf Probleme mit dem Internet Explorer, da dieser Browser die Eigenschaft min-height nicht korrekt verarbeitet. Das ganze Problem behebt dieser kurze CSS-Schnipsel:

Der Internet Explorer verwechselt die Eigenschaft height mit min-height und so funktioniert dieser Code außer in Firefox, in Opera ab Version 7.x und in Safari ab Version 1.2 auch noch im Internet Explorer (und zwar sogar ab der Version 6). Der Regelsatz beinhaltet nur gültigen CSS-Code (eine Deklaration von _height kommt nicht zum Einsatz) und da in diesem Regelsatz keinerlei Ausdrücke vorkommen, wird die Leistung von dem Workaround nicht beeinträchtigt. Damit der Code im Internet Explorer den gewünschten Effekt hat, müssen Sie darauf achten, dass die Website die passende DOCTYPE-Deklaration beinhaltet. Alternativ lässt sich derselbe Effekt im Internet Explorer unter Verwendung des folgenden Ausdrucks erzielen:

Dieser Code setzt die minimale Höhe des betreffenden Elementes im Internet Explorer auf den Wert 460. Achten Sie darauf, dass Ihre Bedingung wie im Beispiel

einen Pixel größer als die gewünschte Minimalhöhe ausfällt.