Mit Hilfe dieser wirklich nützlichen Firefox-Erweiterung lassen sich nicht verwendete CSS-Selektoren aufspüren. Man surft einfach alle Seiten der Website an und lässt Dust-Me Selectors drüber laufen. Im Hintergrund werden alle Selektoren überprüft und übrig bleiben die nicht verwendeten. Voilá! Lohnt sich allein schon wegen der hübschen Staubwedelanimation in der Statusleiste.
Andy Budd sinniert über die eventuelle Notwendigkeit eines Zwischenschritts auf dem Weg zu CSS3. Ähnlich der Entwicklungen im Bereich HTML/HTML5 könnte eine pragmatische und auf die momentan wichtigen Techniken zugeschnittene Lösung im Bereich CSS besser sein als eine auf Jahre in die Zukunft ausgerichtete Version 3.0, von der nicht absehbar ist, wann sie das Licht der Welt erblicken wird.
The W3C are so concerned with shaping the future, I’m worried that they may have forgotten the present. Forgotten the needs of the average web designer and developer.
Her mit nativen abgerundeten Ecken und multiplen Hintergrundbildern!
präsentiert von Jens Meiert.
oder
Über den Einsatz von negativen Margin-Werten kann man streiten. Ich finde es jedenalls nicht verwerflich sondern sogar sehr praktisch, wenn man z.B. einzelne Elemente aus der umschließenden Layoutbox herausragen lassen möchte. Auf meiner neuen Seite habe ich an diversen Stellen negative Margin-Angaben benutzt, z.B. für die Bilder der Arbeitsproben. Die grauen Ränder sollten aus dem Satzspiegel herausragen, so dass die eigentliche Bildkante bündig am Text ausgerichtet ist. Kein Problem: Einfach den Bildern links einen negativen Margin-Wert von der Stärke des Rands zuweisen, fertig.
img {
border: 6px solid #E5E6E9;
margin-left: -6px;
}
In Safari sieht das auch ganz prima aus. Leider aber nicht in unserem Lieblingsbrowser, dem Internet Explorer. Dort wird alles, was nach links übersteht, einfach abgeschnitten:
Erster Lösungsansatz bei einem solchen Problem: Man muss dem überstehenden Element “Layout” geben. In diesem speziellen Fall ist dies allerdings bereits der Fall, da es sich um ein img Element handelt. Will man zum Beispiel einem div oder einem h1 Element “Layout” geben, ist die einfachste Lösung, eine Breitenangabe (width) für das Element festzulegen. (Weitere Möglichkeiten findet ihr hier). Damit das ganze auch im IE6 funktioniert ist zusätzlich noch die Angabe position:relative nötig. In meinem Fall also:
img {
border: 6px solid #E5E6E9;
margin-left: -6px;
position: relative;
}
Für ein Element, dass nicht von Hause aus “Layout” hat:
#herausragend {
margin-left: -10px;
width: 100px;
position: relative;
}
oder auch
Einen kleinen CSS-Trick möchte ich gerne an euch weitergeben. Bei meinem Relaunch habe ich Bilder als Bullet-Points benutzt, was man ja sehr schön per CSS machen kann:
ul {
list-style-image: url(bullet-galore.gif);
}
Leider hatte ich bei dieser Lösung das Problem, dass a) das Bild in manchen Browsern vertikal zum Text stets etwas nach oben versetzt dargestellt wurde und b) die Höhe des Bildes die Höhe der Listenpunkte beeinflusst hat.
Zu einer schicken Lösung bin ich dank Dan Cederholms Buch Web Standards Solutions gekommen, der für Bilder als Bullet-Points einfach das background-Attribut benutzt. So kann man das Bild genau ausrichten und hat keines der beiden oben beschriebenen Probleme:
ul {
list-style: none;
}
li {
background: url(bullet-galore.gif) 0 50% no-repeat;
padding-left: 15px;
}
Die 50% Angabe funktioniert allerdings nur bei einzeiligen Listenpunkten. Wenn der Text umbricht, sollte man auf eine Pixel- oder em-Angabe umstellen.
Es war etwas ruhig hier in letzter Zeit und das hat auch einen Grund: Ich habe in den letzten Wochen meine Portfolio-Seite komplett überarbeitet. Und weil es sich zeitlich anbot, hab ich auch gleich noch beim heute statt findenden CSS Reboot Spring 2006 mitgemacht. Diesmal sind gut 1400 Rebooter dabei, eine Riesensache also.
Und noch eine frohe Kunde: minimalweb is running on Rails! Ist für eine reine Portfolio-Seite vielleicht etwas übertrieben, aber es war eine gute Gelegenheit, um meine Ruby-on-Rails-Kenntnisse zu vertiefen. Und eine enorme Arbeitserleichterung war es obendrein. In Windeseile hatte ich eine komplette Administrationsumgebung, inklusive Datenbank und Textile-Support aufgebaut.
Bei der Umsetzung bin ich auch im HTML/CSS-Bereich auf ein paar interessante Webdesigner-Themen gestoßen, aber dazu demnächst mehr. Sowas sollte man nicht um 3:14 Uhr zusammenhacken.
Am 1. Mai ist es wieder soweit
Ihr kennt sicher alle die Möglichkeit über das CSS-Attribut AlphaImageLoader im IE transparente PNGs anzeigen zu lassen. Prima. Zu diesem Thema ist mir was interessantes aufgefallen, nachdem ich zuvor fast eine halbe Stunde einen Fehler gesucht habe, der gar nicht existiert hat. Bei einem aktuellen Projekt von mir existieren verschiedene Verzeichnistiefen in der URL, so in der Art: ”www.seite.de/”, “www.seite.de/portfolio/”, “www.seite.de/portfolio/kategorie/” und so weiter. Auf jeder Seite ist irgendwo das Firmenlogo positioniert, dass über eine mit Conditional Comments eingebunde separate Stylesheet-Datei definiert wird. Das sah zunächst ungefähr so aus:
#logo {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../img/logo.png’, sizingMethod=’crop’);
}
Auf der Startseite hat das auch wunderbar funktioniert, nur auf den Folgeseiten wurde das Bild nicht angezeigt. Nach langem Suchen dachte ich, es könnte vielleicht an der Verzeichnistiefe der Seite liegen. Und genau so war es.
Komischerweise nimmt der Befehl AlphaImageLoader die HTML-Seite als Ausgangsbasis für die Pfade und nicht wie gewöhnlich die Stylesheet-Datei in der der Befehl steht. Wieder einmal unverständliche Logik aus dem Hause Microsoft.
Heute ist der Stichtag für über 900 Webdesigner, die sich an diesem gemeinsamen CSS-Relaunch Event beteiligt haben. Ich persönlich finde das ganze ziemlich übertrieben, da es dieses Jahr schon zum 2. Mal statt findet. Das nimmt der Sache irgendwie die Wichtigkeit. Die Idee an sich ist sicherlich ‘ne tolle Sache, aber ein CSS Reboot pro Jahr reicht meines Erachtens nach vollkommen aus. Auf der Website zum Event kann man ab sofort alle Teilnehmer anschauen und bewerten.
Stylesheet Prioritäten erklärt mit Hilfe von Star Wars Charakteren
Hab mich eben mal ein wenig durch die Nominierungen geklickt (sich alle anzuschauen würde sicher ‘nen Tag dauern). Sind wirklich ein paar sehr ansprechende Seiten dabei. Nicht wie so oft bei vielen anderen Web-Awards hat man hier das Gefühl, dass die wirklich wichtigen und innovativen Seiten berücksichtigt wurden (flickr, google, creativecommons, …). Obwohl für meinen Geschmack da immer noch viel zu viel Flash-Alarm angesagt ist. Warum nicht stattdessen mal Seiten wie den panic shop auszeichnen?
Auf jeden Fall ansehen: wordcount.org (Arts), wordsatplay.com (Best Welcome Site), Zelda: The Minish Cap (Best use of Sound/Music).
Ziemlich cool finde ich auch die Nominierung von Boing Boing und Jon Hicks in der Kategorie Blogs und natürlich seinfeld.com in der Kategorie Television.
CSS-Design Portal wurde redesigned
Ich habe kürzlich im Rahmen eines Jobs ein paar Tests bezüglich des druckbaren Bereichs von HTML-Seiten gemacht. Dabei bin ich von einer eins zu eins Ausgabe ausgegangen, also ohne die Inhalte vorher über spezielle Druck-Stylesheets zu verändern. Um nun rauszufinden, welcher Bereich einer Internetseite denn überhaupt auf eine DIN-A4 Seite passt, habe ich einfach mal ein Testdokument erstellt, in HTML eingebettet und anschließend auf allen möglichen Browsern ausgedruckt. Die Ergebnisse sehen wie folgt aus:
(Und wieder einmal belegt das, wie steinzeitlich der IE doch ist.)
Mein persönliches Portfolio wurde soeben auf CSS Beauty gekürt. CSS Beauty zeigt ausschließlich CSS-basierte Seiten, die zudem noch schick aussehen und ist eine der bekanntesten Informations- und Inspirationsquellen für die “CSS Design Community”. Habe die Ehre!