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

StackOverflow https://stackoverflow.com/questions/45239

  •  09-06-2019
  •  | 
  •  

Вопрос

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

  • ИЕ 6, 7, 8
  • Фаерфокс 2, 3
  • Сафари
  • Гугл Хром
  • Опера

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

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

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

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

Это было полезно?

Решение

Я нахожусь в аналогичной ситуации: работаю над веб-приложением, ориентированным на ИТ-специалистов и требующим поддержки того же набора браузеров, за исключением 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.Есть небольшая радость в том, что язык не сильно отличается на каждой платформе.:-)

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

ХТХ

Другие советы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Я нашел четыре вещи, полезные при разработке приложений 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 и установите несколько операционных систем.Получите изображения для Windows XP, Windows Vista и Mac OS X.

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

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

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

Дуглас Крокфорд — гуру JavaScript (ненавижу это слово) в Yahoo.Поищите его серии «Теория DOM Дугласа Крокфорда», «Продвинутый JavaScript Дугласа Крокфорда», «Теория дома Дугласа Крокфорда» и «Хорошие части Дугласа Крокфорда» на Yahoo!Видео.

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

...Удачи!

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

Видеть эта почта в блоге Мэтта Каттса.

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

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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top