IE10 mit HTML/CSS erkennen

Yosh

Hi.

Wie kann ich den IE10 mit HTML/CSS erkennen, um eine Hinweisbox einzublenden, die den User darauf hinweist, dass der Browser nicht unterstützt wird?

IE10 hat ja leider keine Conditional Comments mehr.

LG

Arne Drews

Hallo,

Du kannst über eine MediaQuery gesonderte Anweisungen für den IE10 hinterlegen:

Code

@media screen and ( -ms-high-contrast:none ), ( -ms-high-contrast:active ) {


    // hier deine CSS Regeln für den IE10


}

-ms-high-contrast() ist eine eigene M$ Implementierung ab IE10, so dass dieser darüber "erkannt" wird und alle anderen Browser die MediaQuery ignorieren sollten.
Das mag keine saubere Lösung sein, aber eine bessere fällt mir adhoc nicht ein.

Gruß Arne

Yosh

Hi.
Danke, das funktioniert zwar, aber leider auch beim IE11.
Eigentlich suche ich etwas, was nur bis einschließlich IE10 greift, als Ersatz für die nicht mehr vorhandenen Conditional Comments.

Ansonsten muss ich es wohl Serverseitig lösen, um bei allen IE Versionen außer der aktuellsten dem User eine entsprechende Meldung auszugeben, dass der Browser nicht unterstützt wird.

Arne Drews

Naja, dann musst Du das erweitern. Es gibt mit dem IE11 neue Pseudoklassen/-elemente die Du zur Differenzierung verwenden kannst, bspw. -ms-backdrop:

Code

