Модернизатор Polyfill против Префиксальный CSS3

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

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

мне интересно, если Префиксальные элементы теперь избыточны как polyfill отменяет их, или если есть еще польза от них и т.д.?

источник

2013-05-15 Henry Quekett

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

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

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

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

источник

2013-05-15 15:05:16 Spudley

Таким образом, вы не видите необходимости добавлять условный оператор в polyfill для IE, поскольку он будет подбираться только тогда, когда это необходимо (браузер не поддерживает какой-либо скрежет?) И не должен сильно влиять на производительность сайта когда браузер поддерживает коробку. –

Правильно. Для браузеров, поддерживающих «размер окна», ударное воздействие будет минимальным. Он должен будет загрузить Modernizr (но вы все равно это делаете, правда?), И он должен будет выполнить тест Modernizr, но это довольно легкий, поэтому не так сильно. Вы можете сделать его нулевым воздействием на другие браузеры, используя условные комментарии вместо теста modernizr, но разница действительно не будет такой. – Spudley

действительно Модернизатор уже загружен, когда вы говорите, что для браузеров, поддерживающих размер окна, это включает сафари и firefox и т. Д., Используя префиксные стили. То, что я пытаюсь получить так же, как это переопределение префиксов moz и webkit и использование JS polyfill, например, firefox в некоторых случаях не поддерживает тег box-size, сам по себе, но явно поддерживает префиксные стили, так что флаг JS как без коробки! извините, что я так запутался, что начал запутываться. –

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

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

ПРИМЕЧАНИЕ: размер окна поддерживается в IE 6 и ранее в режиме quirks.

источник

2013-05-15 11:59:45

«коробчатого проклейки поддерживается в IE 6 и более ранние в quirks ". № – BoltClock

Модернизатор Polyfill против Префиксальный CSS3

ответ

Смежные вопросы