Nützliche CSS-Tricks und Hacks
Du programmierst Websites? Und ärgerst dich auch (fast) täglich über die Darstellung deiner mühevollen Arbeit im Internet Explorer 6 und 7? Oder werden deine Styles im Opera, Safari, Firefox oder Google Chrome falsch dargestellt und du weißt mittlerweile nicht mehr weiter? Dann kann ich dir mit den folgenden CSS-Hacks und Tricks vielleicht weiterhelfen – denn ich hab auch täglich mit den selben Browser-Problemen zu kämpfen!
Absoluter Dateipfad
Damit lässt sich eine Datei anhand ihres direkten Dateipfades auswählen.
In dem Beispiel wird ein einzelnes Bild per absoluten Pfad angesprochen:
img[src="images/bild.jpg"] {
width: 50px;
height: 50px
}“! important“-Auszeichnung
Damit lassen sich vom Elternelement festgelegte Styles überschreiben.
In dem Beispiel werden zuerst alle dem “#wrapper” untergeordneten Inhalte links ausgerichtet. In der zweiten Angabe werden allerdings alle sich im “#wrapper” befindlichen divs wieder rechts ausgerichtet:
#wrapper {
text-align: left
}
#wrapper div {
text-align: right !important
}Automatisch alles löschen
Mit dieser Auszeichnung werden automatisch alle sich nach dem jeweiligen angegebenen Objekt befindlichen Inhalte ausgeblendet.
.container:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
}
.container {
display: inline-table
}Das wichtigste: Es handelt sich um CASCADING Style-Sheets
Durch den logischen Aufbau der Styles nach dem Kaskadenprinzip lässt sich viel Arbeit und Speicherplatz sparen. Und natürlich auch der eine oder andere Nerv.
In dem Beispiel werden alle Fett (strong) gedruckten Überschriften (h1) im “#sidebar“-Element angesprochen:
#sidebar h1 strong {
font-weight: 700
}Nur das direkte Kinderelement ansprechen
Hiermit lässt sich NUR das direkt darunter liegende Kind-Element ansprechen!
In dem folgenden Beispiel werden alle sich im “#shell” befindlichen “.download“-Element angesprochen:
#shell>.download {
float: left
}Automatische Höhenanpassung
Mit diesem Hack passt sich die Höhe eines Objektes automatisch an dem jeweiligen Inhalt an. Normalerweise werden Texte, sollten sie die vorgegebene feste Objekthöhe überschreiten, einfach darüber hinaus weitergeschrieben. Problematisch wird das erst, wenn das Objekt über eine Hintergrundfarbe verfügt. Dieser hört nämlich dann auf, wenn auch die vorgegebene Objekthöhe erreicht ist – obwohl der Text darüber hinausläuft. Damit sich nun also das Element dem wirklichen Inhalt komplett anpasst – also auch Hintergrundfarben und Rahmen – ist folgender Kniff von Nöten:
#shell {
min-height: 100px;
height: auto !important;
height: 100px;
background: #ccc
}Auflistung verschiedener Selektoren mit gleichen Eigenschaften
Wenn verschiedene Objekte die gleichen Styles-Eigenschaften haben, können diese einfach per Kommasetzung hintereinander aufgelistet werden.
In dem Beispiel gelten die Eigenschaften für das “#head“-, das “.content” und das “#navigation“-Element sowie für alle “input“-Elemente.
#head,
.content,
input,
#navigation {
width: 100px;
height: 600px
}Attribut-Selektor
Mit diesem Selektor lassen sich Elemente anhand ihres Attributes ansprechen – außer in den verschiedenen Internet Explorer-Versionen.
In dem Beispiel werden alle Links angesprochen, deren target-Attribut “_blank” beinhalten:
a[target=_blank] {
text-decoration: underline
}Alle Internet Explorer bis Version 6
Mit einem vorangestellten “* html” werden die damit ausgezeichnete Elemente NUR vom Internet Explorer bis Version 6 interpretiert:
* html #wrapper {
padding: 0
}Alle Browser ab Internet Explorer 6
Damit ausgezeichnete Elemente werden von allen Browsern ab Internet Explorer 6 registriert, frühere Versionen werden ausgeschlossen:
p.note {
font-style: normal /* Alle Browser */
}
* html p.note {
font-style: italic; /* Internet Explorer < 6 */
f\ont-style: oblique /* Internet Explorer >= 6 */
}Reiner Internet Explorer 7-Selektor
Dadurch ausgezeichnete Elemente werden NUR vom Internet Explorer 7 interpretiert. Ohne dem “:first-child“-Zusatz würde der Selektor auch vom Opera wahrgenommen werden:
*:first-child+html #wrapper {
padding: 0
}Nur Internet Explorer 7- und Opera-Selektor
Mithilfe eines vorangestellten “*+html” lassen sich Eigenschaften für Internet Explorer 7 und Opera ausgeben:
*+html #wrapper {
height: auto
}Nur Internet Explorer, alle Versionen
Kombiniert man die beiden vorangestellten Selektoren “*+html” und “* html“, lassen sich damit alle Versionen des IEs auswählen, alle anderen Browser ignorieren diese Auszeichnung
*+html, * html #wrapper {
outline: 0
}Moderne Browser und Internet Explorer 7
Damit werden nur der IE7 und alle anderen nicht-IE-Browser selektiert:
html>body #wrapper {
margin: -3px 0 0
}Moderne Browser ohne Internet Explorer 7
Damit werden alle modernen Browser mit Ausnahme des IE7 angesprochen:
html>/**/body #wrapper {
background: url(images/pix.png) fixed no-repeat center center #000
}Zusätzliche Infos: Die Maus-Effekte
Die Maus-Effekte lassen sich ab dem Internet Explorer 7 und in allen anderen Browsern statt nur auf den Link-Elementen auch auf jedes andere Objekt anwenden.
Es gibt dabei folgende Anhänge: :link (Normalzustand), :visited (bereits besucht), :active (gerade ausgewählt) – sowie – :focus (während dem Klicken) und :hover (Bei Mouseover) – die letzten beiden lassen sich auf allen Objekten anwenden.
h1 {
color: #000 /* Farbe der Überschrift im Normalzustand */
}
h1:hover,
h1:focus {
color: #900 /* Farbe der Überschrift bei Mouseover und beim Drücken der Maustaste */
}Zu guter Letzt: krasses Anwendungsbeispiel
So schaut das dann im alltäglichen Gebrauch aus (Extrembeispiel, funktioniert aber xD):
*:first-child+html #wrapper #content .shell>h1 strong:hover {
min-height: 100px;
height: auto !important;
height: 100px;
border-top: 1em dashed #900 !important
}Hier werden NUR im Internet Explorer 7 alle sich direkt als erstes Kinderelement im “.shell“-Element befindlichen “h1“-Überschriften bei Mouseover verändert, allerdings auch nur wenn das “.shell“-Element sich im “#content“-Element befindet, und das muss sich wiederum im “#wrapper“-Element befinden.
Genug der Verwirrung? Dann mach dich munter und fröhlich ans weiterprogrammieren und freue dich bereits auf die nächsten Internet Explorer-Probleme! Hier noch zwei nützliche Links, CSS betreffend:
Thread closed