Lesenswertes über CSS

Zum einen 7 Principles Of Clean and Optimized CSS Code, zum anderen (schon etwas älter) Smart CSS ain’t always Sexy CSS.

Veröffentlicht am 19.08.2008 um 06:37 Uhr
Keine Kommentare

CSS ausmisten mit Dust-Me Selectors

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.

Veröffentlicht am 27.11.2007 um 18:15 Uhr
1 Kommentar

Zeit für CSS2.2

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!

Veröffentlicht am 09.05.2007 um 05:56 Uhr
1 Kommentar

Die höchste Webseite der Welt

präsentiert von Jens Meiert.

Veröffentlicht am 24.10.2006 um 19:10 Uhr
Keine Kommentare

Negative Margin-Werte

oder

Lessons learnt from rebooting, Part 2:

Ü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;
}

Safari rendert richtig

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:

Der IE rendert falsch

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;
}

Zum Weiterlesen:

Veröffentlicht am 09.05.2006 um 07:30 Uhr
2 Kommentare

Bilder als Aufzählungspunkte

oder auch

Lessons learnt from rebooting, Part 1:

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.

Verrutschte Aufzählungszeichen

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;
}

Richtig positionierte Aufzählungszeichen

Die 50% Angabe funktioniert allerdings nur bei einzeiligen Listenpunkten. Wenn der Text umbricht, sollte man auf eine Pixel- oder em-Angabe umstellen.

Veröffentlicht am 02.05.2006 um 21:36 Uhr
Keine Kommentare

minimalweb.de rebooted!

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.

Veröffentlicht am 01.05.2006 um 01:12 Uhr
8 Kommentare

CSS Reboot Spring 2006

Am 1. Mai ist es wieder soweit

Veröffentlicht am 16.02.2006 um 09:13 Uhr
Keine Kommentare

AlphaImageLoader und relative Pfadangaben

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.

Veröffentlicht am 01.01.2006 um 18:56 Uhr
3 Kommentare

CSS Reboot Fall 2005

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.

Veröffentlicht am 01.11.2005 um 12:34 Uhr
Keine Kommentare