Mit verschiedenen CSS-Styling für bestimmte Browser

StackOverflow https://stackoverflow.com/questions/1637534

  •  07-07-2019
  •  | 
  •  

Frage

Was ist der beste Weg, getrennte CSS für IE und anderen Browser haben? Ich denke da an nur Targeting IE, Firefox und Safari-Benutzer. Gerade jetzt mit CSS3-Unterstützung in den meisten Browsern aber IE.

Die verschiedenen Möglichkeiten, dies zu tun, die mir begegnet ist, ist

  1. Laden separate Stylesheets bedingt mit <!--[if IE]>
  2. unterstreicht Hack und verschiedene andere Inline-IE-Hacks

Ich ziehe (2) als (1) ist zusätzliche Arbeit vor allem bei der Entwicklung. Aber (2) scheint nicht die ganze Zeit zu arbeiten. Was ist der effizienteste Weg?

War es hilfreich?

Lösung

Ich würde einen Stylesheet hat, dass alles nimmt an der Spitze des Dokuments auf.

unterhalb dies Ihr tun        [! - [if IE]] bedingte Stylesheet.

hier nur Stile außer Kraft setzen, die Probleme in IE verursachen. - der letzte Stil für eine bestimmte Klasse, die aufgenommen wird, ist derjenige, der gefolgt wird

.

Andere Tipps

Unser Team behandelt CSS folgenden drei Regeln:

  1. Stellen Sie sicher, allgemeine / common CSS-Dateien arbeiten, wie sie mit allen Browsern sollten so nah wie nur irgend möglich.
  2. Behandeln Sie alle IE "Bugs" in separaten Dateien, die Kontrolle der Sheets mit IE Bedingungen geladen werden.
  3. Keine Hacks erlaubt, wenn es nicht möglich ist, es zunächst zwei Regeln folgt arbeiten.

Ich bin damit einverstanden alle Kerne CSS in einer einzigen Datei mit zu halten. Wenn Sie ASP.NET verwenden, dann können Sie einen WebHandler verwenden zu verwalten, welche CSS tatsächlich gesendet wird. Ich bin sicher, dass andere Sprachen haben ähnliche Lösungen. Auf diese Weise können Sie nur senden, was Sie brauchen, und lassen Sie es im Cache gespeichert werden. Der andere Vorteil ist, dass Sie mehrere CSS-Dateien kombinieren können (wenn das ist, wie Sie es tun) und Gegenwart nur eine. Das ist eine gute Praxis, wie Sie die Anzahl der Anfragen an den Webserver zu reduzieren.

Sie können dann Dinge schreiben wie [if lt IE 8] margin: 0px; und es wäre nicht usw. gesendet IE8 oder FF werden.

Wenn Sie nur HTML verwenden, dann müssen Sie gehen mit den [! - [if IE]]. Stil oben genannten Bedingungen

Wir verwenden einen WebHandler in unserem sehr großen Projekt, und ich würde es auf andere Weise nicht immer tun.

Siehe http://www.conditional-css.com/download . Es ist verfügbar für PHP, C # und C

Viel Glück. 

<!--[if !IE]><!--><link rel="stylesheet" href="non-ie.css"><!--<![endif]-->
<!--[if IE]><link rel="stylesheet" href="ie.css"><![endif]-->

Dieser Trick weit unter Verwendung von Yandex (auch bekannt als "russisch google") HTTP-Anfragen zu reduzieren. market.yandex.ru dieses unter Verwendung, zum Beispiel.

Sie können auf diese Weise verwenden, auch, einige Male die Bedingungen möglicherweise nicht, wo wir die Stile in der Mitte des Code schreiben müssen,

. 
<?php $browser = $_SERVER['HTTP_USER_AGENT']; ?>  
    <?php if (strstr($browser, "MSIE 6.0")) { ?>  
    <link rel="stylesheet" href="ie6style.css" type="text/css" media="screen" />  
    <?php }else{ ?>  
    <link rel="stylesheet" href="default.css" type="text/css" media="screen" />  
    <?php } ?>

Überprüfen Sie die $browser mit:

IE - „MSIE“

Firefox - „Firefox“

Safari - „Safari“

Opera - „Opera“

Chrome - „Chrome“

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top