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

Question

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

Answer 1

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

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

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

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

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

• IE6 Box Model Bug
• IE6 прозрачный PNG изображений (я использовал this fix в прошлом)

Answer 2

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

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

Answer 3

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

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

Answer 4

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

1. Код Стандартам — Start путем обеспечения того, что вы только что разработали работы в Firefox и Chrome, а затем проверить его в IE. Я обычно проверю это в Safari. Всегда лучше убедиться, что ваша разметка/код работает в более стандартном браузере.
2. Validate Early, Validate Часто — Вы не хотите, чтобы ваш дизайн выглядел идеально в одном браузере, выясните, что он сломан в другом, обнаружите, что исправление сломанного макета вам необходимо для исправления некорректного HTML/CSS, только чтобы найти, что теперь первый браузер выглядит неправильно.
3. Прогрессивное развитие — будет вашим другом. Начните с базового, с простым HTML и простым CSS, и без JavaScript. Повторите подсказки # 1 и # 2, затем перейдите к более сложным стилям и макете. Contiue этот итеративный процесс, пока вы не довольны дизайном во всех браузерах. Только тогда вы должны рассмотреть JavaScript для полировки сайта.
4. Проверьте каждый браузер часто — Не разрабатывайте весь сайт в одном совместимом браузере, таком как Firefox, а затем решайте «увидеть, что сломано» в IE. Если у вас сложный, динамичный веб-сайт, в Internet Explorer может быть много проблем. Попытка расшифровать каждый, когда они сложены друг на друга, - это кошмар.
5. Сбросить таблицу стилей — Как @Eir, упомянутые в комментариях, найдите хорошую таблицу стилей сброса. Хотя, у них есть fallen out of favor для некоторых людей, я считаю, что каждый браузер на одной и той же основе с самого начала очень помогает.
6. Использование рамок — Я считаю, что CSS-рамки чрезмерны, но некоторые люди клянутся ими, поэтому каждому свой. С другой стороны, как только вы перешли на этап разработки JavaScript, я настоятельно рекомендую использовать jQuery или MooTools. Они очень сосредоточены на обход противоречий между браузерами.
7. Позвольте JSLint обидеть ваши чувства — Даже при использовании рамки JavaScript существуют определенные стандарты кодирования, которым JSLint поможет вам соответствовать. Некоторые из вариантов немного чересчур строгие, но я обещаю, что если вы очистите свои скрипты с помощью этого инструмента достаточно часто во время разработки, вы будете почти никогда не сталкивайтесь с теми странными временами, когда все работает во всех браузерах кроме IE.

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

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

Answer 5

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

вот мое взятие:

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

Коды удачи!

Answer 6

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

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

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

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

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

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

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

Answer 7

Кроме того, вы должны сосредоточиться на сброс CSS, как this