Volle Power der CSS3 Selektoren

Die Webwelt geht mit HTML5 und CSS3 eine sehr interessante Richtung, die uns Webdesignern und Webentwicklern die Arbeit ungemein erleichtern wird. Vor allem die ausgeklügelten Selektoren, die uns durch CSS3 zur Verfügung gestellt werden, bieten ein riesen Potential unser Markup zu optimieren. Wesentlich weniger Klassen müssen verteilt werden und Elemente können je nach Ihren Eigentschaften angesprochen werden. Die Bandbreite an Möglichkeiten ist enorm.

Markierten Text mittels CSS3 gestalten

CSS3 bietet die Möglichkeit mittels Pseudo-Elementen markierten Text zu gestalten:
::selection {
background:#000;
color:#fff;
}
Safari (ab 3.1), Opera (ab 9.5) und Chrome (ab 2.0) verstehen dies bereits. Mozilla kann man dazu bewegen dies auch zu tun indem man den Prefix -moz- voransetzt:
::-moz-selection {
background:#000;
color:#fff;
}

Google Maps iframe ohne Adressfeld

Google Maps bietet die Möglichkeit Karten mittels iframe in die eigene Seite einzubinden. Die Größe der Karte lässt sich schnell anpassen. Eine Sache ist jedoch oft störend. Die Adresse wird standardmäßig in einem Overlay über die Karte gelegt. Bei eigenen Formaten, vor allem bei kleinen oder extremen Breitformaten wird das Adressfeld abgeschnitten. Um das Adressfeld zu deaktivieren muss lediglich die Variable iwloc angepasst werden. Diese kann entweder ganz oder nur der Wert gelöscht werden:

CSS-Sprites und -webkit-transition

CSS-Sprites sind eine Möglichkeit mittels CSS Grafiken für eine Website oder einzelne Elemente in einer einzelnen Grafik zu steuern. So können die verschiedenen Status mittels background-position positioniert werden. Dies hat den Vorteil, dass Javascript nur eine Anfrage an den Server sendet und so die Geschwindigkeit maximiert und (die Serverlast minimiert) wird. Dies ist vor allem für große Websites mit großen Traficaufkommen von Bedeutung.

Zusätzliche CSS Dateien in Drupal einbinden

Um in Drupal 6 weitere CSS-Dateien über das Theme einzubinden, muss lediglich die [themename].info des entsprechenden Themes angepasst werden.

[themename].info

stylesheets[all][] = reset.css
stylesheets[all][] = style.css

Komplettes Beispiel

name = example-theme
description = Test Theme for Drupal 6
core = 6.x
engine = phptemplate

stylesheets[all][] = reset.css
stylesheets[all][] = style.css

Seiten