Wenn man die Formatierungen, d.h. den CSS-Code, von Websites untersucht, möchte man oft auch den Hoverzustand von Links genauer betrachten. Auch das ist bei den gängigen Browser-Entwicklertools möglich. Die entsprechenden Optionen versteckt sich aber an unterschiedlichen Stellen.
Was mich häufig am Code, den CSS-Präprozessoren erzeugen, gestört hat, ist die große Anzahl an browserspezifischen Präfixen, die man so heute nicht mehr braucht. Nehmen wir einmal an, man ändert nichts an den Standardeinstellungen und benutzt das Compass-Mixin (von Compass vor Version 1) für border-radius:
@import "compass/css3";
.beispiel {
@include border-radius(25px);
}
… so erhält man das folgende Ergebnis:
.beispiel {
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
-o-border-radius: 25px;
border-radius: 25px;
}
Ganz schön viel Code. Dabei gab es nie einen Browser, der -o-border-radius oder -ms-border-radius verstanden hätte, da der Internet Explorer und Opera direkt die Eigenschaft border-radius implementiert haben. Weiterlesen
Wenn man Textinhalte mit transform dreht, führt das in manchen Browsern wie dem Firefox zu einer unschönen Textdarstellung. Zoltan Dulac, bekannt etwa von seinem Transform Translator, der CSS3-Transformationen in Filterangaben für Uralt-IEs umrechnet, hat eine schöne und – das ist besonders schön – sehr einfache Lösung für das Problem der unschönen Schrift (http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/). Es genügt, dem Element zusätzlich einen Tick Perspektive zu geben.
Auch wenn heute kaum noch jemand Tabellen zu Layoutzwecken einsetzt, werden doch noch erstaunlich häufig Tabellen zur Anordnung von Formularelementen benutzt – dabei macht man das besser mit CSS. Die Anordnung einer Beschriftung oberhalb des Formularfelds ist ganz einfach realisiert, für die zweispaltige Darstellung gibt es unterschiedliche Möglichkeiten – eine praktische besteht im Einsatz von display: inline-block.
Im Video zeige ich ein Formular, das dank display: inline-block bei großen Bildschirmen zweispaltig und bei kleinen Viewports mit display: block einspaltig ist.
Das Video ist ein Ausschnitt aus meinem Videotraining für video2brain CSS-Layouts für Fortgeschrittene.
„Sticky Footer“ nennt man eine Fußzeile, die sich immer unten befindet – auch wenn es nur wenig Inhalt gibt. Zur Realisierung eines Sticky Footer gibt es mehrere Lösungen, allerdings verlangen viele Ansätze, dass die Höhe des Fußbereichs bekannt ist. Bei responsiven Webseiten ist das allerdings oft nicht der Fall: Hier kann es ja leicht sein, dass der Fußbereich bei kleinen Viewports höher wird als bei großen Viewports. Eine Lösung dieser Herausforderung geht über die Verwendung von display: table. Wie das genau funktioniert, zeige ich in folgendem Video. Es ist ein Ausschnitt aus meinem Videotraining CSS-Layouts für Fortgeschrittene, das im Mai 2014 bei Video2brain herausgekommen ist.
Gerade ist mein neues gut zweistündiges Videotraining bei video2brain/LinkedIn Learning „CSS-Layouts für Fortgeschrittene“ erschienen. Es behandelt weiterführende CSS-Layouttechniken, die über die Anordnung mit float und position hinausgehen: Mit dabei zwei Techniken aus CSS 2.1: Layouts mit display: inline-block oder display: table, und zwei Techniken aus CSS3: das Multicolumn-Layout-Modul und der attraktive Alleskönner Flexbox.
CSS-Layouts für Fortgeschrittene
CSS-Tabellen, Multicolumn-Layout, Flexbox
Laufzeit: 2 Std. 13 min
Mit display: table und Konsorten kann man bei bis zu vier Elementen die Reihenfolge der Darstellung auf dem Bildschirm beeinflussen.
Nehmen wir einmal folgende Situation: Wir haben vier Elemente, die bei großen Bildschirmen nebeneinander dargestellt werden sollen und bei kleinen Bildschirmen untereinander.
Das Besondere dabei: Die Reihenfolge auf kleinen Screens soll anders sein als die Reihenfolge auf dem großen Screen (Eins, Zwei, Drei, Vier auf großen Screens, Vier, Drei, Zwei, Eins auf kleinen Screens).
Inzwischen gibt es viele Funktionen in CSS, die durch runde Klammern gekennzeichnet sind. Ein Beispiel ist url() zur Einbindung eines Hintergrundbildes:
background-image: url(pfad/zum/bild.png);
Wichtig ist hierbei: Es darf kein Leerzeichen zwischen Funktionsname und runden Klammern stehen. Weiterlesen