Каковы хронологические шаги по созданию сайта, совместимого с перекрестным браузером?

Я работаю над своим первым проектом, который требует, чтобы я беспокоился о совместимости с браузером. Поскольку это мой первый раз, я не знаю, как закончить проект. Меня особенно беспокоит IE. Должен ли я завершить свой проект в более грациозном браузере, а затем взломать его для работы в IE или мне нужно одновременно создать мою программу в обеих средах?

Ответ 1

Сначала создайте свой сайт для работы в браузерах стандартов. Я всегда начинаю с Firefox, даже когда я развиваюсь в моей компании Intranet (где каждый использует IE). Это позволит вам сосредоточиться на правильной настройке вашей разметки и CSS. Это самое главное.

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

Затем, как только вы уверены, что ваш сайт выглядит правильно (валидаторы - ваш друг!), попробуйте его в версиях IE вы хотите поддержать. Чтобы ваш макет выглядел ОК в IE, я настоятельно рекомендую использовать разные таблицы стилей для каждой версии IE, используя условные комментарии.

Кроме того, вы должны заметить, что многие другие были в том же сценарии, что и вы сами, и есть довольно много справки. Одним из популярных способов заставить IE вести себя является ie-7.js project.

Наконец, помните о главных ошибках IE, таких как:

IE6 Box Model Bug
прозрачные PNG-изображения IE6 (я использовал это исправление в прошлом)

Ответ 2

Несколько советов:

Код для стандартов — Начните с того, что то, что вы только что создали, работает в Firefox и Chrome, а затем проверьте его в IE. Я обычно проверю это в Safari. Всегда лучше убедиться, что ваша разметка/код работает в более стандартном браузере.
Подтвердить раннее, часто проверять — Вы не хотите, чтобы ваш дизайн выглядел идеально в одном браузере, узнайте, что он сломан в другом, обнаружите, что для исправления сломанного макета вам необходимо исправить некоторые недопустимые HTML/CSS, только чтобы найти, что теперь первый браузер выглядит неправильно.
Прогрессивное улучшение — будет вашим другом. Начните с базового, с простым HTML и простым CSS, и без JavaScript. Повторите подсказки # 1 и # 2, затем перейдите к более сложным стилям и макете. Contiue этот итеративный процесс, пока вы не довольны дизайном во всех браузерах. Только тогда вы должны рассмотреть JavaScript для полировки сайта.
Проверять каждый браузер часто — Не разрабатывайте весь сайт в одном совместимом браузере, таком как Firefox, а затем решайте "видеть, что сломано" в IE. Если у вас сложный, динамичный веб-сайт, в Internet Explorer может быть много проблем. Попытка расшифровать каждый, когда они сложены друг с другом, - это кошмар.
Reset Таблица стилей — Как отметил @Eir в комментариях, найдите хорошую таблицу стилей reset. Несмотря на то, что у них из-за неловкости для некоторых людей, я считаю, что каждый браузер на одном уровне с самого начала очень помогает.
Использовать Framework — Я нахожу CSS Frameworks чрезмерным, но некоторые люди клянутся ими, поэтому каждому свой. С другой стороны, как только вы перешли на этап разработки JavaScript, я настоятельно рекомендую использовать jQuery или MooTools. Они очень сосредоточены на обход противоречий между браузерами.
Пусть JSLint повреждает ваши чувства — Даже при использовании рамки JavaScript существуют определенные стандарты кодирования, которым JSLint поможет вам соответствовать. Некоторые из вариантов немного чересчур строгие, но я обещаю, что если вы очистите свои скрипты с помощью этого инструмента достаточно часто во время разработки, вы почти никогда не столкнетесь с теми странными временами, когда все, кажется, работает во всех браузерах кроме IE.

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

Селектор браузера CSS — редко вам понадобится это, но если все остальное терпит неудачу, это будет более холодным, чем использование отдельной таблицы стилей только для одного браузера (я презираю условные комментарии). Он в основном добавляет классы в тэг <html>, поэтому вы можете делать следующие вещи в своей основной таблице стилей: .ie7 #header {/*stylese here for IE7 only*/}. Он поддерживает множество браузеров во многих операционных системах. И это быстро.
Browsershots — Ничто не сравнится с реальностью, но если вы не можете установить набор браузеров, это и другие инструменты, подобные этому, могут помочь.
IE6 CSS Fixer — Я полностью отказываюсь отлаживать свои проекты в IE6. Я принуждал свою компанию (через многочисленные встречи с ИТ и руководством), чтобы отказаться от поддержки (слава богу). Это просто контрпродуктивно тратить столько времени, что вынуждает эту кучу гем... Во всяком случае, если вы не похожи на меня и вам нужно поддерживать IE6, этот инструмент может помочь.

Ответ 3

Также вам следует сосредоточиться на сбросе css, например this

Ответ 4

OOoooo, хороший вопрос:

вот мой прием:

Решите, какие браузеры вы поддерживаете. Я предлагаю IE 7 + 8, FF, Chrome и Safari как в порядке важности. (поддерживайте только IE6, если вам абсолютно необходимо!). Это помогает, если вы знаете свою базу данных здесь.
Использовать css reset. Различные браузеры имеют разные стили по умолчанию. css reset дает вам согласованную базу.
Держите свою разметку максимально простой. Следуйте стандартам (и см. Прогрессивное улучшение ответа Стивена).
Проверяйте каждый шаг на пути к целевым браузерам. Таким образом, вы можете сразу исправить проблемы. http://crossbrowsertesting.com/ - лучший ресурс для этого, но есть и бесплатные скриншоты.
Избегайте хаков как можно больше. В настоящее время большинство проблем с перекрестным браузером можно решить, не прибегая к хакам.
Задавайте вопросы здесь, когда вы застреваете. Если это ваш первый проект, связанный с браузерами, вы получите недоумение от несоответствий. Мы все сталкиваемся с этими проблемами и рады помочь.
Будьте в курсе того, что веб-страницы не будут выглядеть одинаково во всех браузерах. (еще раз, см. прогрессивное улучшение).

Коды удачи!

Ответ 5

Сначала я разрабатываю для Firefox, а затем обрабатываю IE buggery. Редко я "взламываю" его, скорее найду что-то, что работает в обоих, или в худшем случае использует условные комментарии IE. Только одно предпочтение кодера. Всегда хорошая идея для тестирования с Safari тоже.

Двумя большими преимуществами Firefox являются: Консоль ошибок и плагин Firebug.

Ответ 6

существует много полезных инструментов, которые облегчают жизнь для вас, например, css framework, называемый blueprint, он уже настроен для каждого конкретного браузера, чтобы получить одинаковый результат во всех браузерах. И используя jquery, так как ваша инфраструктура javascript добавляет дополнительную страховку, что вы будете работать в большинстве браузеров.

но помните, что нет такой вещи, как 100% совместимость с браузером для всех браузеров и всех версий в мире.

Ответ 7

В теории лучше всего было бы разработать для всех браузеров одновременно, всегда тестируя для каждого браузера...

Реально, что редко бывает... Я обычно разрабатываю/тестирую с помощью firefox. когда я вводя сложный javascript или css, я проверяю, что... этот инструмент невероятно удобен для проверки всех версий сразу... google ie tester.

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

Кроме того, обеспечение того, чтобы весь ваш код был действительным, является не только хорошей практикой, но и помогает выявить проблемы с перекрестным браузером. google w3schools validator:)

Использование javascript-библиотек, таких как jquery, также помогает в совместимости с несколькими браузерами, а некоторые даже поставляются с библиотеками css. Эти библиотеки предназначены для быстрых и надежных функций, которые, как правило, гарантируют кросс-браузер.

Наконец, перед запуском используйте список запуска, чтобы проверить, что все работает: http://lite.launchlist.net/

Надеюсь, что все это имеет смысл и поможет с вашим первым проектом:)