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

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

См. эта почта в блоге Мэтта Каттса.

Google Chrome uses WebKit for rendering, which is the same rendering engine as Apple’s Safari browser, so if your site is compatible with Safari it should work great in Chrome.

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

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

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

Примеры: http://extjs.com/deploy/dev/examples/samples.html

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

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

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

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

Я узнал еще несколько конкретных вещей:

• Используйте условный код, основанный на пользовательском агенте, только в крайнем случае, потому что разные поколения «одного и того же» браузера могут иметь разные функции. Вместо этого сначала проверьте поведение, соответствующее стандартам - например, if (node.addEventListener)..., затем распространенные нестандартные функции - например, 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, но это всегда один из первых браузеров, которые я тестировал.

HTH

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ОДНО БОЛЬШОЕ НО!

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

Библиотеки

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

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

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

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

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

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

Дуглас Крокфорд - гуру JavaScript (ненавижу это слово) в Yahoo. Посмотрите его серии «Теория Douglas Crockford of the DOM», «Douglas Crockford Advanced JavaScript», «Douglas Crockford Theory of the Dom» и «Douglas Crockford The Good Parts» на Yahoo! Videos.

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

... Удачи!

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

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