Modernizr для проверки преобразований css3d и flexbox include ie10

Question

Я пытаюсь выяснить, какую сборку modernizr мне нужно использовать, чтобы обнаружить поддержку преобразований css3d и flexbox, чтобы также разрешить пропускать ie10.

Просмотрев http://caniuse.com/#search=flexbox и http://caniuse.com/#search=3d ie10, похоже, частично поддерживает их с несколькими исключениями, такими как старый синтаксис для flexbox и не поддерживает preserve-3d.

Глядя на модернизаторов скачать варианты существуют следующие:

1. Flexbox
2. Flexbox (наследство)
3. Flexbox (Tweener)
4. CSS 3D-преобразования
5. CSS Transform Style сохранить 3d

Так что мой вопрос в том, какие из них мне нужно, и как я могу использовать их, чтобы установить поддержку проверки, где проходят ie10 + broswers (и все большие мальчики, такие как хром, firefox и т. д.)?

Answer 1

С помощью Modernizr вы не будете проверять конкретные версии браузера. Modernizr использует JavaScript для добавления классов в элемент html страницы пользователя. Если браузер пользователя поддерживает эту функцию, Modernizr добавит класс с именем этой функции. Если браузер пользователя не поддерживает функцию, Modernizr добавит класс 'no-' + feature-name. Вы пишете свой css или JavaScript, чтобы проверить, содержит ли элемент html класс функции, которую вы хотите поддерживать.

/* 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; 
} 

В идеале это никогда не должно быть ситуацией «прохода» или «неудачи». Вы должны стараться поддерживать более старые браузеры как можно лучше, добавляя дополнительные функции и функции для тех, кто использует новейшие версии браузера.

Вот разбивка вариантов Modernizr Flexbox:

1. Flexbox - браузеры, которые поддерживают текущий синтаксис (дисплей: сгибать;)
2. Flexbox (наследие) - браузеры, которые поддерживают старый синтаксис в 2009 году (дисплей: коробка;)
3. Flexbox (Tweener) - IE 10 (дисплей: Flexbox;)

Если вы начинаете с нуля, то вам не нужно 2 & 3. Те бы для поддержки сайтов, построенных до того, как синтаксис был сглажен.

Определение того, какие функции Modernizr включить, зависит от функций, которые вы планируете использовать. Вам следует начать использовать полную библиотеку Modernizr, а затем, когда вы завершили свой сайт, вернитесь назад и создайте уменьшенную версию, используя только те функции, которые вы использовали в своем коде.