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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

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

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

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

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

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

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

Предисловие. Почему так получилось

После появления в 1994 году одного из первых удачных браузеров Netscape Navigator, созданных на основе первого браузера с графической оболочкой Mosaic, копания Microsoft решила сделать свой браузер и назвать его Internet Explorer. Первая и вторая версия IE поставлялись вместе с пакетом Microsoft Plus!, дополняющим возможности Windows, но широкого распространения не получили. Тогда Microsoft решили разработать радикально отличающийся от IE 1.0 и 2.0 браузер, для чего компания наняла программистов из Spyglass, которые разработали новый браузер на основе Mosaic. Так в 1996 году появился Internet Explorer 3.0. Однако разработчики ввели в браузер несовместимые со стандартами расширения HTML, которые впоследствии сохранялись от версии к версии. Последующее параллельное развитие IE и Netscape Navigator привели к захвату IE 95% рынка. Застой в развитии IE с 4.0 до 6.0 версии, с плохой поддержкой стандартов, низкой скоростью работы и отображения страниц, привел к возрождению Netscape в версии 6.0, который был написан на новом движке Gecko. Обновленный Netscape Navigator не смог добиться былых вершин и со временем компания Netscape объявила о прекращении поддержки своего браузера.
Однако движок Gecko послужил основой для создания в 2004 году современного браузера Mozilla Firefox. В 1996 году появилась Opera, которая добилась своих успехов скоростью и простотой использования. В 2003 году компания Apple выпустила свой браузер Safari на движке WebKit, отказавшись от IE, ранее использовавшийся в Mac OS. В 2008 году Google также решил вступиться в гонку браузеров, выпустив Google Chrome, основанный на том же движке что и Safari.
Таким образом, каждый из браузеров имеет свою историю, имеет свои версии, которые в свою очередь различаются поддержкой Javascript, HTML и CSS.

На сегодняшний день доля мирового рынка браузеров составляет: 45% для IE, 31% Firefox, 15% Chrome, 5% Safari и 2% Opera.
Отдельно хочется порадоваться о снижении доли на рынке самого «старого» и проблемного браузера IE6, который сейчас занимает всего 6%.

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

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

Есть два основных способа добиться одинакового отображения сайта в браузерах:

Разделение стилей с помощью условных комментариев

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

Условные комментарии понимает только IE, поэтому остальные браузеры прочтут этот код как обычные комментарии.

Можно задать стили, которые увидят все браузеры кроме IE:

Также есть возможность идентификации версии IE пользователя:
для IE6
для IE6 и выше
для IE меньше чем 6 версии
для IE меньше или равен 6 версии
для IE больше 6 версии
и подключения соответствующего стиля для каждой версии IE(номер версии IE можно поменять на нужный).

Можно избежать необходимости подключения разных CSS-стилей для разных версий IE, определяя версии IE и назначая классы для body:

И используя их в дальнейшем в общем стиле для каждой версии:
.ie6 .elementstyle {
background: #123;
}

Плюсом данного метода является валидность его использования.

CSS-хаки

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

Для IE6:
.elementstyle {
_background: #123;
}
или:
.elementstyle {
-background: #123;
}
или валидно:
* html .elementstyle {
background: #123;
}

Для IE7:
*+html .style {
background: #123;
}
или валидно:
*:first-child+html . elementstyle {
background: #123;
}

Для IE8:
.elementstyle {
background: #F12\3/;
}

Для Firefox:
@-moz-document url-prefix() {
.elementstyle {
background: #123;
}
}

Для Safari и Chrome(один движок, помните?):
@media screen and (-webkit-min-device-pixel-ratio:0) {
. elementstyle {
background: #123;
}
}
или
body:last-child:not(:root:root) .elementstyle {
background: #123;
}

Для Opera все сложнее. CSS-хаки для Opera понимают Safari и Chrome, поэтому нужно использовать совместно хак для Opera и для Safari\Chrome, чтобы переопределить стиль обратно:
@media all and (min-width:0px) {
head~body .elementstyle {
background: #123;
}
}
body:last-child:not(:root:root) .elementstyle {
background: #fff;
}
Альтернативой этим двум хакам может служить интересный способ определения стилей для Opera с помощью встроенного объекта «opera» в JavaScript:

Способ ненадежный, потому что не будет работать если пользователь отключил JavaScript.

Заключение

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

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

Теги: html-верстка, css-хаки

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

Некоторые браузеры работают только на одной платформе: 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. Включайте флаги, пробуйте, будьте в курсе и главное - хватит гоняться за пикселями, займитесь хорошими интерфейсами. Сайты не должны выглядеть одинаково во всех браузерах .