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

Что нужно для кроссбраузерной верстки – инструменты

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


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

  • Общие знания о верстке;
  • Знания в области особенностей верстки под те или иные браузеры;
  • Несколько браузеров на одном компьютере;

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

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

  • Максимальное соответствие исходному макету и пожеланиям заказчика;
  • Максимальное корректное отображение во всех популярных браузерах;

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

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

Заключение

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

Как добиться кроссбраузерности?

Если же Вы взялись верстать сайт самостоятельно и хотите чтобы он был кроссбраузерным и нормально поддерживался IE разных версий, то вот Вам несколько советов:

  1. Постарайтесь не использовать теги HTML5 так как IE старых версий их не понимает и отображает непонятно что, а если используете, то не забудьте подключить специальный плагин, который научит IE понимать теги HTML5. Вот ссылка на скачивание этого плагина: плагин HTML5 для Internet Explorer
  1. Избегайте использования псевдоклассов. Большую часть псевдоклассов CSS3 IE не поймёт и искусственно научить его понимать их (как в случае с тегами HTML5) у Вас не получится. Особенно это касается псевдоклассов :first-child, :last-child и им подобных.
  1. Не используйте псевдоэлементы CSS3 (:before, :after). Причина та же что и в случае с псевдоклассами. Мало того, тут к «любимому» браузеру веб-разработчиков IE присоединяется браузер Safari, который используется на устройствах Apple, и у которого тоже проблемы с корректным отображением псевдоэлементов.
  2. Тестируйте вёрстку не отходя от кассы. Делайте кроссбраузерное тестирование не в конце вёрстки, а на каждом этапе. Например, сверстали шапку сайта – сразу проверили во всех браузерах, потом блок контента и так далее. Иначе в конце вёрстки Вас может ждать неприятный сюрприз, который Вам скорее всего преподнесёт всеми любимый Internet Explorer, а может и не только он.
  3. Табличная вёрстка в помощь. Если вёрстка не сложная и адаптивность не нужна, то есть смысл сделать её табличной. Так как это значительно упростит процесс создания кроссбраузерной вёрстки. Более подробно о блочной и табличной вёрстках написано здесь.
  4. Используйте css хаки для разных браузеров. Будьте готовы к тому, что разные браузеры по разному отображают шрифты и рассчитывают размеры блоков. Особенно это касается браузера Mozilla Firefox, который за счёт иного способа отображения шрифтов делает блоки на несколько пикселей шире чем другие браузеры. Для решения данной проблемы используются CSS хаки, которые дают возможность прописать стили для каждого браузера по отдельности.

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


Желаю Вам удачной вёрстки, качественных сайтов и высокой посещаемости.

До встречи в моих новых статьях.

С уважением Юлия Гусарь

Сравнение инструментов

В ниже приведённой таблице сведены вместе некоторые сведения об инструментах тестирования для сравнения их между собой и выбора наиболее подходящего варианта.

Инструмент Количество поддерживаемых браузеров IE? Интерактивное тестирование? Визуальное сравнение? Цена
Adobe BrowserLab 13 IE6+ Нет Да Бесплатно
Browsershots 60+ IE6+ Нет Нет Бесплатно
SuperPreview Изменяется IE6+ Да Да Бесплатно
Lunascape 3 IE6+ Да Да Бесплатно
IETester 6 версий IE IE5.5+ Да Да Бесплатно
IE NetRenderer 5 версий IE IE5.5+ Нет Нет Бесплатно
Spoon 16+ Нет IE Да Нет Бесплатно
Browsera 9 IE6+ Нет Да Бесплатно – $99/месяц
Browserling 9 IE5.5+ Нет Нет Бесплатно – $20/месяц
Mogotest 7+ IE6+ Нет Да $15 – $4,499/месяц
Cloud Testing 4+ IE6+ Да Да Нет сведений
BrowserCam 90+ IE5.2+ Нет Да $19.95 – $89.95/месяц
Multi-Browser Viewer 80+ IE6+ Для некоторых браузеров Да $139.95
CrossBrowserTesting 100+ IE6+ Да Да $29.95 – $199.95/месяц

Browsershots.org

Сервис Browsershots дает вам бесплатную возможность сделать скиншоты проверяемой страницы сайта в основанных браузерах и их версиях. Бесплатно, проверка кроссбраузерности сайта, проводится для осей Linux и Windows. Для MAC и BSD придётся делать денежный взнос.

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

Выбор русского языка не даст хорошего результата, вам переведут пару строк из меню и всё

