CSS bietet mehr als nur Angaben von Farben und Hintergrundbildern. So gibt es in CSS ein paar Kniffe, die einem helfen seinen Sourcecode noch weiter zu rationalisieren und die Klufft zwischen MS Explorer und Mozilla und Co zu schließen.

Abhängigkeiten und Bedingungen

In einer CSS-Datei ist es möglich Bedingungen aufzustellen. So ist es möglich IDs, Klassen oder Tags nur in einem speziellen Bereich anzusprechen.

Beispiel

#inhalt a {color: #ff0000;}

Erklärung

Für diesen Fall würden alle Links angesprochen, die von einem Tag Element mit der ID Inhalt umschlossen sind. Bei einem CSS basierten Layout wird es immer Container mit verschiedenen IDs geben. Innerhalb dieser Container kann man nun die Tags neu definieren. Dies kann man zum Beispiel nutzen um bei Joomla die linken und rechten Module anders darzustellen.

Beispiel

div.inhalt {}

Erklärung

Für diesen Fall wird die Klasse Inhalt nur auf das Tag Element DIV angewendet.

Eigene Klassen oder IDs für den Explorer:

Oft kommt es vor, dass der Explorer CSS-Angaben anders interpretiert, als alle anderen Browser. Um dieses Problem zu beheben gibt es einen kleinen Trick.

Beispiel

.inhalt {width: 220px;}
html>body .inhalt {width: 200px;}

Erklärung

html>body heißt, dass die Klasse Inhalt nur angewandt wird, wenn das Body-Tag von einem Html-Tag umschlossen wird. Diese Bedingung kann der Explorer nicht interpretieren und übergeht diese. Alle moderneren Browser verstehen diese Angabe und überschreiben die Klasse Inhalt erneut. Da in einer html-Datei das body-Tag immer von einem html-Tag umschlossen wird, gilt die Bedingung grundsätzlich.

Neben diesem kleinen Ausriss gibt es noch einige weitere. Um ein ausführlichere Beschreibung aller Hacks und Bedingugen zu bekommen, kann man am besten mal auf selfhtml.org vorbei schaun:

Neuen Kommentar schreiben