@media screen and ( -ms-high-contrast:none ), ( -ms-high-contrast:active ) {


    // blauer Hintergrund für IE10
    DIV.somecontainer { background:#00f; }


    // grüner Hintergrund für IE11
    *::-ms-backdrop, DIV.somecontainer { background:#0f0; }


    // roter Hintergrund für Edge
    *::backdrop, DIV.somecontainer { background:#f00; }
 
}

Alles anzeigen

Da -ms-backdrop erst ab IE11 erkannt wird, ignoriert der IE10 diese Zeile komplett.
Ab Edge entfällt das experimentelle Präfix -ms, so dass dieser einen roten Hintergrund haben sollte.

Ungetestet, aber die Richtung sollte stimmen...

Wenn Du noch mehr Einschränkungen suchst, wirst Du hier fündig: https://msdn.microsoft.com/de-de/library/…3(v=vs.85).aspx
Sollte ständiger Begleiter sein, wenn man Hacks für den IE benötigt.

Gruß Arne

Yosh

Hi.

Danke für Dein Beispiel. Ich habe es mal ein wenig erweitert.
Alte IE Versionen bis 9 werden über Conditional Comments erkannt.
IE10 wird wie bei dir im Beispiel erkannt, wobei ich noch einen Hack (das \9) eingebaut habe, damit IE11 die Meldung nicht anzeigt.

Bei IE11 wird nur ein Hinweis angezeigt, der den User zum Wechseln animieren soll.
IE11 Support ist "Gerade noch so" mit im Boot. (Flexbox ist da Buggy, da müssen schon Workarounds eingesetzt werden)

Und warum das ganze?
Ziel des Ganzen ist, bei IE älter als 11 dann ein stark vereinfachtes CSS auszuliefern, welches mehr oder weniger nur einen "Textmodus" ohne Schnickschnack und ohne die interaktiven Seitenelemente darstellt.
Und da gerade in Firmen noch manchmal alte IE Versionen im Einsatz sind, aber dann oft auch JS gesperrt ist, soll die IE Erkennung auch ohne JS auskommen.
Bestes Beispiel: Meine Firma. Die nutzen heute stellenweise noch Windows XP zusammen mit IE 8. Und natürlich ist JS per Gruppenrichtlinie ausgeschaltet.

HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IE-Check</title>


    <style>
    DIV.ietest { background:#0f0;    display: none;}    DIV.ie11info { background:#ff0;    display: none;}
    </style>
    <!--[if IE]>
    <style>
        DIV.ietest { background:#f00;         display: block;}
    </style>
    <![endif]-->
    <style>
    @media screen AND (-ms-high-contrast:none), (-ms-high-contrast:active) {
        DIV.ietest { background:#f70; display: block\9;}
        DIV.ie11info, *::-ms-backdrop { display: block; }
        }
    </style>    
</head>


<body class="flexbox-vertical" id="inhalt">


    <div class="ietest">    Sie nutzen einen veralteten Internet Explorer! Die Seite wird daher nur vereinfacht dargestellt und ein Login ist nicht moeglich.    </div>
    <div class="ie11info">    Sie nutzen Internet Explorer Version 11! Es kann zu Darstellungsfehlern kommen. Wir empfehlen die Verwendung eines anderen Browsers.    </div>
</body>
</html>

Alles anzeigen

Yosh

Hi.

Ich hab nun eine noch viel einfachere Lösung gefunden.

Im HTML Dokument, wo Flexbox verwendet wird, wird eine zusätzliche Box oben eingefügt.

HTML

<div id="wrapper" class="flexbox-vertical">
        <div id="warn">            Sie verwenden einen Browser, der Flexbox nicht unterstützt!        </div>
        ... weitere Flexbox Divs
    </div>

Im CSS wird folgendes eingefügt:

HTML

#warn {
    flex: 0 1 0px;
    overflow: hidden;
    z-index: -100;
    background-color: #f00;
}


@supports (display: flex) {
    #warn { display: none;
  }
}

Alles anzeigen

Durch dieses Vorgehen werden nicht nur alte IEs die Meldung zeigen, sondern auch alle anderen Browser, die kein Flexbox können, weil sie das DIV ganz normal als Blockelement anzeigen.
Browser, die @supports unterstützen, zeigen nichts an, weil display:none gesetzt wird.

Der IE11 unterstützt zwar kein @supports, würde somit die Meldung eigentlich anzeigen, aber weil er flex: 0 1 0px; auswertet, wird die Box eben auf 0px verkleinert.
Genau hier wäre dadurch dann aber noch die Möglichkeit gegeben, eine weitere Box einzubauen, die speziell für IE11 User gedacht ist und für einen Umstieg auf einen neueren Browser wirbt.
Statt flex: 0 1 0px muss man dann z.B. flex: 0 0 20px verwenden. (Der IE11 wird zwar noch von mir unterstützt aber nicht empfohlen)

Weiterhin ist es auch möglich, verschiedene "optionale" Divs mit einer Höhe von 0px auszustatten und overflow:hidden zu setzen, und dann erst über Flexbox eine Höhe zu geben wie gewünscht zu positionieren. Dann sieht man die bei alten Browsern erst gar nicht.
Nur die notwendigsten Blöcke, wie z.B. den eigentlichen Inhalt, lässt man mit Defaultwerten anzeigen. Je weniger "Optionales" gezeigt wird, desto weniger Probleme gibts bei den alten Browsern.

LG und einen guten Rutsch ins neue Jahr.

Arne Drews

Soweit ich das kenne, wird @supports auf M$ bezogen erst ab Edge unterstützt, so dass die Meldung eigentlich bei allen Edge-Vorgängern angezeigt sein sollte.
Um jetzt den IE11 auszuschliessen, baust Du ein Hack, das den flex minimiert, so dass er nicht mehr zu sehen ist?

Also @supports macht sicher an anderen Stellen Sinn, aber für Deine Problemstellung aus #1 hätte ich das jetzt nicht eingesetzt.

Yosh

Hi.
Genau so hab ich das gemacht.

Ich hab aber nun nochmals etwas umgeschwenkt und doch JavaScript mit dazu genommen.
Dort gibts mehrere zuverlässige Methoden, um IE10 oder älter herauszufiltern und auch noch weitere Feature Detections zu machen.

Ohne aktiviertes JavaScript bekommt man dann nur das Basis-Stylesheet (Inklusive einer Anzeige, dass JS benötigt wird).
Das Basis-Stylesheet ist sozusagen ohne jeglichen Schnickschnack, so dass es selbst auf richtig alten Browsern lesbar bleibt. (Defacto ein einfaches 1-Spalten Layout, in dem auch noch jeglicher optionale Content mit display: none ausgeblendet ist)
Das eigentliche Stylesheet wird dann erst mit DOM Zugriff durch JS eingefügt.

Tags