Под кроссбраузерностью обычно понимают способность сайта выглядеть во всех браузерах одинаково (или одинаково хорошо).
Для того, чтобы сайт выглядел максимально одинаково во всех браузерах (современных + поддержка некоторых устаревших) необходимо знать различные приемы и особенности браузеров. Их изучением мы сейчас и займемся.
Блок . Современные браузерыВ настоящее время популярными являются следующие браузеры: Internet Explorer (сокращенно IE, браузер от компании Microsoft, встроен в Windows), Opera (норвежский браузер), Mozilla (она же Firefox), Google Chrome (браузер от компании Google), Safari (браузер от Apple). Браузеры в мобильных устройствах: Android, IOS.
Блок . Движки браузеровКроме браузеров существует такое понятие, как движок браузера. Движок - это основа браузера, которая преобразует HTML и CSS в видимую на экране картинку. Движков существует намного меньше, чем браузеров и, как следствие, многие браузеры имеют одинаковые движки и поэтому одинаковые особенности и баги (проблемы).
Виды движков: Gecko (Mozilla/Firefox). Webkit (Safari, Google Chrome, Opera 14+, Android, IOS). Presto (Opera до 14 версии). Trident (Internet Explorer).
Обратите внимание на то, что Opera, начиная с 14 версии, перешла на движок Webkit .
В настоящее время Webkit распался на два движка Blink от Google Chrome и Opera 14+ и движок от Safari. Эти два движка по-прежнему поддерживают префикс -webkit , однако, их разделение уже можно наблюдать на некоторых CSS свойствах, например, hyphens
Браузера Internet Explorer официально больше не существует, последняя его версия 11-тая. Однако, фактически, этот браузер сменил название (но не движок) и теперь называется Edge .
Блок . Вендорные префиксыВ настоящее время среди браузеров сложилась следующая ситуация: до того, как свойство CSS появится в спецификации, браузеры могут реализовывать пробную версию этого свойства со специальной приставкой, которая называется вендорным префиксом (от слова vendors – разработчики, префикс разработчиков).
Как это выглядит, давайте посмотрим на примере свойства box-sizing (смена блоковой модели).
P { box-sizing: border-box; }
Это свойство начало поддерживаться только с Firefox 29, однако уже с версии Firefox 2 оно было доступно с префиксом -moz :
P { -moz-box-sizing: border-box; }
Остальные браузеры имеют аналогичные приставки: -moz - Mozilla/Firefox (движок Gecko), -webkit – браузеры на движке Webkit (Google Chrome, Safari, Opera 14+, Android, IOS), -o – Opera до 13 версии включительно (движок Presto), -ms – IE с версии 8+.
Таким образом, наиболее кроссбраузерный вариант свойства box-sizing , с использованием вендорных префиксов, будет иметь следующий вид (с префиксом -ms его писать не нужно, IE сразу перешел на поддержку этого свойства):
P { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
В CSS многие свойства имеют аналогичную реализацию: с префиксом и без него.
Обратите также внимание на то, что Opera с версии 14 перешла на Webkit и теперь для нее будет использоваться префикс -webkit , а префикс -o останется только для старых версий (до 14-той).
Есть следующее правило: свойства с префиксами пишутся до свойства без префикса . Это сделано затем, чтобы основное свойство затирало свойства с префиксами, так как браузер может поддерживать свойство как с префиксом, так и без него. А свойство с префиксом может работать с какими-либо проблемами.
В настоящее время некоторые браузеры решили отказаться от префиксов в связи с их неудобностью. И сейчас вместо них используют так называемые флаги . Свойства теперь внедряются в браузер, но по умолчанию отключены, однако их можно включить в настройках браузера, поставив соответствующий флажок в настройках. В настоящее время браузеры Google Chrome и Opera для новых свойств поддерживают именно эту модель.
Блок . Где посмотреть какие префиксы писатьРекомендую специальный сервис caniuse.com , на котором можно посмотреть какие свойства уже можно использовать и нужно ли для них писать префиксы или нет.
Блок . Статистика по браузерамДля того, чтобы знать, какой браузер следует поддерживать в настоящее время, а на поддержку какого следует забить, необходимо отслеживать статистику по браузерам в регионе сайта. Сделать это можно с помощью следующего сервиса: gs.statcounter.com - все браузеры с версиями по странам (english).
Блок . Как проверить сайт в разных браузерахПосле создания сайта его необходимо потестировать во всех популярных браузерах. Однако сделать это не так просто как кажется - мало того, что браузеры отличаются от версии к версии, так еще существуют различия между одной версией браузера в Windows и, к примеру, Linux. Понятно, что иметь такое количество браузеров просто невозможно.
На помощь приходят специальные сервисы, которые делают скриншоты сайта в различных версиях сайта.
Блок . Нормализация стилейКроме сбросов, существует так называемая нормализация - это когда значения свойств (например, margin и padding) не сбрасываются в ноль, а им указываются определенные удобные значения (чтобы во всех браузерах отступы по умолчанию были одинаковыми и удобными).
Приступайте к решению задач по следующей ссылке: задачи к уроку .
Когда все решите - переходите к изучению новой темы.
Здравствуйте дорогие читатели!
Все мы желаем того, чтобы написанные нами стили корректно отображались в различных браузерах. Но как ни крути, придется дописывать стили, чтобы они работали в других браузерах. Этот процесс называется – приведение верстки сайта к кроссбраузерному виду . Кроссбраузерность — это когда css стили корректно отображаются в различных браузерах, и их различных версиях.
Хочу дать несколько советов, чтобы процесс приведения ваших CSS к кроссбраузерности занял меньше времени.
2. Можно поискать самые популярные css стили , которые неправильно выглядят в других браузерах. Найти для них CSS хаки.
3. Существуют специальные инструменты в сети для генерации кроссбраузерных стилей . Хочу выделить 2 самых интересных на мой взгляд.
Инструменты для CSS кроссбраузерности.- Описано много стилей;
- Есть пример использования с результатом.
- Поначалу сложно ориентироваться на сайте;
- Нельзя генерировать стиль со своими параметрами (дан свой пример использования).
CSS3 Generator
- Удобен и интуитивен в управлении;
- Можно генерировать стили для своих параметров;
- Можно посмотреть результат генерированного стиля.
- Мало стилей
Чтобы страница одинаково хорошо отображалась в разных браузерах, необходимо работать над ее кроссбраузерностью. В этом нам помогает тестирование страницы и отладка 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 удобен если вы изучите его структуру, можете видоизменить его под себя — настроив базовый внешний вид тегов. И работа с ним также будет удобной на потоке — когда верстать приходится много и часто.
Каждый инструмент хорош, главное правильно его использовать 😉
Добрый день, союзники!
Мне, как верстальщику, приходится ежедневно сталкиваться с различными 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 за огромную помощь!
От автора: CSS верстка – это, по сути, второй этап верстки сайта. И определенно очень важный, потому что в итоге именно он формирует внешний вид сайта. Сегодня хотелось бы еще раз подчеркнуть некоторые важные принципы работы с касакадными таблицами стилей.
Верстка с помощью css – что это и зачем оно нужно?Ну сначала все же немного разъяснений для новичков. Css – это замечательный язык, который полностью состоит из свойств и их значений. Эти самые свойства позволяют определенным образом влиять на внешний вид элементов. Например, свойство color определяет цвет текста, background – фон элемента, font – его шрифт и т.д и т.п.
Свойств на самом деле не так уж и много, поэтому CSS можно назвать достаточно простой веб-технологией, которую можно без труда изучить. Другое дело, что технологии имеют особенность постоянно двигаться вперед, особенно технологии в области сайтостроения.
Так вот, css придуман для того, чтобы создавать внешний вид. И со своей задачей он справляется замечательно. HTML позволяет создавать элементы, формировать разметка, а css – оформлять все это дело. Эти два языка связаны неразлучно, так что если отнять один – другой просто станет неполноценным.
Поэтому всегда верстальщик в начале работы создает структуру, необходимые элементы, а потом все это оформляет.
Основные вещи, которые можно сделать в cssТабличная верстка с помощью css. На самом деле от таблиц как от способа верстать во многом отказались из-за громоздкого html-кода, но не так давно в css появились возможности, которые позволили любые элементы превратить в табличные. Вот они: Display: table, display: table-row, display: table-cell.
Соответственно, свойство display определяет, как тот или иной элемент будет отображаться на странице. Первое значение преобразует нужный элемент в таблицу, второе – в ряд таблицы, а третье – в отдельную ячейку. Вот так вот за счет таких нехитрых манипуляций вы можете смастерить искусственную таблицу на странице без единого тега table или td в коде.
Кроссбраузерная верстка. Как css может в этом помочьА помочь он может очень просто – сбросьте все отступы и правила, которые браузеры могут добавлять по умолчанию, и вы уже добьетесь определенной кроссбраузерности. По крайней мере, веб-обозреватели будут работать по вашим правилам, а не вы по ихним. Этот подход еще называют как css reset. То есть создается набор стилей, который сбрасывает настройки по умолчанию.
В сети есть много различных вариантов css reset, так как каждый веб-разработчик любит делать по-своему. В самом примитивном варианте сброс стилей можно сделать так:
padding : 0 ; margin : 0 ; ul { list - style : none ; |
То есть мы просто убрали все внутренние и внешние отступы и всех элементов, а также убрали маркеры у списков, потому что сегодня мало кто использует их. Цель css reset – позволить вам начать описание стилей с чистого листа.
Рис.1. Каждому из этих товарищей нужно угодить, иначе можно потерять потенциальных посетителей сайта.
Адаптивная верстка в cssАдаптивная верстка это вообще отдельная ветвь в сайтостроении, но в этой статье я всего лишь объясню вам, что это такое с простейшим примером. Вообще я думаю, что названа она очень правильно. Адаптироваться, значит, меняться. А в сайтостроении в основном нужно меняться под разные разрешения экрана. Сайту меняться, всмысле, не человеку же.
Вообще адаптивность сегодня чуть ли не обязательный параметр нормального сайта. Суть ее в том, что дизайн сайта и его структура немного меняются на разных разрешениях экрана. На смартфонах и планшетах, например, пропадает боковая колонка, а на больших экранах макет перестает увеличиваться и центрируется.
Адаптивность реализуется с помощью так называемых медиа-запросов. Обычно их пишут прямо в главном файле стилей. Простейший пример медиа-запроса:
@media and only screen (max-width: 600px){ img{ float: none; } }
@ media and only screen (max - width : 600px ) { img { float : none ; |
Что происходит? Этим запросом мы указали браузеру, что если ширина экрана будет меньше 600 пикселей, то нужно отменить обтекание текста изображениями. Зачем? Ну хотя бы потому, что изображение и текст в одной строке, шириной всего 600 пикселей, будут смотреться очень плохо.
Основа адаптивности закладывается с помощью свойства max-width. Например, max-width: 1320px означает, что максимум блок будет тянуться на 1320 пикселей, но если размер окна будет меньше, то он тоже будет уменьшаться. Никакого горизонтального скролла!
Рис.2. Пример записи медиа-запросов. Как видите, для одного шаблона может понадобиться приличное количество правил и стилей, чтобы реализовать нормальную адаптивность.
Какой редактор использовать для работы с css?Конечно, программа для css верстки должна быть более менее толковой – с поддержкой подсветки синтаксиса как минимум, потому что это очень важно для визуального восприятия кода.
Скриншот с кодом, который вы только что могли наблюдать, сделан из программы Notepad++, где и был открыт css-файл. Мне кажется, этот редактор просто отлично подходит для работы с этим языком – очень хорошо подсвечиваются различные составные части кода, а если разработчик еще и придерживается определенных правил оформления, то код читается просто замечательно.
Узнайте css лучшеКроссбраузерность, адаптивность, работа с таблицами и многое другое – все это можно очень долго рассматривать отдельно, потому что css предоставляет нам все необходимое для реализации отличного внешнего вида у сайта.
Подробнее о том, как использовать эту технологию при верстке под мобильные устройства, вы можете узнать из . Также в нашем премиум разделе вы можете найти обучающие уроки по основам этой технологии, а также более продвинутый материал по CSS3, поэтому вам не нужно ничего искать, все уже есть, только бери и учись.
Невозможно в столь короткой статье рассказать вам подробно обо всем, что дает верстка с помощью технологии css, но кое-какие моменты, я думаю, вы уловили. Для создания сайта этого просто необходимый язык, без которого нельзя обойтись, а в его изучении вам помогут материалы на нашем сайте, среди которых много и бесплатных. Также я рекомендую вам подписаться на обновления, чтобы было проще получать от нас новые уроки.
