Browserspezifisches Stylesheet für den Internet Explorer im WordPress Theme einbinden

Veröffentlicht am von / Lesezeit: 3 Minuten

Mit diesem Tutorial beschreibe ich, wie CSS Dateien nur für den Internet Explorer im WordPress Theme eingebunden werden können. Diese Vorgehensweise eignet sich, um browserspezifische Hacks für den IE nur dann zu laden, wenn sie auch gebraucht werden.

Der Internet Explorer wird immer noch recht häufig verwendet, hängt aber in Sachen Webstandards oft hinterher. Gerade neue CSS Techniken wie Flexbox funktionieren in älteren IE Versionen gar nicht oder nur mit vielen Bugs, sodass hier oft zusätzliches CSS für den Internet Explorer nötig ist, um die Fehler geradezubiegen.

Gängige Praxis ist, IE spezifisches CSS in extra Dateien zu packen, welche nur im Internet Explorer geladen werden. Damit bleiben die CSS Dateien wie die style.css im WordPress Theme valide und frei von jeglichen IE Hacks.

Möglich wird das Ganze mit dem Einsatz von Conditional Comments.

Conditional Comments im Internet Explorer

Unter Conditional Comments versteht man Bedingungen in HTML Kommentaren, welche nur vom Internet Explorer interpretiert werden. Dies geschieht aber nur mit Version 9 oder niedriger, ab Version 10 werden Conditional Comments nicht mehr unterstützt.

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

Mit Einsatz dieser Technik lassen sich damit CSS Dateien nur im IE laden. Andere Browser wie Chrome oder Firefox fassen das obige Beispiel als Kommentar-Block auf und führen den HTML Code dazwischen nicht aus.

Im WordPress Theme sollten CSS Dateien aber nie direkt und hartgecodet in der header.php eingebunden werden, sondern mit den WordPress-eigenen Funktionen geladen werden. Damit wird die Kompatiblität zu Plugins und Child Themes sichergestellt.

IE spezifische CSS Datei im WordPress Theme einbinden

Das Stylesheet für den Internet Explorer wird daher ganz normal mit wp_enqueue_style() eingebunden. Als Abhängigkeit sollte im dritten Parameter die originale CSS Datei angegeben werden, für welche die IE Hacks hinzugefügt werden. Im Normalfall ist das die style.css des WordPress Themes.

Nach Einbinden der CSS Datei können mit der allgemeinen Funktion wp_style_add_data() zusätzliche Metadaten wie Werte und Bedingungen für das Stylesheet deklariert werden. Unter anderem ob es sich um ein RTL oder alternatives Stylesheet handelt.

Um das Laden des Stylesheets auf den Internet Explorer einzuschränken, übergeben wir hier als zweiten Parameter den String conditional. Im dritten Parameter erfolgt dann die Angabe, in welchen Browser-Versionen die CSS Datei genau geladen wird.

/**
 * Enqueue scripts and styles.
 */
function theme_slug_scripts() {

	// Enqueue Theme stylesheet.
	wp_enqueue_style( 'theme-slug-style', get_stylesheet_uri() );

	// Enqueue Internet Explorer specific stylesheet.
	wp_enqueue_style( 'theme-slug-ie', get_template_directory_uri() . '/css/ie.css', array( 'theme-slug-style' ), '1.0' );
	wp_style_add_data( 'theme-slug-ie', 'conditional', 'IE' );

}
add_action( 'wp_enqueue_scripts', 'theme_slug_scripts' );

Mit der allgemeinen Angabe IE wird die CSS Datei in allen Versionen des Internet Explorers, aber nicht von anderen Browsern wie Chrome oder Firefox, geladen.

Das Einbinden des Stylesheets lässt sich auch auf eine bestimmte Version des IE eingeschränken.

Beispiel: Stylesheet nur im Internet Explorer 9 laden:

wp_enqueue_style( 'theme-slug-ie9', get_template_directory_uri() . '/css/ie9.css', array( 'theme-slug-style' ), '1.0' );
wp_style_add_data( 'theme-slug-ie9', 'conditional', 'IE 9' );

Der Internet Explorer unterstützt in den Conditional Comments auch Operatoren, mit denen mehrere Versionen des IE ausgewählt werden können:

  • lt – Kleiner als
  • lte – Kleiner gleich
  • gt – Größer als
  • gte – Größer gleich

Beispiele

Datei im Internet Explorer 5 bis 8 einbinden (kleiner als IE 9):

wp_enqueue_style( 'theme-slug-ie', get_template_directory_uri() . '/css/ie.css', array( 'theme-slug-style' ), '1.0' );
wp_style_add_data( 'theme-slug-ie', 'conditional', 'lt IE 9' );

Stylesheet ab Internet Explorer 8 einbinden (größer als IE 7):

wp_enqueue_style( 'theme-slug-ie', get_template_directory_uri() . '/css/ie.css', array( 'theme-slug-style' ), '1.0' );
wp_style_add_data( 'theme-slug-ie', 'conditional', 'gt IE 7' );

Als Theme Entwickler ist man durch die Operatoren sehr flexibel und kann CSS Hacks nur für die Versionen des IE einbinden, wo diese wirklich gebraucht werden.