Кроссбраузерная верстка.

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

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

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

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

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

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

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

Видеоверсия

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

Что собой представляет кроссбраузерная верстка?

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

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

Пошаговое руководство в общих чертах

Итак, давайте рассмотрим, как сделать кроссбраузерную верстку. Первоначально следует определиться, с какими программами сайт будет работать. Примите к сведению, что количество браузеров приближается к двум сотням, поэтому пытаться угодить всем - дело неимоверной сложности. Поэтому выбирают число в диапазоне от 3 до 8. Чтобы определиться, на что ориентироваться, можно воспользоваться и вспомогательными сервисами вроде Yandex Metrika и После этого следует выяснить, как же будет решаться проблема достижения кроссбраузерности.

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

Адаптивный дизайн

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

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

Что нужно делать?

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

У неё ширина была задана в размере 800рх. С экраном в 1600рх это будет довольно привлекательно. А вот на 700рх она будет смотреться нелепо. Что делать в таком случае? Можно задать размер не в пикселях, а в процентах! И занимать надпись будет не фиксированную длину, а половину ширины экрана. В процентах можно задавать и расстояние, на котором от краев экрана будет размещен определённый элемент. Но вот что делать, если экран слишком уж маленький?

Допустим, он составляет 300рх? В этом случае нам поможет медиазапрос, которому необходимо прописать фиксирование ширины. И если она равняется 700рх и меньше, то можно установить, что надпись будет занимать 75% места. А если ширина равняется 300рх и меньше, то можно выставить и все 100%. В целом тема весьма интересная и полезная, поэтому её можно изучить весьма подробно. Но, увы, здесь информации на книгу, и поместить всё в статью не получится.

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

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

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

Заключение

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

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

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

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

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

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

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

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

Видеоверсия

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

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

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

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

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

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

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

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

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

Поговорим о правильной верстке сайтов. Фиксированная, блочная, адаптивная, мобильная, резиновая, гибкая, семантическая, валидная, кроссбраузерная верстка. Давайте посмотрим, что все это значит.

Верстка сайтов на 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%. Да, у меня и он неплохо смотрится со смартфонов. Пока что есть ошибки в валидации, но думаю, что руки скоро наконец дойдут до этого.

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

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

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