Was kaum jemand weiß: Inline-CSS und Content-Style-Type

23. August 2008

Wenn man externe CSS-Stylesheets einbindet oder CSS innerhalb eines style-Elementes definiert, ist die Angabe der verwendeten Stylingsprache nowendig. Im Falle von CSS ist das z.B. text/css:

<link href="mystyle.css" rel="stylesheet" type="text/css" />

<style type="text/css">
   h1 { text-align: center }
</style>

Was kaum jemand weiß: Diese Angabe ist auch für Inline-CSS nötig. Also für CSS-Angaben, die man (X)HTML-Elementen über das style-Attribut zuweist. HTML 4 und damit auch XHTML 1 definieren zwar text/css als Default, wenn keine andere Stylesprache angegeben wird, führen diese Definition aber nur als Notfall ein. Die explizite Angabe der Stylesprache ist dennoch vorgeschrieben.

Mann kann sie entweder in einem Content-Style-Type-HTTP-Header oder im head des Dokumentes mit einem meta-Element angeben:

<meta http-equiv="Content-Style-Type" content="text/css" />

4 Kommentare

CSS – Container mit abgerundeten Ecken

17. August 2008

Solange CSS3 noch nicht freigegeben und verbreitet ist, kann man Container mit abgerundeten Ecken nur mit hässlicher Frickelarbeit realisieren – zumindest wenn man sie in allen weit verbreiteten Browsern angezeigt haben will. CSS3 wird eine eigene Eigenschaft border-radius dafür besitzen, die Safari und Firefox schon jetzt als vendor-specific properties anbieten:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;

Obwohl diese Angaben kein wirklich valides CSS 2.1 sind, bewegt man sich wenigstens im Rahmen der CSS-2.1-Spezifikation des W3C. Offensichtlicher Nachteil ist allerdings, dass die Angaben nur in Mozilla- und Webkit-basierenden Browsern funktionieren. Wem das – so wie mir – nichts ausmacht, hat so die einfachste Lösung.

Für alle anderen Browsern hat jeder seine „eigene“ Methode, die abgerundeten Ecken mit eingefügten Bildern zu realisieren. Mir gefallen alle diese Lösungen nicht besonders. Man nimmt mit ihnen semantisch nutzloses HTML in Kauf und vermischt nebenbei Inhalt und Präsentation, obwohl das Paradigma hinter HTML und CSS das eigentlich vermeiden will.

Die beste aller dieser Lösungen ist meiner Meinung nach diese:

.roundedCorners
{
    position: relative;
    padding: 10px;
}

.topLeftCorner
{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 10px;
    width: 10px;
    background: url(topLeftCorner.png);
}

<div class="roundedCorners">
    <span class="topLeftCorner"></span>
    <span class="topRightCorner"></span>
    <span class="bottomLeftCorner"></span>
    <span class="bottomRightCorner"></span>
</div>

Analog zu .topLeftCorner kann man alle weiteren Ecken mit top, bottom, left und right positionieren.

Die <span>-Elemente verursachen die geringste semantische Verwirrung, wie leere Bilder oder leere Blöcke, die bei bestimmten Browserkonfigurationen sichtbar werden könnten.

Aber elegant ist es trotzdem nicht.

1 Kommentar

style.css kaputt

12. August 2008

Ich weiß nicht genau, wie ich es geschafft habe, aber die style.css meines Blogs ist eine leere 0-Byte-Datei. Vielleicht eine Strafe dafür, dass ich schlaftrunken um vier Uhr heute morgen unbedingt Änderungen vornehmen wollte (was nur ein Albi-Motiv war, um ein neues TextMate-Farbschema einzustellen). Was auch immer dabei schief gegangen ist.

Wenigstens habe ich zu Hause ein Backup.

Keine Kommentare