Кроссбраузерная блочная верстка. Кроссбраузерность. Причины и приемы. Что собой представляет кроссбраузерная верстка
Кроссбраузерная верстка - это верстка сайта с его одинаковой видимостью в разных браузерах. Сказать по правде это занятие не легкое, так как каждый браузер имеет свои особенности и недостатки. Поэтому браузер для веб-дизайнера, как «Криптонит» для «Супермена». Жизнь веб-дизайнеров во всем мире, была бы гораздо лучше, если бы браузеры отображали красивые дизайны без багов и подвохов. Но, к сожалению этого никогда не будет. Это наше время, чтобы заново продумать, как мы работаем с браузером. При кроссбраузерной верстке нужно учитывать все особенности каждого из браузеров, так как пользователь заходит с того браузера к которому он привык и мы его не можем заставить перейти на другой софт, и должны подстраиваться под него.
Полиграфия и веб-верстка
Современная веб-верстка сильно отличается и имеет ряд недостатков по сравнению с полиграфическим дизайном, где веками создавалась мировая практика. Хотя печатный рисунок и нельзя позиционировать из-за его фиксированного характера, полиграфия имеет плюсы в других областях, таких как цвет и контрастность из-за качества бумаги или печати.
Браузеры являются наиболее известными разрушителями хороших дизайнов, как в старину старые печатные установки или плохое качество бумаги разрушало печатный дизайн. Но в отличие от мировой полиграфии, веб не может опираться на мировой опыт и проверенные методы для обработки несоответствий. Еще одной уникальной особенностью работы верстальщика является то, что он не может получить результат для контроля качества печати, как при полиграфии. Мы не знаем, какой браузер выберет пользователь, или какой монитор он использует. Поэтому какой бы не была кроссбраузерной верстка, все равно отличия будут на экранах у пользователей. Но наша задача - минимизировать различия в дизайне при выводе его в окно браузера пользователя.
Разные браузеры для разных людей
Браузеры и компании, так же, как и любая другая компания в мире имеет конкуренцию между собой. Но если была бы какая-то организация веб-стандартов, то не было бы смысла в создании разных браузеров и терялась бы конкуренция между ними. Есть только один удивительный браузер, считаю, мы бы назвали его WebKit. Но так как браузеры ведут борьбу за пользователей, то и получаются различия в браузерах в целях привлечения публики.
В мире полиграфии (печати), компании конкурируют друг с другом, добавляя новые возможности и различные профили цвета. Кроме того их инженеры учитывают особенности аудитории пользователей их продукта. Например, принтеры фирмы Canon используются более для коммерческой печати. Принтеры Ricohне имеют таких интенсивных цветовых гам как предыдущие, поэтому их используют для печати внутренней документации в компаниях (отчеты, протоколы, акты …). Думаю, для верстальщиков кроссбраузерного дизайна аналогия понятна. Если вы дизайнер, который делает печать объявлений для крупных коммерческих компаний, вы, скорее всего, выберете принтер с отличным качеством печати и широкой цветовой гаммой, а не деловой или личного класса.
Браузеры аналогичны к принтерам. Некоторые построены для обработки тяжелых конструкций, другие построены более для оказания документов. IE построен более для технической или бизнес аудитории, как Chrome, Firefox, для удовлетворения более творческой аудитории.
Так как веб прогресс следующего десятилетия приведет к еще большим различностям и большему количеству браузеров с их особенностями, нам стоит подумать и поискать путей к созданию более кроссбраузерных дизайнов, чтобы справиться с совместимостью браузеров и нашей верстки.
Давно уже прошли те времена, когда все выглядело одинаковым в браузерах, поэтому приходится искать обходные пути для кроссбраузерности верстки или делать более простой скучный дизайн. Эти новые браузеры заставят нас переосмыслить пути создания кроссбраузерного дизайна.
Качество кроссбраузерной верстки
Качество, это понятие растяжимое. Потому что простые проекты, будет гораздо проще сделать, чем какой-то дизайнерский шедевр. Поэтому при работе с заказчиком нужно учитывать сложность проекта по отношению к его кроссбраузерной верстке. Так как сделать действительно классный, кроссбраузерный, творческий, динамический дизайн практически нереально, поэтому при работе с заказчиком нужно указать на недостатки или точнее на различия вывода некоторых элементов дизайна в разных браузерах. Нужно дать им увидеть качество верстки в основных браузерах (популярных) и второстепенных, затем предоставить возможность выбора. Если вы знаете различия браузеров настолько хорошо, что сможете указать их в проекте при создании макета в Photoshop то это только плюс к вашей работе с клиентом.
С опытом работы, при оценке качества кроссбраузерной верстки, можно создать общий шаблон, или таблицу, которые будут показывать различия некоторых браузеров и использовать это для работы с клиентом.
Несколько советов для кроссбраузерной верстки:
Сделаем выводы:
В будущем нас ждут новые сюрпризы при кроссбраузерной верстке. Подготовимся к ним и будем искать новые альтернативы (обходные пути). Возможно, нам в этом поможет большая скорость интернета, мощные ПК, и новые веб технологии, такие как Flash и другие.
- Знаете ли вы аудиторию? Может быть, ваша аудитория и не требует новых "наворотов" или новых возможностей браузера.
- Поддерживайте ваш бренд с помощью цвета, логотипа и последовательности стилей. Не убивайте бренд новыми дизайнерскими идеями. Бренд - это качество и традиция.
- Убедитесь что браузер не нарушает смысл вашего сайта. Содержание страницы и общее значение сайта должны быть отделены.
- Равно к вышеописанному совету, контент (содержание страницы) должно быть отделено от дизайна и стиля. В смысле, содержание должно быть четко видимым, а не сливаться в общую картинку или какой-то набор блоков и символов.
- Если вы верстаете ваш личный сайт, то проверяйте кроссбраузерность его дизайна в новых версиях браузеров постоянно, чтобы не потерять пользователей.
Если собрать охапку современных браузеров, то разложить её можно по-разному: по устройствам, по платформам, по типу работы, да хоть по цвету иконок. Самое полезное для разработчика - уметь разложить их по движкам. Именно движок, то есть самое ядро браузера, определяет как он работает с вашей вёрсткой.
Некоторые браузеры работают только на одной платформе: 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 код выглядит по разному в разных браузерах. Более того, один и тот же код выглядит по разному в разных версиях одного и того же браузера.
Естественно, любой веб мастер должен заботится о том, чтобы сайт выглядел одинаково в наибольшем количестве браузеров. Именно это умение (когда код выглядит одинаково в различных браузерах) и называют "кроссбраузерной версткой 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 и css в и дам несколько полезных советов. Давайте начнем разбор полетов!
Кроссбраузерность, покажи свое лицо!
Все из вас знают английское название термина «кроссбраузерность»: cross-browser. В дословном переводе это означает: «работающий во всех браузерах». Вот по сути и была названа главная цель кроссбраузерности: способствовать идентичному отображению в любом существующем браузере.
Это означает, что независимо от того, в каком ППО для просмотра вы откроете сервис, его стилевая разметка не должна измениться.
Почему же все такие проблемные?
В сфере IT на этот философский вопрос можно дать ответ. И он, на самом деле, очень прост. В наше время технологии развиваются с бешенной скоростью и поэтому каждый год для браузеров выходят расширения, обновления, внедряется поддержка новых возможностей веб-языков и соответственно исключаются устаревшие функции и методы.
Все это способствует тому, что разные браузеры по-разному работают с некоторыми программными решениями, могут некорректно их отображать или вообще не поддерживать работу с ними.
Из этого и выплывает, что новые версии браузеров поддерживают многие недавно вышедшие оптимизации языков и библиотек, а более ранние не понимают, что от них вообще хочет разработчик.
Второй проблемой некорректного отображения объектов на страницах веб-сервисов могут стать браузерные стандартные значения. Так, в каждом продукте, будь то , Safari, или другие, для большинства свойств и атрибутов установлены некие значения по умолчанию. В качестве примера можно назвать разные отступы от края экрана для тега body.
И к третьей проблеме можно отнести в некотором роде халатность самих разработчиков. Что я подразумеваю под этим? Всего лишь несоблюдение стандартизированных правил, которые были установлены специальной организацией W3C (официальный сайт расположен по ссылке https://www.w3.org).
Данный консорциум разрабатывает общие стандарты в области веб-разработки, благодаря которым и достигается совместимость между различными программными продуктами.
Рецепты для решения проблем с идентичностью отображения
Познакомившись с основными «камнями преткновения» на пути к кроссбраузерности, вы, вероятно, задали себе вопрос: «А как же тогда сделать сайт, функционирующий во всех браузерах одинаково?». Чтобы ответить на этот вопрос, я решил перечислить базовые решения и полезные советы по порядку.
На самом деле можно еще много чего написать на эту тему. Но я считаю, что на данном пункте полезных рецептов стоит остановиться, так как о важных моментах я вам рассказал.
Заметьте, что за один раз невозможно научиться кроссбраузерной верстке. Стоит практиковаться и пробовать новые решения во время реализации новых проектов. Поэтому углубляйте свои знания за счет книг, смотрите курсы, касающиеся данного вида верстки и основ юзабилити, читайте полезные статьи.
С уважением, Роман Чуешов
Прочитано: 106 раз
У вас есть вопрос - не стесняйтесь и задавайте, а мы ответим на него в одном из наших выпусков.
Задать вопрос
Что такое кроссбраузерная вёрстка, - спрашивают Илья, Сергей и Эдуард, - какие есть браузеры и нужен ли пиксель-пёрфект?
Если собрать охапку современных браузеров, то разложить её можно по-разному: по устройствам, по платформам, по типу работы, да хоть по цвету иконок. Самое полезное для разработчика - уметь разложить их по движкам. Именно движок, то есть самое ядро браузера, определяет как он работает с вашей вёрсткой.
Некоторые браузеры работают только на одной платформе: 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. Включайте флаги, пробуйте, будьте в курсе и главное - хватит гоняться за пикселями, займитесь хорошими интерфейсами. Сайты не должны выглядеть одинаково во всех браузерах .