Каков лучший метод для согласованной формы, функции между всеми веб-браузерами (включая Google Chrome)?

Question

Краткая версия: Какая самая чистая и удобная в использовании техника для последовательной презентации и функции AJAX во всех браузерах, используемых как веб-разработчиками, так и конечными пользователями веб-разработчиков?

• IE 6, 7, 8
• Firefox 2, 3
• Safari
• Google Chrome
• Opera

Длинная версия: я написал веб-приложение, предназначенное для других веб-разработчиков . Я хочу, чтобы мое приложение поддерживало основные веб-браузеры (плюс Google Chrome) как в презентации, так и в поведении AJAX.

Я начал с Firefox / Firebug, затем добавил условные комментарии для согласованного стиля в IE 6 и 7. Затем, к моему изумлению, я обнаружил, что jQuery не ведет себя идентично в IE; поэтому я изменил свой Javascript на переносимый в FF и IE , используя условные выражения и менее чистый jQuery.

Сегодня я начал тестирование на Webkit и Google Chrome и обнаружил, что стили не только несовместимы как с FF, так и с IE, но Javascript вообще не выполняется, возможно, из-за синтаксической ошибки или ошибки синтаксического анализа. Я ожидал немного CSS-работы, но теперь у меня есть больше возможностей для отладки Javascript! На этом этапе я хочу сделать шаг назад и подумать, прежде чем писать кучу особых случаев для всех ситуаций.

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

Answer 1

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

Некоторые общие вещи, которые я выучил до сих пор:

• Тестируйте часто, во всех ваших целевых браузерах. Убедитесь, что у вас есть время для этого в вашем графике разработки.
• Инструментарий может помочь вам в части поддержки кросс-браузерной работы, но в конечном итоге вам будет что-то не хватать в каком-то браузере. Запланируйте некоторое время для отладки и исследования исправлений для определенных браузеров.
• Если вам нужно что-то, чего нет в наборе инструментов, и вы не можете найти бесплатный фрагмент кода, потратьте некоторое время на написание вспомогательных функций, которые инкапсулируют поведение, зависящее от браузера.
• Узнайте больше об известных ошибках браузера, чтобы вы могли управлять их реализацией.

Несколько конкретных вещей, которые я выучил:

• Используйте условный код, основанный на пользовательском агенте, только в качестве крайней меры, потому что разные поколения «одного и того же» браузера могут иметь разные функции. Вместо этого сначала протестируйте поведение, соответствующее стандартам, & mdash; например, if(node.addEventListener)..., затем общие нестандартные функции & mdash; например, if(window.attachEvent)..., а затем, если необходимо, посмотрите на пользовательский агент для определенного типа браузера и номера версии.
• Знание того, когда DOM «готов» для доступа к скрипту, различается практически в каждом браузере. Хороший инструментарий абстрагирует вас от этого.
• Обработчики событий различны практически в каждом браузере. Хороший инструментарий абстрагирует вас от этого.
• Создание элементов DOM, в частности элементов управления формы или элементов с атрибутами, может быть сложнее с document.createElement и element.setAttribute. Хотя это и не стандартно (и довольно хреново), использование node.innerHTML со строками, которые содержат биты HTML, кажется более надежным для всех типов браузеров. Мне еще предстоит найти инструментарий, который позволит вам использовать element.setAttribute для добавления «имени» к элементу формы в IE.
• Различия в CSS (и ошибки) так же важны, как и различия в JS.
• «Основные» функции Javascript (функции String, Date, RegExp, Array) кажутся довольно надежными и согласованными во всех браузерах, особенно относительно функций DOM / CSS / Window. Есть небольшая радость в том, что язык не совсем отличается на каждой платформе. : -)

На самом деле я не сталкивался ни с какими специфическими для Chrome ошибками JS, но это всегда один из первых браузеров, которые я тестировал.

НТН

Answer 2

Chrome на самом деле немного отличается от Safari, он использует совершенно другую реализацию javascript, и сообщалось о проблемах как с prototype, так и с jquery. Я бы пока не слишком волновался об этом, это все еще ранняя бета-версия браузера, и такие несоответствия, вероятно, будут рассматриваться как ошибки. Вот отчет об ошибке .

Answer 3

Ландшафт значительно изменился, чтобы приспособить кросс-браузерную разработку. jQuery , Прототип и другие платформы существуют для кросс-браузерного Javascript. Сброс CSS подходит для запуска на общем пустом холсте для всех браузеров. BluePrint и 960 - это CSS-фреймворки, помогающие с макетами, использующими CSS-макеты сетки методы, которые в наши дни становятся очень популярными.

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

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

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

Что касается передового опыта, начните использовать каркас на чистом листе бумаги или в сервисе, подобном Бальзамик макеты . Я все еще удивляюсь, сколько разработчиков начинают с редактора вместо каркаса, но с другой стороны, я переключился всего на год назад, прежде чем понял, насколько это экономит время. Четкое разделение макета (HTML), презентации (CSS) и поведения (Javascript). В HTML не должно быть элементов стилей, в Javascript не должно быть презентаций (используйте .addClass('highlight') вместо .css({'background-color': 'red'});).

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

Answer 4

Одна «серебряная пуля», к которой вы можете обратиться - это Google Web Toolkit (GWT) .

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

