blog.exotec

TYPO3 . XHTML/CSS . JavaScript/AJAX . iPhone/iOS

Browserspezifische CSS-Anweisungen

Es ist möglich mit der !important Regel, und einer speziellen Klammerung die nur der Opera interpretiert, CSS Dateien speziell auf “die drei Großen” (I.E., Netscape, Opera in ihren aktuellen Versionen) anzupassen.

In diesem Beispiel wird es gezeigt. Schaut euch diese Seite einmal in den o.g. Browsern an. Ihr werdet sehen das jeweils eine andere Hintergrungfarbe angezeigt wird. (I.E.=rot, Netscape=grün, Opera=blau)

Möglich wird dies durch die !important-Rule. Durch sie kann man Anweisungen, die der I.E. anders interpretiert wie gängige moderne Browser, quasi überschreiben.

#test {
	background: green !important;
	background: red;
	padding: 20px;
}

Zu beachten ist, dass der Wert der für den I.E. gedacht ist hinter der !important Anweisung steht, anderenfalls würde sie vom I.E. doch interpretiert.

Kommen wir nun zu der Anweisung die für uns den Opera separieren soll. Sie sieht folgendermaßen aus:

@media screen and (min-width: 550px){
#test {
	background-color: blue !important;
}
}

Alles was in dieser Klammerung steht wird nur vom Opera wahrgenommen. Es können mehrere Anweisungen in dieser Klammerung erfolgen. Auch hier muss ein !important an den zu überschreibenden Wert gehängt werden.

Tja, so einfach kann man seine CSS Dateien individuell an die momentan verbreitesten Browser anpassen. Schö finde ich die Tatsache das die CSS Datei damit noch validiert.

4 Kommentare zu 'Browserspezifische CSS-Anweisungen'

Auf dem Laufenden bleiben per RSS oder TrackBack zu 'Browserspezifische CSS-Anweisungen'.

  1. heidi sagt,

    Mai 4th, 2004 um 9:58 am

    habe fast alle themen auf deiner site mir durchgelesen - und die beschreibungen waren für mich sehr nützlich - herzlichen dank für die gut verständlichen und praktischen tips
    ich habe einiges erst einmal richtig verstanden und werde einiges auch anwenden
    also alles gute
    deine site werde ich weiterhin besuchen
    ps: beantwortest du auch fragen?


  2. Juli 20th, 2004 um 4:00 pm

    […] zu definieren. Selber optimiere ich meine Layouts erstmal für den IE, separiere dann durch spezielle Klammerungen den Mozilla und Opera, und kann damit diesen dann die notwendigen Anweisungen […]


  3. November 25th, 2004 um 10:33 am

    […] n kontakt goodies: FREE TYPO3 Template filter:alpha() statt PNG 40px of Frustration Browserspezifische CSS Ragged Float Demo   archiv: November 2004 October 2004 September 2004 Au […]

  4. Marek sagt,

    Juni 15th, 2006 um 8:43 pm

    So oft wie ich auf dieser Seite bin, muss auch ich mich mal an dieser Stelle für die sehr brauchbaren Informationen bedanken, die man hier finden kann. Insbesondere diese Anleitung hat in wenigen Minuten ein Problem gelöst, dass sonst einiges mehr an Zeit in Anspruch nehmen würde.
    Vielen Dank.

Kommentar schreiben:


94,487 Spam-Kommentare
blockiert von
Akismet