Apr 27

Überblick: CSS-Hacks

Tag: AllgemeinesPatrick @ 8:19 pm

An dieser Stelle möchte ich heute die geläufigste CSS-Hacks präsentieren, die man ab und an mal braucht – vor allem wenns um Microsofts Internet Explorer geht. Diese sind danach geordnet, welche Browser sie ansprechen.

CSS-Hacks nennt Selektoren, die nur von bestimmten Browsern interpretiert und angewandt werden. So kann man Unterschiede in der Darstellung wie beispielweise beim Box-Modell des Internet Explorers durch spezifische Angaben korrigieren.

Selector-Hacks:

IE 6 (und darunter) [Star-HTML-Hack]

* html #uno  { … }

IE 7 (und darunter) [Star-Plus-HTML-Hack]

*:first-child+html #dos { … }

IE 7 und moderne Browsers [Kind-Selektor]

html>body #tres { … }

Moderne Browsers (ohne IE 7)

html>/**/body #cuatro { … }

Opera 9.27 (und darunter)

html:first-child #cinco { … }

Safari

html[xmlns*=""] body:last-child #seis { … }

Safari 3+, Chrome 1+, Opera9+, FF 3.5+

body:nth-of-type(1) #siete { … }

Safari 3+, Chrome 1+, Opera9+, FF 3.5+

body:first-of-type #ocho {  … }

Safari 3, Chrome 1+

@media screen and (-webkit-min-device-pixel-ratio:0) {

#diez  { …  }

}

Attribute-Hacks:

IE 6 (und darunter)

once { _color:blue }

IE 7 (und darunter)

doce { *color: blue }

4 Antworten zu “Überblick: CSS-Hacks”

  1. Thomas Scholz sagt:

    An dieser Stelle möchte ich ich dich darauf hinweisen, daß man Vollzitate mit einer Referenz versieht und nicht als eigene Texte ausgibt. Siehe: http://paulirish.com/2009/browser-specific-css-hacks/

  2. links for 2009-04-29 - Linkbait, Blog, Forum, Info, Development, Guru, webDesigner, Serverskine - belzebob.de sagt:

    [...] Überblick: CSS-Hacks | Ajaxschmiede.de (tags: css webdevelopment hacks showcase) [...]

  3. Patrick sagt:

    Vielen Dank für den Hinweis, Thomas. Hab nen Link zur Originalseite eingebaut. Hatte ich vorgehabt, aber wohl ganz vergessen. Werd demnächst Vater und bin daher derzeit etwas durcheinander.

  4. Thomas Scholz sagt:

    Macht ja nix. :)
    Dir und der Mutter alles Gute!

Hinterlasse einen Kommentar