Sideways Headers

Christian Heilmann hatte neulich ein interessantes CSS-Problem. Die Idee war, Überschriften um 90 Grad zu drehen und sie links neben einem Inhaltsblock auszurichten, anstatt oben.

Einfach, oder?

Sollte ziemlich einfach sein, oder? Absolut positioniere die Überschrift in der oberen linken Ecke (damit sie keinen vertikalen Platz einnimmt) und drehe sie dann von ihrer oberen linken Ecke um 90 Grad mit CSS-Transforms. Ja... das ist cool, aber hier ist das Problem: viel mehr Browser unterstützen absolute Positionierung als Transforms. Das ist problematisch, denn in den Fällen, in denen es um diese Browser geht, werden die Überschriften dann auf dem Inhalt liegen und ihn verdecken.

So würde ich es machen: Feature Detection

Ich denke, der beste Weg, damit umzugehen, ist die Feature Detection mit Modernizr. Erstelle einen schnellen Custom Build, der nach Transforms testet, lade ihn ganz oben auf der Seite, und wende dann nur die absolute Positionierung und die Transforms (und andere Tweaks) an, wenn du dich in einem Browser befindest, der damit umgehen kann.

Und somit...

Das vollständige CSS

aside {
    position: relative;  
}

aside h3 {
    background: #369;
    color: #fff;
    padding: 5px 10px;
    margin: 0 0 10px 0;
}

/* Class name via Modernizr */
.csstransforms aside {
    border-left: 34px solid #369;
    
    /* Make a little room */
    padding-left: 10px;
}
.csstransforms aside h3 {

    /* Abs positioning makes it not take up vert space */ 
    position: absolute;
    top: 0;
    left: 0;
    
    /* Border is the new background */
    background: none;
    
    /* Rotate from top left corner (not default) */
    -webkit-transform-origin: 0 0;
    -moz-transform-origin:    0 0;
    -ms-transform-origin:     0 0;
    -o-transform-origin:      0 0;
    
    -webkit-transform: rotate(90deg); 
    -moz-transform:    rotate(90deg); 
    -ms-transform:     rotate(90deg); 
    -o-transform:      rotate(90deg); 
}

Demo ansehen   Dateien herunterladen

Die Schwäche, die bei dieser Technik übrig bleibt, ist, dass wenn die Überschrift länger als der verfügbare Platz ist, sie nicht die Höhe des Asides ausgleicht, um das zu kompensieren. Es gibt wirklich keine Möglichkeit, das nur mit CSS zu tun (man kann nicht die Höhe von etwas so einstellen, dass sie der Breite von etwas entspricht, im Grunde). Fürs Protokoll, man könnte JavaScript dafür verwenden.

Können wir das ohne Modernizr machen?

Christian et al. wollten Modernizr nicht verwenden (aus Gründen, die ich mir beim besten Willen nicht erklären kann ;). Lennart Schoors kam in den Kommentaren seines Posts auf diese Technik, bei der die Absatz-Elemente *auch* transformiert (verschoben) wurden. Standardmäßig gibt es eine Menge leerer Platz oben im Aside, und die Transformation verschiebt sie nach oben, um diesen Platz zu füllen. Ohne Transforms bleibt die Lücke bestehen und schafft Platz für die absolut positionierte Überschrift. Ziemlich schlau!

Der einzige Nachteil, den ich sehen kann, ist, dass er sich speziell auf Absatz-Elemente bezieht. In einer realen Umgebung kann man sich nicht darauf verlassen, daher schreibt man entweder einen Selektor, der alle möglichen zu verschiebenden Elemente abdeckt, oder man verwendet einen nicht-semantischen Wrapper. Außerdem unterliegt dies der gleichen Schwäche, wie ich sie oben in Bezug auf die Länge der Überschriften beschrieben habe.

Verbesserungen willkommen!