Вопрос по – Каковы лучшие практики для кросс-браузерных веб-сайтов? [закрыто]

39

(Мне бы хотелось, чтобы это была окончательная вики сообщества. Я добавил это из своего собственного ответа наэтот вопрос.)

Specify Everything

Многие межбраузерные проблемы сводятся к этому: вы что-то не указали, а разные браузеры делают разные предположения. Следовательно:

Declare a valid doctype

Ваш тип документа сообщает браузеру, какие правила вы будете использовать в своем коде. Если вы не укажете, браузер должен угадывать, а разные браузеры будут угадывать по-разному.

По моему опыту, "строгий" doctype заставляет IE вести себя лучше (включает такие вещи, как CSS: наведите курсор на div в IE7).

Эта статья дает хорошее представление о типах документов.

Use Web standards

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

Validate your HTML and CSS

Вам не нужно делать все идеально, но проверка - это хорошая обратная связь. КакДжефф сказал:

Knowing the rules and boundaries helps you define what you're doing, and gives you legitimate ammunition for agreeing or disagreeing. You can make an informed choice, instead of a random "I just do this and it works" one.

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

Consider a CSS Reset

Различные браузеры предполагают разные базовые правила CSS. Вы можете помочь им всем действовать одинаково, явно сгладив различия. Эрик Мейер, который написалCSS: полное руководство, используетэтот сброс, Еще один популярный выборYUI Сброс CSS.

Use a Javascript library for DOM interactions

Всякий раз, когда вашему Javascript необходимо работать с элементами на вашей странице, лучше всего использовать такие библиотеки, как jQuery, Prototype или MooTools. Эти библиотеки используются многими тысячами разработчиков, и они принимают большинство несоответствий между браузерами & apos; интерпретации Javascript, разберитесь с ними внутри и предоставьте вам последовательный набор команд, которые просто работают. Попытка найти и обойти все эти несоответствия самостоятельно - пустая трата времени и может привести к ошибкам.

Test in multiple browsers, deal with IE last

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

Quirksmode.com это хорошее место для поиска случайных отличий браузера.

Browsershots.org может помочь показать, как ваша страница будет отображаться в ассортименте браузеров и операционных систем.

Fail Gracefully

Ни один сайт не будет выглядеть идеально в каждом существующем браузере. Если у пользователя нет Flash, Javascript или расширенного CSS и т. Д., Вы все равно хотите, чтобы ваш сайт работал. Дизайн с учетом этого:

Check the bare HTML

Попробуйте загрузить ваш сайт с чистым HTML - без стилей, без скриптов. Доступны ли пункты меню? Первичный контент предшествует вторичному контенту? Можно ли использовать сайт, даже если он уродлив?

Consider test-driven progressive enhancement

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

Ваш Ответ

7   ответов
-1

используяGoogle Web Toolkit, С GWT вы пишете весь код на языке программирования Java, который затем GWT кросс-компилирует в оптимизированный JavaScript, который автоматически работает во всех основных браузерах.

Как лучше всего программировать пользовательский интерфейс с помощью Google Web Toolkit?
@Metro Smurf: Это определенно решает проблему кросс-браузерной совместимости JavaScript, не так ли?
В чем преимущество этого кросс-браузерного фреймворка Javascript? Nathan Long
Согласились, что кросс-браузерная совместимость с JS является лучшей практикой. Однако я не понимаю, как использовать Google Web Toolkit. Вероятно, разница во мнениях.
«Лучшая практика - это превосходный метод или инновационная практика, которая способствует повышению производительности». Программирование на Java, которое компилируется в JS, является превосходным методом, а GWT является инструментом, который включает этот метод.
13

как jQuery, чтобы абстрагироваться от различий в DOM, AJAX и JavaScript.

Не только делать AJAX. Я бы сказал, используйте один, даже если вы не будете делать асинхронные вызовы на сервер.
@ Винко - Ты прав. Я отредактировал свой ответ, чтобы отразить ваш комментарий.
И конкретно использовать jQuery над «библиотекой, такой как jQuery», благодаря ее совместным усилиям по совместимости браузеров.
0

use a strict doctype, С HTML или XHTML все в порядке, но использование строгого типа документа удаляет практически все особенности браузера, особенно в IE7 +.

Imagine you opened a paragraph tag and never closed it. If you then open a list tag, did you mean it to be inside the paragraph or not?

На самом деле вы не можете поместить любые другие теги блока в<p> тег, поэтому спецификация позволяет вам опускать закрывающий тег. Если вы начинаете список без закрытия абзаца, то абзац неявно закрывается. И валидатор не будет жаловаться.

Это тебе не сказатьshouldn't закрывать теги, потому что, как правило, облегчает просмотр кода (вам не нужно помнить вышеупомянутые правила).

1

You can get one here...

Validate your code by w3c ...

You can validate your code here by page link or simply copy paste page element

-1

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

8

что вы сохраняете HTML, CSS и Javascript в отдельных файлах. Смешивание структуры, представления и поведения в вашем HTML-файле только затрудняет поиск и устранение проблем.

это ОБЯЗАТЕЛЬНО!
2

Debugging/stepping through your JS. Seeing how your stylesheets are being interpreted and hacking them up on the fly to see how to fix your problem. See how many calls you are making for remote resources and how long they take. Profile your code.

Chrome и IE8 имеют схожие встроенные инструменты, которые можно использовать для одной и той же вещи.

Opera и Safari (и IE) имеютFirebug Lite.

IE8 имеет необязательную «панель инструментов разработчика Internet Explorer» ИнструментLink Here это может быть установлено с ним. Более продвинутая версия этого инструмента стандартно поставляется с браузерами IE, такими как IE11. Вы просто нажали F12, и он запустится.
Кто-нибудь использовал упомянутые инструменты IE8 и Chrome? Как они называются и что вы о них думаете? Nathan Long

Похожие вопросы