Простые, но эффективные советы по кросс-браузерной вёрстке, которые должен знать каждый. Кроссбраузерная верстка

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

Данный термин был впервые использован в 90-х годах, когда наблюдался самый разгар соперничества браузеров. В те времена кроссбраузерными считались ресурсы, одинаково работающие в Netscape Navigarot (браузер прекратил свое существование в 2007 году) и в Internet Explorer. Со временем производители приложений начали реализовывать функции, характерные только для одного из браузеров. В результате этого они стали отличаться друг от друга способами отображения страниц и их работой.

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

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

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


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

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

  • информация на странице читабельная;
  • сохранена структура;
  • нет ошибок в верстке;
  • текст не «накладывается» поверх другого текста и изображений, если только это не предусмотрено автором контента.

Тестируя веб-ресурс на кроссбраузерность, необходимо применять самые новые версии популярнейших браузеров:

  1. Google Chrome.
  2. Mozilla Firefox.
  3. Opera.
  4. Internet Explorer.
  5. Netscape.
  6. Safari.

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

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

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

Применение CSS хаков

CSS hacks – это фрагменты кода, которые понимает только один браузер. Например, если ваш сайт отображается правильно в трех браузерах, а в остальных трех видны какие-то «косяки», то проблема решается отдельным прописыванием соответствующих хаков для каждого из трех браузеров, которые неправильно интерпретируют содержимое страницы.

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

Внедрение универсальных элементов

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

Проверить, какие теги какой версией движка поддерживаются, можно с помощью сервиса caniuse.com , который доступен совершенно бесплатно.

Вендорные префиксы

Они являются пережитком браузерных войн, особенно WebKit. Этот метод эффективнее и «чище», чем применение хаков.

Любому браузеру характерны уникальные свойства, имеющие вендорный префикс. Рассматривая случай с Google Chrome, элемент border-radius представлен здесь свойством -webkit-border-radius. А в Mozilla Firefox добавляется префикс -moz-. Подобные свойства изменяют функции элемента только в конкретном браузере, и никак не влияют на другие браузеры.

Сервисы проверки кроссбраузерности

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

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

№1. CrossBrowserTesting


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

Проверить сайт на соответствие различным браузерам можно следующими способами:

  • «Живой» тест. Можно работать с ресурсом в браузере с заранее выбранными параметрами, записывать видео и делать скриншоты.
  • Тест Selenium. Подразумевает автоматическую проверку в соответствии со скриптом, сделанным предварительно. Разрешается записывать результаты в формате видеофайла.
  • Режим автоматического сохранения скриншотов. Можно комбинировать различные ОС, браузеры, устройства и размеры экранов.
  • Локальное подключение. Можно проверить документы, которые еще не загрузились на сайт.

Несмотря на то, что сервис платный, в течение 7 дней вам доступен лимит 60 минут для его использования, чтобы оценить функции и возможности приложения перед тем, как оформить платную подписку.

№2. Browsershots


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

Тут доступна как бесплатная, так и платная версия. В бесплатной плохо то, что ваш запрос становится в очередь, и скриншоты начнут подгружаться на сервер поочередно после высвобождения сайтов. Данная процедура может занять от 10 минут до 2-3 часов, что довольно долго.

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

№3. IE NetRenderer


Подразумевает бесплатную проверку, доступную в онлайн режиме. Сервис отличается тем, что проверять соответствие сайта можно только для Internet Explorer, начиная от версии 5.5, и заканчивая 11-й. Указать здесь можно только версию браузера и адрес тестируемого ресурса.

№4. IE Tester

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

№5. Browserling


Посредством данного сервиса вы получаете возможность работать с проверяемым ресурсом не в эмулируемом, а в реальном окне браузера, который установлен в виртуальной машине программы. Проверку возможно осуществлять для 5 популярнейших браузеров (Chrome, Opera, IE, Safari, Firefox), для 5 версий ОС Windows и 4 версий ОС Anrdoid. Можно настраивать разрешение экрана и создавать скриншоты. Все функции сервиса платные, бесплатные только первые 3 минуты тестирования, с разрешением 1024x768 и ОС Windows Vista.

№6. Spoon Browser Sandbox


Предлагает проверку совместимости сайта с точными версиями Chrome, IE, Opera, Safari и Firefox. Последние версии браузеров тестируются бесплатно, но если вы захотите проверить старые версии, вам придется заплатить определенную сумму.

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

№7. MultiBrowser


Платная программа проверки кроссбраузерности. Она работает со всеми доступными на сегодняшний день версиями Firefox и Chrome, Safari 5.1, несколькими сборками Explorer и эмуляциями большинства смартфонов и планшетов с самыми разными разрешениями экранов.

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

Благодаря разнообразию режимов, вы сможете:

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

Для начала можно установить демо-версию программы, доступную в течение 2 недель.

№8. Sauce Labs


Онлайн сервис тестирования кроссбраузерности. Пробная версия у него довольно ограниченная, а вот при оформлении платной подписки станет доступна автоматическая проверка. Здесь есть около 700 комбинаций браузеров, разрешений и устройств.

№9. Browsera


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

№10. Litmus


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

№11. Equafy


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

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

Посмотреть скриншоты можно в списке страниц готового отчета, нажав на стрелку Show в крайней колонке.

№12. Browserstack


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

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

№13. Viewlike.us


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

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

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

№14. Ghostlab


Бесплатно-платная многофункциональная программа тестирования. Первые 7 дней доступна триал-версия.

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

Заключение

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

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

Александр Овсянников ака Интернет Мажор

Занимаюсь продвижением и заработком на сайтах с 2009 года.

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подписаться

Кроссбраузерность - способность веб-ресурса подстраиваться под несколько браузеров и корректно отображаться в них.


Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA

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

Могут съезжать элементы, могут не отображаться картинки, станут некрасивыми шрифты. Человек не будет пользоваться таким сервисом. Он пойдет искать дальше.

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

Кроссбраузерность верстки

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

Netscape Navigator выбыл из гонки, отдав монополию Internet Explorer. Спустя практически одновременно начали набирать обороты проекты Mozilla Firefox (Gecko), Google Chrome (Blink), Opera (WebKit) и Safari (WebKit), разделив рынок между собой и заставив сообщество задуматься о вопросе кроссбраузерности своих сайтов.

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

Именно поэтому я дам определение данному термину и подробно опишу, что это такое, объясню, почему возникает проблема разного отображения одного и того же сайта на html и css в и дам несколько полезных советов. Давайте начнем разбор полетов!

Кроссбраузерность, покажи свое лицо!

Все из вас знают английское название термина «кроссбраузерность»: cross-browser. В дословном переводе это означает: «работающий во всех браузерах». Вот по сути и была названа главная цель кроссбраузерности: способствовать идентичному отображению в любом существующем браузере.

Это означает, что независимо от того, в каком ППО для просмотра вы откроете сервис, его стилевая разметка не должна измениться.

Почему же все такие проблемные?

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

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

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

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

И к третьей проблеме можно отнести в некотором роде халатность самих разработчиков. Что я подразумеваю под этим? Всего лишь несоблюдение стандартизированных правил, которые были установлены специальной организацией W3C (официальный сайт расположен по ссылке https://www.w3.org).

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

Рецепты для решения проблем с идентичностью отображения

Познакомившись с основными «камнями преткновения» на пути к кроссбраузерности, вы, вероятно, задали себе вопрос: «А как же тогда сделать сайт, функционирующий во всех браузерах одинаково?». Чтобы ответить на этот вопрос, я решил перечислить базовые решения и полезные советы по порядку.


На самом деле можно еще много чего написать на эту тему. Но я считаю, что на данном пункте полезных рецептов стоит остановиться, так как о важных моментах я вам рассказал.

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

С уважением, Роман Чуешов

Прочитано: 106 раз

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

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

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

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

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

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

Еще одним важным трендом, который пришел к нам из Запада и активно набирает обороты в Рунете, является адаптивный дизайн (верстка) или responsive design.

С повсеместным распространением смартфонов и планшетов количество вопросов, которые предстоит решать веб-разработчику, значительно выросло. Достаточно ли создавать только версию сайта для настольных систем или нацеливаться и на другие платформы ? Ограничиться мобильной версией или разработать дополнительно и версию для планшетов? Как быть с устройствами высокого разрешения типа iPad с Retina Display? Решение всех перечисленных вопросов возможно за счет применения адаптивной верстки.

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

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

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

Кроссбраузерная верстка - это верстка сайта с его одинаковой видимостью в разных браузерах. Сказать по правде это занятие не легкое, так как каждый браузер имеет свои особенности и недостатки. Поэтому браузер для веб-дизайнера, как «Криптонит» для «Супермена». Жизнь веб-дизайнеров во всем мире, была бы гораздо лучше, если бы браузеры отображали красивые дизайны без багов и подвохов. Но, к сожалению этого никогда не будет. Это наше время, чтобы заново продумать, как мы работаем с браузером. При кроссбраузерной верстке нужно учитывать все особенности каждого из браузеров, так как пользователь заходит с того браузера к которому он привык и мы его не можем заставить перейти на другой софт, и должны подстраиваться под него.

Полиграфия и веб-верстка

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

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

Разные браузеры для разных людей

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

В мире полиграфии (печати), компании конкурируют друг с другом, добавляя новые возможности и различные профили цвета. Кроме того их инженеры учитывают особенности аудитории пользователей их продукта. Например, принтеры фирмы Canon используются более для коммерческой печати. Принтеры Ricohне имеют таких интенсивных цветовых гам как предыдущие, поэтому их используют для печати внутренней документации в компаниях (отчеты, протоколы, акты …). Думаю, для верстальщиков кроссбраузерного дизайна аналогия понятна. Если вы дизайнер, который делает печать объявлений для крупных коммерческих компаний, вы, скорее всего, выберете принтер с отличным качеством печати и широкой цветовой гаммой, а не деловой или личного класса.

Браузеры аналогичны к принтерам. Некоторые построены для обработки тяжелых конструкций, другие построены более для оказания документов. IE построен более для технической или бизнес аудитории, как Chrome, Firefox, для удовлетворения более творческой аудитории.

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

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

Качество кроссбраузерной верстки

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

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

Несколько советов для кроссбраузерной верстки:

Сделаем выводы:

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

  • Знаете ли вы аудиторию? Может быть, ваша аудитория и не требует новых "наворотов" или новых возможностей браузера.
  • Поддерживайте ваш бренд с помощью цвета, логотипа и последовательности стилей. Не убивайте бренд новыми дизайнерскими идеями. Бренд - это качество и традиция.
  • Убедитесь что браузер не нарушает смысл вашего сайта. Содержание страницы и общее значение сайта должны быть отделены.
  • Равно к вышеописанному совету, контент (содержание страницы) должно быть отделено от дизайна и стиля. В смысле, содержание должно быть четко видимым, а не сливаться в общую картинку или какой-то набор блоков и символов.
  • Если вы верстаете ваш личный сайт, то проверяйте кроссбраузерность его дизайна в новых версиях браузеров постоянно, чтобы не потерять пользователей.


Понравилась статья? Поделиться с друзьями: