От автора: люди пользуются разными браузерами для просмотра веб-страниц. Конечно, есть самые популярные, такие как Chrome. Есть и менее используемые (Safari, Internet Explorer), но если вы делаете сайт для людей, то должны знать про кроссбраузерность – как сделать ее и что это вообще такое. Давайте посмотрим, как добиться одинакового отображения сайта во всех основных браузерах.
Главная цель кроссбраузерности – не допустить значительных изменений дизайна сайта в разных веб-обозревателях. Если разница есть только в мелочах и на общее восприятие сайта это не влияет, то можно сказать, что с проблемой кроссбраузерности вы справились. Но все-таки, какие реальные советы можно дать по этому поводу?
Как добиться кроссбраузерностиНа сегодняшний момент есть 5 основных самых популярных браузеров, под которые и нужно оптимизировать сайт. И если с самыми новыми версиями веб-обозревателей обычно подружиться несложно, то чем старее версия, тем больше может быть проблем.
Например, IE6 является одним из самых проблемных браузеров в плане поддержки новых тегов html и свойств css. И все же некоторые сегодня до сих пор требуют нормальное отображение сайта в этом браузере. Как по мне, это уже чересчур. Поддержки IE8 достаточно.
Впрочем, это небольшое отступление. Теперь давайте рассмотрим реальные шаги, которые помогут сделать кроссбраузерность сайта.
Используйте по максимуму готовые решения. Если вы хотите реализовать новые свойства и научить старые браузеры их понимать, понадобятся javascript-библиотеки. Без них в данном случае просто никуда. Вы должны установить jQuery.
Есть такая замечательная javascript-библиотека под названием Modernizr. Ее возможности позволяют реализовать альтернативу для тех свойств, которые не поддерживаются. Именно ее я рекомендую использовать и вам.
Итак, сначала нужно проследовать на официальный сайт. https://modernizr.com/download. Здесь нужно отметить галочками те технологии, которые вы планируете использовать на своем сайте. Нужно сказать, что список достаточно длинный и без среднего знания современных веб-стандартов и английского языка вы едва ли сможете разобраться. В любом случае, есть и интуитивно понятные свойства. Даже если вы отметите галочками все, то полученный код не будет слишком громоздким.
Рис. 1. Выбор технологий, которые будет проверять библиотека.
Проверка работы библиотекиПосле скачивания пользовательской версии библиотеки нужно проверить ее работу. Ее необходимо будет подключить с помощью тега script, указав путь до файла. Если все правильно, то у тега html должно появиться много новых стилевых классов. Эти классы названы по тем технологиям, которые вы отметили галочками.
>p?Соответственно, если в теге html будет указан такой класс, значит, технология в этом браузере работает. Если же что-то не поддерживается, то будет прописан класс “no-название технологии”. Сразу же приведу пример:
К примеру, вам надо проверить свойство box-shadow. Для справки, оно задает тень элементу. Если браузер поддерживает его, то в теге html появится этот стилевой класс. Если веб-обозревателей не распознает свойство, то появится класс “no-boxshadow”.
Рис. 2. В теге html вы увидите множество классов. В этом случае видим, что браузер поддерживает практически все технологии.
Теперь управление кроссбраузерностью полностью в ваших руках. Достаточно классу no-boxshadow задать какие-то альтернативные свойства и во всех браузерах, которые не поддерживают свойство box-shadow, вместо этого будут применены эти правила. Это очень удобно.
На хабрахабре я нашел еще один пример, который хотел бы вам здесь привести. Там был приведен пример того, как можно использовать библиотеку для реализации альтернатив в старых браузерах.
Multiplebgs selector { background-image: url("изображение.png") center 40px no-repeat, url("изображение2.png"); } .no-multiplebgs selector { background-image: url("изображение.png") center 40px no-repeat lightgray; }
Multiplebgs selector { background - image : url ("изображение.png" ) center 40px no - repeat , url ("изображение2.png" ) ; } No - multiplebgs selector { background - image : url ("изображение.png" ) center 40px no - repeat lightgray ; } |
Объяснение примера. Нас интересует технология множественных фонов, которые давно поддерживаются в СSS3. Для этого достаточно перечислять адреса картинок и их параметры через запятую. Естественно, старые браузеры не поддерживают этого, поэтому для них прописываем свои стили, используя класс.no-multiplebgs. Он указывает на то, что стили применяться в том случае, если браузер не поддерживает множественные фоны.
Таким образом, может задать для этого селектора другие стили и так получить красивое отображение сайта в любых веб-обозревателях. Конечно, чтобы полностью ощутить возможности Modernizr нужно самому неплохо разбираться в веб-программировании и верстке сайтов. Опытный человек сможет определить, какими свойствами можно заменить те, которые поддерживаются очень плохо.
Конечно же, функционал библиотеки намного шире. Можно проводить тестирования поддержки различных технологий и на выходе цеплять события к результату. Пример.
Вопросы кроссбраузерности будут ещё долго мучить умы веб-разработчиков, ровно до тех пор, пока не выпустит один браузер, которым будут пользоваться все без исключения (то есть - никогда - прим.ред. ). Сейчас самым гагном является IE6, отчасти IE7, которые добавляют никого не обижающим верстальщикам кучу лишней работы.
Предлагаю Вашему вниманию подборку CSS хаков, которая поможет облегчить Вам жизнь и постигнуть дзен достигнуть кроссбраузерности.
Сброс настроек CSS
. У всех браузров изначально включены какие-то стили CSS. Например, самый неудачный пример, который присущ большинству (если не всем) бразуеров, в котором прописаны дефолтовые margin 10px для тега боди, в результате чего помещённый вовнутрь конент оступает от края браузера, что рушит представление об изначальном виде дизайна. Самый яркий пример - сайт небезызвестного магазина "Intersport", а точнее его российского филиала - там до сих пор не знают, что margin можно обнулять.
Обычно я использую следующую конструкцию для исправления мешающих параметров:
* { margin: 0px; padding: 0px;}
img { border: 0; }
a, img, div, input { outline: none; }
ol, ul { list-style-position: inside; }
В принципе этого хватает, чтобы достигнуть кроссбраузерности и корректного отображения сайта. Однако думаю всё таки стоит начать обнулять весь CSS. Может я слегка консервативен, поэтому этого не делаю до сих пор - зачем делать, если итак всё окей. Но может я чего-то и упускаю.
Кардинально вопрос решился на сайте - они предлагают следующий код:
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,
b, u, i, center,
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-size: 100%;
vertical-align: baseline;
background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {
content: "";
content: none;
}
/* remember to define focus styles! */
:focus { outline: 0; }
/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }
/* tables still need "cellspacing="0"" in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
Min-Height в IE . Internet Explorer 6 начисто не воспринимает CSS min-height, особенно тогда, когда оно так нужно. Исправляется дело таким вот образом:
selector {
min-height:300px;
height:auto; !important
height:300px;
}
Выделение ссылок пунктирной рамкой в браузерах
. Зачастую мешает, портит вид и никому не нужно.
Для нормальных браузеров (в т.ч. IE8) нужно выставить outline:none
(), а для IE6 и IE7 надо использовать невалидный outline:expression(hideFocus="true")
. Даже не смотря на то, что для IE6 и IE7 этого хака, как правило, не нужно (не припомню случая, когда он нормально с ссылками a работал), можно достигнуть валидности кода, назначив этот параметр через javascript или через какую-нибудь библиотеку. Например, для jQuery код следующий:
$("a").attr("hideFocus", "true").css("outline", "none");
Прозрачность . Иногда нужно блокам задавать прозрачность. Делается это просто, но, увы, невалидно:
selector {
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;
}
Прозрачность PNG в IE6 . Не забываем про существование конструкции:
img, div {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(…);
}
Но поскольку она невалидна, да и при этом если задавать png в качестве бэкграунда, то его нельзя будет отпозиционировать и отрипитить. Посему рекумендуется к использованию IE PNG Fix ().
Бикубический режим интерполяции для масштабируемых изображений . Звучит заумно, но ничего сложного нет. Помните в IE6 (и вроде бы в IE7 тоже) если размещаем картинку на странице и уменьшаем её размер, то она уменьшается через опу и выглядит как гагно? Так вот, есть способ это исправить (правда, увы, невалидный)
img { -ms-interpolation-mode: bicubic; }
Скроллинг в IE . По умолчанию в экслорерах (шестом точно, может седьмом) вертикальная полоса прокрутки в браузере отображена всегда, даже когда контента на странице вообще нет. Исправляется просто.
html { overflow: auto; }
Удваивание полей в IE . При наличии float:left и указанного маргина, маргин в ишачке удавивается. Лечение - display:inline ().
Псевдокласс:hover для IE . Поскольку ишак совсем тугой, то он ховер поддерживает только для тега a. Иногда этого хватает (так как a можно через display:block превратить по поведению в div), а иногда не хватает вообще. Решений на CSS для этого нет, но зато есть на jQuery. Создаём класс на цсс (в нашем случае с именем classname), задам ему цвет, фон и прочее, ну, и добавляем для нужного элемента код (в нашем случае он для li"шек)
Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Подписаться
Кроссбраузерность - способность веб-ресурса подстраиваться под несколько браузеров и корректно отображаться в них.
Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA
Например, вы сделали сайт для вашего интернет-магазина. Вы разработали красивый дизайн, который приятен для глаз. Но на ваш сайт пользователи заходят через разные браузеры. Кто-то вообще использует смартфон. И если вы не проверили кроссбраузерность ресурса, может случиться, что в некоторых браузерах сайт будет отображаться плохо.
Могут съезжать элементы, могут не отображаться картинки, станут некрасивыми шрифты. Человек не будет пользоваться таким сервисом. Он пойдет искать дальше.
Задача разработчика сайта - сделать его так, чтобы вне зависимости от браузера и устройства ресурс отображался правильно.
Кроссбраузерность версткиМежду браузерами идет конкуренция. Раньше каждый старался добавить исключительные фишки и опции. Это привело к тому, что стандарты HTML перестали соблюдаться, и каждый браузер по-своему отображал страницы.
Netscape Navigator выбыл из гонки, отдав монополию Internet Explorer. Спустя практически одновременно начали набирать обороты проекты Mozilla Firefox (Gecko), Google Chrome (Blink), Opera (WebKit) и Safari (WebKit), разделив рынок между собой и заставив сообщество задуматься о вопросе кроссбраузерности своих сайтов.
Добрый день, союзники!
Мне, как верстальщику, приходится ежедневно сталкиваться с различными CSS3 свойствами, которые, хочется мне или нет, приходится использовать так, чтобы они корректно отображались во всех современных и несовременных браузерах. Само собой, у меня собралась некая библиотека, которую я использую при верстке различных проектов. Собирал я свою коллекцию, из различных ресурсов и форумов, на безграничных просторах сети Интернет, так что неудивительно, если кто-то уже сталкивался с чем-то в отдельности.
Возможно опытным представителям нашей профессии данный пост будет не интересен, но более молодым и неопытным он может пригодиться. От старших товарищей, в свою очередь, хотелось бы получить комментарии, по недочетам, которые, возможно, тут присутствуют, и важным моментам, которые, наоборот, могут тут отсутствовать.
Для корректной работы CSS3 во всех браузерах, приходится использовать некоторые внешние библиотеки.
Собственно, после всех приготовлений, можно переходить непосредственно к свойствам CSS3, над которыми мы будем издеваться.
Закругленные края или border-radius .border-radius { border-radius: 10px; background-clip: padding-box; behavior: url(PIE.htc); }Свойство background-clip: padding-box; исключает возможность того, что картинка на заднем фоне будет залезать на наши закругленные области.
Строка behavior: url(PIE.htc); подключает наш PIE файл, для поддержки данного свойства IE.
Тень блока или box-shadow .box-shadow{ box-shadow: 3px 3px 4px #444; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#444444"); behavior: url(PIE.htc); }Свойства filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#444444"); используются для IE.Градиент на фоне или background: linear-gradient() .gradient{ background-color: #444444; background: -webkit-linear-gradient(top, #444444, #999999); background: linear-gradient(to bottom, #444444, #999999); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr="#81a8cb", endColorstr="#4477a1"); -pie-background: linear-gradient(to bottom, #444444, #999999); behavior: url(PIE.htc); } Двойной задний фон или background: url(), url(); .multiple-background{ background: url(back1.png) 0 0 no-repeat, url(back2.png) 0 0 no-repeat; -pie-background: url(back1.png) 0 0 no-repeat, url(back2.png) 0 0 no-repeat; behavior: url(PIE.htc); }
Современные браузеры, вроде, все понимают, а для IE опять используем PIE.Картинка вместо обводки или border-image: url(); .border-image{ -webkit-border-image: url("image.png") 30 round round; border-image: url("image.png") 30 round round; behavior: url(PIE.htc); }
Здесь свойство behavior не будет работать в IE10.Тень текста или text-shadow На этом прелести PIE заканчиваются. Для использования тени текста в IE, необходимо использовать, вышеупомянутую, библиотеку jQuery.textshadow.
Для использования, необходимо, для начала, в стилях указать нашу тень, для обычных браузеров
.text-shadow{
text-shadow: 1px 1px 3px #000;
}
А затем, c помощью библиотеки, просим необычные браузеры IE нас понять
$(function(){
$(".text-shadow").textShadow();
})
предварительно, не забывая, подключить эту библиотеку и все, что необходимо, для ее работы.
К сожалению данное свойство не будет работать в браузерах IE7 и младше. На данный момент я не нашел корректного решения данного вопроса, но это вовсе не означает, что его не существует. Ставим блоки в линию или display: inline-block Прекрасное современное свойство, которое позволяет ставить блоки в один ряд, не используя свойства float и так далее. К моему сожалению, на практике, столкнулся с тем, что многие используют его в чистую. То есть так
.inline-block{ display: inline-block; }
Код в таком исполнении поддерживается лишь последними современными браузерами. Для полной поддержки, в него необходимо добавить немного строчек. Полный код таков:
.inline-block{ min-height: 250px; display: inline-block; vertical-align: top; zoom: 1; *display: inline; _height: 250px; }
Здесь
display: -moz-inline-stack; используется для понимания inline-block старой Mozilla.
Свойство vertical-align: top; выравнивает все блоки по вертикали по верху. В зависимости от задачи можно и по низу.
И наконец свойства
zoom: 1; *display: inline; _height: 250px;
используются для IE. Обратите внимание что в данном случае _height: 250 используется потому, что IE не знает свойства min-height .Прозрачность или opacity .opacity{ opacity: 0.5; filter: alpha(opacity=50); }
Обращаем внимание на то, что в фильтрах, которые используются для IE, значение прозрачности указывается в диапазоне от 0 до 100, а не от 0 до 1 как обычно.Анимация или transition .transition { -webkit-transition: all 1s ease; transition: all 1s ease; } Трансформация объектов или transform .transform{ -webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); }
Свойства transition и transform не поддерживаются браузерам IE ниже 9 версии, а transition и вовсе только с 10 версии. Решения для старых IE я пока тоже не нашел. Размер заднего фона или background-size .background-size{ background: url("back.jpg") no-repeat top center; -webkit-background-size: cover; background-size: cover; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="back.jpg", sizingMethod="scale"); } Селекторы CSS3 Речь идет о таких селекторах как
ul li:fist-child{} ul li:last-child{} ul li:nth-child(3){} input{} a:hover{}
И других полезных селекторах: которые были добавлены в CSS3. Для того, чтобы обеспечить качественную поддержку таких селекторов, мы используем, вышеупомянутую, библиотеку Selectivizr. Чтобы она сработала, необходимо просто подключить ее перед нашим файлом CSS.
Полный список селекторов с которыми работает Selectivizr, можно ознакомиться на официальной страничке , в разделе «How does it work?».
Напоследок, хочется отметить, что я не рассматривал все свойства на кроссбраузерность, а только те, что чаще всего используются в повседневной практике. Надеюсь данный пост может быть Вам, хоть чем-то, полезен!
Обновил свойства border-raduius и opacity. Спасибо pepelsbey за строгое замечание!
Обновил большинство свойств в соответствии с рекомендациями. Спасибо огромное пользователю Aingis за огромную помощь!
Все пользователи сети интернет для просмотра страниц интернет сайтов используют специальные программы – браузеры. Браузер это программа, которая осуществляет связь пользователя с сервером. Браузер посылает запросы к серверу и получает ответы от него, и этот ответ преобразует в тот вид, который все привыкли называть интернет страницей со всем ее содержимым, текстом, изображениями, видео и т.д. Готовый вид страницы (расположение контента, размеры, цвет, шрифт и пр.) задается с помощью HTML верстки и каскадных таблиц стилей (CSS), которые были преобразованы из изображения нарисованным дизайнером, в вид понятный браузеру. Это и называется версткой. Простыми словами HTML верстка это расположение элементов интернет страницы, там, где они должны располагаться по замыслу дизайнера, который создавал макет будущей страницы.
Но каждый пользователь отдает предпочтение более привычному для себя браузеру. В наше время существует 5 самых популярных браузеров, о которых говорит статистика. Это Chrome, Safari, Opera, FireFox и Internet Explorer (IE). Эти браузеры той или иной версии чаще всего используют пользователи сети интернет, для просмотра «мировой паутины». Каждый из этих браузеров имеет свою функциональность и свои особенности отображения интернет страниц.
В большом разнообразии всех браузеров и их версий, и их особенностях отображения интернет страниц, появилось понятие коссбраузерность HTML верстки. Так что же такое кроссбраузерность?!
Кроссбраузерность – это свойство интернет страниц отображаться в разных версиях браузеров одинаково, без искажений и «расползания» элементов страницы, не зависимо от особенностей самого браузера.
Самым большим количеством этих особенностей обладают браузеры Internet Explorer от Microsoft, за что их и «не любят» большинство HTML верстальщиков, и придумывают для него разные способы приведения к правильному отображению страницы (данные способы верстальщики называют «костылями»). Лично наше мнение, что сверстать HTML страницу кроссбраузерной можно без применения этих самых «костылей», которые засоряют HTML код страницы.
Условные комментарии для Internet Explorer Условный комментарий для всех версий IE Условный комментарий для IE 7 Условный комментарий для IE 6 Условный комментарий для IE 5 Условный комментарий для IE 5.5 Условный комментарий для IE младше 6 версии Условный комментарий для IE младше 7 версии Условный комментарий для IE младше 8 версии Условный комментарий для IE младше 9 версии Условный комментарий для IE старше 6 версии Условный комментарий для IE старше 7 версии Условный комментарий для IE старше 8 версии Основные правила кроссбраузерной верстки:Не секрет, то, что каждый браузер имеет свои стили оформления тех или иных элементов HTML кода, размер шрифта, размер отступов и т.д. что уже приведет к расползанию элементов страницы, и она не будет кроссбраузерной.
Отсюда можно сделать вывод, что все собственные стили разных браузеров нужно «отключить», точнее сбросить на одинаковые. Некоторые HTML верстальщики делают это непосредственно при задании CSS стилей к отдельным элементам, мы же используем другую практику. Мы сбрасываем все CSS стили браузеров в самом начале CSS документа. Для этого мы используем доработанный набор стилей CSS предложенный meyerweb.com
Данный код, добавленный в стили CSS, сбрасывает все собственные стили браузеров на одинаковый. Это позволит сделать верстку HTML страницы идентичной во всех браузерах, не зависимо от их собственных стилей.
Валидность HTML документаВторое правило кроссбраузерной HTML верстки это соблюдение стандартов HTML и XHTML, утвержденных W3C консорциумом. Каждый HTML документ (именно документ), имеет свой стандарт, и свои особенности написания.
Виды стандартов HTML документов и их отличия мы рассмотрим позже, так как эта тема требует отдельного рассмотрения и описания.
Валидность HTML документа это соответствие утверждённым стандартам и нормам W3C консорциума.
По стандартам W3C каждый тег HTML документа должен иметь свою пару. Называются эти пары, открывающимся и закрывающимися тегами, но есть исключения из этого правила – это теги ,
и т.д., эти теги не имеют закрывающейся пары.
Не закрытый парный тег, каждый браузер может понять по своему, и отобразит содержимое, заключенное в эти теги не так как надо верстальщику.
Проверить валидность HTML документа можно на сайте W3C консорциума .
Пример валидного кода: Валидный код Валидный код HTMLДанный HTML код соответствует стандартам XHTML 1.0 Strict и является валидным
И содержит в себе как парные (закрывающиеся) теги, так и не парный тег
Данный HTML код не соответствует стандартам W3C и не является валидным
Существует много способов проверить кроссбраузерность верстаемого HTML документа, самый простой из них – это поставить все популярные браузеры себе на компьютер. Но как быть с разными версиями Internet Explorer?! — спросят многие.
Есть простой способ собрать все версии IE так сказать в одном флаконе. Вы можете скачать программу IE Tester , которая включает в себя все версии IE, начиная с IE 5.5.
Так же Вы можете воспользоваться сервисом Browsershots.org , который позволяет сделать снимки Вашего HTML документа более чем с 40 разных браузеров.
