Модернизатор Polyfill против префикса CSS3

Я использую полифилл, чтобы размер окна работал со всеми браузерами с поддержкой JS, чтобы предотвратить проблемы с макетом, которые выглядят следующим образом:

<script type="text/JavaScript">
//extend modernizer
Modernizr.addTest("boxsizing", function() {
    return Modernizr.testAllProps("boxSizing") && (document.documentMode === undefined || document.documentMode > 7);
    });
$(function(){
    if( !($('html').hasClass('boxsizing')) ){
        $('.boxSized, .boxSized *').each(function(){
            var fullW = $(this).outerWidth(),
                actualW = $(this).width(),
                wDiff = fullW - actualW,
                newW = actualW - wDiff;

            $(this).css('width',newW);
        });
    }
});

</script>

Однако, глядя на этот код, когда браузер не включает box-sizing:, он прибегает к использованию этого короткого полифилла, который, как я думаю, не должен сильно влиять на производительность сайта?

Моя проблема заключается в следующем: на данный момент я использую префиксные элементы, например.

-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */

Мне интересно, являются ли элементы с префиксом теперь избыточными, поскольку полифилл переопределяет их, или есть ли преимущество в их наличии и т. Д.?


javascript css performance polyfills modernizr
person Henry Quekett    schedule 15.05.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Modernizr будет включать эти префиксные стили в свое обнаружение, так что да, вы должны их сохранить.

Если вы отбросите их, ваш сайт сломается, потому что браузеры, которым требуется префикс, будут обнаружены Modernizr как поддерживающие эту функцию и, следовательно, не будут запускать код javascript, поэтому у вас вообще не будет стиля для этих браузеров.

Код Javascript будет использоваться только в IE7* или более ранней версии, где стиль box-sizing вообще не поддерживается.


(* ...или другие действительно старые браузеры, такие как Opera 9 или Firefox 1, но на самом деле их никто не использует)

person Spudley    schedule 15.05.2013
comment
Таким образом, вы не видите необходимости добавлять условный оператор в полифилл для IE, так как он будет использоваться только при необходимости (браузер не поддерживает никакое box-szing?) и не должен сильно влиять на производительность сайта, когда браузер поддерживает Box-sizing. - person Henry Quekett; 15.05.2013
comment
Правильный. Для браузеров, поддерживающих box-sizing, влияние на производительность будет минимальным. Ему нужно будет загрузить Modernizr (но вы все равно это делаете, верно?), и ему нужно будет выполнить тест Modernizr, но это довольно легковесно, так что не сильно повлияет. Вы можете сделать так, чтобы это не влияло на другие браузеры, используя условные комментарии вместо теста modernizr, но разница на самом деле не будет такой уж большой. - person Spudley; 15.05.2013
comment
действительно, Modernizer уже загружен, когда вы говорите, что для браузеров, поддерживающих размер окна, это включает сафари, firefox и т. д. с использованием префиксных стилей. То, что я пытаюсь получить, так это переопределение префиксов moz и webkit и использование полифилла JS, например, firefox в некоторых случаях не поддерживает тег размера окна сам по себе, но, очевидно, поддерживает стили с префиксом, поэтому JS помечает это до как нет коробки проклейки! извините, что так многословно, я начал путаться - person Henry Quekett; 15.05.2013
comment
Как указано в документации Modernizr: Modernizr.testAllProps() проверяет, распознано ли заданное свойство стиля или любой из его вариантов с префиксом поставщика. Другими словами, ваш test для boxSizing вернет true для Firefox, хотя FF поддерживает только версию с префиксом. Это означает, что код полифилла не будет запускаться в Firefox. Полифил будет работать только в браузерах, которые вообще не поддерживают boxSizing, например IE7. - person Spudley; 15.05.2013

arrow_upward
0
arrow_downward

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

* {
    -webkit-box-sizing: border-box; /* Webkit browsers chrome/safari */
    -moz-box-sizing: border-box; /* Firefox */
    box-sizing: border-box;
}

ПРИМЕЧАНИЕ. Box-sizing поддерживается в IE 6 и более ранних версиях в специальном режиме.

person Khalid Lafi    schedule 15.05.2013
comment
box-sizing поддерживается в IE 6 и более ранних версиях в специальном режиме. Нет. - person BoltClock; 15.05.2013