При верстке веб-сайтов очень часто возникает ситуация, когда невозможно написать набор css-свойств, который будут одинаково хорошо понимать все основные браузеры. И если с браузерами Firefox, Google Chrome, Opera и Safari такая проблема чаще всего не возникает, то в случае с различными версиями Internet Explorer добиться кроссбраузерной верстки очень сложно. Поэтому для решения этой проблемы нужно написать часть css-свойств специально для некоторых версий IE (чаще всего это IE6 и IE7). Сделать это можно двумя способами: первый — использование условных комментариев Internet Explorer (Conditional comments), второй — применение css-хаков (например, *margin-left:10px или _margin-left:10px). Оба способа имеют ряд недостатков, но, к счастью, есть еще одно решение, которое я считаю самым оптимальным для создания кроссбраузерных css-файлов.
Сначала более подробно о недостатках первых двух способах. В случае с использованием условных комментариев мы подгружаем отдельный css-файл с дополнительными стилями для различных версий Internet Explorer. Например, так:
Недостатки такого способа заключаются в следующем:
Причем второй недостаток я считаю очень существенным. И в этом плане даже использование css-хаков для IE кажется более удачным способом добиться кроссбраузерной верстки. Но у css-хаков тоже есть недостаток — сайт, на котором они используются не пройдет валидацию. Если валидация веб-страницы не важна, то можно использовать хаки, но существует более изящное решение, чем первые два, которое лишено описанных выше недостатков. С его помощью можно писать все стили в одном файле, который успешно пройдет валидацию. Этот способ описан на сайте Пола Айриша . Его суть заключается в том, что с помощью условных комментариев мы не подгружаем дополнительный css-файл, а просто выставляем особый класс для тега , подобно тому, как выставляет классы js-библиотека Modernizr .
Код для открывающего тега , таким образом, будет выглядеть так:
В моем блоге, кстати, используется именно этот способ кроссбраузерной верстки, чтобы в браузерах IE6 и IE7 страницы сайта отображались также, как и в других браузерах.
Вопросы кроссбраузерности будут ещё долго мучить умы веб-разработчиков, ровно до тех пор, пока не выпустит один браузер, которым будут пользоваться все без исключения (то есть - никогда - прим.ред. ). Сейчас самым гагном является 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), разделив рынок между собой и заставив сообщество задуматься о вопросе кроссбраузерности своих сайтов.
От автора: люди пользуются разными браузерами для просмотра веб-страниц. Конечно, есть самые популярные, такие как 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 нужно самому неплохо разбираться в веб-программировании и верстке сайтов. Опытный человек сможет определить, какими свойствами можно заменить те, которые поддерживаются очень плохо.
Конечно же, функционал библиотеки намного шире. Можно проводить тестирования поддержки различных технологий и на выходе цеплять события к результату. Пример.
Любой веб-дизайнер или верстальщик знает как CSS3 может облегчить жизнь, ускорить и оптимизировать процесс верстки. Такие свойства как «border-radius», «box-shadow» дают возможность избежать использования лишних картинок и десятков строк кода, что, в свою очередь, ускоряет процесс верстки сайта и увеличивает скорость его загрузки. Используя CSS3 в своих работах я столкнулся с проблемой кроссбраузерности, а именно отображен сайтов в старых браузерох и, конечно же, в Internet Explorer. Сегодня я расскажу вам какими средствами я пользуюсь для достижения кроссбраузерности CSS3, включая Internet Explorer..
Давайте ближе познакомимся с рядом методов которые можно применять для достижения крссбраузерного использования CSS3.
ПЕРВИЧНЫЕ НАСТРОЙКИ
Скачайте скрипты и скопируйте их в одну папку со стилями CSS. Вот список скриптов которые нам понадобятся: CSS3 PIE наш помошник в работе с IE. PIE «учит» Internet Explorer понимать CSS3. В папке CSS3PIE download находятся все необходимые нам файлы. Мы будем использовать файл PIE.htc , и будем обращаться к нему через CSS, по этому необходимо поместить его в ту же папку что и файлы стилей.
Selectivizr используется для обработки CSS3 селекторов. Он используется в сочетании с JavaScript библиотеками, таких как jQuery или Mootools. Я рекомендую выбирают Mootools так как она поддерживает все функции Selectivizr (CSS селекторы).
В этом примере, я буду использовать Google-хостинг с библиотекой Mootools, чтобы сделать это, я просто вставлю необходимый код в head:
< script type = "text/javascript" src = "selectivizr-min.js" >
< script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/mootools/1.4.0/mootools-yui-compressed.js " >
Мы, так же, можем использовать jQuery чтобы получить альтернативу CSS3 text-shadow. Все что нам необходимо — это загрузить jQuery text-shadow plugin, и подключить его вместе с jQuery:
Отлично, теперь можно приступать к решениям проблем кроссбраузести CSS3.
СКРУГЛЕННЫЕ УГЛЫ (BORDER-RADIUS)
Скругление углов — это, наверное, самое лучшее что дало нам CSS3. К счастью его можно использовать и не бояться не правильного отображения в Internet Explorer. В этом нам поможет CSS3PIE.
border-radius: 10px ;
behavior: url (PIE.htc);
Как вы можете убедиться, нам просто необходимо “вызвать” PIE скрипт, после свойства border-radius.
ТЕНЬ БЛОЧНЫХ ЭЛЕМЕНТОВ (BOX-SHADOW) & RGBA ЦВЕТА
Точно так же как и с border-radius, для поддержки Internet Explorer скругленных углов, просто необходимо подключить PIE скрипт. Помните так же, что мы можем использовать RGBA значения.
box-shadow: 5px 5px 5px rgba(0 , 0 , 0 , . 75);
behavior: url (PIE.htc);
Вы так же можете использовать RGBA цвета когда прописываете свойства «background-color».
ДВОЙНОЙ ФОН
И опять же мы используем -pie- префикс:
background: url (img/flash.png) 20px 20px no-repeat , url (img/airplane.png) 90px 50px no-repeat , #00BFF3 ; /* Modern Browsers */
Pie- background: url (img/flash.png) 20px 20px no-repeat , url (img/airplane.png) 90px 50px no-repeat , #00BFF3 ; /* IE6+ */
behavior: url (PIE.htc);
ИЗОБРАЖЕНИЯ РАМКИ (BORDER-IMAGE)
Последнее свойство CSS3 которое поддерживает PIE — это border-image:
border-image: url (border.png) 27 27 27 27 round round;
behavior: url (PIE.htc);
CSS3 СЕЛЕКТОРЫ
Настало время использования Selectivizr. Подключаем JavaScript как было показано выше, и все CSS3 селекторы будут доступны для IE6+!
table tr:first-child {
background: #252525 ;
table tr:nth-child(2 n+ 1) {
background: #ebebeb ;
ТЕНЬ ТЕКСТА (TEXT-SHADOW)
Кроссбраузерность этого свойства может быть легко достигнута при помощи библиотеки jQuery. После того как мы ее подключили, просто вызываем функцию «textShadow()» , для необходимого селектора:
$(document).ready(function (){
$(".txt").textShadow();
text-shadow: 2px 2px 2px black ;
IE ФИЛЬТРЫ
Для замены некоторых CSS3 правил вы так же можете использовать IE фильтры . Вот вам пример для фонового градиента:
background: #FFFFFF ;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= "#444444" , EndColorStr= "#999999"); /* IE6–IE9 */
/* IE8+ - must be on one line, unfortunately */
Ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9848077530122079, M12=-0.17364817766693127, M21=0.17364817766693127, M22=0.9848077530122079, SizingMethod="auto expand")" ;
filter: progid:DXImageTransform.Microsoft.Matrix(
M 11 = 0.9848077530122079 ,
M 12 = -0.17364817766693127 ,
M 21 = 0.17364817766693127 ,
M 22 = 0.9848077530122079 ,
SizingMethod= "auto expand");
margin-left: -14px ;
margin-top: -21px ;
