На сегодняшний день существует несколько самых популярных браузеров, которые люди используют для своей работы в Интернет. И постоянная головная боль любого веб дизайнера - это то, что один и тот же HTML код выглядит по разному в разных браузерах. Более того, один и тот же код выглядит по разному в разных версиях одного и того же браузера.
Естественно, любой веб мастер должен заботится о том, чтобы сайт выглядел одинаково в наибольшем количестве браузеров. Именно это умение (когда код выглядит одинаково в различных браузерах) и называют "кроссбраузерной версткой HTML". Умение верстать такой код - весьма полезно и ценится потенциальными работодателями. Очень часто такое требование стоит одним из первых в условиях, которым должен удовлетворять потенциальный кандидат на вакансию веб программиста в серьезную компанию.
Почему сайт выглядит по разному в различных браузерах?
Существует несколько причин возникновения различного вида сайта на различных обозревателях.
1. Использование нестандартных возможностей HTML.
Дизайнер может использовать возможности, которые не входят в стандарт HTML. Действительно, браузеры могут поддерживать множество различных атрибутов тегов, которые не описаны в стандарте. Использовать эти возможности не рекомендуется. По одной простой причине - если что-либо не описано в стандарте, какой-либо из браузеров может это не поддерживать. И создатели такого браузера будут совершенно правы. Не нужно использовать нестандартные особенности.
Всегда проверяйте написанный вами код на соответствия стандарту.
Приведу классический пример. Рассмотрим следующий HTML код простейшей таблицы.
Hello world |
Данный код выводит таблицу, состоящую из одной ячейки. Веб дизайнер хочет, чтобы высота первой строки данной таблицы была равна 100 пикселям. Однако, в стандарте HTML у тега
В данном случае, ошибка не велика, так как атрибут height у тега
Правильное решение для примера с табличной - это использование стилей. Вот как может выглядеть "правильный" код:
Hello world |
Данный вариант будет (или, по крайней мере, должен) отображаться одинаково во всех типах браузеров.
2. Значения атрибутов по умолчанию.
У каждого HTML элемента существует множество атрибутов. Это и цвет, и расстояние до соседних элементов, и выравнивание, и многое другое. Когда верстается HTML код, дизайнер обычно задает значения только тех атрибутов, которые для важны для представления элементов на странице. Что же делать браузеру со значениями неуказанных атрибутов? В этом случае браузеры используют значения по умолчанию. И вот тут-то и кроется опасность. Значения по умолчанию у различных браузеров могут различаться. Например, размер шрифта по умолчанию может быть разным. Из-за этого в одних браузерах текст займет больше места, чем в других. Что, в свою очередь, может привести к различиям в отображении страницы.
Как можно решить эту проблему? Во-первых, универсальный совет: проверять отображение сайта в как можно большем количестве браузеров. Во-вторых, можно в css файле задать свои значения по умолчанию для всех элементов, которые используются на странице. Это избавит браузер от необходимости "додумывать" значения свойств HTML элементов. Сделать это можно, например, так:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 14px;
font-family: inherit;
vertical-align: top;
background: transparent;
font: verdana, geneva, lucida, "lucida grande", arial, helvetica, sans-serif;
background-color: white;
}
Таким образом, все элементы на странице будут иметь свойства заданные в данном файле. Если необходимо, чтобы у какого-либо элемента свойства отличались от свойств по умолчанию, то их надо переопределить явно.
3. "Особенности" некоторых браузеров.
Однако, даже если веб мастер использует только стандартные возможности HTML, установил свои атрибуты по умолчанию для всех элементов, сайт все равно может выглядеть по разному в различных браузерах. Это происходит от того, что браузеры сами могут не соответствовать стандарту HTML. Браузеры, как и любое программное обеспечение, могут содержать ошибки. Эти ошибки, как правило, быстро исправляются, однако всегда существует вероятность, что у пользователя установлена не самая свежая версия браузера.
Так же возможно, что производители браузеров (особенно этим грешит MicroSoft) считают, что они лучше знают, как надо отображать тот или иной элемент.
Поскольку основной виновник проблем несовместимости со стандартом - это Internet Explorer, то было придумано множество возможных обходных путей, как заставить сайт в IE выглядеть так же, как и в других браузерах.
Самый распространенный способ - это условные комментарии для IE. Майкрософт, как будто зная о проблемах своего браузера, дала разработчикам способ, как выполнить HTML код только на специальной версии IE. Например, следующий код подключит специальный CSS файл для браузера IE версии 7 и выше: http://msdn2.microsoft.com/en-us/library/ms537512.aspx
Условные комментарии имеют один единственный недостаток. Страница, включающая в себя такие комментарии, не является валидной HTML страницей. Как видите, Майкрософт и тут нарушает стандарт.
Поговорим о правильной верстке сайтов. Фиксированная, блочная, адаптивная, мобильная, резиновая, гибкая, семантическая, валидная, кроссбраузерная верстка. Давайте посмотрим, что все это значит.
Верстка сайтов на HTML/HTML5 и CSS/CSS3
С начала года я занялся подтягиванием своих слабых мест в веб технологиях. Разобравшись, я описал . Я придерживался этого плана и результат получился неплохим.
Недавно я начал разбираться в видах верстки, что значат все эти понятия и понял, что информации уже очень много, но вся она однотипная. А самое главное — уже устаревшая. Обычно говорят о фиксированной, табличной и блочной видах верстки.
Вы могли слышать другие названия и не понимать, что они означают. Вы можете так и не узнать, что такое флексбоксы, а ведь это потрясающая гибкость, которая позволяет сегодня творить чудеса.
В общем, я решил немного заполнить эту пустоту и написать статью, которая будет полезна сегодня всем тем, кто решил разобраться в видах верстки веб страниц.
Что такое верстка сайта, долго объяснять я думаю не стоит. Если коротко, то это создание HTML кода и CSS-таблиц стилей по задуманному ранее дизайну. Чаще всего страницы верстают на основе подготовленного заранее в фотошопе psd-макета.
Чем ближе к оригиналу будет результат, тем лучше. В идеале страница должна одинаково выглядеть в разных браузерах и хорошо смотреться на мобильных устройствах.
Требования к современной верстке
Чем качественнее выполнена верстка сайта, тем лучше будет работать сайт или блог. Профессиональную верстку может выполнить только хороший специалист верстальщик. Какие же требования сегодня предъявляют к верстке? Вот они:
- кроссбраузерность
- адаптивность
- минимум кода
- высокая скорость загрузки страниц
- семантичность
- валидность
Давайте разберем какие бывают виды верстки сегодня и вам станет понятно что все это значит.
Виды верстки сайтов
В этой статье я хочу дать лишь самое общее представление. Возможно, что в скором времени я опишу многие из них более подробно.
- Фиксированная верстка или статическая . Вне зависимости от размеров окна браузера или устройства ширина страниц будет постоянной. Все элементы занимают строго определенную ширину в пикселях на странице. Если разрешение экрана большое и окно браузера развернуто на весь экран, то, как правило, по бокам остается свободное место. И наоборот, на мобильных устройствах при фиксированной верстке снизу на странице появляется полоса прокрутки.
- Резиновая верстка . Страница занимает всю ширину браузера, каких бы размеров она не была и на каком бы устройстве вы не открыли эту страницу. Ширина элементов страницы задается в процентах от ширины окна, и поэтому занимают всю доступную область. При этой верстке тяжело добиться хорошего удобного дизайна при всех возможных разрешениях экранов, ведь страницы будут выглядеть по-разному.
- Табличная верстка или верстка таблицами . В данном случае сетка страницы строится с помощью таблиц. Представьте, что на странице есть главная таблица, а в ее ячейках при необходимости располагают вложенные таблицы, а в их ячейках могут быть новые таблицы и так до бесконечности. Код получается громоздким, это очень неудобно, да и надобности в этом уже нем. Сегодня так страницы уже давно не верстают. Более того, поисковики не любят такие страницы и плохо их индексируют. Если вам нужно, вы можете разместить на странице таблицу или несколько, но только не делайте с их помощью структуру страницы.
- Блочная верстка, верстка блоками или div-верстка
. Это, пожалуй, самая распространенная верстка сегодня. Сетка страниц конструируется из множества блоков , которые вложены друг в друга. Для доступа к ним используются атрибуты id и class. Откройте исходный код (Ctrl + U) практически любой веб-страницы и вы увидите такую верстку.
- Адаптивная верстка или мобильная верстка . Ее еще иногда называют респонсивная верстка. Ключевая особенность в том, что страницы хорошо адаптируются под любое разрешение экрана пользователя. Не важно, отрыли вы страницу на стационарном ноутбуке, на здоровенном широкоформатном мониторе или на смартфоне — в любом случае страница должна хорошо смотреться и быть удобной для пользователя. Это достигается тем, что используют несколько таблиц стилей под разные разрешения.
- Гибкая верстка или flex верстка . Вначале применяется известная всем блочная верстка, а потом нужные блоки превращают во флекс-контейнеры (флексбоксы). В стилях элемента указывают display: flex; Элементу можно указать направление главной оси и выравнивание. Эти возможности стали доступны с приходом CSS3. Теперь страницы становятся очень гибкими. Этот механизм подробно разбирается на . Рекомендую ознакомиться, за этим настоящее и будущее верстки.
- Семантическая верстка . Она явилась логичным продолжением блочной верстки и стала доступна в HTML5. Новые теги делают станицу более структурированной. Поисковики любят такие страницы. Что это за , можете посмотреть в другой моей статье.
- Валидная верстка или по-другому верста без ошибок . Это верстка, выполненная в соответствии со стандартами W3C. Проверить свою HTML-страницу на корректность вы можете с помощью специального валидатора W3C .
- Кроссбраузерная верстка . Как понятно из названия, при такой верстке страницы выглядят одинаково в разных браузерах. Первое, с чего обычно начинают — подключают к странице специальный CSS файл — сброс стилей.
Вот такие на сегодняшний день есть виды верстки или свойства HTML верстки. Веб страницы хорошего сайта одновременно удовлетворяют многим критериям, самые важные из которых это кроссбразуерность и адаптивность.
По собранной мной статистике около 40% людей посещают страницы моего блога с мобильных устройств. Причем со смартфонов более 30% и с планшетов около 7%. Да, у меня и он неплохо смотрится со смартфонов. Пока что есть ошибки в валидации, но думаю, что руки скоро наконец дойдут до этого.
В ближайшее время я хочу переделать шаблон с учетом гибкой и семантической верстки по всем правилам, и тогда он станет еще лучше.
В этой статье я раскрыл тему лишь очень поверхностно. Сайты без адаптивной верстки уже считаются отстающими и несовременными. Пройдет немного времен,и и сайты, имеющие адаптивную верстку под мобильные устройства легко обгонят своих конкурентов. Если вы начнете изучать эту тему, то сделаете хорошую инвестицию своего времени в успешное будущее.
Для тех, кто планирует хорошо разобраться в современной востребованной верстке и научиться верстать профессионально грамотно, я предлагаю обратить внимание на эти курсы.
Среди всего разнообразия существующих на данный момент браузеров таких как Opera, Safari, Internet Explorer, Google Chrome, Mozila Firefox и, конечно же браузер Амиго, который имеет способность самопроизвольно устанавливаться на компьютеры, стоит только посмотреть на ссылку. И у любого из браузеров имеется большое количество версий, выходящих одна за другой. Поэтому каждая новая версия каждого браузера имеет свои собственные особенности. И для корректной работы сайта в каждом из них необходимо использовать кроссбраузерную верстку .
И когда верстается сайт , его надо тестировать на всех браузерах. Случае, когда этого не делается, то после сдачи сайта могут всплыть неприятные дефекты.
Самым «веселым» из браузеров, конечно же является браузер Internet Explorer, хотя при всем при этом большинство пользователей до сих пор используют этот браузер. Так если сайт предварительно проверялся на Chrome, а потом его открывают в Explorer, и, о, ужас. Блоки перепутаны, кнопки меню наезжают друг на друга, картинки отображаются некорректно, в общем, полный хаос.
Поэтому для того, чтобы пользователю было удобно работать с вашим сайтом через любой браузер, и не видел подобного ужаса проведение кроссбраузерной верстки обязательно для любого сайта. Исходя из всего что было написано выше, делаем вывод, что кроссбраузерная html и css верстка – это верстка сайта, нацеленная на создания сайт, отображаемого в каждом браузере одинаково корректно.
Учитывая такое разнообразие браузеров, а так же необходимость того, чтобы сайт был универсальным и мог корректно отображаться во всех браузерах, работодатели предъявляют требование к верстальщикам в обязательном порядке верстать кроссбраузерно. Понимание причин некорректного отображения сайта, а так же навык кроссбраузерной верстки приходит со временем и в процессе долгой практики. Только методом проб и ошибок человек может разобраться какие браузеры, какие заморочки имеют. С опытом, верстальщик старается составить код, так, чтобы он был всячески адаптирован под каждый из браузеров, а в процессе верстки оставалось только подправить небольшие косяки.
Причины проблем с отображением сайта.
Теперь давайте разберем, почему происходят такие неприятности с восприятием кода в разных браузерах.- Верстка не соответствует некоторым стандартам HTML.
- /i>Постоянно обновляются и появляются новые библиотеки и правила CSS. Они прекрасно воспроизводятся обновленными версиями браузеров, но могут некорректно отображаться старыми версиями.
- Internet Explorer . Самый странный браузер, который не понимает половину всех правил и поэтому постоянно придумываются новые хаки, чтобы обойти эти проблему IE.
- Значение атрибутов по умолчанию . В каждом браузере это значение может быть разным. Атрибуты – это цвета элементов, шрифты, их размер. Все это должно быть описано в таблице стилей, в противном случае браузер будет самостоятельно проставлять значения, указанные во свех из них по умолчанию. Поэтому в каждом из них сайт будут отображаться по разному.
Совет 1. Разрешить проблему атрибутов достаточно просто, хотя может немного нудновато. Для этого просто нужно прописать все каждый из атрибутов в таблице стилей. Таким образом браузерам не придется вставлять значения по своему желанию.
Совет 2. Установите все популярные браузеры на свой рабочий компьютер, а также все версии браузера Internet Explorer. Так как установить сразу несколько версий на один компьютер без особых танцев с бубном непросто, то можно установить Internet Explorer Tester. Эта программа дает возможность проверять сайт сразу же на нескольких версиях браузера.
Совет 3. Заранее выберите себе вариант верстки. Здесь есть два варианта. Первый – верстать сайт полностью подходящий под один единственный браузер, а потом исправлять проблемы в каждом следующем браузере. Вариант второй – проверять каждый элемент кода по мере его написания во всех браузерах. Выбирая первый вариант, Вы сможете избежать лишних проблем, переписывая код полностью. Но выбор всегда остается за Вами.
Совет 4. Используйте плагины, позволяющее быстрее находить ошибки кода для каждого из браузеров. Как пример можно потестировать эти плагины:
- Для Chrome на сайте getfirebug.com
- Для Opera на официальном сайте Opera
- Для Mozila на сайте addons mozila
- Для IE на оф. сайте Microsoft
Давайте сделаем вывод из всего вышеперечисленного. Кроссбраузерная верстка – это не страшно, а иногда и весело. В современном мире она очень важна, для того чтобы стать преуспевающим верстальщиком. Главное, чтобы освоить эту верстку, это опыт, большой опыт. Поэтому практиковаться Вам придется очень много. Пока Вы тренируетесь, пользуйтесь разными стратегиями, пробуйте разные методы и средства (например, использовать в своих работах готовые фреймовики, которые могут ускорить разработку сайта и с легкостью создавать адаптивные макеты сайтов). По истечению некоторого времени Вы сможете найти именно свою стратегию того, как сделать кроссбраузерную верстку, и написать сайт, отображаемый корректно во каждом из популярных браузеров.
Изучайте кроссбраузерную верстку и спасибо за внимание.
От автора: CSS верстка – это, по сути, второй этап верстки сайта. И определенно очень важный, потому что в итоге именно он формирует внешний вид сайта. Сегодня хотелось бы еще раз подчеркнуть некоторые важные принципы работы с касакадными таблицами стилей.
Верстка с помощью css – что это и зачем оно нужно?
Ну сначала все же немного разъяснений для новичков. Css – это замечательный язык, который полностью состоит из свойств и их значений. Эти самые свойства позволяют определенным образом влиять на внешний вид элементов. Например, свойство color определяет цвет текста, background – фон элемента, font – его шрифт и т.д и т.п.
Свойств на самом деле не так уж и много, поэтому CSS можно назвать достаточно простой веб-технологией, которую можно без труда изучить. Другое дело, что технологии имеют особенность постоянно двигаться вперед, особенно технологии в области сайтостроения.
Так вот, css придуман для того, чтобы создавать внешний вид. И со своей задачей он справляется замечательно. HTML позволяет создавать элементы, формировать разметка, а css – оформлять все это дело. Эти два языка связаны неразлучно, так что если отнять один – другой просто станет неполноценным.
Поэтому всегда верстальщик в начале работы создает структуру, необходимые элементы, а потом все это оформляет.
Основные вещи, которые можно сделать в css
Табличная верстка с помощью css. На самом деле от таблиц как от способа верстать во многом отказались из-за громоздкого html-кода, но не так давно в css появились возможности, которые позволили любые элементы превратить в табличные. Вот они: Display: table, display: table-row, display: table-cell.
Соответственно, свойство display определяет, как тот или иной элемент будет отображаться на странице. Первое значение преобразует нужный элемент в таблицу, второе – в ряд таблицы, а третье – в отдельную ячейку. Вот так вот за счет таких нехитрых манипуляций вы можете смастерить искусственную таблицу на странице без единого тега table или td в коде.
Кроссбраузерная верстка. Как css может в этом помочь
А помочь он может очень просто – сбросьте все отступы и правила, которые браузеры могут добавлять по умолчанию, и вы уже добьетесь определенной кроссбраузерности. По крайней мере, веб-обозреватели будут работать по вашим правилам, а не вы по ихним. Этот подход еще называют как css reset. То есть создается набор стилей, который сбрасывает настройки по умолчанию.
В сети есть много различных вариантов css reset, так как каждый веб-разработчик любит делать по-своему. В самом примитивном варианте сброс стилей можно сделать так:
padding : 0 ;
margin : 0 ;
ul {
list - style : none ;
То есть мы просто убрали все внутренние и внешние отступы и всех элементов, а также убрали маркеры у списков, потому что сегодня мало кто использует их. Цель css reset – позволить вам начать описание стилей с чистого листа.
Рис.1. Каждому из этих товарищей нужно угодить, иначе можно потерять потенциальных посетителей сайта.
Адаптивная верстка в css
Адаптивная верстка это вообще отдельная ветвь в сайтостроении, но в этой статье я всего лишь объясню вам, что это такое с простейшим примером. Вообще я думаю, что названа она очень правильно. Адаптироваться, значит, меняться. А в сайтостроении в основном нужно меняться под разные разрешения экрана. Сайту меняться, всмысле, не человеку же.
Вообще адаптивность сегодня чуть ли не обязательный параметр нормального сайта. Суть ее в том, что дизайн сайта и его структура немного меняются на разных разрешениях экрана. На смартфонах и планшетах, например, пропадает боковая колонка, а на больших экранах макет перестает увеличиваться и центрируется.
Адаптивность реализуется с помощью так называемых медиа-запросов. Обычно их пишут прямо в главном файле стилей. Простейший пример медиа-запроса:
@media and only screen (max-width: 600px){ img{ float: none; } }
@ media and only screen (max - width : 600px ) {
img {
float : none ;
Что происходит? Этим запросом мы указали браузеру, что если ширина экрана будет меньше 600 пикселей, то нужно отменить обтекание текста изображениями. Зачем? Ну хотя бы потому, что изображение и текст в одной строке, шириной всего 600 пикселей, будут смотреться очень плохо.
Основа адаптивности закладывается с помощью свойства max-width. Например, max-width: 1320px означает, что максимум блок будет тянуться на 1320 пикселей, но если размер окна будет меньше, то он тоже будет уменьшаться. Никакого горизонтального скролла!
Рис.2. Пример записи медиа-запросов. Как видите, для одного шаблона может понадобиться приличное количество правил и стилей, чтобы реализовать нормальную адаптивность.
Какой редактор использовать для работы с css?
Конечно, программа для css верстки должна быть более менее толковой – с поддержкой подсветки синтаксиса как минимум, потому что это очень важно для визуального восприятия кода.
Скриншот с кодом, который вы только что могли наблюдать, сделан из программы Notepad++, где и был открыт css-файл. Мне кажется, этот редактор просто отлично подходит для работы с этим языком – очень хорошо подсвечиваются различные составные части кода, а если разработчик еще и придерживается определенных правил оформления, то код читается просто замечательно.
Узнайте css лучше
Кроссбраузерность, адаптивность, работа с таблицами и многое другое – все это можно очень долго рассматривать отдельно, потому что css предоставляет нам все необходимое для реализации отличного внешнего вида у сайта.
Подробнее о том, как использовать эту технологию при верстке под мобильные устройства, вы можете узнать из . Также в нашем премиум разделе вы можете найти обучающие уроки по основам этой технологии, а также более продвинутый материал по CSS3, поэтому вам не нужно ничего искать, все уже есть, только бери и учись.
Невозможно в столь короткой статье рассказать вам подробно обо всем, что дает верстка с помощью технологии css, но кое-какие моменты, я думаю, вы уловили. Для создания сайта этого просто необходимый язык, без которого нельзя обойтись, а в его изучении вам помогут материалы на нашем сайте, среди которых много и бесплатных. Также я рекомендую вам подписаться на обновления, чтобы было проще получать от нас новые уроки.
– это способность веб-ресурса отображаться одинаково и работать во всех популярных , без перебоев в функционировании и ошибок в верстке, а также с одинаково корректной читабельностью контента. Из-за стремительного развития технологий, сайт рекомендуется делать кроссбраузерным только по отношению к новейшим версиям браузеров.
Данный термин был впервые использован в 90-х годах, когда наблюдался самый разгар соперничества браузеров. В те времена кроссбраузерными считались ресурсы, одинаково работающие в Netscape Navigarot (браузер прекратил свое существование в 2007 году) и в Internet Explorer. Со временем производители приложений начали реализовывать функции, характерные только для одного из браузеров. В результате этого они стали отличаться друг от друга способами отображения страниц и их работой.
Любой современный браузер применяет собственные алгоритмы обработки исходного и кода. В связи с этим разработчики ресурсов встречаются с проблемами совместимости сайта с тем или иным браузером. Чтобы сделать проект кроссбраузерным, вам не обойтись одними лишь стандартными инструментами CSS. Здесь также потребуются специальные CSS-селекторы (хаки), присущие лишь конкретному браузеру, поэтому их придется прописывать для каждого приложения отдельно.
Есть немало эффективных методов, с помощью которых можно добиться корректного отображения страниц даже на старых версиях браузеров. Однако прибегать к таким процедурам разумно только в том случае, если вы уверены, что большая часть посетителей сидит на вашем сайте именно с них.
В последние годы оптимизаторы все меньше сталкиваются с проблемами кроссбраузерности, потому что разработчики программного обеспечения перестают поддерживать старые версии своих браузеров. Так, например, компания Microsoft уже в открытую заявляет о необходимости использования обновленного Internet Explorer, призывая отказываться от устаревших версий продукта.
На заметку. Сегодня многие сайтостроители устанавливают специальную страницу, известную как «заглушка», которая появляется на экране пользователей браузеров, не поддерживаемых сайтом. Такая страница предлагает заменить их на новые версии или популярные браузеры, чтобы контент отображался корректно.
Стоит отметить, что элементы веб-ресурса не должны быть абсолютно идентичны во всех браузерах, которые только существуют на сегодняшний день. Соответствующим можно считать сайт, если:
- информация на странице читабельная;
- сохранена структура;
- нет ошибок в верстке;
- текст не «накладывается» поверх другого текста и изображений, если только это не предусмотрено автором контента.
Тестируя веб-ресурс на кроссбраузерность, необходимо применять самые новые версии популярнейших браузеров:
- Google Chrome.
- Mozilla Firefox.
- Opera.
- Internet Explorer.
- Netscape.
- 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 года.
Похожие статьи-
SQL запрос INSERT INTO — наполнить базу данных информацией
Всем привет! В данной статье речь пойдет о том, как можно добавлять данные в таблицу в Microsoft SQL Server, если Вы уже хоть немного знакомы с языком T-SQL, то наверно поняли, что сейчас мы будем разговаривать об инструкции INSERT, а также о том,...
IP-телефония -
Обозначение клавиш на клавиатуре
Привет всем читателям блога. Скажите друзья, задумывались ли вы, какой большой функционал таит в себе клавиатура? Большинство людей даже не подозревает, что с её помощью можно выполнять действия, которые могут облегчить и . Не печально ли, что...
Мегафон -
Как изменить разрешение экрана
В современном мире все стремительно меняется. Фотоаппараты всех моделей, от самых дешевых «мыльниц» до профессиональных «зеркалок», умеют снимать видеоролики качества HD. Такое видео возможно и для дорогих моделей мобильных телефонов. Стандарты...
Мобильные операторы
КатегорииВидеоматериалы
