Как правильно реализовать кроссбраузерность страницы. Кроссбраузерный CSS3, или как бороться с Internet Explorer. Основные правила кроссбраузерной верстки
Любой веб-дизайнер или верстальщик знает как 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» к вашим CSS стилям.
text-shadow: 2px 2px 2px black ;
IE ФИЛЬТРЫ
Для замены некоторых CSS3 правил вы так же можете использовать IE фильтры . Вот вам пример для фонового градиента:
background: #FFFFFF ;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= "#444444" , EndColorStr= "#999999"); /* IE6–IE9 */
Следующее свойство, эквивалентно правилу «transform». Но его синтаксис на столько сложен, что я советую использовать специальный генератор чтобы высчитать нужное значение.
/* 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 ;
В ЗАВЕРШЕНИИ
Как вы видите, мы можем использовать CSS3 свойства и селекторы не боясь таких браузеров как Internet Explorer. Надеюсь данная статья была вам полезна и вы найдете применения полученными вами знаниям на деле. В следующей статье я расскажу вам как интегрировать CSS3PIE в Joomla, так как у многих веб-мастеров возникает с этим большая проблема.
Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Подписаться
Кроссбраузерность - способность веб-ресурса подстраиваться под несколько браузеров и корректно отображаться в них.
Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA
Например, вы сделали сайт для вашего интернет-магазина. Вы разработали красивый дизайн, который приятен для глаз. Но на ваш сайт пользователи заходят через разные браузеры. Кто-то вообще использует смартфон. И если вы не проверили кроссбраузерность ресурса, может случиться, что в некоторых браузерах сайт будет отображаться плохо.
Могут съезжать элементы, могут не отображаться картинки, станут некрасивыми шрифты. Человек не будет пользоваться таким сервисом. Он пойдет искать дальше.
Задача разработчика сайта - сделать его так, чтобы вне зависимости от браузера и устройства ресурс отображался правильно.
Кроссбраузерность версткиМежду браузерами идет конкуренция. Раньше каждый старался добавить исключительные фишки и опции. Это привело к тому, что стандарты HTML перестали соблюдаться, и каждый браузер по-своему отображал страницы.
Netscape Navigator выбыл из гонки, отдав монополию Internet Explorer. Спустя практически одновременно начали набирать обороты проекты Mozilla Firefox (Gecko), Google Chrome (Blink), Opera (WebKit) и Safari (WebKit), разделив рынок между собой и заставив сообщество задуматься о вопросе кроссбраузерности своих сайтов.
Вопросы кроссбраузерности будут ещё долго мучить умы веб-разработчиков, ровно до тех пор, пока не выпустит один браузер, которым будут пользоваться все без исключения (то есть - никогда - прим.ред. ). Сейчас самым гагном является 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"шек)
При верстке веб-сайтов очень часто возникает ситуация, когда невозможно написать набор 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. Например, так:
Недостатки такого способа заключаются в следующем:
- мы получаем дополнительные http-запросы для подгрузки файлов со стилями для различных версий Internet Explorer, что негативно скажется на времени загрузки страницы;
- стили разбиваются на разные файлы, что очень сильно затрудняет их поиск во время работы над версткой сайта (я сам очень часто работал с такими проектами, где отдельные css-файлы для ie7 являются нормой, и потратил кучу времени на понимание, откуда же, черт возьми, грузится тот или иной стиль для IE).
Причем второй недостаток я считаю очень существенным. И в этом плане даже использование css-хаков для IE кажется более удачным способом добиться кроссбраузерной верстки. Но у css-хаков тоже есть недостаток — сайт, на котором они используются не пройдет валидацию. Если валидация веб-страницы не важна, то можно использовать хаки, но существует более изящное решение, чем первые два, которое лишено описанных выше недостатков. С его помощью можно писать все стили в одном файле, который успешно пройдет валидацию. Этот способ описан на сайте Пола Айриша . Его суть заключается в том, что с помощью условных комментариев мы не подгружаем дополнительный css-файл, а просто выставляем особый класс для тега , подобно тому, как выставляет классы js-библиотека Modernizr .
Код для открывающего тега , таким образом, будет выглядеть так:
В моем блоге, кстати, используется именно этот способ кроссбраузерной верстки, чтобы в браузерах IE6 и IE7 страницы сайта отображались также, как и в других браузерах.
Здравствуйте дорогие читатели!
Все мы желаем того, чтобы написанные нами стили корректно отображались в различных браузерах. Но как ни крути, придется дописывать стили, чтобы они работали в других браузерах. Этот процесс называется – приведение верстки сайта к кроссбраузерному виду . Кроссбраузерность — это когда css стили корректно отображаются в различных браузерах, и их различных версиях.
Хочу дать несколько советов, чтобы процесс приведения ваших CSS к кроссбраузерности занял меньше времени.
2. Можно поискать самые популярные css стили , которые неправильно выглядят в других браузерах. Найти для них CSS хаки.
3. Существуют специальные инструменты в сети для генерации кроссбраузерных стилей . Хочу выделить 2 самых интересных на мой взгляд.
Инструменты для CSS кроссбраузерности.- Описано много стилей;
- Есть пример использования с результатом.
- Поначалу сложно ориентироваться на сайте;
- Нельзя генерировать стиль со своими параметрами (дан свой пример использования).
CSS3 Generator
- Удобен и интуитивен в управлении;
- Можно генерировать стили для своих параметров;
- Можно посмотреть результат генерированного стиля.
- Мало стилей
