Ответ 1
Используйте библиотеку, подобную абстракции jQuery, от различий в DOM, AJAX и JavaScript.
Каковы наилучшие методы для веб-сайтов с несколькими браузерами?
(Я бы хотел, чтобы это была окончательная вики сообщества. Я выложил ее из своего собственного ответа на этот вопрос.)
Указать все
Множество проблем с несколькими браузерами сводится к следующему: вы не указали что-то, и разные браузеры делают разные предположения. Поэтому:
Объявить действительный doctype
Ваш doctype сообщает браузеру, какие правила вы будете использовать в своем коде. Если вы не укажете, браузер должен угадать, и разные браузеры будут угадывать иначе.
По моему опыту, "строгий" тип doctich делает поведение IE лучше (включает такие вещи, как CSS: селектор hover на div в IE7).
Эта статья дает хорошее представление о доктринах.
Использовать веб-стандарты
Избегайте разметки, зависящей от браузера, или используйте ее только тогда, когда ее сбой в других браузерах не будет значительным для работы сайта.
Подтвердите свой HTML и CSS
Вам не нужно все совершенствовать, но валидация - хорошая обратная связь. Как Джефф сказал:
Знание правил и границ помогает определить, что вы делаете, и дает вам законные боеприпасы для согласования или несогласия. Вы можете сделать осознанный выбор, вместо случайного "Я просто делаю это, и он работает".
Представьте, что вы открыли тег абзаца и никогда не закрывали его. Если затем открыть тег списка, вы имели в виду, что он находится внутри абзаца или нет? Проверка поможет вам поймать это, закрыть тег и устранить двусмысленность.
Рассмотрим CSS Reset
Различные браузеры предполагают различные базовые правила CSS. Вы можете помочь им действовать одинаково, явно скрывая различия. Эрик Мейер, который написал CSS: The Definitive Guide, использует this Reset. Другой популярный выбор - YUI Reset CSS.
Использовать Javascript-библиотеку для взаимодействия с DOM
Всякий раз, когда ваш Javascript должен работать с элементами на вашей странице, лучше всего использовать библиотеку, такую как jQuery, Prototype или MooTools. Эти библиотеки используются многими тысячами разработчиков, и они берут большинство несоответствий между интерпретацией браузерами Javascript, общаются с ними внутри и дают вам последовательный набор команд, которые просто работают. Попытка найти и обойти все эти несоответствия - это пустая трата времени и, вероятно, создание ошибок.
Тест в нескольких браузерах, обратитесь к IE последнему
Протестируйте в нескольких браузерах, когда вы идете. Как правило, вы обнаружите, что браузеры, отличные от IE, ведут себя аналогично, а IE - особый случай - особенно если вы следуете приведенному выше совету. При необходимости вы можете добавить IE-хаки в отдельную таблицу стилей и загружать ее только для пользователей IE.
Quirksmode.com - хорошее место для поиска случайных различий браузера.
Browsershots.org может помочь показать, как ваша страница будет отображаться в ассортименте браузеров и операционных систем.
Отказоустойчивость
Ни один сайт не будет выглядеть идеально в каждом браузере, который существует. Если у пользователя нет Flash, или Javascript, или расширенный CSS и т.д., Вы хотите, чтобы ваш сайт использовался в любом случае. С учетом этого:
Проверьте пустой HTML
Попробуйте загрузить свой сайт с помощью простого HTML - без стилей, без скриптов. Доступны ли опции меню? Предоставляет ли первичный контент вторичному контенту? Является ли сайт пригодным для использования, даже если он уродлив?
Рассмотрите прогрессивное улучшение, основанное на тестах
Описанный в в этой статье, этот метод использует javascript, чтобы проверить, обладает ли браузер определенной способностью, такой как поддержка данного свойства CSS, прежде чем использовать его на странице. Это не похоже на обнюхивание браузера, поскольку оно проверяет функции, а не конкретный браузер.
Ответы
Ответ 2
Убедитесь, что вы сохраняете HTML, CSS и Javascript в отдельных файлах настолько, насколько это возможно. Смешивание структуры, представления и поведения в вашем файле HTML просто затрудняет поиск и устранение проблем.
Ответ 3
Использовать Firebug в Firefox для:
- Отладка/переход через ваш JS.
- Увидев, как ваши таблицы стилей интерпретируются и взламывают их на лету, чтобы понять, как исправить вашу проблему.
- Посмотрите, сколько звонков вы делаете для удаленных ресурсов и сколько времени они берут.
- Профилируйте свой код.
Chrome и IE8 имеют встроенные аналогичные инструменты, которые можно использовать для одного и того же.
Opera и Safari (и IE) имеют Firebug Lite.
Ответ 4
Ответ 5
Мое правило №1 использует строгий doctype. HTML или XHTML в порядке, но использование строгого doctype удаляет почти все особенности браузера, особенно в IE7 +.
Представьте, что вы открыли тег абзаца и никогда не закрывали его. Если вы затем откроете тег списка, вы имели в виду, что он находится внутри абзаца или нет?
На самом деле вы не можете поместить какие-либо другие теги блоков внутри тега <p>, поэтому спецификация позволяет пропустить закрывающий тег. Если вы начинаете список без закрытия абзаца, то абзац неявно закрывается. И валидатор не будет жаловаться.
Это не означает, что вы не должны закрывать теги, потому что обычно код легче упростить (вам не нужно запоминать приведенные выше правила).
Ответ 6
Рассмотрите возможность программирования пользовательского интерфейса веб-сайта с помощью Google Web Toolkit. С GWT вы пишете весь код на языке программирования Java, который GWT затем перекрестно компилирует в оптимизированный JavaScript, который автоматически работает во всех основных браузерах.
Ответ 7
Я думаю, что использование передового опыта - это путь, прогрессивное совершенствование разрабатывается с учетом потребностей пользователя и должно выполняться со всеми дизайнерами. Я считаю, что много тестов в браузерах - хороший способ обеспечить отображение правильного контента, многие разработчики смотрят это.