Modernizr für css3d Transformationen und Flexbox zu prüfen, gehören ie10 - Javascript, CSS, Flexbox, Modernizr, Feature-Erkennung

Ich versuche herauszufinden, welcher Build von modernizr ich verwenden muss, um die Unterstützung für css3d-Transformationen und flexbox so zu erkennen, dass auch ie10 passieren kann.

Angeschaut http://caniuse.com/#search=flexbox und http://caniuse.com/#search=3d ie10 scheint diese teilweise zu unterstützen, mit einigen Ausnahmen wie der alten Syntax für Flexbox und keiner Unterstützung für preserve-3d.

Betrachtet man Modernisierer Download-Optionen gibt es folgende:

1. Flexbox
2. Flexbox (Legacy)
3. Flexbox (Tweener)
4. CSS 3d transformiert
5. CSS Transformieren Stil bewahren 3d

Also meine Frage ist welche brauche ich und wie kann ich sie verwenden, um Unterstützung zu überprüfen, wo ie10 + broswers (und alle großen Jungs wie Chrom, Firefox etc ..) passieren?

Antworten:

Mit Modernizr suchen Sie nicht nachbestimmte Browserversionen. Modernizr verwendet JavaScript, um Klassen zum HTML-Element der Benutzerseite hinzuzufügen. Wenn der Browser des Benutzers eine Funktion unterstützt, fügt Modernizr eine Klasse mit dem Namen dieser Funktion hinzu. Wenn der Browser des Benutzers keine Funktion unterstützt, fügt Modernizr eine Klasse "no-" + feature-name hinzu. Sie schreiben Ihre CSS oder JavaScript, um zu prüfen, ob das HTML-Element die Klasse der Funktion enthält, die Sie unterstützen möchten.

/* For all browsers */
.foo {
display: inline-block;
}

/* For browsers that support Flexbox */
.flexbox .foo {
display: flex;
}

/* For browsers that don"t support Flexbox. I never use the "no" classes
as I add features, not remove them. */
.no-flexbox .foo {
display: inline-block;
}

Idealerweise sollte es niemals ein "Pass" oder "Fail" seinLage. Sie sollten versuchen, ältere Browser so gut wie möglich zu unterstützen, indem Sie zusätzliche Funktionen und Funktionen für diejenigen bereitstellen, die die neuesten Browserversionen verwenden.

Hier ist die Aufschlüsselung der Optionen der Modernizr Flexbox:

1. Flexbox - Browser, die die aktuelle Syntax unterstützen (display: flex;)
2. Flexbox (Legacy) - Browser, die die alte 2009-Syntax unterstützen (display: box;)
3. Flexbox (Tweener) - IE 10 (Anzeige: Flexbox;)

Wenn Sie von Grund auf neu beginnen, brauchen Sie nicht 2 und 3. Diese würden verwendet werden, um Websites zu unterstützen, die vor dem Ausbügeln der Syntax erstellt wurden.

Entscheiden, welche Modernizr-Funktionen enthalten sein sollenhängt von den Funktionen ab, die Sie verwenden möchten. Sie sollten einfach die gesamte Modernizr-Bibliothek verwenden. Wenn Sie Ihre Site fertig gestellt haben, können Sie eine reduzierte Version erstellen und nur die Funktionen verwenden, die Sie in Ihrem Code verwendet haben.