martin-grandrath.de » CSS

-Elemente mit horizontalem Scrollbalken im IE

Martin Grandrath — Wed, 22 Apr 2009 11:37:34 +0000

In meinem aktuellen Template verwende ich für Codeschnipsel

-Elemente mit der Eigenschaft overflow: auto, so dass ein horizontaler Scrollbalken erscheint, wenn der Inhalt breiter als die Box ist. Dies funktioniert (welch Überraschung) nicht im IE6 und nur eingeschränkt im IE7.

Das Problem

IE6 weitet die Box aus und zerstört dadurch das Layout. In meinem Fall rutschte die Seitenleiste rechts unter den eigentlichen Inhalt. IE7 zeigt zwar einen Scrollbalken an, platziert diesen aber innerhalb statt unterhalb der Box, was bei Elementen, die nur eine einzige Zeile beinhalten, dazu führt, dass der Text hinter dem Scrollbalken verschwindet und ein unbedienbarer (weil winziger) vertikaler Balken angezeigt wird.

Die Lösung

Hier ist die Lösung, die ich nach einigem Googlen und Probieren gefunden habe. Dieser Schnipsel sollte in ein separates IE-Stylesheet eingebaut werden, das per conditional comments nur von IE <= 7 geladen wird (bei IE8 tritt das Problem nicht auf).

pre
{
  /* disable vertical scroll bar */
  overflow-y: hidden;

  /* fallback if scripting is disabled */
  padding-bottom: 20px;

  /* add padding if content is wider than the box */
  padding-bottom: expression(this.scrollWidth > this.offsetWidth ? "20px" : "0");

  /* prevent the box from expanding */
  width: 100%;
  }

Falls JavaScript deaktiviert ist, wird das Padding von 20px immer eingefügt. Das führt zwar zu unschönen Abständen, wenn kein Scrollbalken angezeigt wird (d.h. wenn der Inhalt nicht breiter als die Box ist), ist aber auf alle Fälle besser als die ursprüngliche Darstellung.

Linkdump März 2009 – Webdesign

Martin Grandrath — Wed, 01 Apr 2009 13:13:39 +0000

Inspiration

CSS

Resources

Prototyping

Accessibility

Setting up a screen reader test enviroment » iheni :: making the web worldwide

IE6

Verschiedenes

Linkdump Februar 2009

Martin Grandrath — Sun, 01 Mar 2009 19:32:18 +0000

Eine Liste der Seiten, die im Februar in meinen Bookmarks gelandet sind:

WordPress

CSS

Webdesign

Linux

Sonstiges

The Six Dumbest Ideas in Computer Security

Linkdump April 2008

Martin Grandrath — Thu, 01 May 2008 17:32:01 +0000

Eine Liste der Seiten, die im April in meinen Bookmarks gelandet sind:

Webdesign

CSS

Typografie

Diverses

Javascript

Wordpress

Plugins

Tips und Tutorials

Blogging

Symfony

Diverses

Webseitengestaltung mit YAML

Martin Grandrath — Sun, 20 Apr 2008 15:23:19 +0000

YAML ist wie Blueprint oder YUI Grids ein (X)HTML/CSS-Framework, d.h. ein Grundgerüst aus Markup- und CSS-Dateien, das speziell für tabellenfreie mehrspaltige Layouts mit Header und Footer ausgelegt ist. Das Markup besteht dabei hauptsächlich aus

-Elementen mit id-Attributen wie #header, #page, #col1 oder #footer. Der CSS-Code verteilt sich auf eine Reihe von Dateien mit dem Ziel, ein möglichst modulares System zu erhalten, in dem man je nach Bedarf einzelne Komponenten einbindet oder auskommentiert.

In der Vergangenheit gab es einige Debatten über das Für und Wider der Verwendung solcher Frameworks. Dirk Jesse, der Autor von YAML, ist kurz darauf in seinem Blog auf zwei exemplarische Posts, die einige Nachteile derartiger Frameworks aufzählen, eingegangen. Zu seinen Argumenten (denen ich voll und ganz zustimme) möchte ich gerne einen weiteren Punkt ergänzen, auf den Dirk leider nicht eingegangen ist:

CSS Frameworks und semantische Codeauszeichnung stehen im Gegensatz zueinander

Auch wenn ich die Formulierung etwas überzogen finde, kann ich doch das dahinter stehende Arguent nachvollziehen (bilde ich mir zumindest ein). Natürlich ist es aus dem streng puristischen Blickwinkel unmöglich ids wie #col1 oder class-Attribute wie c50l zu verwenden, da diese nicht die semantische Bedeutung ihres Inhaltes transportieren. Dazu ist anzumerken, dass erstens solche Bezeichner (zumindest bei YAML) eher die Ausnahme sind und zweitens die Semantik von Inhalten in erster Linie über die verwendeten Tags ausgedrückt wird (also

,
oder ) und dazu macht YAML keinerlei Einschränkungen.

In diesem Sinne kann ich nur sagen, dass YAML ein hervorragendes Werkzeug ist, um in relativ kurzer Zeit stabile und browserübergreifend weitgehend gleich aussehende Layouts zu entwickeln. An dieser Stelle ganz herzlichen Dank an Dirk für seine Arbeit und auch nicht zuletzt für seine hervorragende Dokumentation, die den Einstieg in YAML sehr einfach macht!

CSS-Dateien optimieren

Martin Grandrath — Fri, 18 Apr 2008 17:43:30 +0000

Online-Optimierer für CSS (und andere Formate) gibt es zuhauf im Netz. Ich war aber auf der Suche nach einem kleinen (Perl-)Skript, das diese Aufgabe auf meinem Rechner erledigt und war erstaunt, dass es in dieser Richtung recht wenig zu geben scheint. Fündig geworden bin ich auf thinkvitamin. Hier ist meine angepasste Variante:

#!/usr/bin/perl use strict; my $data = ''; open F, $ARGV[0] or die "Can't open source file: $!"; $data .= $_ while ; close F; $data =~ s!/\*(.*?)\*/!!sg; # remove comments $data =~ s!\r?\n!!g; # remove newlines $data =~ s!\s+! !g; # collapse space $data =~ s! ?([{}:;]) ?!$1!g; # remove more dispensable space print $data;

Dieses Script macht nichts weiter, als alle Kommentare, Zeilenumbrüche und sonstigen unnötigen Zeichen aus einer CSS-Datei zu entfernen und hat das CSS-Volumen dieser Seite immerhin von 37kB auf 32kB geschrumpft.