Кроссбраузерность сайта как сделать


Кроссбраузерная вёрстка / Блог компании HTML Academy / Хабр


Что такое кроссбраузерная вёрстка? Какие есть браузеры и нужен ли пиксель-пёрфект?

Если собрать охапку современных браузеров, то разложить её можно по-разному: по устройствам, по платформам, по типу работы, да хоть по цвету иконок. Самое полезное для разработчика — уметь разложить их по движкам. Именно движок, то есть самое ядро браузера, определяет как он работает с вашей вёрсткой.

При всём разнообразии браузеров, независимых движков довольно мало, а новые появляются очень редко. Так что вместо десятков браузеров вам нужно поддерживать не больше пяти независимых движков. А ещё бывает, что браузеры с одним названием используют разные движки на разных платформах! В общем, всё очень сложно и интересно.

Самый популярный в мире браузерный движок — это Blink. Его использует Chrome и браузеры на его основе: Opera, Samsung Internet, Яндекс.Браузер и другие. Для работы с JavaScript, эти браузеры используют движок V8 — тот же, что и в Node.js. Один из главных разработчиков открытого движка Blink — Google, но в разработке активно участвует не меньше десятка компаний.

WebKit, другой популярный движок, очень похож на Blink. А вообще, наоборот — это Blink похож на WebKit. Это как? В 2013 году Blink форкнули из WebKit. По сути, скопировали. Google собрала вещи и сказала Apple, основному разработчику WebKit, что ей не нравятся её методы работы и теперь всё будет по-другому. Что поделать, опенсорс. И действительно, стало по-другому: основа у WebKit и Blink общая (префиксы webkit, например), но возможности уже довольно разные. На новом WebKit сейчас работают мобильные и десктопные браузеры Safari, на старом — встроенный браузер на Android до версии KitKat.

На движке Gecko работает браузер Firefox, когда-то очень популярный, а сегодня сохраняющий небольшую долю и важную роль в развитии веба и технологий. Префиксы у Gecko свои: moz — Mozilla, но для лучшей совместимости Firefox специально поддерживает некоторые свойства WebKit. Полноценный Firefox на Gecko работает на десктопных платформах и на Android. Параллельно с Gecko, Mozilla разрабатывает экспериментальный движок Servo и меняет некоторые части Gecko прямо на ходу. Например, в следующем Firefox 57 движок CSS заменят на новый.

Браузер Edge работает на всех современных платформах Microsoft, включая мобильные и Xbox. В его основе движок EdgeHTML — недавно как раз вышла его 16-я версия. EdgeHTML тоже форкнули от движка Trident или MSHTML, на котором работал браузер Internet Explorer. Удивительно похоже на историю Blink и WebKit: оба движка сохраняют общие префиксы (ms и опять немного webkit для совместимости), но сильно отличаются по возможностям. EdgeHTML отбросил всякое старьё и смело развивается: пара крупных релизов в год и даже система голосования за фичи. Trident и IE закрыли в 2015 году.

Кроме движков, полезно ещё знать особенности платформ. Например, на мобильной платформе iOS куча браузеров, помимо встроенного Safari: Chrome, Firefox, Opera, Яндекс, UC и даже Edge недавно выпустили. Но все эти браузеры — просто оболочки над встроенным в систему движком WebKit. Правила этой платформы запрещают использовать другие браузерные движки. А вот на Android большинство браузеров поставляются со своими движками: Firefox, Opera, Samsung, но некоторые используют встроенный Chromium.

Ну вроде всё? А нет! Есть ещё отдельная группа необычных браузеров: они живут не на устройствах пользователей, а глубоко на серверах. На устройствах стоит только лёгкая оболочка, которая запрашивает адрес и получает с сервера набор скриншотов и ссылок, слепленных в сайт. Это прокси-браузеры и они безумно сжимают трафик, но по пути теряют: фирменные шрифты, фоновые картинки, градиенты, скруглённые уголки, тени и вроде того. Opera Mini — один из самых популярных прокси-браузеров. На сервере у него крутится устаревший движок Presto, а ставят его чаще всего на простые телефоны. Но есть и другие, подробнее вам расскажет Тим Кадлек.

