webdirections hat über 1500 Webentwickler bezüglich ihrer Arbeitsweise befragt und nun die Ergebnisse hier unter einer CreativeCommons Lizenz veröffentlicht.
Besonders interessant: jQuery ist mit knappen 80% der absolute Platzhirsch im Bereich der JavaScript Bibliotheken.
Das nur 2% der befragten Entwickler den Internet Explorer als Browser ihrer Wahl angegeben haben, ist hingegen wenig überraschend.
Die kompletten Umfrageergebnisse inkl. eines Downloads der Rohdaten im CSV Format gibt’s hier:
The State of Web Development 2010 [webdirections]
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…
Eine perfekte Spielwiese für HTML und CSS bietet CSSDesk. Einfach direkt im Browser das HTML-Markup und die dazu gehörigen CSS Regeln eingeben und sofort das Resultat begutachten.
(via)
Von Interactive Logic kommt diese nützliche Vorlage zum Erstellen von Wireframes für Apple’s iPhone bzw. weitere mobile Geräte mit vergleichbarem Formfaktor:
iPhone Wireframe Vorlage als PDF oder im Visio Format
Übersichtliche Präsentation von Serviceplan über die Nutzung von sozialen Netzwerken in Deutschland. Obwohl der weltweite Marktführer »Facebook« in dieser Statistik fehlt, ist es dennoch interessant zu sehen, welch große Unterschiede doch zwischen den einzelnen Bundesländern bestehen. Weiterlesen »
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:
 CSS3 box-shadow im Firefox 3.6 |
 Box-shadow im Internet Explorer |
Erfolgreich getestet habe ich diese Methode im Internet Explorer 6, 7 und 8.
Weiterführende Links zum Thema »CSS3 box-shadow«:
- »box-shadow« Eigenschaft im W3C Spec
- Box-shadow, one of CSS3’s best new features
- Box Shadows – CSS3 Spielwiese/Codegenerator
Foto: http://www.flickr.com/photos/ranopamas/ / CC BY-ND 2.0
