Какие основные советы следует соблюдать при разработке веб-страниц (html / css / javascript) для обеспечения максимальной совместимости со всеми браузерами?

Question

какие основные советы следует соблюдать на веб-страницах дизайна (html / css / javascript) для обеспечения максимальной совместимости с большинством браузеров (IE-firefox-opera-chrome-safari)?

спасибо

Answer 1

• Проверяйте часто и подавляйте все ошибки проверки к тому времени, когда вы делаете публичный выпуск. В конце концов, цель проверки состоит в том, чтобы проанализировать html как совместимый со стандартами браузер, а затем избежать ошибок, которые найдет парсер браузера.

• Применение методов прогрессивного улучшения . Часто это означает перемещение некоторых сложностей динамических страниц на серверную часть (например, php, django, что у вас есть), чтобы вы могли иметь сложную функциональность, которая не нарушается в одной из тысяч различных клиентских сред, в которых JavaScript страницы будет работать. jQuery отлично подходит для сужения фокуса разработки javascript в направлении улучшения возможностей вместо открытых возможностей в javascript, а также для обеспечения кросс-браузерной совместимости.

• IE - протестируйте хотя бы одну живую версию IE 7 или 8. К сожалению, в действительности нет никакого способа обойти это, потому что даже IE8 ведет себя плохо, как никакой другой браузер. Если возможно, ограничьте вашу цель поддержки IE6 html / css (то есть не обещайте поддержку расширенных возможностей пользователя через javascript в ie6). Если возможно, откажитесь от поддержки IE 5.5 и ниже.

Answer 2

Для Javascript используйте библиотеки, которые предназначены для того, чтобы быть независимыми от платформы (то есть: JQuery, Prototype). Не все будет, но это сделает вашу жизнь намного проще.

Для CSS, я бы сказал, следуйте стандартам, но IE имеет тенденцию вызывать проблемы по всем направлениям.

Это означает, что вам нужно тестировать, и тестировать часто. Selenium отлично подходит для автоматического функционального тестирования и работает практически со всеми браузерами. Мы используем сервер Selenium RC на компьютере с Windows для тестирования IE и Firefox, которые затем контролируются нашими стандартными тестами Java JUnit.

Answer 3

Не усложняйте.

Чем проще ваша разметка, CSS и JavaScript, тем легче будет отследить несовместимости. Постарайтесь ограничить себя CSS1 настолько, насколько это возможно. Используйте более современные функции CSS2 / 3 только тогда, когда нет более простого способа выполнить вашу задачу.

Не используйте таблицы, они просто добавляют дополнительную сложность. Использование семантической разметки не только обеспечивает удобство сопровождения, но и дает вам лучшую поддержку кросс-браузеров, если все сделано правильно.

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

Использовать инфраструктуру JavaScript. Разработчики фреймворка сгладили большинство кросс-браузерных ошибок для вас. Я рекомендую jQuery, но вы можете выбрать любой фреймворк, с которым ваши разработчики чувствуют себя комфортно. Мой совет:

• Использование инфраструктуры JavaScript, которая не изменяет прототипы собственных объектов (как это делает Prototype JS)
• Не вводит много глобальных переменных. Большинство фреймворков следуют этому правилу.

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

Answer 4

Одна из стратегий, которую я использую, состоит в том, чтобы запустить свой CSS с набором правил, которые исключают все.Каждый браузер может иметь разные значения для атрибутов элемента, поэтому может быть полезно обеспечить, чтобы все было согласовано с самого начала.Вот пример reset.css http://meyerweb.com/eric/tools/css/reset/

Answer 5

Взгляните на эту замечательную статью: Учебник по совместимости браузера

Помните: что-то не будет работать только для определенного браузера (возможно, левая пунктирная рамка не будет отображаться в Chrome). Не расстраивайся, если сможешь! :) Кросс-совместимость - это искусство, которое занимает много времени.