Archive for Css
Jens Meiert, Verfechter sauberen Htmls und Accessibility-Enthusiast, hat im Rahmen seiner Arbeit für Google ein Css-Dokument geschrieben, welches auf den schönen Namen QA Style Sheet (auch das erste Mal gehört: Quality Assurance) hört. Das Dokument hebt folgende Html-Elemente farbig hervor:
- Errors:
- deprecated elements like applet, basefont, center, dir, font, isindex, menu, s, spacer, strike, and u;
- layout tables (nested tables, to be precise);
- images (img elements) without any alt attribute;
- anchors with an empty href attribute thus pointing to nothing;
- style attributes.
- Warnings:
- images with an empty alt attribute;
- anchors linking GIF, JPG, or PNG images as well as PDF documents;
- empty p, li, th, td, div, and span elements unless they’re using an id attribute;
- style elements;
- more than one link elements.
Schön bunt == evil!
Vor einiger Zeit gab es bei A List Apart einen ausführlichen Artikel zum Thema Css-Sprites zu lesen. Diese Technik nutzt ein einzelnes Gif, auf dem mehrere oder gar alle benötigten Bilder einer Seite untergebracht sind. Durch unterschiedliche Positionierung des Bildes im Background des jeweiligen Elements via Css können dann die Pseudoklassen wie :hover mit unterschiedlichen Bildern versehen werden. Das ganze hat Dave Shea nun auch in animierter Form mittels jQuery durchgespielt. Nicht unbedingt ein must-have, aber immerhin Menu-Styling State of the Art.
[Edit: 24.09. 2008] Noch etwas schicker sieht es aus, wenn man die Hintergrundbilder grafisch gestaltet und per jQuery animiert.
Auch wenn mich die Angst beschleicht, daß die Sache nicht soooo browserkompatibel ist: Stylische Checkboxen und Radio Buttons beommt man mit CRIR, einem kleinen Konstrukt von Cris Erwin.
In diesem interessanten Artikel über den Absatz in der Webtypografie bin ich auf eine Möglichkeit der Css-Gestaltung gestoßen, die mir bis dahin unbekannt war. “Adjacent sibling selectors” nennt die Spezifikation den Trick, einen Selektor, der unmittelbar auf einen anderen bestimmten Selektor folgt, zu bezeichnen.
h1 + h2 { margin-top: -5px; }
Diese Kombination bewirkt zum Beispiel, daß eine h2-Überschrift, die auf eine h1-Überschrift folgt, 5 Pixel “ranrutscht”. Großartige typografische Möglichkeiten tun sich da auf!
^ Zum Seitenanfang
