Modernizr: IE10 & Flexbox: Как получить обнаруженную оболочку IE10

Question

Я использую Modernizr v3 на своем веб-сайте для проверки поддержки flexbox.

Modernizr добавляет класс кузова "flexbox" для браузеров, которые его поддерживают, и "no-flexbox" для браузеров, которые этого не делают. Поскольку браузеры, которые не поддерживают flexbox, составляют лишь меньшинство моей аудитории, я использовал класс "no-flexbox", чтобы обеспечить возврат CSS. Например:

.ad { /* Default CSS */ 
display: flex; 
} 

.no-flexbox .ad { /* Fallback CSS*/ 
display:table; 
} 

Все работает отлично, за исключением IE10, а Modernizr добавляет класс «не-Flexbox» к нему, даже если IE10 не поддерживает Flexbox, он просто использует старый синтаксис. Поэтому в IE10 мой макет разбит, поскольку он читает как стили flex, так и non-flexbox.

In this thread, в нем говорится, что модернизатор имеет стиль flexboxtweener для IE10. Поэтому я подумал, что могу переписать свои пасы, чтобы использовать вместо .no-flexboxtweaner. no-flexbox.

Проблема заключается в том, что браузеры, поддерживающие новый синтаксис flexbox, получают класс no-flexboxtweaner, поэтому они читают резервный код.

Как настроить его так, чтобы только браузеры, не поддерживающие любую форму flexbox (независимо от того, являются ли они новыми или старыми), получают класс «нет».

Я знаю, что мог бы делать .no-flexbox .ad, .no-flexboxtweaner .ad ", но потом это раздувает CSS (плюс работает два теста Modernizr). Я бы предпочел только один тест/класс.

Answer 1

Я знаю, что мог бы делать .no-flexbox .ad, .no-flexboxtweaner .ad ", но потом это раздувает CSS (плюс работает два теста Modernizr). Я бы предпочел только один тест/класс.

Thats kindof глупый, приятель. Это несколько байтов - почти все из которых будут стерты с помощью gzipping вашего файла. Если вы reallllly хотели, чтобы избежать этого, вы можете создать дополнительную проверку Modernizr, что дает вам любого Flexbox

Modernizr.addTest('anyflexbox', (Modernizr.flexbox || Modernizr.flexboxtweener)) 

, который будет создавать новое свойство под названием anyflexbox и вы можете укладывать CSS соответственно.

Answer 2

Обнаруживает поддержку свойства CSS Flex-wrap, входящего в состав Flexbox, которого нет во всех реализациях Flexbox (особенно Firefox).

Это показано как в синтаксисе «tweener» (реализованном IE10), так и в «современном» синтаксисе (реализованном другими). Это обнаружение вернет true для любой из этих реализаций, если поддерживается свойство flex-wrap. Таким образом, чтобы обеспечить современный синтаксис поддерживается, используйте вместе с Modernizr.flexbox:

if (Modernizr.flexbox && Modernizr.flexwrap) { 
    // Modern Flexbox with `flex-wrap` supported 
} 
else { 
    // Either old Flexbox syntax, or `flex-wrap` not supported 
} 

Ref: https://modernizr.com/docs