Любой веб-дизайнер или верстальщик знает как 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 ;
В ЗАВЕРШЕНИИ
От автора: люди пользуются разными браузерами для просмотра веб-страниц. Конечно, есть самые популярные, такие как 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 нужно самому неплохо разбираться в веб-программировании и верстке сайтов. Опытный человек сможет определить, какими свойствами можно заменить те, которые поддерживаются очень плохо.
Конечно же, функционал библиотеки намного шире. Можно проводить тестирования поддержки различных технологий и на выходе цеплять события к результату. Пример.
Все пользователи сети интернет для просмотра страниц интернет сайтов используют специальные программы – браузеры. Браузер это программа, которая осуществляет связь пользователя с сервером. Браузер посылает запросы к серверу и получает ответы от него, и этот ответ преобразует в тот вид, который все привыкли называть интернет страницей со всем ее содержимым, текстом, изображениями, видео и т.д. Готовый вид страницы (расположение контента, размеры, цвет, шрифт и пр.) задается с помощью 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 разных браузеров.
Добрый день, союзники!
Мне, как верстальщику, приходится ежедневно сталкиваться с различными CSS3 свойствами, которые, хочется мне или нет, приходится использовать так, чтобы они корректно отображались во всех современных и несовременных браузерах. Само собой, у меня собралась некая библиотека, которую я использую при верстке различных проектов. Собирал я свою коллекцию, из различных ресурсов и форумов, на безграничных просторах сети Интернет, так что неудивительно, если кто-то уже сталкивался с чем-то в отдельности.
Возможно опытным представителям нашей профессии данный пост будет не интересен, но более молодым и неопытным он может пригодиться. От старших товарищей, в свою очередь, хотелось бы получить комментарии, по недочетам, которые, возможно, тут присутствуют, и важным моментам, которые, наоборот, могут тут отсутствовать.
Для корректной работы CSS3 во всех браузерах, приходится использовать некоторые внешние библиотеки.
Собственно, после всех приготовлений, можно переходить непосредственно к свойствам CSS3, над которыми мы будем издеваться.
Закругленные края или border-radius .border-radius { -webkit-border-radius:10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; behavior: url(PIE.htc); }Префиксы -webkit- , -moz- и другие, здесь и в последующем, используются для поддержки свойств различными браузерами.
Свойство
Background-clip: padding-box;
исключает возможность того, что картинка на заднем фоне будет залезать на наши закругленные области.
Behavior: url(PIE.htc);
подключает наш PIE файл, для поддержки данного свойства IE.
Тень блока или box-shadow .box-shadow{ -moz-box-shadow: 3px 3px 4px #444; -webkit-box-shadow: 3px 3px 4px #444; box-shadow: 3px 3px 4px #444; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#444444")"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#444444"); behavior: url(PIE.htc); }Свойства
Ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#444444")"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#444444");
используются для IE.
Градиент на заднем фоне или background: linear-gradient() .gradient{ background-color: #444444; background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); background: -webkit-linear-gradient(top, #444444, #999999); background: -moz-linear-gradient(top, #444444, #999999); background: -ms-linear-gradient(top, #444444, #999999); background: -o-linear-gradient(top, #444444, #999999); background: linear-gradient(to bottom, #444444, #999999); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr="#81a8cb", endColorstr="#4477a1"); -ms-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{ -moz-border-image: url("image.png") 30 round round; -webkit-border-image: url("image.png") 30 round round; -o-border-image: url("image.png") 30 round round; border-image: url("image.png") 30 round round; behavior: url(PIE.htc); } Тень текста или text-shadowНа этом прелести PIE заканчиваются. Для использования тени текста в IE, необходимо использовать, вышеупомянутую, библиотеку jQuery.textshadow.
Для использования, необходимо, для начала, в стилях указать нашу тень, для обычных браузеров
Text-shadow{ text-shadow: 1px 1px 3px #000; }
а затем, c помощью библиотеки, просим необычные браузеры IE нас понять
$(function(){ $(".text-shadow").textShadow(); })
предварительно, не забывая, подключить эту библиотеку и все, что необходимо, для ее работы.
Алгоритм расчета ширины и высоты элемента (да, именно такой перевод) или box-sizing .box-sizing{ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }К сожалению данное свойство не будет работать в браузерах IE7 и младше. На данный момент я не нашел корректного решения данного вопроса, но это вовсе не означает, что его не существует.
Ставим блоки в линию или display: inline-blockПрекрасное современное свойство, которое позволяет ставить блоки в один ряд, не используя свойства float и так далее. К моему сожалению, на практике, столкнулся с тем, что многие используют его в чистую. То есть так
Inline-block{ display: inline-block; }
Код в таком исполнении поддерживается лишь последними современными браузерами. Для полной поддержки, в него необходимо добавить немного строчек. Полный код таков:
Inline-block{ min-height: 250px; display: -moz-inline-stack; 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{ -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); }Обращаем внимание на то, что в фильтрах, которые используются для IE, значение прозрачности указывается в диапазоне от 0 до 100, а не от 0 до 1 как обычно.
Анимация или transition .transition { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } Трансформация объектов или transform .transform{ -webkit-transform: scale(0.3); -moz-transform: scale(0.3); -ms-transform: scale(0.3); -o-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; -o-background-size: cover; -webkit-background-size: cover; -khtml-background-size: cover; -moz-background-size: cover; background-size: cover; -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src="back.jpg",sizingMethod="scale")"; 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?».
Напоследок, хочется отметить, что я не рассматривал все свойства на кроссбраузерность, а только те, что чаще всего используются в повседневной практике. Надеюсь данный пост может быть Вам, хоть чем-то, полезен!
Чтобы страница одинаково хорошо отображалась в разных браузерах, необходимо работать над ее кроссбраузерностью. В этом нам помогает тестирование страницы и отладка html/css разметки. Но есть инструменты, которые помогут сократить наведение порядка в стилях, и добиться того чтобы базовые стили были одинаковы в разных браузерах. Что это за инструменты, зачем и как их использовать — рассмотрим далее.
Браузеры и базовые стилиДело в том что каждый браузер имеет по умолчанию некий набор базовых стилей которые он применяет к странице по умолчанию. И если мы создадим страницу на «голом» html без оформления и стилей, браузер все равно отобразит тег большим размером и жирным начертанием, чуть меньшим размером и так далее. Браузер выделит текст в теге курсивом, сделает подчеркнутым, а — жирным.
Произойдет так потому что в браузере уже есть свои стили для элементов, которые по умолчанию применяются к открываемым в нем страницам. И дело в том что в разных браузерах эти правила немного отличаются, от браузера к браузеру. Лет 10 назад эти отличия были прямо кардинальными, и очень бросались в глаза. Сейчас они минимальны, но все же есть.
Чтобы убрать эти различия, и сделать по умолчанию отображение страницы во всех браузерах одинаковым — используют специальный.css файл: reset.css или normalize.css
reset.css — что он делает и как его использоватьПервым появился файл reset.css. Этот css файл содержит в себе перечисление всех возможных html тегов, и сбрасывает их значение на ноль. То ест убирает все возможные отступы, делает шрифт одинаковым во всех тегах, сбрасывая все стили текста. Так что все заголовки и абзацы отображаются простым текстом, одним размеров и без отступов. В результате получаем сброс стилей по умолчанию во всех браузерах.
Работает это так, сначала на странице подключаем файл reset.css, и уже после него свой файл со стилями. В итоге мы сначала сбрасываем все стили, и уже потом в style.css задаем оформление html тегам. Таким образом мы достигаем того что все браузеры сбросят свои стили по умолчанию, и вся разметка будет основываться на тех стилях которые мы зададим в style.css.
Скачать reset.cssСкачать reset.css можно на сайте cssreset.com
Или можете скачать версию Eric Meyer’s “Reset CSS” 2.0 по кнопке ниже, с моего блога:
normalize.css — как он работает и в чем разницаПосле того как на странице подключен reset.css все стили приходится прописывать заново. И каждый раз это занятие утомляет. Поэтому на смену resetпришел другой инструмент — normalize. Normailze — как понятно из названия, не сбрасывает все стили, а нормализует, приводит их к единому виду во всех браузерах. После его применения базовые стили отображения заголовков, размер шрифтов, отступы… — унифицируются и отображаются во всех браузерах одинаково. Используя его — можно сэкономить определенное количество времени, которое в случает с reset было бы потрачено на прописывание сброшенных стилей.
Если вы еще не использовали normalize.css то рекомендую попробовать его в своем следующем, прокте, и кто знает, возможно вы уже не сможете от него отказаться 😉
Скачать normalize.cssСкачать normalize.css можно с сайта necolas.github.io/normalize.css
Или загрузить с моего блога:
Что лучше reset или normalize?Однозначного ответа нет.
Первый — сбрасывает все стили, второй — приводит к единому знаменателю. Опытные верстальщики, которые используют reset.css обычно имеют свои наборы стилей которые сразу же подключают после reset для оформления контента. И им не приходится каждый раз в новой верстке заново определять стили для базовых элементов. Так поступаю и я. Мне удобно и я знаю какие стили я задаю по умолчанию, и как они работают.
normalize удобен если вы изучите его структуру, можете видоизменить его под себя — настроив базовый внешний вид тегов. И работа с ним также будет удобной на потоке — когда верстать приходится много и часто.
Каждый инструмент хорош, главное правильно его использовать 😉
