Как вы обрабатываете специфичные для браузера .js и .css

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

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

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

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

Не писать их?

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

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

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

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

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

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

Я использую встроенные функции jQuery для фактического обнаружения:

jQuery.each(jQuery.browser, function(i, val) {});

Что касается организации, это будет зависеть от вашего приложения. Я думаю, что лучше всего было бы поместить это в код инициализации, а затем использовать обнаружение там, где оно вам нужно. У меня все еще есть проблемы, когда мне иногда приходится обнаруживать Explorer. Например, при использовании jQuery я обнаружил, что функции parent () и next () иногда имеют разные значения в проводнике по сравнению с Firefox.

В Internet Explorer есть условные конструкции вроде

<!--[if IE]>
<link rel = "stylesheet" type = "text/css" href = "ie.css" />
<![endif]-->

Это позволит вам использовать определенные таблицы стилей и JavaScript только для IE. Я считаю, что это крайнее средство, если нет соответствующих стандартам способов решения проблемы.

Используйте то, что известно как «обнаружение функции».

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

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

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

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

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

jQuery http://jquery.com/

Додзё http://www.dojotoolkit.org/

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

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

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

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

Что касается Javascript; как уже было сказано, используйте свой любимый JS Framework ...

У условных комментариев 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.)

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

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

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

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

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

Я думаю, что условные комментарии отлично подходят для таблиц стилей, но их также можно использовать для 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-Equiv не проверяет стандарты W3C, но это очень полезный тег, который был принят, в частности, домашними страницами Google и Microsoft. Я думаю, это только потому, что W3C немного отстает в принятии этого решения.