CSS3-Eigenschaften im Internet Explorer mit Hilfe von PIE darstellen

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Webdesign - CSS3-Eigenschaften mit Hilfe von PIE im Internet Explorer darstellen

12Mär2014

PIE rüstet den Internet Explorer mit der Fähigkeit aus, zahlreiche CSS3 Eigenschaften darzustellen.


Durch Schlagschatten, runde Ecken und Farbverläufen werden Webseiten durch einfache CSS3 (Cascading Style Sheet)-Anweisungen dekorativer gestaltet. Doch leider gibt es noch viele Besucher einer Website die sich mit älteren Browser im Internet tummeln und zu diesen, und häufig benutzten Browsern, gehört der Internet Explorer, der leider die CSS3 (Cascading Style Sheet)-Anweisungen nicht alle versteht.
Wenn runde Ecken im Internet Explorer eckig dargestellt werden oder Farbverläufe in einer einheitlichen Hintergrundfarbe, ist das nicht ganz so schlimm. Aber was tut man nicht alles für den Internet Explorer.

Was kann man also tun?

Hier kommt nun PIE (Progressive Internet Explorer) ins Spiel. "PIE (Progressive Internet Explorer)" ist eine JavaScript (objektorientierte Programmiersprache)-Lösung und rüstet den Internet Explorer mittels einer ".htc-Datei" mit der Fähigkeit aus, zahlreiche CSS3 (Cascading Style Sheet) Eigenschaften darzustellen. Zu diesen interessanten Eigenschaften gehören unter anderem "border-radius", "box-shadow" und "linear-gradient".

Und so wird CSS3 (Cascading Style Sheet) PIE (Progressive Internet Explorer) ins Stylesheet eingebunden!
Zuerst kann man sich die aktuelle Version auf der css3pie Seite runterladen. Die PIE.htc-Datei wird dann auf den Webserver geladen und, um die Darstellung im Internet Explorer zu ermöglichen, erfolgt die Einbindung im Stylesheet über "behavior: url(PIE.htc)" innerhalb der benötigten Selektoren.

Als Beispiel:

.aus {
    border-radius: 5px;
    box-shadow:0 1px 1px #000;
}

.accordion {
    border-radius: 0 0 5px 5px;
    box-shadow: 0 1px 1px #000;
}

.aus,
.accordion {
    behavior: url(/pie/PIE.htc);
}

Der Aufruf der "PIE.htc" wird entweder an den Block der CSS3 (Cascading Style Sheet) Eigenschaften angefügt oder, um den Code etwas übersichtlicher zu halten, kann die "PIE.htc" auch für die entsprechenden Selektoren separat, wie in dem Beispiel, aufgeführt werden.
Nur bei den Farbverläufen muss man noch ein eigenes Präfix für den Internet Explorer beifügen. Das sieht dann so aus:

.aus:hover,
.aus:focus {
    -pie-background: linear-gradient(#fff, #b4bfcb);
    behavior: url(/pie/PIE.htc);
}

So sollten nun Schlagschatten, runde Ecken und Farbverläufen auch mit dem Internet Explorer darstellbar sein. Natürlich muss man noch dafür sorgen dass die "PIE.htc-Datei" in der .htaccess (hypertext access - Hypertext-Zugriff) komprimiert wird.

Aber Achtung!
Der Internet Explorer interpretiert den Schatten einer Box als dunkle Hintergrundfarbe, setzt dieses Element auf "position: absolute" und schiebt den neu erstellten Container in den Vordergrund.
Auf dieses Problem bin ich zum Beispiel beim Einblenden der Texte durch den Accordion-Effekt gestoßen. Da ich den ausgeklappten Text mit einem Schatten versehen habe, wurde die Box direkt aufgeklappt und der Hintergrund war schwarz. Hier habe ich dann beim Internet Explorer auf die Darstellung der Schattens verzichtet.
Ebenso verschwanden auf den Seiten die Navigationselemente, sie wurden durch den grauen Balken überdeckt. Hier genügte es bereits das Element "nav li" durch "z-index: 1" in den Vordergrund zu schieben.
Und auch das Hintergrundbild (Papier) verschwand auf den Seiten. In diesem Fall konnte ich mir durch die Eigenschaft "position: relative" und "z-index: 1" helfen.


Damit hätten wir den Internet Explorer 9 auf den richtigen Weg geführt.
Aber was ist mit neueren Versionen des Internet Explorers?

Der Internet Explorer mit der Version 10 oder 11 versteht nämlich leider keine "Bedingte Kommentare" (englisch: Conditional Comments) mehr. Aber wenn man eine individuelle Anweisung für den Internet Explorer 10 oder 11 benötigt, hilft einer der "Selector Hacks".

Ein Beispiel für so einen Anweisung.
Zuerst der einfache HTML (HyperText Markup Language)-Code:

<div id="ie">
    Eine farbige Box für den Internet Explorer
</div>

Und das dazugehörige CSS3 (Cascading Style Sheet) führt dazu, dass der Internet Explorer 10 die Hintergrundfarbe der Box in der Farbe "Blau" anzeigt. Für den Internet Explorer 11 gibt es dann noch eigenen "Selector Hack" und damit wird dann die Farbe "Rot" angezeigt, während alle anderen Browser den Hintergrund in "Cyan" darstellen:

#ie {
    background: #0ff; /* alle anderen Browser */
}

_:-ms-input-placeholder, :root #ie {
    background: #00f; /* IE10 */
}

_:-ms-fullscreen, :root #ie {
    background: #f00; /* IE11 */
}
Eine farbige Box für:
Internet Explorer 10 in "Blau"
Internet Explorer 11 in "Rot"
alle anderen Browser in "Cyan"

Und damit ist der Internet Explorer-10-CSS-Hack und der Internet Explorer-11-CSS-Hack funktionsfertig.
Weitere Hacks findet man auf der Seite Browserhacks.

Zum Seitenanfang springen Λ