Stil mit {stil}

CSS gibt uns über das media-Attribut im link- und style-Tag eine einfache Methode, Stylesheets für spezielle Geräte anzugeben.

Alle Mainstream-Browser unterstützen media=”screen”, die meisten erkennen media=”print”. Opera unterstützt media=”speech”, wenn die Spracherweiterung installiert ist. Für Handys und andere kleine Geräte ist media=”handheld” gedacht – hört sich gut an, oder?
(weiterlesen…)

Seitdem Safari, Opera und Firefox wahrhaft harmonisch die @font-face-Regel unterstützen, können ladbare Schriften für Webseiten mit ausreichender Sicherheit (… na ja, Chrome hält sich noch raus …) eingesetzt werden.

Microsoft bietet bereits seit IE4 das Einbinden von Schriften für Webseiten im EOT-Format (Embedded OpenType – eine kompakte Form von OpenType-Schriften, die von Microsoft für Webseiten entwickelt wurde), das aber nur von IE unterstützt wird.

(weiterlesen…)

Die schlichte CSS-Eigenschaft border wird zum Leidwesen vieler Webdesigner erst in CSS3 um die Eigenschaft border-radius erweitert. Bis dahin müssen wir mit kleinen Bildchen die Ecken im Layout einer Webseite per Handarbeit rund biegen. Immerhin: Beim fieldset darf abgerundet werden.

Firefox und Safari haben die Eigenschaften border-radius für abgerundete Kofferecken – rounded corners – ja bereits im Untergrund implementiert. Allerdings braucht die Eigenschaft noch einen Präfix, damit die runden Ecken mit CSS ans Tageslicht kommen:
(weiterlesen…)

Effizient und schlank: Formulare mit label-Tag und display: inline-block

display: none und display: block sind beliebte CSS-Eigenschaften … besonders für die allgegenwärtigen kleinen Animationen.

display: inline-block hingegen sehen wir eher selten in freier Wildbahn. Dabei ist es ein klasse Begleiter für das label-Tag in Formularen.

Die Gestaltung von Formularen mit CSS weist wenig Spielraum auf: Tabellen, Tabellen, Tabellen oder wahnsinnige CSS-Konstruktionen. Also kramen wir das label-Tag aus der Mottenkiste, tragen zur Barrierefreiheit bei und reduzieren mit der exotischen CSS-Eigenschaft inline-block auch gleich noch die Flut der Tags und CSS-Eigenschaften auf ein Minimum.
(weiterlesen…)