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

Question

Недавно я боролся с: странными границами / полями таблиц, выравниванием div, проблемами позиционирования, и у меня был ночной кошмар с поддержкой Internet Explorer 6. Я знаю, что многие из вас, как и я, вынуждены поддерживать, IE6 Браузеры на базе IE8, Web-Kit и Mozilla.

Мои вопросы к вам:

1. Какие важные правила вы используете заранее, когда разрабатываете для нескольких браузеров, чтобы сэкономить ваше время?
2. Как вы не позволяете себе писать несовместимые теги?
3. Каков наилучший способ избежать взлома вашего кода?
4. Где вы найдете исследование совместимости браузера, используете ли вы какие-либо инструменты?
5. Наконец, когда вы пересекаете линию / где вы ее рисуете?

Answer 1

1. Обычно я сначала пишу код для Firefox (или Safari). Это обычно дает лучшие результаты в браузерах, отличных от IE. Затем я нажал IE8, IE7, а затем, наконец, IE6.

2. Знайте, какие теги доставят вам неприятности, и избегайте их использования любой ценой. Это все о том, как знакомы с проблемами каждого браузера.

3. Не используйте хаки. Используйте условные комментарии IE. Используя условные комментарии, вы можете загрузить одну таблицу стилей для всех других браузеров, одну для IE8, одну для IE7 и еще одну для IE6 (если вам нужна такая степень детализации для решения ваших проблем). Это даст вам хорошие чистые таблицы стилей с минимальным количеством хакерских привычек.

4. LitmusApp

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

Answer 2

Я бы сказал, чтобы начать с кода, соответствующего стандартам. Всегда проверяйте в совместимом со стандартами браузере, например, Firefox или Safari / Chrome. Я предпочитаю Firefox для аддонов (таких как Firebug, HTTPFox и панель веб-разработки). Затем продолжайте свой путь ВНИЗ (и под словом я имею в виду все версии Internet Explorer).

Старайтесь избегать временных исправлений для каждой ситуации или сайта и максимально обобщайте код. Например, как сказал Джастин Неснер в своем ответе, использование условных комментариев и общей таблицы стилей для IE6, 7 и 8 избавит вас от большинства проблем с макетом и форматированием, не используя (слишком много) хаков. Вы можете повторно использовать таблицы стилей IE и просто разместить в нем код, специфичный для сайта.

Используйте платформу для тестирования, такую ​​как browsershots, netrenderder или LitmusApp, чтобы вы могли видеть, что ваш сайт делает во многих версиях браузеров. Глубокое изучение совместимости с браузерами заставит вас задуматься, но любой отличный ресурс, такой как quirksmode.org, может дать вам информацию о маленьких комнатах несовместимости, так что вы не сходите с ума и не лысите.

Что касается того, когда я пересекаю / рисую линию, то это 99% проблем с Internet Explorer, и если он достаточно близок к тому, чтобы выглядеть как FF или Chrome / Safari, я готов. Почти как искусство, это не когда вы закончите добавлять, а когда вы закончите удалять дерьмо, которое вы не хотите видеть; вот когда ты знаешь, что это сделано.

Answer 3

Я говорю, что вы ничего не можете сделать, кроме как придерживаться основ:

• Кодекс, соответствующий стандартам HTML
• Проверять рано, проверять часто
• Для Javascript используйте фреймворк, такой как JQuery , Прототип или Dojo
• Выберите один «основной браузер», который вы оптимизируете для первого.

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

Считаю чрезвычайно полезным создать 100% правильный код W3C. Не потому, что это имеет значение - большая часть того, на что жалуется валидатор W3C, не будет иметь никакого значения в реальных браузерах - но потому, что возможность запустить проверку, получить зеленый свет и знать, что с этой целью все хорошо, очень полезна.

Чтобы протестировать несколько экземпляров IE одновременно, вы можете использовать IETester . Он не идеален - условные комментарии не будут работать в нем, например, - но в основном его можно использовать в повседневной работе по разработке.

Answer 4

См. Также тестовый набор CSS 2.1

Answer 5

Используйте строго совместимую разметку HTML и CSS и не используйте собственные расширения браузера для CSS.

IE 6 неправильно реализует CSS, начиная с абсолютного незнания блочной модели.

IE 8, с другой стороны, имеет набор тестов, чтобы доказать, что они правильно реализуют каждый аспект CSS 2.1 (что не делает ни один другой браузер).

Разработайте для Firefox, как указано выше, и примите решение о поддержке IE 6 и 7 или нет. Честно говоря, я больше не разрабатываю отдельные таблицы стилей для этих браузеров. У них недостаточно рыночной доли (по крайней мере, на моем сайте.)

Учитывая интерес к HTML 5 и отсутствие интереса к XHTML 2, разработайте HTML 4.01 Строгий и придерживайтесь следующих правил: (которые рекомендуются в HTML 4 и требуются в HTML 5 и XHTML 1.1)

1. все элементы и имена атрибутов должны отображаться в нижнем регистре,
2. все значения атрибутов должны быть заключены в кавычки,
3. непустые элементы требуют закрывающего тега,
4. минимизация атрибутов не допускается,
5. В строгом режиме все встроенные элементы должны содержаться в элементе блока.

Зачем изучать HTML 4.01 Строго со ссылками.

Answer 6

использует тип документа, например, html 4.1 транзитный, который делает ie6 рендеринга в стандартном режиме. Вы также можете использовать таблицу стилей сброса.

Answer 7

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

Кодирование:

Прежде всего, я обнаружил, что системы столбцов , похоже, сокращают количество написанных HTML и CSS. Они также очень кроссбраузерны. Хотя их много, я обнаружил, что 960 Grid System работает лучше всего для меня: http://960.gs

Далее я обнаружил, что у Ruby есть классное расширение для CSS, которое называется LESS . Он был перенесен на .NET и может быть найден по адресу: http://www.dotlesscss.com. Он прост в настройке и очень эффективен при правильном использовании.

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

Тестирование браузеров:

А вот и интересная часть. Без какого-либо программного обеспечения я обнаружил, что тестирование моих приложений на Internet Explorer 6 и Safari одновременно помогло увеличить скорость моей разработки. Firebug и Firefox фактически заставляют меня развиваться вокруг проблем , и это то, что вызывает много лишнего кода. Разрабатывая простой код для IE6 и Safari, я обнаружил, что вернуться к Firefox и IE8 невероятно просто. Большинство проблем, которые у меня были, были с шириной границ, что было легко исправить.

Лучшим программным решением, которое я нашел, которое было доступно для меня, было Expression Web с Superpreview, если вы когда-нибудь задумывались, почему Microsoft выпускает несколько версий IE, возможно, поэтому они могут продавать вам такие инструменты.

Во всяком случае, это мои 2 цента на данный момент.