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…)
Ordentlich formulierte Links wie <a href=”http:// …”>Tipps und Tricks</a> zeigen im Druck nur den Text – so dass die ausgedruckte Seite das Ziel des Links nicht verrät.
Mit der immer noch exotischen Eigenschaft content kann das Stylesheet für den Druck die Lücke schliessen:
a:after {
content: " (" attr(href) ") ";
color: gray; font-size: smaller;
}
Die Regel setzt den Inhalt des href-Attributs in runde Klammern hinter den Text des Links und hebt den so generierten Inhalt durch eine kleinere graue Schrift vom Text ab.
Schöner Drucken (http://www.mediaevent.de/?p=25)
Das funktioniert in Firefox, Opera und Safari, nicht aber in Internet Explorer, der mit der Eigenschaft content auch in Version 7 immer noch nichts anfangen kann. Da IE die Eigenschaft ignoriert, geschieht aber auch nichts Schlimmes …
- Lesen oder nicht lesen? Erst Bilder schauen und Bildunterschrift lesen.
Artikel in Zeitschriften leben von ihren Bildern.
Nein, eigentlich von den Bildunterschriften. Wenn wir uns beim ersten Durchblättern eines Magazins entscheiden wollen, ob wir einen Artikel lesen oder nicht, kommen die Bildunterschriften zum Zuge.
Während die Tabelle von Kopf bis Fuß mit allem erdenklichen Schnickschnack ausgestattet wurde und Tabellen mit einer Überschrift und einer Zusammenfassung aufwarten, sind dem W3C Bildunterschriften für das img-Tag nie in den Sinn gekommen.
(weiterlesen…)
Mit table-layout ziehen weitere brauchbare Stile für Tabellen in das Stylesheet ein: border-collapse:collapse dürfte einer der wertvollsten sein.
Mit border-collapse:collapse erhält die Tabelle ein elegantes und zeitgemäßes Aussehen und nimmt Abschied von doppelten Tabellengrenzen der HTML-Steinzeit oder komplizierten Vereinbarungen zwischen Benutzer, Stylesheet und Browserhacks.
(weiterlesen…)