Но это не важно

Более интересны 5 настроек: Screen Size, Color Depth, Javascript, Java, Flash. По умолчанию они выставлены на усмотрение сервиса.

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

Значок копирайта внизу дает информацию, что сервис не обновлялся с 2015 года. Это подтверждают последние версии браузеров доступные для проверки. Например, последний «Opera» для проверок 15.0, а не 56.0


Еще один момент. Значок копирайта внизу дает информацию, что сервис не обновлялся с 2015 года. Это подтверждают последние версии браузеров доступные для проверки. Например, последний «Opera» для проверок 15.0, а не 56.0.

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

результат проверок

Несколько советов верстальщику о проверке браузеров на совместимость

  1. Следует использовать технику css reset для того, чтобы все браузеры имели одинаковые базовые стили для различных элементов.
  2. Рекомендуется установить на рабочую машину все популярные браузеры, а также программу Explorer Tester, поскольку программа Internet Explorer стоит особняком и часто именно с ней возникают проблемы относительно корректного отображения web-сайта.
  3. Существует два основных варианта верстки. Первый — это делать сайт, который полностью подходит под один из популярных браузеров, после чего уже в процессе проверки на совместимость с другими программами исправлять код по мере необходимости. Второй — осуществлять проверку каждого элемента кода по мере написания во всех популярных браузерах. Как можно сделать вывод, в первом случае времени на кроссбраузерную верстку затрачивается меньше, чем во втором случае.
  4. Многие верстальщики активно используют полезные утилиты и плагины, позволяющие находить ошибки кода для каждого из браузеров. Наиболее полезными из них являются следующие: Browsershots, Lunascape, SuperPreview, IETester, Spoon, IE NetRenderer, Browserling, Browsera, Mogotest и BrowserCam.

Статистика свидетельствует, что далеко не все пользователи стремятся активно устанавливать на свои компьютеры новые версии браузеров, а поэтому некоторые верстальщики активно используют «полифиллы» (от англ. polyfill). Они представляют собой библиотеки, которые добавляют в старые браузеры поддержку возможностей, реализованных в новых браузерах. Для этого polyfill библиотека подключается на страницах web-сайта.

Видимость сайта в Internet Explorer

Возвращаясь к статистике StatCounter, мы обнаруживаем, что, в мире, браузер Microsoft Internet Explorer, занимает третье место, по использованию. А это значит, что игнорировать это браузер со всеми его версиями нельзя.

Проверить видимость сайта в Internet Explorer можно очень просто. Есть специальный инструмент – проверка кроссбраузерности сайта во всех версиях Internet Explorer, сервис netrenderer.com. Далее его описание, позаимствованное с сайта сервиса.

IE NetRenderer позволяет вам проверять, как веб-сайт отображается многочисленными версиями Microsoft Internet Explorer. Особенно старые версии веб-браузеров Microsoft известны своим неожиданным поведением и несоблюдением интернет-стандартов W3C. Поэтому для каждого веб-дизайнера нужно обязательно регулярно проверять свои веб-сайты на совместимость с этими веб-браузерами. Просто введите URL-адрес проверяемой веб-страницы в поле и нажмите кнопку «Render». Через несколько секунд вы получите скриншот страницы. Попробуйте, это бесплатно!

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

Для чего подходит

Этот инструмент веб-рендеринга идеально подходит для веб-дизайнеров, работающих на рабочих платформах Apple iMac и Linux. Он позволяет проверять веб-проекты изначально на всех популярных версиях Internet Explorer, без необходимости выделять несколько физических или виртуальных ПК с Microsoft Windows для этой цели. Перед каждым заданием рендеринга мы очищаем кэш Internet Explorer. Это позволяет сразу увидеть эффект от всех изменений, внесенных во время веб-разработки.

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

Веб-сайты, которые извлекают содержимое страницы через JavaScript после выполнения главной HTML-страницы, могут еще не завершиться, когда NetRenderer сделает снимок экрана. То же самое может произойти с объектами внешней страницы, которые должны быть загружены с медленных сторонних серверов. Показателем этого является либо пустой, либо неполный снимок экрана. Если это произойдет, отметьте флажок под кнопкой «Render», чтобы позволить дополнительное время рендеринга, чтобы сценарии имели больше шансов закончить.


Снимок экрана всегда соответствует 100% оригинального размера и точности картинки вплоть до пикселя. Пользователь отмечает максимальную ширину видимого просмотра на экранах 800×600 и 1024×768 с учетом ширины полосы прокрутки браузера.

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

