CSS-Tipps

Darstellungsprobleme auf Tablets beheben (Teil 2)

Nach dem ersten Teil unseres CSS-Ratgebers für Darstellungsprobleme auf dem Tablet folgt Teil 2.

Wir haben CSS-Tipps für Darstellungsprobleme auf Tablets.

© Internet Magazin

Wir haben CSS-Tipps für Darstellungsprobleme auf Tablets.

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:

width: calc(50% - 200px);

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:

div {width: 10em; overflow: hidden;}

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

body {font-size: 0.8em;}
h1 {font-size: 2em;}
p {font-size: 1em;}

schreiben Sie daher lieber:

body {font-size: 80%;}
h1 {font-size: 2em;}
p {font-size: 1em;}

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.

internet, webdesign, tipps, tricks, pixel, layout, kindle, ipad

© Internet Magazin

Dust Me Selectors in Firefox: Durchsuchen der aktuellen Website nach benutzten oder unbenutzten CSS-Selektoren.

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:

.textselektor {
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif }

können Sie auch so ausdrücken:

.textselektor {
font: bold italic small-caps 1em/1.5em verdana, sansserif
}

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:

<p class="fliesstext ersterabsatz hauptspalte">Der Text</p>

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:

selektor {
border: 3px solid #000 }

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

selektor {
border: solid }

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:

selector {
min-height:460px;
height:auto !important;
height:460px;
}

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:

div {
height: expression( this.scrollHeight < 461 ? "460px" :
"auto" );
}

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

this.scrollHeight < 461

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

Mehr zum Thema

internet, webdesign, css3, cheat sheet, layouts, fonts
Cheat Sheet

Unsere Übersicht soll Sie bei der täglichen Arbeit mit CSS3 unterstützen.
Apps selber entwickeln mit dem richtigen Framework
Framework

Wir stellen die interessantesten Frameworks vor, mit denen Sie selber Apps entwickeln und programmieren können.
Die Gestaltung von Schaltflächen wurde noch vor einigen Jahren fast komplett mit einem Grafikprogramm abgewickelt. Dank CSS3 ist dies inzwischen ohne zusätzliche Dateien möglich.
Webdesign-Ratgeber

Die Gestaltung von Schaltflächen wurde noch vor einigen Jahren fast komplett mit einem Grafikprogramm abgewickelt. Dank CSS3 ist dies inzwischen ohne…
Wir haben neue HTML5-Tipps für Sie gesammelt.
HTML5-Ratgeber

Vor HTML5 hat Drag-und-Drop nur mit einer Mischung aus Javascript und CSS funktioniert. Dank HTML 5 können Sie diesen Effekt direkt mit HTML…
CSS-Filter zählen sicher zu den spannendsten Features von CSS3.
CSS3-Ratgeber

CSS-Filter zählen sicher zu den spannendsten Features von CSS3, denn man kann darüber Effekte erzeugen, wie man sie sonst nur aus der…