Sehr kurze Trick: Bedingte CSS und Optimierung

Die Nutzung der Bedingungen innerhalb des Browsers wird häufig verwendet, um die Stylesheet-Last auf der Basis der Typ Ihres Browsers entscheiden. Zum Beispiel können wir diesen Code verwenden, um eine bestimmte Stylesheet laden, wenn der Browser Internet Explorer 6:

1
2
3
4
5

<-! Laden Sie dieses Stylesheet für alle Browser ->
"stylesheet" href = "foglio_style.css" type = "text/css" / > < link rel = "stylesheet" href = "foglio_style.css" type = "text / css" />
<-! [If IE 6]>
<link rel="stylesheet" href="foglio_style_ie.css" type="text/css" />
<[Endif] ->

Eine Alternative zu diesem Ansatz (die erzeugt mindestens zwei HTTP-Requests) wäre, auf die Klasse oder ID des Tags handeln body :

1 2	<-! [If IE 6]> <body class="ie6"> <[endif] -> > <!--<![endif]--> <-! [If IE]> -> < Körper > <- <[endif] ->

Auf diese Weise konnten wir CSS für verschiedene Browser einfügen in einer einzigen Datei und Route Definitionen Berufung auf die Klassen-oder ID zugewiesen, um den body ! Zum Beispiel:

1 2	: #000 } p {color: # 000} color : #f00 } /* solo su IE 6 / . Körper IE6 p {color: # f00} / IE 6 nur * /

Offensichtlich ist dieses Verfahren sinnvoll und vorteilhaft, wenn der Code "Alternative" ist eine bestimmte Größe ...

Optimierung von Stylesheets

Schließlich weise ich darauf hin eine große Online-Tool für die Formatierung und Komprimieren von CSS: CSS Formatierer und Optimierer . Basierend auf dem Motor CSSTidy (auch verfügbar in Download-Version von PHP ), war beeindruckend in ihrer Vielfalt und hervorragende Datei-Komprimierung. Der Algorithmus in der Tat zu beseitigen nicht nur den "Kopf" oder das letzte ";" (Semikolon), sondern optimiert die Syntax der Farbe (# FF9900 zu # F90), die Zeichen der Pixel (0px in 0), sowie das Durchführen eine Reihe von nützlichen Kontrollen, um Tippfehler zu finden.