Если вы используете компоненты GWT UI, это избавит вас от многих неприятностей, связанных с браузером, но при компиляции создаст компактный файл развертывания для каждой платформы браузера. Таким образом, вы никогда не загружаете какой-либо специфичный для IE код, если просматриваете приложение в Firefox. У вас также будет сгенерированная заглушка на стороне клиента, которая загрузит соответствующий скомпилированный пакет JS. Чтобы облегчить сделку, эти файлы кэшируются, поэтому воспринимаемая производительность обычно повышается для постоянных посетителей.

Answer 5

Если вы начинаете с базового сброса или фреймворка и учитываете IE, а он все еще странный, вы можете перепроверить следующее:

• Все подтверждает? CSS и HTML?
• Неработающие ссылки на включаемый файл (js, css и т. Д.). В Chrome / Safari, если ваша ссылка на таблицу стилей отключена, все ваши ссылки могут оказаться красными. (я думаю, что-то связанное со стилем 404 по умолчанию)
• Какие-нибудь странные требования к вашим js-плагинам, которые вы можете использовать? (должен ли файл css находиться перед файлом js, как в случае с jquery.thickbox?)

Answer 6

Я нашел четыре вещи полезными при разработке приложений JavaScript:

• Функция обнаружения
• Библиотека
• Итеративная разработка с использованием виртуализации
• JavaScript: полное руководство, Дуглас Крокфорд и Джон Резиг

Обнаружение функции

Используйте рефлексию, чтобы узнать, поддерживает ли браузер нужную функцию. Если вы хотите узнать, какую обработку событий поддерживает браузер, вы можете использовать if (el.addEventHandler) для соответствия W3C, if (el.attachEvent) для IE-типа и, наконец, использовать el. ['OnSomeEvent'].

ОДНА БОЛЬШАЯ НО!

Браузеры иногда лгут о том, какие функции они поддерживают. Я не помню, но я столкнулся с проблемами, когда Firefox реализовал функцию DOM, но вернул бы false, если вы протестировали эту функцию!

Библиотеки

Поскольку вы уже работаете с jQuery, я сохраню объяснение. Но если вы сталкиваетесь с проблемами, вы можете рассмотреть вопрос о YUI, потому что это замечательная кросс-браузерная совместимость. Они даже работают вместе.

Итеративная разработка с виртуализацией

Возможно, мой лучший совет: запускайте все свои тестовые среды одновременно. Получите дистрибутив Linux, Compiz Fusion и кучу оперативной памяти. Загрузите копию сервера VMWare VMWare или Sun Virtual Box и установите несколько операционных систем. Получить изображения для Windows XP, Windows Vista и Mac OS X.

Основная идея такова: Compiz Fusion предоставляет вам 4 рабочих стола, сопоставленных с кубом. Один из этих рабочих столов - ваш компьютер с Linux, следующая ваша виртуальная Windows XP, та, что после этой Vista, последняя Mac OS X. После написания некоторого кода вы переходите на виртуальную машину и проверяете свою работу. Плюс это выглядит потрясающе.

JavaScript: полное руководство, Дуглас Крокфорд и Джон Резиг

Эти три источника предоставляют большую часть моей информации для разработки JavaScript. Полное руководство, пожалуй, лучший справочник по JavaScript.

Дуглас Крокфорд - гуру JavaScript (я ненавижу это слово) в Yahoo. Найдите его серии «Дуглас Крокфорд Теория ДОМа», «Дуглас Крокфорд Усовершенствованный JavaScript», «Дуглас Крокфорд Теория Дома» и «Дуглас Крокфорд Хорошие Части» в видео Yahoo!.

Джон Резиг (как вы знаете) написал jQuery. На его веб-сайте ejohn.org содержится множество информации о JavaScript, и если вы покопаетесь в Google, то обнаружите, что он дал ряд презентаций по защитным методам JavaScript.

... Удачи!

Answer 7

Для пользовательского интерфейса, проверьте Ext .

Отлично подходит в качестве автономной библиотеки, хотя ее также можно использовать с jQuery, YUI, Prototype и GWT.

Образцы: http://extjs.com/deploy/dev/examples/samples.html

Answer 8

Чтобы у вас было меньше проблем с браузером, Chrome использует тот же механизм рендеринга, что и Safari. Так что, если он работает в Safari, он должен работать точно так же в Chrome.

См. это сообщение в блоге Мэтта Каттса.

Google Chrome использует WebKit для рендеринга, который является тем же механизмом рендеринга, что и браузер Apple Safari, поэтому, если ваш сайт совместим с Safari, он должен прекрасно работать в Chrome.

Обновление: похоже, это устаревшая информация. Пожалуйста, смотрите комментарий Vox к этому ответу.

Answer 9

Проверка вашего javascript с помощью "хороших частей" + браузер на JsLint.com снижает вероятность того, что скрипты Java будут работать по-разному в FF, Safari и т. Д.

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

Answer 10

Лично я использую Mootools в качестве простого облегченного фреймворка JavaScript. Он прост в использовании и поддерживает все вышеперечисленные браузеры (кроме Chrome, но, насколько я могу судить, это тоже работает).

Кроме того, для обеспечения согласованности между браузерами, я получаю функцию / стиль / поведение / и т.д. сначала работать в одном браузере (обычно Firefox 3 с firebug), а затем немедленно проверить, работает ли он во всех других браузерах (оставив IE6 на последнем месте). Если это не так, я вкладываю время, чтобы исправить это сразу, потому что в противном случае я знаю, что у меня не будет времени позже (по моему опыту, на то, чтобы заставить вещи работать кросс-браузерно, требуется около 50% моего времени разработки; ))