Folge uns auf Twitter

Folge uns auf Twitter

Es lohnt sich, Ahadesign aufTwitterzu folgen, um keine Neuigkeiten zu Bildbearbeitung, Webdesign Tutorials, Reviews, Testberichte, News, Downloads und Verlosungen zu verpassen. Wer Twitter nicht mag oder eine zusätzliche Möglichkeit sucht, um immer auf dem neuesten Stand zu sein, kann auch gerne denAhadesign-RSS-Feedkostenfrei abonnieren.

SeedingUp | Digital Content Marketing


CSS-Tipps für erweiterte Layouts und Effekte!

Ahadesign News

toptal-aha-cssIm Laufe der letzten Jahre hat die Bedeutung der Front-End-Entwicklung im Webdesign immer mehr zugenommen. Was die Anwender dabei zu sehen bekommen, ist immer hauptsächlich mit HTML und Cascading Stylesheets realisiert und es scheint auf den ersten Blick, als wären Layout-Probleme damit recht einfach zu lösen. Häufig aber führen nur Tricks zum Ziel, welche ohne fortgeschrittenes Fachwissen über die Funktionsweise von CSS kaum zu machen sind.

CSS-Tricks für flexible Layouts!

layout-idee

Nachfolgend werden einige Tipps und Tricks zu CSS besprochen, welche vielleicht weniger bekannt und umso mehr interessant sind. Sie stammen im Original von unserem US-Kooperationspartner Toptal. Auf der englischen Original-Seite zu den CSS-Expertentipps bei Toptal können weitere Tipps und Tricks inklusive Codelistings und Resultate ganz genau und noch ausführlicher nachvollzogen werden.

1. CSS Geschwister-Selektoren

Verzichtet man auf Sibling-Selectors bzw. auf Geschwister-Selektoren, verzichtet man auch auf Optimierungsmöglichkeiten. Man sollte diese Selektoren also immer nutzen, sofern sie auch Sinn machen. Möchte der Webdesigner bei einer gewissen Anzahl von Elementen das erste und letze Element unterschiedlich behandeln, kommen ihm sicher die Pseudo-Selektoren :first-child und :last-child in den Sinn.

Natürlich macht das Sinn, zum Beispiel wenn ein rein über CSS erstelltes Hamburger-Menü für das letzte Element einen Außenabstand haben soll. Hier ein kurzer Code-Ausschnitt, um zu zeigen, was gemeint ist.

.button > .bar:last-child {
margin-bottom: 0;
}

Eine gleichwertige Auswirkung kann aber auch mit dem benachbarten Geschwister-Selektor (+) erreicht werden. Das würde dann so aussehen:

.button > .bar + .bar {
margin-top: 4px;
}

Auch das macht also Sinn. Hier hat alles nach dem ersten Element einen Außenabstand nach oben. Damit spart man sich nicht nur diverse zusätzliche Bytes, sondern erweitert auch die Möglichkeiten.

Eine weitere Anwendungsmöglichkeit wären z.B. mit Titeln versehene Schaltflächen bzw. Cards, welche im aktiven Zustand zusätzlich Text anzeigen, der ansonsten verborgen bleibt. Soll nur die aktive Schaltfläche den Text anzeigen, könnte das so aussehen:

.card.active > .text,
.card.active ~ .card > .text {
display: block;
}

Vorher ist die Klasse .card natürlich mit display:none ausgeblendet. Wie gesagt, ist der vollständige Code auf der oben genannten Seite bei Toptal ersichtlich. Dort werden auch noch interaktive Möglichkeiten mit JavaScript gezeigt.

2. Vereinheitlichendes HTML-Element Sizing

toptal-ahadesign-cssJeder Webdesigner kennt das Problem von inkonsistenten Element-Größen in den unterschiedlichen Browsern. Eine Lösung stellt die Anweisung box-sizing dar, welche für alle Elemente mit border-box definiert werden kann. Während die meisten Browser die Größe eines HTML-Elements über die angegebene Breite sowie Innenabstand und Rahmen rendern, reagiert der Internet Explorer anders. Für die meisten Browser ist width also der Wert ohne Padding und Border. Für den IE ist width der Wert inklusive Padding und Border. Zugegebenerweise eine schon alte Weisheit. Gebe ich also eine width von 200 Pixel an und verwende 20 Pixel Padding, ist die Breite des Elements für den IE 220 Pixel.

Dieses Problem kann mit folgendem CSS gelöst werden, welches die Elementgrößen über alle Browser konstant hält.

html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}

Auch hier wieder nur der relevante Auszug aus dem Original bei Toptal.com. Die untere Anweisung schützt andere HTML-Elemente.

3. Dynamische Height-Elemente

Um die Höhe eines HTML-Elements dynamisch und trotzdem proportional zu seiner Breite und unabhängig vom Inhalt halten zu können, kann ein vertikaler Innenabstand als Ersatz für height dienen. Soll zum Beispiel ein HTML-Element immer die mit CSS definierte Höhe einnehmen, funktioniert die Angabe von height: 100% nicht wie vielleicht gewollt. Die Höhe definiert sich immer am Inhalt und das umgebende Element bleibt damit nicht proportional. Wenn man aber die Höhe auf Null setzt und einen Innenabstand für oben oder unten setzt, gelingt das Vorhaben.

.container {
overflow: hidden;
width: 100%;
height: 0;
padding-bottom: 100%;
background: #eee;
}

Sinvollerweise können hier Prozentwerte genutzt werden, die sich auf das Element beziehen. Damit Inhalte nicht ausbrechen und die Proportionen eingehalten werden können, sollte hier noch overflow: hidden definiert werden. Zu gebrauchen ist so etwas zum Beispiel für die Einbettung von Videos, welche bei Größenänderungen ihre Proportionen behalten sollen. In so einem Fall könnte man die hier verwendete Klasse .container mit position: absolute entsprechend ausrichten und Höhe wie Breite auf 100 Prozent setzen sowie den unteren Innenabstand, also padding-bottom definieren. Wird ein iframe im Container eingebunden, sollte logischerweise die Klasse .container eine relative Positionierung bekommen und was darin ist, eine absolute.

.container {
position: relative;
overflow: hidden;
width: 100%;
height: 0;
padding-bottom: 56.25%; // 9 ÷ 16 x 100%
}
.container > * {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

Hier wurde das padding-bottom aus der Höhe des Seitenverhältnisses geteilt durch seine Breite mal Hundert berechnet. Bei einem Seitenverhältnis von 16:9 würde man 9 durch 16 teilen und mit 100 multiplizieren. Es kommt 56,25 heraus.

Weitere CSS-Tricks

Soweit an dieser Stelle zu den wirklich spannenden und wissenswerten CSS-Weisheiten. Hier waren es drei von acht aus dem Original. Mehr gibt es wie gesagt, bei Toptal und da auch sehr detailliert. Eine Site, die nicht nur zu diesem Thema empfehlenswert für alle Webdesigner ist.

Kommentar schreiben


Sicherheitscode
Aktualisieren