Code • Mario Fink • Webentwicklung, Webdesign, Usability

jQuery 1.4.2 Visual Cheat Sheet

Absolute Empfehlung für jeden jQuery Ninja: das jQuery Visual Cheat Sheet von Antonio Lupetti. Weiterlesen »

Code

Veröffentlicht am 6. Juli 2010

Besserer CSS font-stack in nur 2 Sekunden

Auf vielen Seiten, die serifenlose Schriften verwenden, sieht man folgende, ungeschickte, CSS font-family Eigenschaft:

font-family:Arial,Helvetica,sans-serif;

Selbst auf “großen” Seiten (bspw. Posterous) ist dieser Fehler anzutreffen.

Fehler deshalb, weil auf diese Weise, nur solche Benutzer in den Genuss der viel harmonischeren Helvetica kommen, auf deren System kein Arial installiert ist. In der Praxis wird sich diese Nutzergruppe auf ein absolutes Minimum beschränken, denn sowohl auf Windows, wie auch auf Linux Systemen, ist keine Helvetica vorhanden. Bleiben noch die Mac-User… Nur ist unter MacOS auch die Arial installiert, und “gewinnt” damit bei obiger CSS Deklaration.

Dabei ist die Lösung doch so einfach:

font-family:Helvetica, Arial, sans-serif;

Und schon können zumindest die Mac-User schicke Schweizer Buchstaben bestaunen.

[Bildquelle]

Code

Veröffentlicht am 23. Juni 2010

Interaktive Infografik: HTML5 & CSS3 Unterstützung

Einen schnellen Überblick über den aktuellen Stand der HTML5 und CSS3 Browserunterstützung bekommt man mit dieser interaktiven Infografik. Schön anzuschauen und nützlich zugleich.

Kleines Osterei: Mal am Scrollrad der Maus drehen…

(via Ajaxian)

Code

Veröffentlicht am 20. April 2010

CSS3 box-shadow für Internet Explorer 6-8

So funktioniert CSS3 Schlagschatten(box-shadow) auch im Internet Explorer. Sogar ab Version 6!

Eine der interessantesten Neuerungen, die CSS3 für Webdesigner mit sich bringt, ist die Möglichkeit beliebigen Elementen einen Schlagschatten zu verpassen. Musste man früher mit Grafiken und HTML-Handständen einen hübschen Schatten basteln, so kann man das nun bequem per CSS erledigen:

.shadow {
    -moz-box-shadow: 0 0 5px #222; /*Mozilla-basierte Browser (z.B. Firefox)*/
    -webkit-box-shadow: 0 0 5px #222; /*WebKit-basierte Browser (z.B. Safari/Chrome)*/
    box-shadow: 0 0 5px #222; /*CSS3 Standard*/
}

Wie man sieht, muss man für die verschiedenen Browser noch spezielle Regeln verwenden (sog. Vendor-Prefixes). Diese werden aber wohl in nicht all zu ferner Zukunft überflüssig werden. Daher macht es Sinn, die Definition ohne Prefix ans Ende zu stellen–somit erhält sie die höchste Priorität.

Der oben stehende Code funktioniert in allen modernen Browsern:

Safari 3+
Firefox 3.5+
Opera 10.5+

Fehlt noch… der Internet Explorer, der selbst in der aktuellen Version 8 gerade mal so CSS2 auf die Reihe bekommt.

Was zuerst nach einem hoffnunglosen Unterfangen aussieht, kann recht praktikabel gelöst werden, durch den Einsatz des Microsoft Shadow Filters:

.shadow {
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=0, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=45, Strength=2)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=90, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=135, Strength=2)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=180, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=225, Strength=2)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=260, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=305, Strength=2);
    -moz-box-shadow: 0 0 5px #222; /*Mozilla-basierte Browser (z.B. Firefox)*/
    -webkit-box-shadow: 0 0 5px #222; /*WebKit-basierte Browser (z.B. Safari/Chrome)*/
    box-shadow: 0 0 5px #222; /*CSS3 Standard*/
}

Nicht sonderlich elegant, aber auf diese Weise kann man die CSS3 box-shadow Eigenschaft annähernd identisch im IE emulieren–ohne überflüssiges Markup und Grafiken. Die zusätzliche Eigenschaft »zoom« ist notwendig, um diversen Darstellungsfehler vorzubeugen.

Und so sieht das dann aus: