Как проверить сайт в разных браузерах: несколько методов – 1C-UMI
Зачастую владельцы сайтов и не подозревают, что их интернет-странички могут идеально отображаться в одном браузере и совершенно некорректно в другом. Такое явление не редкость, однако шаблоны 1C-UMI разработаны с учетом того, чтобы сайт смотрелся одинаково хорошо у всех посетителей независимо от браузера.
Кроссбраузерность — это правильное отображение элементов сайта во всех браузерах. То есть когда вы заходите на один и тот же ресурс с Google Chrome, Internet Explorer и других программ для серфинга по всемирной паутине, и этот сайт выглядит везде корректно. Нет поехавшей верстки, корявого дизайна, нечитабельных шрифтов, каких-либо разрывов и прочих изъянов.
Почему любой сайт обязан быть кроссбраузерным
Согласно проведенным исследованиям, за каждым веб-обозревателем стоит определенная целевая аудитория. Например, Яндекс.Браузером и Хромом пользуются в основном молодые люди, Internet Explorer и Opera — поколение постарше, кому за 35, Mozilla Firefox ― технари, Safari ― пользователи Mac OS.
Если не адаптировать верстку своего сайта под разные браузеры, то есть риск потерять часть посетителей, каждый из которых мог стать клиентом. Согласитесь, что для бизнеса это не вариант, ведь уход любого покупателя означает вероятную потерю прибыли.
Кроме того, если посетитель сайта проводит на нем меньше 15 секунд, поисковые машины рассматривают такое поведение, как отказ. А чем больше последних, тем ниже будут позиции сайта в том же Яндексе или Google, и клиентам будет сложно найти ресурс.
Даже если владелец сайта учел все обозреватели, кроме Internet Explorer, разработчики которого не особо придерживаются общепринятых стандартов верстки, он все равно рискует потерять часть заинтересованной аудитории, которая пользуется этим браузером.
Почему некоторые люди до сих пор пользуются IE:
- далеко не все в курсе, что существуют более быстрые и удобные обозреватели для серфинга по интернету;
- отдельные пользователи просто привыкли к Internet Explorer и боятся попробовать что-то другое, полагая, что это может нарушить стабильность работы системы;
- во многих компаниях установлена корпоративная защита от установки сторонних программ, поэтому приходится пользоваться тем обозревателем, что интегрирован в Windows по умолчанию;
- попадаются также ярые фанаты продукции Microsoft, принципиально использующие только их софт и не желающие рассматривать альтернативы.
А теперь представьте, что ваш сайт выглядит в Internet Explorer так, будто в него выпустили торпеду. Конечно, если вы создавали или собираетесь создать сайт на конструкторе 1C-UMI, такого не будет гарантировано, так как у нас все шаблоны реализованы с учетом кроссбраузерности. Однако в иных случаях это не исключено.
Именно поэтому, чтобы не терять тех, кто может в будущем что-либо у вас купить или заказать, стоит делать сайт кроссбраузерным — рассчитанным на пользователей всех популярных веб-обозревателей.
Проверяем сайт в разных браузерах
Проверить сайт на кроссбраузерность можно тремя различными способами.
Способ № 1
Нужно установить на свой компьютер все те браузеры, которые наиболее популярны у пользователей вашего сайта. Вероятно, вы зададитесь вопросом, а как узнать, какими обозревателями пользуются гости ресурса? Для этого нужно зайти в систему сбора статистики Google Analytics, в разделе «Браузер и ОС» изучить перечень браузеров и количество посещений из этих браузеров.
Важно: чтобы этот список показывался, сайт должен быть подключен к Google Analytics. Аналогичная статистика доступна и в Яндекс.Метрике.
После того, как вы установили все браузеры, вам нужно поочередно открывать в каждом из них свой веб-ресурс и смотреть, корректно ли он отображается, нет ли каких-либо недочетов.
Способ № 2
Существует множество онлайн-сервисов для проверки любого сайта на кроссбраузерность. Есть бесплатные, которые имеют ограничения, есть платные с широким функционалом и высокой скоростью работы.
Один из наиболее известных бесплатных инструментов — Browsershots. Этот сайт поддерживает порядка 65 различных браузеров и операционных систем. Проверка может занять от 5 минут до 2 часов. Все зависит от того, насколько сервер загружен запросами.
В качестве результатов проверки пользователю показываются скриншоты сайта из выбранных обозревателей. По ним можно определить, поддерживает ресурс кроссбраузерность или же над этим еще предстоит поработать.
Из бесплатных онлайн-сервисов можно также рассмотреть CrossBrowserTesting, Browserstack, Browserling, Turbo. Каждый из них обладает собственным функционалом и возможностями. На некоторых требуется пройти регистрацию, на других можно проверять сайт сразу же.
Есть также платные инструменты. Один из них — BrowserCam. Оплатив доступ к сервису, можно проверить сайт на поддержку кроссбраузерности в реальном времени. Процесс осуществляется через получение доступа к дистанционным устройствам, на которые уже установлены все необходимые для проверки браузеры.
Способ № 3
Проверить веб-сайт можно также при помощи локального приложения. Например, с использованием Multi-Browser Viewer. Этот софт дает возможность не просто посмотреть, как будет смотреться интернет-ресурс в тех или иных обозревателях, но и выполнить полную проверку их рабочих функций.
Как сделать сайт кроссбраузерным
Без специальных навыков это сделать невозможно. Чтобы адаптировать сайт для всех необходимых браузеров, нужно знать HTML и CSS. Веб-мастеры обычно владеют данными технологиями, однако рядовым пользователям это покажется сложной задачей.
Поэтому, если у вас есть желание, чтобы ваш сайт был кроссбраузерным, создайте его на конструкторе 1C-UMI! Ведь у нас абсолютно всем шаблонам присуща кроссбраузерность. Таким образом, вы будете спокойны за свой сайт и его отображение в разных браузерах.
umi.ru
Правила веб-дизайна для разных браузеров
Веб-обозреватель, обозреватель, браузер(от англ. Web browser, устар. броузер) — программное обеспечение для просмотра веб-сайтов, то есть для запроса веб-страниц (преимущественно из Сети), их обработки, вывода и перехода от одной страницы к другой (Источник: Википедия).Существует внушительное множество браузеров, как и их версий. К основным можно отнести
Для начала определимся с тем, что лежит в основе любой web-страницы. За каждой из них скрывается исходный код, который состоит из тегов – специальных разметочных кодов на языке HTML. Весь комплект таких тегов называется спецификацией и поддерживается W3C консорциумом, в котором состоят все основные фирмы, занимающиеся разработкой программного обеспечения для всемирной паутины. В идеальном случае, все браузеры должны придерживаться спецификации для корректного отображения страниц, однако в реальности это происходит не всегда.
Первоначально HTML был скорее языком логической разметки текста, независимый от устройства вывода. Это означает, что в результате интерпретации HTML тегов информация может быть выведена не только на экран монитора, но и на звуковую карту и другие устройства. Однако в последующем язык превратился просто в средство разметки страниц в интернете.
В настоящий момент корректность отображения страниц практически одинаковая, свои нюансы имеют лишь браузеры Internet Explorer и Netscape Navigator (к этому списку можно отнести ряд других браузеров, однако ими пользуется меньше 1% серферов в интернете).
Правила веб-дизайна
- Просматривать отображение страниц во всех популярных браузерах. Дело в том, что, хоть код для всех браузеров один и тот же, интерпретируется он браузерами по-разному. Причем происходит это как в разных обозревателя, так и в разных версиях одного. Причина этому – конкурентность между самими браузерами, которые вводили свои теги для повышения популярности своих продуктов.
- Просматривать страницы в различном разрешении. Достаточно много современных компьютеров имеют низкую разрешающую способность экрана. Например, многие КПК выпускаются с черно-белым экраном, а большое количество ноутбуков имеет ограничение палитры 256 цветами. А планшеты, смартфоны и другие электронные гаджеты с выходом в интернет имеют различную ширину экрана. Поэтому в последнее время приобретает все большую популярность адаптивный дизайн сайтов. Под мобильные телефоны, которыми пользуются большой процент посетителей интернета, все больше набирает тенденцию создание специальной мобильной версии сайта.
Браузеры пока еще только стремятся к тому, чтобы одинаково отображать сайты, поэтому пока приходится следить за кроссбраузерностью. Вот несколько хороших сервисов, где можно проверить, как ваш сайт отображается в различных браузерах и их версиях.
Browsershots – один из самых полных из бесплатных инструментов для тестирования кроссбраузерности на данный момент.
IETester – сервис, созданные специально для тестирования сайтов в IE — одном из самых проблемных браузеров.
Browsera – автоматически тестирует сайт на совместимость. Имеется как бесплатная версия с ограниченным функционалом, так и коммерческая.
Вернуться назадСтатьи по теме:
www.kasper.by
Быстрый способ протестировать сайт в разных десктопных браузерах / Habr
Всё больше достойных поводов находится у веб-разработчиков для того, чтобы отказаться от полнокровной поддержки IE6 в создаваемых проектах.Кто-то обеспечивает малой кровью graceful degradation, ну а кто-то радикально прощается со старыми браузерами, чуть ли не нарочно приправляя сайт современными технологиями и показывая в браузерах-старичках заглушку с предложением срочно обновиться.
Однако, всем категориям веб-разработчиков, равно как и их клиентам, полезно иметь не обременяющие средства для кроссбраузерного тестирования.
Самый надёжный способ — поднять несколько виртуальных машин, где всё можно будет досконально протестировать (в том числе потаскать границу окна, поскроллить и уж тем более посмотреть, как работает JS). Но ведь часто требуется просто взглянуть на сайт и понять, всё ли с ним в порядке в целом. Либо предоставить такую возможность заказчику.
Классикой жанра для решения поставленной задачи является веб-сервис:
Универсальный, но долгий browsershots.org
Он позволяет получить скриншот не только из конкретного браузера, но и выбрать его версию и ОС, в которой браузер запущен.
Недостаток один — очередь. Скриншотов нужной страницы можно прождать полчаса и даже больше.
Я искал решения, которые существуют в виде веб-сервисов и не требуют обязательной регистрации или оплаты. То есть те, которыми мог бы воспользоваться не только разработчик, но и его заказчик, в качестве независимого инструмента (встречался с неприятной ситуацией когда у заказчика стояла в IE какая-то полуварезная панель, перекраивающая оформление адресов электронной почты — не ехать же в такой ситуации к заказчику со своим ноутбуком).
Нашлось два подходящих веб-сервиса, выдающих скриншоты уже через несколько секунд ожидания, но с общим недостатком — дружат только с IE, но этого-то обычно и не хватает, ведь остальные браузеры кросс-платформенные и многие из них позволяют держать сразу несколько portable-версий на одной машине без виртуализации.
Многоцелевой www.thumbalizr.com и его IE7
Этот сервис вообще-то создан для создания «превьюшек» сайтов и даже снабжён соответствующим API, но если отправить его делать скриншот такой хитрой страницы, как inet.ya.ru, то становится ясно, что в качестве движка для рендеринга скриншотов на сервисе трудится IE7. И он пригодится любому, кто обновил IE до восьмого, либо не пользуется Windows совсем.
Оптимальный ipinfo.info/netrenderer
Сервис умеет делать скриншоты в IE 5.5 (для некрофилов), IE 6, 7 и 8. То есть отлично подходит для тестирования. Также имеется режим, где на одном скриншоте показываются различия в вёрстке между IE6 и IE7. Удобно, но, надеюсь, в будущем можно будет сравнивать и с восьмым IE сразу.
Удобный browserling.com с возможностью поскроллить и покликать
Про сервис рассказали в комментариях. Он хорош, потому что единственный из перечисленных позволяет покликать, поскроллить, потестировать JS (вы получаете что-то вроде VNC-доступа к удалённому окошку с нужным браузером). Недостаток для такого шикарного сервиса предсказуем — очередь желающих. Хотя визуализирована она на славу:
Browserling предоставляет в ваше распоряжение любой IE от 5.5 до 9, а также последние версии Opera, Chrome, Safari и Firefox. Очередь при этом общая, вне зависимости от того, на какой браузер вы записывались. Из-за этого лично мне откровенно хочется отшлёпать тех, кто занимает очередь с целью погонять доступный на всех платформах Firefox.
После того, как вы своей очереди дождётесь — в вашем распоряжении будет пять минут, потом вас дропнут и если вы чего-то проверить не успели, то придётся снова занимать за «крайним» (в момент тестирования сервиса встречал очереди и по 10 персон, но отмечу, что многие впереди «стоящие» — очередь бросали либо мучали сервис меньше доступных пяти минут). Справедливости ради надо сказать, что есть и платный вариант без очередей.
Ваша версия
Очень жду в комментариях ссылок на аналогичные сервисы, но, предлагаю, придерживаться описанных выше критериев: сервис должен быть общедоступным без регистрации и бесплатным.
habr.com
Онлайн-сервисы для тестирования сайта в разных браузерах
Одна из самых больших проблем, с которой сталкиваются разработчики веб-сайтов – это отсутствие кроссбраузерности. Под кроссбраузерностью обычно понимают способность сайта отображаться одинаково хорошо, независимо от браузера, с которого посетитель просматривает его страницы. К примеру, при просмотре страниц интернет-ресурса с браузера Firefox последней версии все страницы могут отображаться без особых проблем. А при просмотре этого же сайта со старых версий InternetExplorer некоторые блоки начнут съезжать, криво отображаться.
Кроме того, могут возникнуть проблемы с отображением шрифтов, веб-форм и т.д. Чтобы сделать сайт кроссбраузерным, необходимо внести определенные изменения в его исходный программный код, поставить так называемые «заплатки». Проверить кроссбраузерность можно несколькими способами. Чаще всего вебмастера делают все вручную, то есть поочередно открывают страницы ресурса в разных браузерах и отслеживают изменения. Но с недавних пор выполнить данную проверку можно при помощи специальных онлайн-сервисов. Ниже мы кратко расскажем о 5 таких сервисах.
1. Browsershots
При помощи данного сервиса можно сделать скриншоты страницы нужного сайта при его отображении в разных браузерах и в разных операционных системах. Доступны три основных ОС – Mac, Windows, а также Linux. Что касается браузеров, то их здесь целых 65 штук (разные версии IE, Opera, Chrome, Firefox и т.д.). Чтобы выбрать браузеры, в которых будет проводиться тест, нужно поставить галочку напротив них.
Кроме того, можно выбрать размер скриншота, глубину его цвета, можно включить или отключить JavaScript, Flash. При бесплатном использовании сервиса длительность проверки может достигать 2 часов. В платной версии (30 долларов в месяц) скорость проверки существенно возрастает (5-10 минут). Также при бесплатной проверке скриншоты вашего сайта будут доступны всем пользователям в разделе «WebDesignGallery».
2. IENetRenderer
Это очень простой и бесплатный сервис, предназначенный для проверки вашего сайта на совместимость с различными версиями браузера InternetExplorer (с другими браузерами сервис не работает). В настройках вам нужно лишь выбрать версию браузера, а также указать URL-адрес проверяемого сайта. После нажатия на кнопку «Render» появится скриншот.
3. CrossBrowserTesting
Довольно интересный и функциональный сервис, при помощи которого можно осуществить проверку в самых разных браузерах и операционных системах. Также поддерживается тестирование сайта для устройств на Андроиде и iOS.
Данный сервис является платным. Стоимость базового пакета услуг составляет 30 долларов в неделю. Однако есть триальный период, длительность которого — 7 дней. При использовании триальной версии сервиса некоторые возможности будут недоступны.
4. Litmus
Довольно специфический онлайн-сервис, основное предназначение которого – тестирование email-рассылок (хотя могут тестироваться и обычные сайты в разных браузерах). На выходе вы получаете скриншоты страниц сайта или скриншоты готовых писем из email-рассылки.
Кстати, рассылка может тестироваться сразу в 30 разных почтовых клиентах. Кроме того, при помощи данного сервиса можно проверить валидность CSS и HTML-кода сайта. Есть триальный период, длительность которого составляет 7 дней. Базовый платный пакет обойдется в 49 долларов за месяц.
5. CloudTesting
Ключевое отличие данного сервиса от предыдущих заключается в том, что здесь вы можете загружать определенный сценарий действий пользователя при просмотре сайта (на выходе будут получены скриншоты каждого действия). К примеру, человек может просмотреть одну страницу, перейти на вторую, заполнить там какую-нибудь форму.
При тестировании каждое из этих действий будет отслеживаться поочередно. Кроме того, для тестирования можно выбирать разные браузеры и разные ОС. Стоимость базового пакета составляет 100 долларов за месяц.
www.white-windows.ru
Что такое кроссбраузерность сайта и как она влияет на продвижение
Содержание статьи
У каждого браузера – свои характеристики и особенности отображения сайтов. Это нужно учитывать при разработке проектов, иначе красивый и удобный ресурс, сделанный под Firefox, может неожиданно плохо отображаться в Explorer. Делать сайт под самый популярный браузер – ошибка, так как рыночные исследования показывают, что у каждой возрастной и социальной группы пользователей – свои любимые браузеры. Стоит ли сознательно отказываться от среза определенной аудитории? Выход – верстать сайты так, чтобы они одинаково хорошо отображались во всех браузерах (хотя бы в пятерке самых популярных). Единое качественное отображение называют кроссбраузерностью. Сейчас это – один из самых важных элементов оптимизации ресурса, так как от него зависит рост поведенческих факторов и успешное развитие проекта.
Что такое корректное отображение сайта? Это цельная верстка, одинаковое отображение статей и фотографий, нормально работающие функциональные элементы, отсутствие кусков кода и сообщений о критических ошибках на страницах. Существует много способов проверки правильности отображения страниц ресурса в разных типах браузеров. В идеале владелец сайта или веб-мастер должен сам установить все известные браузеры и проверить, как функционирует проект в каждой программе. Это самый надежный, но в то же время и самый сложный путь, занимающий огромное количество усилий и времени (особенно, если проект крупный). Если есть время и желание заниматься самостоятельной проверкой кроссбраузерности, предварительно следует воспользоваться сервисами Яндекс.Метрика/Браузеры (показывает, какие из браузеров чаще всего использует целевая аудитория), а также Google Analуtics (демонстрирует те же данные, позволяет определить, какие виды страниц нужно корректировать).
Самые популярные свободные сервисы для этой цели:
- IE NetRenderer. Из названия понятно, что подходит он только для браузеров Internet Explorer почт всех последних версий. Использование сервиса элементарное: нужную ссылку вводят в специальную форму и выбирают версию браузера. Для отображения результата понадобится пара секунд.
- net. Этот сервис позволяет протестировать отображение сайта в браузерах Firefox, Chrome, Opera и Safari. По сути, он эмулирует популярные браузеры. А вот отображение в Internet Explorer через сервис проверить невозможно: услуга отключена после претензий правообладателей.
Browsershots.org – сервис, который делает скрин-шоты проверяемого сайта в разных браузерах и операционных системах. Учитываются особенности нескольких десятков браузеров, популярных и не очень. В бесплатной версии следует приготовиться к длительной проверке – около 3 часов. За 30 долларов можно приобрести лицензию и получить 10-минутную (вместо 3-часовой) проверку с защитой данных.
Adobe Edge Inspect CC – сервис от вездесущего Адоба. Работает с бесплатным 30-дневным периодом, после чего обязательно нужно будет покупать лицензию. Litmus – сервис проверки на кроссбраузерность, а также валидность Html и CSS. После 7-дневной бесплатной версии нужно будет приобретать лицензию за 49 долларов в месяц. Есть несколько десятков других сервисов и систем для проверки на кроссбраузерность. Но даже если учитывать все требования стандартов верстки, все равно может оказаться, что в ряде браузеров сайт отображается не так, как задумано. Выход – ориентироваться на особенности самых распространенных в Рунете браузеров.
rukala.ru
Простые, но эффективные советы по кросс-браузерной вёрстке, которые должен знать каждый
Многие дизайнеры постоянно ищут кросс-браузерные приёмы, которые помогли бы им решать проблемы совместимости браузеров.
В конце концов, создание сайта — дело простое, но разработка такого, который бы выглядел одинаково во всех браузерах, может стать непростой задачей. Уже много лет проблема совместимости браузеров является одной из самых сложных частей веб разработки.
Наша постоянная задача как веб-дизайнеров и веб-разработчиков — создание для пользователей наилучшего впечатления от использования нашего сайта. Однообразное отображение сайта во всех браузерах способствует этому как нельзя лучше.
Если вы разрабатываете веб-сайты в течение долгого времени, вы согласитесь со мной, что Internet Explorer 8 и более ранние версии этого браузера — это один из самых больших кошмаров веб-дизайнеров и разработчиков. Несмотря на это, есть ещё люди, использующие эти версии IE для просмотра веб-сайтов.
Это только одна из проблем, с которыми мы можем столкнуться при разработке кросс-браузерного веб-сайта. Отрадно, что мы можем перестроить сайт или применить некоторые приёмы, чтобы сделать его совместимым и выглядящим одинаково во всех браузерах.
В этой статье я покажу вам некоторые кросс-браузерные стилевые приёмы и трюки, которые серьёзно упрощают разработку веб-сайтов.
Давайте смиримся с тем фактом, что веб-браузеры по умолчанию по-разному стилизуют элементы HTML. Некоторые браузеры имеют различный подход к значениям таких стилей как margin и padding.
Чтобы это исправить, есть хороший приём — добавить код CSS reset в начало вашего файла стилей. Это сбросит стили всех элементов.
Также это приведёт к тому, что вы начнёте стилизацию с нуля, то есть получите полный контроль над элементами, не волнуясь о разной изначальной стилизации элементов, вроде полей, заполнений или выравнивания.
У Эрика Майера есть хороший набор правил CSS, чтобы сделать это. Также вы можете посмотреть на Normalize.css от Николаса Галлахера, современную альтернативу для сброса стилей в HTML5.
После того, как примените эти правила CSS к вашей разметке, вы можете быть уверены, что у вас есть нулевая точка отсчёта для всех браузеров.
Хорошей практикой перед выкладыванием сайта в сеть является проверка HTML и CSS при помощи валидаторов, так как это поможет вам исправить некоторые мелкие ошибки, которые могут принести проблемы в будущем.
Вы можете использовать валидаторы HTML и CSS от W3C. Эти валидаторы одобрены W3C, но, если вы хотите, то можете использовать любые другие, которые вам нравятся.
Древние версии IE причиняли много головной боли веб-дизайнерам и разработчикам, когда дело доходило до проблем совместимости. Для решения этой проблемы Microsoft разработали условные комментарии для своего браузера, позволяющие привязывать файл стилей, который будет интерпретирован только браузером IE.
Рассмотрим пример.
Следующий код будет работать во всех версиях IE:
<!--[if IE]> <link href="ie.css" rel="stylesheet" type="text/css" /!> <[endif]-->
А следующий код предназначен для конкретной версии IE:
<!--[if IE6]> <link href="ie.css" rel="stylesheet" type="text/css" /!> <[endif]-->
Стандарты W3C постоянно совершенствуются. Хорошо, если вы знаете о каких-либо недостатках в поддержке определённым браузером некоторого свойства CSS. Такие стилистические приёмы, как скруглённые углы, тени и градиенты, сейчас могут быть реализованы, используя только CSS, без помощи изображений.
Использование вендорных префиксов поможет вам сэкономить уйму времени, не заботясь о том, поддерживает ли браузер ваш код CSS.
Рассмотрим список вендорных префиксов:
- Safari и Chrome (-webkit-)
- Firefox (-moz-)
- Opera (-o-)
- Internet Explorer (-ms-)
В качестве примера давайте используем свойство transition с вендорными префиксами для определённых браузеров:
-webkit-transition: all 4s ease; -moz-transition: all 4s ease; -ms-transition: all 4s ease; -o-transition: all 4s ease; transition: all 4s ease;
Мы все знаем, как сделать элемент плавающим, влево или вправо, используя свойство float. По умолчанию, если вы используете только один плавающий элемент совместно с не плавающим, первый просто расположится сбоку от последнего при наличии места.
Но проблема тут не в этом. Чаще всего мы располагаем плавающие элементы слева и справа и помещаем их в контейнер.
Посмотрите на рисунки ниже:
Рис. 1. Вот, чего мы хотим добиться.
Рис. 2. Однако вот, что у нас получается.
Эта проблема может быть решена простой очисткой пространства после плавающих элементов с помощью CSS свойства clear со значением both. Это значит, что пространство с обеих сторон будет очищено.
Хотя не существует каких-либо строгих правил использования определённого измерения для размера шрифта, я бы посоветовал использовать единицы em и проценты, поскольку они основаны на настройке размера шрифта в браузере пользователя.
Большинство людей используют пиксели (px) или пункты (pt), которые основаны на разрешении экрана. Они всегда фиксированы.
Вы можете лениться проводить тестирование вашего веб-сайта в различных браузерах, думая, что он выглядит хорошо во всех современных браузерах. Поверьте мне, я был когда-то таким же, но это ведёт к тому, что у посетителей вашего сайта могут остаться плохие впечатления от его посещения.
Вы можете сэкономить время, используя эмуляторы, вроде spoon plugin, но настоятельно рекомендуется тестировать ваше творение в настоящих браузерах.
Упрощение кода делает всю работу простой и быстрой. Что я имею в виду? Одно только использование простых элементов при разработке вашего веб-сайта делает задачу браузера по чтению вашего кода гораздо проще.
Например, вместо использования таблиц и параграфов для создания навигации, вы можете просто использовать для этого ненумерованный список. Для создания отзывчивого веб-сайта элементы div подойдут гораздо лучше, чем таблицы.
Сохраняйте код простым, хорошо структурированным и используйте правильные наименования. Поверьте мне, это сэкономит вам кучу времени и избавит от лишней головной боли, когда у вас возникнут какие-либо проблемы.
Существуют и другие приёмы и трюки для поддержания кросс-браузерной совместимости, но эта статья должна снабдить вас базовым фундаментом, на котором будут строиться все ваши дальнейшие знания по этой проблеме.
Хорошей идеей является время от времени перечитывать ваш код и проверять его на совместимость с различными браузерами.
Если вы знаете какие-нибудь другие приёмы, которые мы не осветили здесь, или у вас есть комментарии или предложения, мы будем рады их услышать. Пожалуйста, оставляйте ваши комментарии к этой статье.
Данная публикация представляет собой перевод статьи «Simple Yet Important Cross-Browser Styling Tips Everyone Should Know» , подготовленной дружной командой проекта Интернет-технологии.ру
www.internet-technologies.ru
Проверяем отображение сайта в различных браузерах
Серёжа СыроежкинКопирайтер
Наверняка, закончив работу над своим сайтом, вы захотите протестировать сайт в разных браузерах, или, так сказать, проверить кроссбраузерность вашего сайта. Ведь мало сделать сайт, нужно добиться правильного его отображения в самых популярных браузерах, операционных системах, при разных разрешениях экрана. За последний месяц статистика использования популярных браузеров примерно такова (в скобках указан примерный процент пользователей Российского интернета, цифры могут несколько отличаться от реальных):
- Google Chrome (~50%)
- Mozilla Firefox (~12%)
- Opera (~11%)
- Safari (~9%)
- Internet Explorer (~8%)
Зачем нужна кроссбраузерность?
3 причины, почему вашему сайту необходима кроссбраузерность:
- Вы будете терять большое количество посетителей, которым не уделили внимание при вёрстке сайта;
- Потеря посетителей — это потеря вашей прибыли;
- Корректное отображение сайта во всех популярных браузерах говорит об имидже вашего сайта, об имидже вашей компании.
Проверка отображения сайта в браузерах
Опытные верстальщики имеют у себя на компьютере множество различных браузеров разных версий. Но если вы не верстаете сайты слишком часто, можно воспользоваться сторонними инструментами, которые позволят посмотреть отображение сайта в браузере, которого у вас нет, и вам не придется устанавливать огромное количество браузеров и тратить часы на проверку корректного отображения вашего сайта в них.
Одним из таких инструментов является Browsershots. Вы вводите URL вашего сайта, выбираете браузеры, в которых хотите проверить отображение, версии браузеров. После нескольких минут ожидания вы получите набор скриншотов — как будет выглядеть ваш сайт в указанных версиях браузеров. Выглядит это примерно так:
Как видите, это набор превью, по которым можно кликнуть и посмотреть полный скриншот страницы.
Смотрите также:
nubex.ru