Можете использовать его в качестве приблизительной оценки, скорости загрузки веб-сайта людьми в Центральной Европе. Вы также можете использовать IE NetRenderer для просмотра веб-сайтов анонимно. Посетив веб-сервер вы не оставите никаких следов ни о вашем IP-адресе, ОС, версии браузера, плагинах или файлах cookie.

Features

Live interactive sessions Not just screenshots! You can interact with the browsers live as if they were installed on your computer. http://my-awesome-website.com My Awesome Website Logo Real browsers running on real computers We run real desktop browsers on our servers in virtual machines. We don’t use emulators or fake browsers. Google Chrome version 34 49 52 66 latest Internet Explorer version 7 8 9 10 11 Firefox version 32 41 58 60 68 Opera version 39 42 49 53 62 Access to the latest browsers We install the latest browsers as soon as they come out. You get access to the latest browsers instantly!

Screenshots You can capture, save, and share screenshots of your web pages in all browsers. You can also annotate them and send bug reports this way. Responsive testing Change screen resolution and resize browsers for all your responsive testing needs. Terminal $ ssh Terminal $ ssh Terminal $ ssh SSH tunnels for local testing You can reverse-proxy your local host or local server into Browserling with our SSH tunnels. Local testing guide.

Browserling Secure https://browserling.com Secure and anonymous browsing All connections between you and Browserling are SSL encrypted. Your browsing is completely anonymous! Safe browsing Browsers run in our infrastructure so you don’t have to worry about getting infected with viruses or trojans. No Flash, Java, or plugins required Browserling is powered by HTML5 and JavaScript. You don’t need to install anything. It just works!

Browser extension for quicker testing Browserling’s extensions let you cross-browser test your websites with one click. Get them for: Bookmarks IE 11 on Windows 7 Bookmarklets for quicker testing Browserling’s bookmarklets let you bookmark your favorite browsers and start testing in them with one click. Live API You can embed browsers in your own application on demand and automate them via a neat API. Learn more about Live API.

Reviews

http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>lass=»plugin-reviews»>

yep, recommneded

I would like to thank everyone involved for the great work. The fast response time and the helpful support are unique. The adaptation to my special wishes saved me weeks of working time. Thank you very much for that.

I love this plugin. I used to use ShrinkTheWeb but the support was rubbish and it was costing me $5 per month. This is so much more customisable. I can change the sizes, put in backgrounds, add captions and links. So pleased I found this plugin it works great on my site.

I was recently blessed to help contribute a Gutenberg block to Browser Shots. The shortcode, and now the block, are amazing additions.

Thanks, Ben, for this great plugin.

Wow, just happened to stumble across this whilst looking for a url to screenshot API wondering if someone had created anything for WordPress. Absolutely amazing, thanks so much for putting this together.

Perfect. Thank you There may be another version of this plugin for the favicon.

Сравнение инструментов

В ниже приведённой таблице сведены вместе некоторые сведения об инструментах тестирования для сравнения их между собой и выбора наиболее подходящего варианта.

Инструмент Количество поддерживаемых браузеров IE? Интерактивное тестирование? Визуальное сравнение? Цена
Adobe BrowserLab 13 IE6+ Нет Да Бесплатно
Browsershots 60+ IE6+ Нет Нет Бесплатно
SuperPreview Изменяется IE6+ Да Да Бесплатно
Lunascape 3 IE6+ Да Да Бесплатно
IETester 6 версий IE IE5.5+ Да Да Бесплатно
IE NetRenderer 5 версий IE IE5.5+ Нет Нет Бесплатно
Spoon 16+ Нет IE Да Нет Бесплатно
Browsera 9 IE6+ Нет Да Бесплатно – $99/месяц
Browserling 9 IE5.5+ Нет Нет Бесплатно – $20/месяц
Mogotest 7+ IE6+ Нет Да $15 – $4,499/месяц
Cloud Testing 4+ IE6+ Да Да Нет сведений
BrowserCam 90+ IE5.2+ Нет Да $19.95 – $89.95/месяц
Multi-Browser Viewer 80+ IE6+ Для некоторых браузеров Да $139.95
CrossBrowserTesting 100+ IE6+ Да Да $29.95 – $199.95/месяц

Litmus (платно/бесплатно)

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

Платная версия сервиса предполагает три пакета: базовый (49 у.е. в месяц), плюс (99 у.е. в месяц), премиум (299 у.е. в месяц.) Бесплатная триал-версия действует 7 дней.


С этим читают