Das Bild unterliegt keinen urheberrechtlichen Beschränkungen
Der Grund, warum ich für den Internet-Explorer üblicherweise keine Hacks sondern Klassen verwende (IEs bis einschließlich 8 werden als .oldie geführt, konkrete Versionen entweder .msieX oder .ieX) ist, dass ich mich einer simplen Methode bediene, mit der ich HTML-Klassen für die jeweiligen Internet-Explorer-Versionen hinzufüge. Falls das verwendete Theme es nicht schon macht, kann man sich IE-Klassen mit Hilfe von Conditional Tags selbst einbauen (Vorbild html5boilerplate, beim Einsatz von modernizr ist noch die Klasse no-js hinzufügen).
WordPress header.php
<!DOCTYPE html> <!--[if lt IE 7 ]> <html <?php language_attributes(); ?> class="oldie ie6"> <![endif]--> <!--[if IE 7 ]> <html <?php language_attributes(); ?> class="oldie ie7"> <![endif]--> <!--[if IE 8 ]> <html <?php language_attributes(); ?> class="oldie ie8"> <![endif]--> <!--[if IE 9 ]> <html <?php language_attributes(); ?> class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->
oder als HTML-Template
<!--[if lt IE 7 ]> <html lang="de" class="oldie ie6"> <![endif]--> <!--[if IE 7 ]> <html lang="de" class="oldie ie7"> <![endif]--> <!--[if IE 8 ]> <html lang="de" class="oldie ie8"> <![endif]--> <!--[if IE 9 ]> <html lang="de" class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <!--<![endif]-->
SVG für IE9
Eigentlich setzt IE9 CSS3-Gradienten bereits um. Doch soll ein so gestaltetes Element auch noch abgerundete Ecken bekommen, schaut man im IE9 bei der Kombination Gradient und border-radius in die Spitzen. Anders verhält es sich, wenn man statt des Gradienten einen SVG-Hintergrund für den IE9 verwendet.
Gradientmaker:
Microsoft Gradientmaker
Noch ein Gradientmaker (optional mit IE9-SVG-Gradient)
Die Stilanweisung sieht dann etwa so aus:
.ie9 .gradient {
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4NiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxMDAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiMzNzM3MzciIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiM0OTQ5NDkiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c4NikiIC8+Cjwvc3ZnPg==);
border-radius:10px;
}Der Vollständigkeit halber sei erwähnt, auch IE7 (und älter) und IE8 können Gradienten umsetzen:
.oldie .gradient {filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#444444', EndColorStr='#333333');}Auf runde Ecken muss man in den alten IEs jedoch verzichten, oder? — Nicht unbedingt.
CSS3 Pie in WordPress verwenden
PIE downloaden und entpacken. Die komprimierten Dateien PIE.htc, PIE.js und PIE.php in ein Verzeichnis des Themes kopieren (z.B. “pie”).
Ein eigenes Stylesheet für den Internet-Explorer wird in WordPress wie folgt eingebunden.
functions.php
function load_ie_css() {
global $wp_styles;
wp_enqueue_style( "bis-ie9", get_template_directory_uri().'/css/ie.css' , false, '1.0', "all");
$wp_styles->add_data( "bis-ie9", 'conditional', 'lte IE 9' );
}
add_action('wp_enqueue_scripts', 'load_ie_css');Hierbei teilen sich alle IE bis Version 9 ein Stylesheet und werden (bei mir) über ihre HTML-Klasse differenziert, wo es erforderlich ist. Mit der Methode lässt sich jedoch auch für jede IE-Version ein eigenes Stylesheet einbinden (über das jeweilige conditional Tag: ‘IE 7′, ‘IE 8′, ‘IE 9′), oder alte IEs und IE9 trennen (‘lte IE 8′, ‘IE 9′).
Gradient mit runden Ecken (ie.css)
.oldie .background {
position:relative; /* ist erforderlich, damit die Stile greifen */
-pie-background:linear-gradient(#393939, #494949); /* pie-praefix, nicht in jedem Fall erforderlich, siehe Dokumentation auf CSS3Pie-Website */
border-radius: 10px;
behavior: url(http://example.com/wp-content/themes/themename/pie/PIE.php); /* absoluter Link funktioniert am sichersten - die Position relativ zum Stylesheet anzugeben tut es nicht */
}Das würde auch im IE9 so funktionieren (einfacher wäre es, dann gelten die Stile im IE-Stylesheet global für alle Versionen). Doch in seinem Fall ziehe ich es vor, SVG-Grafik und “natives” CSS3 zu kombinieren.
LESS-Klasse für behavior-URL
Da ich mit LESS arbeite, habe ich für den behavior-Aufruf eine eigene Klasse definiert.
.gethtc {
behavior: url(http://example.com/wp-content/themes/themename/pie/PIE.php);
}So muss ich den Link nur einmal anpassen, falls er sich verändert (beispielsweise beim Übertrag von der Test- auf die Wirkbetriebsumgebung).
Nach der Stildefinition wird einfach die Klasse aufgerufen (Beispiel):
.background {
position:relative;
background:#393939;
-pie-background:linear-gradient(#393939, #494949);
.border-radius();
.gethtc;
}von CSS3PIE unterstützte CSS3-Features.