Как вы справляетесь с браузером .js и .css?

Question

Это не новая тема, но мне любопытно, как все обрабатывают .js или .css, которые зависят от браузера.

Есть ли у вас .js функции с условиями if/else или у вас есть отдельные файлы для каждого браузера?

Действительно ли это в наши дни является проблемой с текущими версиями каждого из популярных браузеров?

Answer 1

Это очень реальная проблема. В основном только из-за IE6. Вы можете обрабатывать специфичные для IE6 CSS, используя условные комментарии .

Для JavaScript я бы рекомендовал использовать библиотеку, которая уже выполнила большую часть работы по абстрагированию от различий в браузерах. JQuery действительно хорош в этом отношении.

Answer 2

Не пишешь их?

Честно говоря, специфичный для браузера CSS не является необходимым для большинства макетов - если это так, рассмотрите возможность изменения макета. Что происходит, когда выходит следующий браузер, который нуждается в другом варианте? Тьфу. Если у вас есть что-то, что вам действительно нужно включить, и кажется, что оно не работает в одном браузере, задайте вопрос здесь! Есть много великих умов.

Для JS существует несколько платформ, которые заботятся о реализации кросс-браузерного поведения, например jQuery (используется на этом сайте).

Answer 3

У условных комментариев IE есть обратная сторона дополнительной загрузки файла. Я предпочитаю использовать несколько известных CSS-фильтров:

.myClass {
  color: red;     // Non-IE browsers will use this one
  *color: blue;   // IE7 will see this one
  _color: green;  // IE6 and below will see this one
}

(Да, это не будет подтверждено, но в последний раз я проверял, наши деньги поступают от пользователей и рекламодателей, а не от W3C.)

Answer 4

Лично я в основном использовал условные комментарии, как отмечено выше.

В подкасте Stackoverflow Джефф указал, что Stackoverflow использует CSS Reset * от Yahoo, о котором я никогда не слышал. Если он делает то, что рекламируется, кажется, это разрешит многие (большинство? Все?) Различия CSS на основе браузера; По крайней мере, я не вижу ничего, указывающего на условное комментирование в html-источнике Stackoverflow. Я определенно собираюсь поиграть с ним в моем следующем веб-проекте и хотел бы услышать чей-либо опыт с ним.

Насколько Javascript; как уже говорилось, используйте ваш любимый JS Framework ...

Answer 5

Используйте так называемое " обнаружение функции ".

Например, если вы хотите использовать document.getElementsByClassName, сделайте следующее:

if(document.getElementsByClassName) {
    // do something with document.getElementsByClassName
} else {
    // find an alternative
}

Что касается CSS, вы должны быть хороши, если используете стандарты, кроме IE. В IE используйте условные комментарии - это метод , рекомендованный парнями из Microsoft .

Answer 6

Это все еще проблема в наши дни, потому что CSS не работает во всех браузерах (в основном IE6 / 7).

Мне никогда не требовался отдельный файл JS для всего, над чем я работал. Если вы используете библиотеку JS (jQuery, YUI, Prototype и т. Д.), О 99% несовместимости вашего браузера позаботятся.

Что касается CSS, я предпочитаю помещать свои исправления для браузера в один и тот же файл CSS. Это намного облегчает отладку, когда вам нужно только искать в одном месте свой стиль. Вы можете потратить часы на отладку чего-либо, только чтобы выяснить, что ошибка вызвана вашей 10-строчной таблицей стилей для браузера.

С точки зрения производительности также лучше иметь только 1 файл CSS и 1 файл JS.

Answer 7

Как if / else, так и отдельные файлы, это зависит от сложности сайта.

Определенно все еще существуют несовместимости между браузерами, поэтому рассмотрите возможность использования JavaScript Framework, который сделает всю грязную работу за вас ...

JQuery http://jquery.com/

Dojo http://www.dojotoolkit.org/

Script.aculo.us http://script.aculo.us/

Прототип http://prototypejs.org/

Answer 8

Я использую фреймворк для обработки 99% содержимого xbrowser.

Для всего, что не описано в фреймворке, я бы использовал if / else или try / catch.

Answer 9

Я думаю, что условные комментарии отлично подходят для таблиц стилей, но их также можно использовать для javascript / jquery.

Поскольку .browser устарел и теперь удаляется из jquery 1.9 (?) С помощью условных комментариев, это довольно хороший способ создания JavaScript для конкретного браузера.

вот мой быстрый пример:

1 - разместить условный комментарий где-нибудь на странице. Я лично поставил это сразу после тега body. Я видел, как люди используют его для реального тела или html, но это возвращает кнопку просмотра сравнимости IE8 / 9/10, и вы хотите избежать этого, если это возможно.

<!--[if lt IE 9]><div class="ie8-and-below"></div><![endif]-->

2 - затем используйте jquery, чтобы проверить, существует ли наш специфический для IE контейнер.

if ($("div").hasClass("ie8-and-below")) {
        //do you JS for IE 8 and below only
    }

3 - (необязательно) установите целевую сопоставимость и укажите что-то вроде:

<meta http-equiv="X-UA-Compatible" content="IE=10" />

сразу после тега <head>. (это должно быть самое первое после открытия <head>). Это отключит кнопку совместимости в ie10 / 9/8, если остальная часть вашей страницы будет правильно закодирована. Это хорошая защита от сбоев, если у вас есть разделы, требующие режима сравнимости, другими способами вы можете запустить JS, если используете более новый браузер в совместимости.

Примечание. На момент публикации этого поста http-эквивалент не проверял стандарты W3C, но это очень полезный тег, который был принят домашними страницами Google и Microsoft, среди прочего. Я думаю, что это только потому, что W3C немного отстает в принятии его.

Answer 10

Если вы занимаетесь разработкой ASP.Net, вы также можете использовать Фильтрация устройств (о которой я только что узнал здесь, о переполнении стека сегодня).

Вы можете использовать его в директивах страницы для ссылки на различные обложки, главные страницы или файлы CSS, но вы также можете использовать атрибуты управления сервером ASP.Net, например:

<asp:Label runat="server" ID="labelText" 
   ie:CssClass="IeLabelClass" 
   mozilla:CssClass="FirefoxLabelClass" 
   CssClass="GenericLabelClass" /> 

Этот пример, конечно, несколько экстремальный, но он позволяет обойти некоторые неприятные несоответствия браузера при использовании только одного файла CSS.

Я также поддерживаю идею использования файла сброса CSS и определенно использую библиотеку, такую ​​как jQuery, вместо того, чтобы заново изобретать колесо для событий JavaScript и DOM.