Modernizr.js помогает в показе CSS 3 и HTML 5 в старых браузерах и как?

Question

Я использовал css 3, html 5 на веб-странице и хочу использовать Modernizr для отображения некоторых атрибутов html5 и некоторых css 3, таких как border-radius в старых браузерах,
Помогает ли Modernizr в этом и как его запускать.

Answer 1

Modernizr поможет вам обнаружить только определенные функции, поэтому вам придется добавлять исправления JS самостоятельно.

Если вы хотите использовать готовое решение, это может помочь: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

В вашем случае это может быть путь: http://css3pie.com/

Answer 2

Modernizr не добавляет недостающие функциональные возможности в более старые браузеры, кроме HTML5 Shiv, так что вы можете использовать и стилизовать новые семантические элементы из HTML5.В других ответах уже показаны некоторые варианты полизаполнения, однако я рекомендую вам пересмотреть возможность добавления чисто визуальных эффектов, таких как border-radius, в более старые браузеры.Полифиллы замедляют работу старых браузеров (иногда очень значительно) и делают общее восприятие намного хуже для этих пользователей.

Answer 3

Modernizr внутренне использует тот же код JS, который вы использовали бы в противном случае .. например, если вы хотите проверить поддержку заполнителя «input», используя Native, вы должны использовать;

function support_input_placeholder() {  
    var i = document.createElement('input');
    return 'placeholder' in i;
}

, тогда как Modernizrспособ проверки будет выглядеть как

function support_input_modern() {   
    if (Modernizr.input.placeholder) 
        return true;
    else
        return false;
}

Но приведенный выше код имеет ту же внутреннюю работу, что и собственный способ ...

Так что в идеале я бы предпочел собственный способ для более простого и меньшего количествапроверки ...

Только для очень сложных вещей, мы должны пойти на Modernizr

Answer 4

Modernizr не помогает с CSS3. (Для этого вы можете использовать Selectivizr , но у него есть некоторые междоменные проблемы, о которых вы захотите прочитать.)

Modernizr действительно поддерживает IEPP для HTML5 и поставляется с YepNope.js как Modernizr.load , который является отличным механизмом загрузки полифиллов, так что вы можете загрузить собственную поддержку для старые браузеры. Это поможет вам отказаться от поддержки таких атрибутов, как pattern и placeholder, не перегружая браузеры, которые имеют встроенную поддержку.

Answer 5

Вы можете использовать modernizr для обнаружения того, что доступно, например, закругленные углы. Если это не так, вы можете изящно деградировать с помощью API Modernizr или даже использовать плагин, чтобы курить и отражать функцию.

<script type="text/javascript">
    Modernizr.load({
        test: Modernizr.borderradius,
        nope: 'script/jquery.corner.js',
        callback: function () {
            $('article').corner();
            $('figure').corner();
        }
    });
</script>

Фрагмент кода, взятый из http://blogs.msdn.com/b/jennifer/archive/2011/08/04/html5-part-4-using-html5-while-retaining-support-for-older-browsers.aspx