Archive for Css
Wieder was gelernt… aber mit einigen Umwegen. Die Aufgabe: bestimmte Navigationselemente einer Seite sollen einen custom Cursor erhalten. Die 3 gesammelten Erkenntnisse hierzu:
Cursor für IE, Firefox und andere
Alles nicht so einfach, wie man sich so oft wünschen würde, schreibt Adrian Ber:
cursor: url(cursor.cur),url(cursor/cursor.cur),default;
So everytime you want to define a crossbrowser CSS cursor you should define it as a list containing the url relative to the source element, the url relative to the style sheet and the default value.
Wie erstelle ich .cur Files?
Nach etwas Herumsuchen fand ich Artcursors (Windows). Mehr brauchte ich für den Moment nicht.
Warum zickt der IE immer noch?
In Gecko (Firefox) the limit of the cursor size is 128×128px. Larger cursor images are ignored. However, you should limit yourself to the size 32×32 for maximum compatibility with operating systems and platforms.
Das war denn auch des Rätsels Lösung: mein Cursor war größer als 32x32px.
Danke für die Info, Mozilla!
Auch im Rahmen dieses Projektes habe ich mich gefragt, wie man eine Fehlermeldung bauen kann, die sowohl erscheint, wenn der Benutzer Javascript ausgeschaltet hat, als auch, wenn sein Browser kein Css kennt, als auch, wenn beides der Fall ist. Meine Lösung mit jQuery setzt sich aus drei Teilen zusammen.
Hinter dem Body-Tag:
<div id="nocssnojs">
Der dirty Hinweis, daß gerade nix geht...
</div><script type="text/javascript">
$('div#nocssnojs').addClass('nocssnojs');
</script>Und irgendwo im Stylesheet:
.nocssnojs { display: none; }
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