CSS: Microsoft Edge, Internet Explorer 10 und IE11 via Media Queries ansprechen
Eigentlich gehörten Browser-Hacks schon längst der dunkelsten Webentwickler-Vergangenheit an. Wer jedoch heutzutage moderne Technologien wie CSS Grid oder Flexbox im Rahmen seiner täglichen Arbeit einsetzen möchte, kommt nicht drum herum, älteren Browsern aus dem Hause Microsoft etwas auf die Sprünge zu helfen. Wir zeigen wie man direkt innerhalb seines CSS mittels Media Queries einzelne Microsoft-Browser ansprechen kann.
Die älteren Internet Explorer Versionen 10 und 11 reagieren mitunter empfindlich wenn man zum Beispiel auf Flexbox setzt und mittels „Margin“ positionieren möchte. Hier hilft ein Griff in die Trickkiste um den IE10 und IE11 separat anzusprechen.
Was ist Flexbox eigentlich?
Flexbox erlaubt die flexible Anordnung und Ausrichtung von Elementen auf einer Website. Auch Reihenfolgen lassen sich steuern - und das deutlich flexibler als früher. Während früher die CSS-Eigenschaft "float" zu Layout-Zwecken missbraucht wurde, ist Flexbox speziell konzipiert woren , um Layoutprobleme nativ zu lösen - ohne "Pfusch am Bau". Auch noch modernere Techniken wie CSS-Grid stehen in den Startlöchern, um ohne Tricks und Umwege saubere und hochflexible Web-Layouts umsetzen zu können.
@media all and (-ms-high-contrast:none) {
.beispiel { color: green } /* IE10 */
*::-ms-backdrop, .beispiel { color: red } /* IE11 */
}Zur Erklärung: Beide Anweisungen werden sowohl durch den IE10 als auch durch den IE11 ausgewertet, da die Media Query beide anspricht. Der IE10 kennt die zweite Anweisung allerdings nicht – er überspringt die Anweisung einfach. Der IE11 hingegen versteht die Anweisung, wertet diese aus und überschreibt die darüber notierte Anweisung. Ganz wie es CSS von der Kaskade auch vorsieht.
EDGE via Media Query ansprechen
Um einzig und alleine EDGE via Media Query ansprechen zu können, können wir @supports (-ms-ime-align:auto) nutzen:
@supports (-ms-ime-align:auto) {
.beispiel { color: green; } /* EDGE */
}Fazit: Kleine Hacks, große Wirkung
Durch diese kleinen CSS-Hacks kann man wirkungsvoll den Internet Explorer in Version 10 und 11 „debuggen“ und ebenfalls Microsofts EDGE etwas auf die Sprünge helfen. Hacks sind niemals elegant, aber solange man sich mit CSS-internen Methoden aushelfen kann, ist das eine annehmbare Lösung.