N√ľtzliche CSS-Tricks und Hacks

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:

CSS 4 You – alle CSS-Auszeichnungen mit Beispielen

CSS Formatierer und Optimierer

Kommentieren beendet