Некоторые браузеры работают только на одной платформе: Edge и IE есть только на Windows, Safari только на macOS и iOS. Были когда-то попытки интервенций, но ничего не вышло. Это конечно усложняет тестирование. К счастью, есть сервисы вроде BrowserStack, которые дают вам доступ ко всем существующим браузерам, а Microsoft выкладывает компактные образы Windows для тестирования Edge и IE в виртуальных машинах.

Ладно! Про браузеры мы теперь знаем. А что делать, если тот же браузер, тот же движок — а результат на разных платформах разный? А ничего не поделаешь! На деле браузеры могут сильно отличаться в зависимости от платформы или устройства. Самая большая разница между десктопными и мобильными браузерами — в последних очень много оптимизаций и просто магии. Но можно поймать и разное поведение на десктопных Windows и macOS.

Думаю вы уже поняли, к чему я клоню. Кроссбраузерность — это такой радужный единорог, за которым все гоняются, но никто не может поймать. Цель у погони, безусловно, благородная: чтобы сайты выглядели и работали одинаково хорошо на всех браузерах и всех платформах. И если размеры отступов, шрифта, высоту строки, цвета мы ещё можем более-менее гарантировать, то сглаживание текста, размытие теней, рендеринг графики и внешний вид системных контролов лучше даже не пытаться привести к общему виду.

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

И ещё про тестирование. Как бы хорошо ни имитировал устройства и браузеры эмулятор Chrome DevTools — это только намёк на то, как они будут выглядеть в реальности. Важно проверить результат на настоящих платформах и устройствах, как минимум: на Windows, Android, macOS и iOS. Настоящие пальцы на настоящем устройстве, настоящие браузеры в естественной среде обитания расскажут вам много нового о том, как именно будут пользоваться вашими интерфейсами. Это гораздо важнее того, насколько они похожи на макет.

Подпишитесь на новости браузеров в Твиттере, поставьте себе Chrome Canary, Firefox Nightly, Safari Technology Preview. Включайте флаги, пробуйте, будьте в курсе и главное — хватит гоняться за пикселями, займитесь хорошими интерфейсами. Сайты не должны выглядеть одинаково во всех браузерах.


Видеоверсия


Вопросы можно задавать здесь.

Как сделать веб-сайт с кроссбраузерностью

Кроссбраузерность важна. Очень важно. Мы установили этот факт в нашем предыдущем посте о необходимости кроссбраузерного веб-сайта. Итак, следующий шаг - как сделать веб-сайты кроссбраузерными? Как мы можем гарантировать, что наш веб-сайт обеспечивает беспроблемный и беспроблемный пользовательский интерфейс во всех браузерах, к которым может иметь доступ ваша целевая аудитория, будь то Firefox, Chrome или даже Internet Explorer?

При разработке веб-сайта обычно используется комбинация JavaScript, CSS и HTML, причем последние версии CSS3 и HTML5.

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

Итак, приступим.

Самое первое, что делает большинство разработчиков, - это начинает разработку веб-сайта для своего любимого браузера или, в некоторых случаях, браузера, наиболее используемого вашей возможной целевой аудиторией. Предположим, что это последняя версия Google Chrome, что обычно и бывает. На веб-сайте используются все новейшие технологии CSS, JS и фреймворк.Сайт красивый, с потрясающе анимированными переходами и чистыми шрифтами. И самое главное, он работает идеально. Исправление: Отлично работает в последней версии браузера Chrome.

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

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

Итак, теперь вам нужно протестировать свое приложение для разных браузеров и, как я уже сказал, для недооцененных и известных.

Пора вам найти некоторые из серьезных ошибок. Итак, давайте их решим.

Не работает в разных браузерах?

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

Найдите проблемы совместимости между браузерами с помощью мобильного браузера Opera Mini:

Если вы используете такие элементы, как:

  • CSS3 3D-преобразования.
  • 2D преобразований.
  • Фоновое изображение.
  • функций формы HTML5.
  • Семантические элементы.
  • Псевдокласс CSS, отображаемый заполнителем.
  • API веб-аутентификации.
  • Мета-тег цвета темы.

, то ваш веб-сайт не будет работать в браузерах Opera Mini.

Найдите проблемы совместимости с браузером с помощью браузера Firefox:

Firefox обычно поддерживает новейшие технологии. Mozilla - законодатель мод в области веб-технологий. Однако есть еще некоторые элементы, которые браузеры Firefox не поддерживают полностью, например:

  • Файловая система и FileWriter API.
  • База данных веб-SQL.
  • XHTML + SMIL анимация.
  • шрифтов EOT.

Это все основные элементы, которые не поддерживаются последней стабильной версией Firefox (60). Таким образом, использование этих технологий и стилей может привести к тому, что ваш сайт не работает даже в последних версиях Firefox.

Найдите проблемы кроссбраузерной совместимости с Safari

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

Если вы используете некоторые другие функции и технологии и хотите знать, поддерживает ли это браузер или нет, то вы можете узнать об этом с помощью CanIUse. Итак, чтобы убедиться, что вы использовали все технологии, поддерживаемые браузером, вы можете просто ввести технологию и сравнить браузеры. Он покажет вам результат вроде:

Итак, как вы можете видеть, API веб-аутентификации просто поддерживается в последних версиях браузеров Edge, Firefox и Chrome, поэтому он не будет работать в других версиях, что свидетельствует о проблемах несовместимости между браузерами.Точно так же вы можете проверить другие веб-технологии и функции.

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

Проверьте Doctype

Первое, что вам нужно убедиться, это добавить ли вы DOCTYPE в свой HTML-файл.

Если нет, сделайте это немедленно.

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

Итак, если вы хотите, чтобы IE6 и выше имитировали поведение браузера, такого как chrome и firefox, вы можете добавить strict doctype .

Если вы этого не сделаете, браузер будет работать в режиме Quirks и будет имитировать поведение более старых версий.

Вы применили сброс CSS?

Различные браузеры работают по-разному. Один стиль может работать в одном браузере, но в другом будет отображаться другой стиль. Основным фактором, который здесь учитывается, является CSS.

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

И это очень ценно для Internet Explorer!

Очень известный сброс CSS Эрика Мейера может быть использован, чтобы помочь вам решить эту проблему несовместимости браузера. Или вы можете использовать стандартные сбросы CSS, такие как normalize.css.

Однако убедитесь, что вы добавили таблицу стилей сброса перед основной таблицей стилей.

Используйте отдельные таблицы стилей для разных браузеров

Это избавит вас от множества проблем с таблицами стилей. Вы можете ссылаться на разные таблицы стилей для каждого браузера, используя условные комментарии.Чтобы Chrome отображал таблицу стилей Chrome, Firefox использует свою таблицу стилей и так далее.

Основной условный комментарий будет выглядеть примерно так:

      

Или вы тоже можете попробовать.


         

Использование кроссбраузерных библиотек и фреймворков

Предпочитаете использовать кросс-браузерные библиотеки JavaScript, такие как jQuery, React.js, MooTools и некоторые фреймворки CSS, такие как Bootstrap, Foundation, 960 grid и т. Д.? Причина использования этих кроссбраузерно совместимых библиотек и фреймворков заключается в том, что вы можете положиться на них, чтобы знать, что они не внесут каких-либо глупых ошибок, которых вы можете легко избежать.

Все установлено? Давайте подтвердим!

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

Вы можете использовать валидатор w3 для проверки HTML-кода вашего сайта.

После проверки вы увидите ошибки и предупреждения, которые затем можно будет устранить.

Точно так же вы можете проверить и для CSS.Попробуйте использовать валидатор Jigsaw от W3. Вы снова увидите результаты вроде:

Получив информацию о совершенных вами ошибках, вы сможете их исправить.

.

7 советов по обеспечению кроссбраузерной совместимости вашего сайта

Кроссбраузерность означает, что веб-приложение работает со всеми версиями всех браузеров. Чтобы заявить о кроссбраузерной совместимости, в настоящее время ожидается, что веб-сайт будет поддерживать такие браузеры, как Mozilla Firefox, Google Chrome, Opera и Safari в дополнение к Internet Explorer и Netscape. Вот основные советы, которые помогут сделать ваш сайт кроссбраузерным.

1. Определите действительный Doctype:
Ваш doctype сообщает браузеру, какие правила вы будете использовать в своем коде.Если вы не укажете, браузер должен угадать, а разные браузеры будут угадывать по-разному. Когда вы проектируете в «строгом режиме», Internet Explorer 6 и более поздних версий будет показывать поведение, намного более близкое к поведению Firefox, Safari и других современных браузеров.

"http://www.w3.org/TR/html4/strict.dtd">

В противном случае, Интернет Explorer работает в «режиме причуд», пытаясь имитировать поведение старых браузеров.

2. Сброс CSS:
По умолчанию разные браузеры работают в соответствии со своими правилами CSS по умолчанию. Вам необходимо явно определить css, чтобы обеспечить одинаковое поведение для разных браузеров. Мне нравится сброс CSS Эрика:
http://meyerweb.com/eric/gotits/2007/05/01/reset-reloaded/
http://meyerweb.com/eric/tools/css/reset/index.html

3. Условные комментарии:
Попробуйте использовать условные комментарии вместо CSS-хаков.
С помощью условных комментариев вы можете создавать ссылки на отдельные таблицы стилей для разных браузеров.








4. Попробуйте использовать библиотеку javascript , например jQuery, YahooUI, MooTools, Dojo , абстрагируясь от различий в DOM, AJAX и JavaScript.

5. Вы можете использовать Css Frameworks , например BluePrint, 960 Grid.В основном они совместимы с кросс-браузером.
См. Ниже, чтобы узнать, какой фреймворк css вам подходит.
http://net.tutsplus.com/tutorials/html-css-techniques/which-css-grid-framework-should-you-use-for-web-design/

6. Подтвердить:
W3C Служба проверки проверяет несколько версий XHTML и HTML, выводя множество полезных ошибок и предупреждений, чтобы помочь пользователям создать идеальный веб-сайт.
W3C Validator: http://validator.w3.org/
W3C Css Validator: http: // jigsaw.w3.org/css-validator/

7. Тестирование:
Я бы посоветовал вам начать с firefox, а затем перейти к IE. Используйте Firebug, надстройку Firefox и панель инструментов разработчика IE для IE, чтобы настроить макет. Чтобы протестировать веб-сайт в другом браузере, есть несколько онлайн- и офлайн-утилит, таких как
Browsershots,
IETester,
browsercam.

Чтобы получить дополнительные приложения для тестирования кроссбраузерной совместимости, см. Следующее:

http://designm.ag/resources/cross-browser-testing/
http: // www.bestpsdtohtml.com/7-awesome-resources-to-test-cross-browser-compatibility-of-your-website/

Если вы дизайнер, вы должны знать разницу между браузерами. Для этого см. Следующее:

http://www.iecss.com/
http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and -8 /

Если вы используете другие способы сделать свой сайт кроссбраузерным, пожалуйста, оставьте комментарий и поделитесь им. Если вам понравилась эта статья, не забудьте найти ее или поделиться ею.

.

javascript - кроссбраузерная разработка - qaruQaruSite Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
.

10 советов по созданию кроссбраузерных веб-сайтов

Теоретически создать веб-страницу просто: скомпонуйте HTML, протестируйте его в своем браузере и загрузите. HTML и CSS являются стандартами, поэтому страница, протестированная в одном браузере, должна выглядеть одинаково во всех других браузерах.

На практике, конечно, все не так просто. Разные браузеры отображают HTML и CSS несколько по-разному, в то время как некоторые браузеры (не будем называть имена) сильно отклоняются от стандартов.

Лучше всего строить свои веб-страницы так, чтобы они выглядели одинаково во многих браузерах.Это часто называют кроссбраузерным (или мультибраузерным) кодированием.

Хотя не существует «волшебной пули», которая улучшит внешний вид сайта во всех браузерах, есть ряд вещей, которые вы можете сделать, чтобы повысить свои шансы. Вот десять полезных советов по кроссбраузерному кодированию.

1. Будьте проще

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

Не используйте слишком много вложенных элементов в разметке и используйте правильный элемент для работы. Используйте элементы ul и li для создания меню; не используйте стол или серию из элементов p .

Поместите все визуальное форматирование в свой CSS. Ваш HTML должен быть для содержания, а не для стиля.

2. Подтвердите свой код

Перед загрузкой сайта пропустите ваш HTML и CSS через валидаторы. Допустимый код может не заставить вашу страницу волшебным образом работать во всех браузерах, но неправильный код может вызвать всевозможные непредсказуемые и трудно поддающиеся отладке проблемы.

W3C HTML Validator и CSS Validator - хорошие места для начала. Вы также можете использовать плагины браузера, такие как надстройка Html Validator Firefox, для автоматической проверки страниц во время их просмотра в браузере.

3. Избегайте необычных режимов браузера

Многие браузеры имеют «режим причуд», который имитирует более старую, более ошибочную версию браузера. Это позволяет старым веб-сайтам работать с современными браузерами без необходимости перекодировать свои страницы. Однако режимы совместимости могут вызвать головную боль, если вы создаете современную страницу, соответствующую стандартам, потому что браузер в режиме совместимости будет отображать вашу страницу своим уникальным нестандартным способом.

Как правило, браузер переключается в режим причуд, если ваша страница не включает DOCTYPE (объявление типа документа), поэтому, чтобы избежать режима причуд, убедитесь, что каждая страница вашего сайта включает действительный DOCTYPE. Подробнее в этой статье Википедии о режиме Quirks.

4. Используйте правила сброса CSS

Многие браузеры имеют немного разные значения по умолчанию для таких вещей, как высота строки и отступы вокруг элементов. Поскольку эти значения по умолчанию могут влиять на другие правила CSS, это может быть настоящей проблемой.Вы, наверное, сбились со счета, сколько раз вам приходилось добавлять маржу : 0; отступ: 0; в правило CSS, чтобы сделать его согласованным во всех браузерах.

Чтобы избежать этих хлопот для каждого правила CSS, которое вы кодируете, вместо этого вы можете выполнить все эти сбросы в начале файла CSS (или в отдельном файле). Эрик Мейер собрал для этого несколько правил CSS. Он также перечисляет причины использования сброса CSS. Включив эти правила в начало таблицы стилей, вы можете быть достаточно уверены, что работаете с одной и той же начальной точки во всех браузерах.

5. Разработка в Firefox

Большинство веб-программистов, как правило, тестируют свой сайт в одном браузере по мере его разработки, а затем тестируют в других популярных браузерах (и при необходимости настраивают) в конце работы. Это хороший подход, потому что быстрее тестировать в одном браузере, чем в пяти.

Лично я бы порекомендовал тестировать в Firefox при создании своего сайта, а затем, когда вы будете довольны этим, протестировать сайт в других браузерах, особенно в Internet Explorer, чтобы исправить любые проблемы совместимости.Firefox очень удобен для разработчиков (благодаря большому количеству надстроек) и достаточно соответствует стандартам. Если ваш сайт хорошо выглядит в Firefox, он, вероятно, будет выглядеть примерно так же в Opera и Safari.

Несомненно, ваш сайт, протестированный в Firefox, будет иметь несколько проблем в IE, но по моему опыту лучше написать совместимый со стандартами HTML и CSS, которые работают в Firefox, а затем настроить IE позже. Если вы разрабатываете свой сайт с использованием IE, то в конечном итоге вам придется кодировать все маленькие недостатки IE, что потребует гораздо больше работы позже, когда дело доходит до настройки вашего сайта для других браузеров.

6. Протестируйте в максимально возможном количестве браузеров

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

  • Internet Explorer 6, 7 и 8
  • Firefox 3
  • Safari 3
  • Опера 9

Тестирование всех трех версий Internet Explorer может быть сложной задачей, поскольку теоретически только одна версия IE может быть установлена ​​на одной копии Windows.Есть несколько способов решить эту проблему:

  • Приобрести 3 ПК для тестирования. Затем вы можете установить IE6 на один компьютер, IE7 на другой и IE8 на третий. Очевидно, что пространство или деньги могут сделать это непрактичным.
  • Взломайте IE6, 7 и 8 для работы на одной копии Windows. Существуют различные программы, которые могут помочь вам установить несколько версий IE на одну копию Windows. Например, посмотрите Multiple IE от TredoSoft и IE Collection от Utilu. Однако это может сделать вашу установку Windows нестабильной, а различные версии IE могут вести себя странным образом, поэтому этот подход не для слабонервных.
  • Воспользуйтесь виртуализацией. Хороший подход - использовать программное обеспечение виртуализации, такое как VMware или VirtualBox, для запуска трех отдельных копий Windows на одном ПК или Mac. Затем вы можете установить другую версию IE на каждую копию Windows. Это приводит к стабильным, независимым версиям IE. К недостаткам можно отнести стоимость (требуется 3 лицензии Windows) и производительность (вам понадобится мощный компьютер для работы с тремя версиями Windows плюс ваша операционная система).
    Один из способов обойти эти недостатки - использовать функцию моментальных снимков программного обеспечения, такого как VMware.Установите XP с IE6 и сделайте снимок; обновитесь до IE7, сделайте снимок; обновитесь до IE8, сделайте снимок. Теперь вы можете переключаться между IE, возвращаясь к своим 3 снимкам, и все это при использовании одной лицензии Windows.
  • Воспользуйтесь услугой онлайн-тестирования. Сайты , такие как Browsershots и Browsercam, позволяют делать снимки экрана вашего сайта в самых разных браузерах и операционных системах. Затем снимки экрана отображаются на веб-странице для загрузки или могут быть отправлены вам по электронной почте. Иногда вам нужно платить за использование этих сервисов, и для создания снимков экрана может потребоваться некоторое время, но это позволяет вам тестировать практически в любом браузере под солнцем, не имея необходимости запускать его локально.

7. Исправьте проблемы IE с помощью условных комментариев

Иногда, как бы вы ни старались, невозможно заставить ваш красивый сайт работать в Internet Explorer, не прибегая к серьезным хитростям CSS и / или JavaScript. Однако есть альтернатива. Включив разметку только для IE с условными комментариями, вы можете использовать дополнительный HTML, CSS или JavaScript только для IE, что позволит вам обойти любые проблемы. Намного чище, чем использование хаков.

8.Заставить IE6 работать с прозрачными PNG

Прозрачные изображения PNG - замечательная вещь - они позволяют иметь до 256 уровней прозрачности в изображении, а это значит, что вы можете делать изящные трюки, такие как прозрачность и сглаживание границ на любом типе фона. Однако Internet Explorer 6 по умолчанию неправильно отображает прозрачные PNG, а вместо этого отображает уродливые прямоугольники там, где должна быть прозрачность.

Хорошая новость заключается в том, что после небольшой настройки вы можете добиться, чтобы прозрачные PNG-файлы отлично работали в IE6, без необходимости вносить серьезные изменения в разметку или CSS.Хорошее решение - IE PNG Fix от Ангуса Тернбулла.

9. Обеспечьте резервные копии

Хотя большинство веб-браузеров поддерживают Flash и JavaScript, и почти все поддерживают изображения, рекомендуется предусмотреть резервные варианты на случай, если эти функции недоступны в браузере посетителя. Например, я видел много сайтов с меню навигации Flash, которые совершенно невозможно использовать в браузерах, не поддерживающих Flash (например, Mobile Safari на iPhone).

  • Изображений: Убедитесь, что каждый тег img содержит атрибут alt , описывающий изображение.
  • Flash-ролики: Не используйте Flash для важных вещей, таких как навигация по сайту, или, если вы используете, предоставьте альтернативу, отличную от Flash.
  • JavaScript: Опять же, старайтесь избегать использования JavaScript для основных функций. Можно использовать его, чтобы упростить или ускорить работу. Используйте элемент noscript , чтобы предоставить альтернативу без JS (или, по крайней мере, для отображения сообщения с просьбой включить JavaScript).

10. Код вручную

Последнее один немного спорный.Многие в наши дни используют редакторы WYSIWYG, такие как Dreamweaver и KompoZer. Такие редакторы могут сэкономить много времени и хороши, если вы не знаете HTML. Однако создание гибкого, элегантного, кроссбраузерного HTML - своего рода искусство, и редакторы страниц не всегда хорошо с этим справляются.

Я лично предпочитаю кодировать все HTML, XHTML и CSS вручную. Таким образом, у меня есть полный контроль над тем, что я создаю, и я могу легко настроить код, если это необходимо для работы в различных браузерах.

Если вы находите кодирование вручную утомительным, существует множество отличных текстовых редакторов веб-страниц, которые облегчат вам жизнь.Взгляните на CoffeeCup

(Windows) или Coda (Mac).

Завершение

Стоит потратить немного больше времени, чтобы ваши страницы работали в максимально возможном количестве браузеров. Поступая так, вы не только увеличиваете охват аудитории, но и делаете посетителей довольными, что всегда хорошо!

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий