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

Краткая версия. Какая самая чистая и удобная в обслуживании техника для презентаций с последовательным интерфейсом и функция 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, чтобы сделать! На этом этапе я хочу отступить и подумать, прежде чем писать груды особых случаев для всех ситуаций.

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

ОТВЕТЫ

Ответ 1

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

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

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

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

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

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

НТН

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

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

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

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

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

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

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

Ответ 5

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

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

Ответ 6

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

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

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

Ответ 7

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

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

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

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

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

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

Библиотеки

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

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

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

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

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

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

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

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

... Удачи!

Ответ 8

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

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

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

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

Ответ 9

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

Ответ 10

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

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

Ответ 11

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

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