Aug 12

Mit Conditional-CSS browserspezifische Stylesheetangaben verwenden

Tag: AllgemeinesPatrick @ 9:46 pm

Zweifellos jeder Web-Designer und -Entwickler stieß bei CSS-Angaben auf Darstellungsunterschiede in verschiedenen – vor allem älteren – Browsern, durch die man gezwungen war weitere Stylesheet-Dateien einzubinden oder CSS-Hacks zu verwenden um eine einheitliche Darstellung erzielen.

Das Kernpunkt des Problemes ist der unterschiedliche Grad der CSS-Implementierung in den verschiedenen Browsern und deren Versionen.

Allan Jardine bietet mit Conditional-CSS eine, wenn nicht sogar die, Lösung des Problems an: Er nahm die Idee der Conditional-Comment-Syntax des Internet Explorers auf und übertrug diese auf CSS-Anweisungen.

Somit ist es nun möglich, einfacher zu wartenden CSS-Code zu schreiben, der sich an die Eigenheiten des jeweiligen Renderers anpassen lässt. Damit sollten sich die nervigen CSS-Bugs auf einfache Weise umgehen lassen.

Unterstützt werden nahezu alle gängigen und exotischen Browser von IE bis Playstation Portable. Wobei zu beachten ist, dass nicht jede Browserversion auf Grund der Eigenheiten vollen Support erhält. Eine genaue Übersicht gibt dazu gibt es hier.

Hauptsächlich wird Conditional-CSS, wie bereits angesprochen, dazu verwendet werden, um festzulegen, ob ein CSS-Ausdruck an den jeweiligen Browser gesendet werden soll oder nicht. Es ist klar, dass man eigentlich auf solche Tricks verzichten möchte, aber in Ausnahmefällen ist C-CSS äußerst nützlich um einen bestimmten Browser anzusprechen anstatt Stunden mit einem Problem sich rumzuplagen.

Jeder CSS-Einzelanweisung oder jedem Anweisungsblock kann eine Bedingung vorangestellt werden.

Hier ein paar Beispiele zur Anwendung:

a.button_active, a.button_unactive {
display: inline-block;
[if lte Gecko 1.8] display: -moz-inline-stack;
[if lte Konq 3.1] float: left;
height: 30px;
[if IE 5.0] margin-top: -1px;
text-decoration: none;
outline: none;
[if IE] text-decoration: expression(hideFocus='true');
}

[if IE] .box {
width: 500px;
padding: 100px 0;
}

Wer sicher näher dafür interessiert, kann das OpenSource-Projekt C-CSS herunterladen und auf dem eigenen Server aufspielen. Eine detailierte Einbaueinleitung für PHP liegt bei.

keine Antwort zu “Mit Conditional-CSS browserspezifische Stylesheetangaben verwenden”

  1. «Sпарта» «Спарта» 1 2 3 4 5 6 7 8 9 10 11 12 серии смотреть онлайн все серии. sagt:

    «Sпарта» «Спарта» 1 2 3 4 5 6 7 8 9 10 11 12 серии смотреть онл…

    «Sпарта» «Спарта» 1 2 3 4 5 6 7 8 9 10 11 12 серии смотреть онла…

  2. http://cleantalkorg4.ru/article sagt:
  3. news2 sagt:

    news2

    news2

  4. 43ytr.icu sagt:

    43ytr.icu

    43ytr.icu

  5. Èãðà ïðåñòîëîâ 8 ñåçîí 2 ñåðèÿ 3 ñåðèÿ sagt:

    Èãðà ïðåñòîëîâ 8 ñåçîí 2 ñåðèÿ 3 ñåðèÿ

    Èãðà ïðåñòîëîâ 8 ñåçîí 2 ñåðèÿ 3 ñåðèÿ

  6. glyxar.ru sagt:

    glyxar.ru

    glyxar.ru

  7. abisko.ru sagt:

    abisko.ru

    abisko.ru

  8. 2021 sagt:

    2022

    2022

  9. Èãðà ïðåñòîëîâ 8 ñåçîí sagt:

    Èãðà ïðåñòîëîâ 8 ñåçîí

    Èãðà ïðåñòîëîâ 8 ñåçîí

  10. Èãðà Ïðåñòîëîâ 8 ñåçîí 5 ñåðèÿ sagt:

    Èãðà Ïðåñòîëîâ 8 ñåçîí 5 ñåðèÿ

    Èãðà Ïðåñòîëîâ 8 ñåçîí 5 ñåðèÿ

  11. bitly.com/AzAX3 sagt:

    bitly.com/AzAX3

    bitly.com/AzAX3

  12. 2020-2020-2020 sagt:

    2020-2020-2020

    2020-2020-2020

  13. Mstiteli: Final (2019) sagt:

    Mstiteli: Final (2019)

    Mstiteli: Final (2019)

  14. ðîêåòìåí ïîëíûé ôèëüì sagt:

    ðîêåòìåí ïîëíûé ôèëüì

    ðîêåòìåí ïîëíûé ôèëüì

  15. Video sagt:

    Video

    Video

  16. Watch sagt:

    Watch

    Watch

  17. wwin-tv.com sagt:

    wwin-tv.com

    wwin-tv.com

  18. watch online sagt:

    watch online

    watch online

  19. 00-tv.com sagt:

    00-tv.com

    00-tv.com

  20. 4serial.com sagt:

    4serial.com

    4serial.com

  21. we-b-tv.com sagt:

    we-b-tv.com

    we-b-tv.com

  22. kino-m.com sagt:

    kino-m.com

    kino-m.com

  23. m-dnc.com sagt:

    m-dnc.com

    m-dnc.com

  24. ðûáàëêà sagt:

    ðûáàëêà

    ðûáàëêà

  25. dinotube hd dinotube sagt:

    dinotube hd dinotube

    dinotube hd dinotube

Hinterlasse einen Kommentar

You must be logged in to post a comment.