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

Question

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

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

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

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

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

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

Answer 1

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

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

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

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

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

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

НТН

Answer 2

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

См. this post в блоге Мэтта Катца.

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

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

Answer 3

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

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

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

Answer 4

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

Answer 5

One «серебряная пуля» вы можете рассмотреть обращение к является Google Web Toolkit (GWT).

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

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

Answer 6

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

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

Answer 7

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

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

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

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

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

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

Answer 8

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

Answer 9

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

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

Answer 10

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

• обнаружение Характеристики
• Библиотека
• итеративной разработки с использованием виртуализации
• JavaScript: The Definitive Guide, Дуглас Крокфорд & Джон Resig

Detection Характеристика

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

ОДИН БОЛЬШОЙ НО!

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

Библиотеки

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

Итерационные развития виртуализации

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

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

JavaScript: The Definitive Guide, Дуглас Крокфорд & Резиг

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

Douglas Crockford - гуру JavaScript (я ненавижу слово) в Yahoo. Поиск его серии «Дуглас Крокфорд Теория ДОМА», «Дуглас Крокфорд Хроника JavaScript», «Дуглас Крокфорд Теория Дома» и «Дуглас Крокфорд Хорошие детали» на Yahoo! Видео.

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

... Удачи !

Answer 11

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

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