Кроссбраузерная верстка css. Кроссбраузерная совместимость: адаптивный веб-дизайн для старых браузеров. Проблемы в устаревших браузерах и различные подходы к разработке

Первым появился файл reset.css. Этот css файл содержит в себе перечисление всех возможных html тегов, и сбрасывает их значение на ноль. То ест убирает все возможные отступы, делает шрифт одинаковым во всех тегах, сбрасывая все стили текста. Так что все заголовки и абзацы отображаются простым текстом, одним размеров и без отступов. В результате получаем сброс стилей по умолчанию во всех браузерах.

Работает это так, сначала на странице подключаем файл reset.css, и уже после него свой файл со стилями. В итоге мы сначала сбрасываем все стили, и уже потом в style.css задаем оформление html тегам. Таким образом мы достигаем того что все браузеры сбросят свои стили по умолчанию, и вся разметка будет основываться на тех стилях которые мы зададим в style.css.

Скачать reset.css можно на сайте cssreset.com

Или можете скачать версию Eric Meyer’s “Reset CSS” 2.0 по кнопке ниже, с моего блога:

После того как на странице подключен reset.css все стили приходится прописывать заново. И каждый раз это занятие утомляет. Поэтому на смену resetпришел другой инструмент — normalize. Normailze — как понятно из названия, не сбрасывает все стили, а нормализует, приводит их к единому виду во всех браузерах. После его применения базовые стили отображения заголовков, размер шрифтов, отступы… — унифицируются и отображаются во всех браузерах одинаково. Используя его — можно сэкономить определенное количество времени, которое в случает с reset было бы потрачено на прописывание сброшенных стилей.

Если вы еще не использовали normalize.css то рекомендую попробовать его в своем следующем, прокте, и кто знает, возможно вы уже не сможете от него отказаться 😉

Скачать normalize.css можно с сайта necolas.github.io/normalize.css

Или загрузить с моего блога:

Однозначного ответа нет.

Первый — сбрасывает все стили, второй — приводит к единому знаменателю. Опытные верстальщики, которые используют reset.css обычно имеют свои наборы стилей которые сразу же подключают после reset для оформления контента. И им не приходится каждый раз в новой верстке заново определять стили для базовых элементов. Так поступаю и я. Мне удобно и я знаю какие стили я задаю по умолчанию, и как они работают.

normalize удобен если вы изучите его структуру, можете видоизменить его под себя — настроив базовый внешний вид тегов. И работа с ним также будет удобной на потоке — когда верстать приходится много и часто.

Каждый инструмент хорош, главное правильно его использовать 😉

Все пользователи сети интернет для просмотра страниц интернет сайтов используют специальные программы – браузеры. Браузер это программа, которая осуществляет связь пользователя с сервером. Браузер посылает запросы к серверу и получает ответы от него, и этот ответ преобразует в тот вид, который все привыкли называть интернет страницей со всем ее содержимым, текстом, изображениями, видео и т.д. Готовый вид страницы (расположение контента, размеры, цвет, шрифт и пр.) задается с помощью HTML верстки и каскадных таблиц стилей (CSS), которые были преобразованы из изображения нарисованным дизайнером, в вид понятный браузеру. Это и называется версткой. Простыми словами HTML верстка это расположение элементов интернет страницы, там, где они должны располагаться по замыслу дизайнера, который создавал макет будущей страницы.

Но каждый пользователь отдает предпочтение более привычному для себя браузеру. В наше время существует 5 самых популярных браузеров, о которых говорит статистика. Это Chrome, Safari, Opera, FireFox и Internet Explorer (IE). Эти браузеры той или иной версии чаще всего используют пользователи сети интернет, для просмотра «мировой паутины». Каждый из этих браузеров имеет свою функциональность и свои особенности отображения интернет страниц.

В большом разнообразии всех браузеров и их версий, и их особенностях отображения интернет страниц, появилось понятие коссбраузерность HTML верстки. Так что же такое кроссбраузерность?!

Кроссбраузерность – это свойство интернет страниц отображаться в разных версиях браузеров одинаково, без искажений и «расползания» элементов страницы, не зависимо от особенностей самого браузера.

Самым большим количеством этих особенностей обладают браузеры Internet Explorer от Microsoft, за что их и «не любят» большинство HTML верстальщиков, и придумывают для него разные способы приведения к правильному отображению страницы (данные способы верстальщики называют «костылями»). Лично наше мнение, что сверстать HTML страницу кроссбраузерной можно без применения этих самых «костылей», которые засоряют HTML код страницы.

Не секрет, то, что каждый браузер имеет свои стили оформления тех или иных элементов HTML кода, размер шрифта, размер отступов и т.д. что уже приведет к расползанию элементов страницы, и она не будет кроссбраузерной.
Отсюда можно сделать вывод, что все собственные стили разных браузеров нужно «отключить», точнее сбросить на одинаковые. Некоторые HTML верстальщики делают это непосредственно при задании CSS стилей к отдельным элементам, мы же используем другую практику. Мы сбрасываем все CSS стили браузеров в самом начале CSS документа. Для этого мы используем доработанный набор стилей CSS предложенный meyerweb.com

Данный код, добавленный в стили CSS, сбрасывает все собственные стили браузеров на одинаковый. Это позволит сделать верстку HTML страницы идентичной во всех браузерах, не зависимо от их собственных стилей.

Второе правило кроссбраузерной HTML верстки это соблюдение стандартов HTML и XHTML, утвержденных W3C консорциумом. Каждый HTML документ (именно документ), имеет свой стандарт, и свои особенности написания.

Виды стандартов HTML документов и их отличия мы рассмотрим позже, так как эта тема требует отдельного рассмотрения и описания.

Валидность HTML документа это соответствие утверждённым стандартам и нормам W3C консорциума.

По стандартам W3C каждый тег HTML документа должен иметь свою пару. Называются эти пары, открывающимся и закрывающимися тегами, но есть исключения из этого правила – это теги ,
и т.д., эти теги не имеют закрывающейся пары.

Не закрытый парный тег, каждый браузер может понять по своему, и отобразит содержимое, заключенное в эти теги не так как надо верстальщику.

Проверить валидность HTML документа можно на сайте W3C консорциума .

Данный HTML код соответствует стандартам XHTML 1.0 Strict и является валидным
И содержит в себе как парные (закрывающиеся) теги, так и не парный тег

Данный HTML код не соответствует стандартам W3C и не является валидным

Существует много способов проверить кроссбраузерность верстаемого HTML документа, самый простой из них – это поставить все популярные браузеры себе на компьютер. Но как быть с разными версиями Internet Explorer?! — спросят многие.

Есть простой способ собрать все версии IE так сказать в одном флаконе. Вы можете скачать программу IE Tester , которая включает в себя все версии IE, начиная с IE 5.5.

Так же Вы можете воспользоваться сервисом Browsershots.org , который позволяет сделать снимки Вашего HTML документа более чем с 40 разных браузеров.

Кроссбраузерность — это способность сайта корректно отображаться в различных браузерах. Ресурс должен работать одинаково во всех версиях обозревателей.

Особенно это важно в эпоху адаптивного веб-дизайна, когда на первый план выходит способность front-end адаптироваться к широкому диапазону различных устройств и при этом обеспечивать оптимальное качество просмотра.

Раньше дизайнер создавал макет дизайна в Photoshop , который затем переносился в HTML и CSS . На сегодняшний день технологические изменения заставляют переосмыслить эту концепцию. Мы больше не можем предсказать, какой браузер, разрешение или устройство будут использоваться для просмотра сайта. Ушли в прошлое те времена, когда большинство компьютеров использовало фиксированное разрешение 1024 на 768 пикселей, и можно было разрабатывать сайты со статическими размерами.

Современные браузеры полностью поддерживают HTML5 и CSS3 . Но один и тот же код HTML / CSS / JavaScript в старых браузерах интерпретируется по-разному, что приводит к «кроссбраузерной несовместимости » сайта. Особенно это касается старых версий Internet Explorer .

В данной статье мы рассмотрим текущую статистику по просмотрам веб-страниц, приведем перечень средств, которые помогают решать различные проблемы совместимости.

Общемировая статистика за 2015 год показывает, что топ-14 используемых разрешений экрана находятся в диапазоне от 1920 на 1080 до 320 на 480 пикселей.

Хотя Windows 7 (31,20% ) до сих пор удерживает большую долю рынка, мобильные платформы начинают заменять традиционные, стационарные.

Взглянув на статистику за 2015 год по используемым браузерам, мы видим, что первое место принадлежит Chrome (все версии — 44,87% ), второе место — Firefox (все версии — 10,37% ), третье Internet Explorer 11 (6,84% ).

Ускоренные темпы выпуска новых версий Google Chrome и Firefox позволяют более эффективно разрабатывать проекты для этих платформ. Немного другая картина складывается для «плохого парня » Internet Explorer , потому что в Сети до сих пор можно найти его старые версии. А это приводит к возникновению проблем с кроссбраузерностью сайта.

Корпорация Microsoft остановила поддержку IE6 8 апреля 2014 года. И с 2016 года будет поддерживаться и получать обновления только самая последняя версия Internet Explorer . Это фактически означает, что в начале 2016 года была полностью прекращена поддержка IE7 и IE8 , независимо от операционной системы. IE9 будет поддерживаться только в Windows Vista , IE10 — только в Windows Server 2012 , IE11 — в Windows 7 и Windows 8.1 :

Github больше не поддерживает IE 7 и 8 . Кроме этого часть функционала Twitter не работает в IE8 . И, наконец, популярный фреймворк не будет поддерживать IE8 , начиная с 4 версии .

Тем не менее, статистика использования может варьироваться в зависимости от региона: 6,11% пользователей в Китае в 2015 году по-прежнему просматривали страницы через IE8 . Если принять во внимание, что в Китае было около 724400000 интернет-пользователей, можно понять, что в этом году примерно 44200000 китайцев продолжают использовать IE8 .

Поэтому региональные рынки, специфические клиенты и требования отрасли могут существенно отличаться. Особенно это касается корпоративных и правительственных учреждений.

Основной принцип здесь такой: чем выше требуемая кроссбраузерность, тем больше времени потребуется на разработку, что приводит к увеличению стоимости проекта. Чтобы принять взвешенное, экономически обоснованное решение, нужно задать себе следующие вопросы:

• Какова ваша целевая аудитория?
• На какой географический регион нужно настроить таргетинг?
• Какие браузеры и устройства используют ваши посетители?
• Существуют ли в компании или отрасли технические факторы, которые заставляют вас поддерживать конкретные версии старых браузеров?
• Каковы с точки зрения электронной коммерции коэффициенты конверсии и рентабельности различных групп пользователей по версиям браузеров?

Ответив на эти вопросы с помощью статистических данных, например, из Google Analytics , можно получить объективную картину.

Адаптивный веб-дизайн во многом зависит от медиа-запросов, с помощью которых изменяется CSS для различных разрешений экрана. Кроме этого современные сайты характеризуются использованием семантических элементов HTML5 (например, , , , , ) для группировки компонентов дизайна. Селекторы CSS3 используются для выбора конкретных элементов и дальнейшего назначения стилей (например, , :checked , :nth-child(n) , :not(selector) , :last-child)) . И, наконец, адаптивная типографика часто задается с помощью единиц REM (root em ).

Это подводит нас к следующим техническим сложностям при реализации CSS кроссбраузерности:

• Медиа-запросы CSS3
• Семантические элементы HTML5 : не поддерживается в IE6 , 7 и 8 ;
• Селекторы CSS3 : не поддерживается в IE6 . Только частично поддерживаются в IE7 и 8 ;
• Единицы REM : не поддерживается в IE6 , 7 и 8 . Только частично поддерживаются в IE9 и 10 ;
• Лимит количества правил CSS : IE9 и ниже поддерживают только 4095 CSS-селекторов . Правила после 4095-ого селектора не применяются.

Указанные выше ошибки будут иметь наибольшее влияние на стратегию, применяемую при реализации адаптивного дизайна.

Существуют две основных стратегии разработки: постепенное упрощение и прогрессивное улучшение .

Прогрессивное улучшение — основано на принципе, предполагающем начало разработки с общего знаменателя, с минимальных технических требований и уровня опыта взаимодействия пользователя, предлагаемого сайтом. Посетители, заходящие на сайт через последние версии браузеров и устройств, будут обслуживаться прогрессивно расширяемой версией сайта со всеми новейшими функциями.

С другой стороны, пользователям старых браузеров и медленного интернет-соединения будет предлагаться графически усеченная, но все еще функциональная версия сайта.

Подобный подход при реализации кроссбраузерности предполагает начало разработки с простой версии, к которой затем добавляются более сложные элементы. Старые браузеры смогут отображать сайт с базовым уровнем опыта взаимодействия. А новые функции HTML / CSS / JavaScript будут доступны в браузерах, которые могут реально их использовать.

В противоположность этому, постепенное упрощение обеспечивает полнофункциональный уровень UX в современных браузерах. А затем постепенно уменьшает его сложность для старых браузеров за счет графики, но, не касаясь функционала. Идея заключается в том, чтобы начать разработку с новейших веб-стандартов, а затем попытаться минимизировать проблемы, связанные со старыми браузерами.

Какой подход выберете вы, зависит от личных предпочтений и условий проекта:

• Прогрессивное улучшение обеспечивает большую стабильность, так как вы можете постепенно добавлять новые функции для современных браузеров. Но оно требует более тщательного планирования;
• Некоторые разработчики утверждают, что нет смысла поддерживать устаревшие браузеры и должны использоваться новейшие технологии. Поддержка современных браузеров дает намного лучший опыт взаимодействия;
• Существует мнение, что прогрессивное улучшение мертво, так как множество JavaScript-приложений не работают надлежащим образом при этом подходе;
• Веб-доступность для общественных учреждений может быть определена в юридических требованиях конкретных территориальных образований, и это может повлечь необходимость применения особого подхода.

Учитывая появление таких инструментов для определения функций, как Modernizr , лично я склоняюсь к использованию постепенного упрощения и черного списка браузеров при разработке совместимых сайтов.

Чтобы как можно скорее обнаружить потенциальные проблемы кроссбраузерности JavaScript , нужно в процессе разработки тестировать сайт в различных браузерах и разрешениях. Существуют различные программные эмуляторы, которые могут нам помочь:

• Browserstack — это коммерческий сервис, который предоставляет доступ к тестовой среде, в которой можно проверить свой проект более чем на 700 стационарных браузерах и мобильных устройствах с помощью виртуальной машины в облаке;
• Microsoft Virtual Machines — если вы работаете в Linux, у вас не будет доступа к Internet Explorer . Решение может заключаться в том, чтобы загрузить образы виртуальных машин для IE6 в IE11 , которые затем могут использоваться в сочетании с Oracle VM Virtualbox или Vagrant для локального тестирования;
• Различные разрешения экрана для конкретного браузера можно быстро протестировать с помощью онлайн-сервиса Screenfly . С использованием плагинов для браузеров, таких как Window Resizer для Google Chrome , или непосредственно в разделе инструментов для разработчиков Chrome и Firefox .

Обычно я начинаю новые проекты со сброса CSS с помощью Normalize.css , который обеспечивает лучшую кроссбраузерность при определении стилей HTML-элементов , используемых по умолчанию, вплоть до Internet Explorer 8 . Normalize.css сохраняет нужные стили элементов, нормализует их внешний вид и исправляет ряд ошибок и несоответствий в различных браузерах.

Кроме этого многие устаревшие браузеры не могут интерпретировать неизвестные элементы HTML и свойства CSS . Когда браузер встречает фрагмент HTML или CSS , который он не понимает, то игнорирует его и продолжает процесс отображения. Многие приложения используют вендорные префиксы, чтобы добавить новые, экспериментальные или нестандартные функции CSS до их реализации в спецификации:

// Webkit-браузеры, такие как Chrome и Safari -webkit- // Firefox -moz- // Internet Explorer -ms- // Opera -o-

Проблема заключается в том, что префиксы неудобны в использовании и с ними связано много ошибок. Поэтому я использую плагин CSS Autoprefixer в сочетании с Grunt .

Обычные правила CSS будут обработаны с помощью плагина и к ним будут добавлены префиксы на основе базы данных «Can I Use «. Рекомендуется задать в конфигурации версии браузеров, которые нужно поддерживать, например:

options: { browsers: ["last 2 versions", "ie >= 8", "Firefox >= 12", "iOS >= 7", "Android >= 4"] }

В качестве примера рассмотрим следующий класс CSS :

Example { background-image: linear-gradient(top left, #4676dd, #00345b); display: flex; transition: 1s all; }

С помощью CSS Autoprefixer он преобразуется в:

Example { background-image: -webkit-linear-gradient(top left, #4676dd, #00345b); background-image: -moz-linear-gradient(top left, #4676dd, #00345b); background-image: linear-gradient(top left, #4676dd, #00345b); display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-transition: 1s all; -moz-transition: 1s all; transition: 1s all; }

Если нужно создать резервный CSS или включить кроссбраузерность JavaScript для ранних версий Internet Explorer , то можете использовать условные комментарии . Они поддерживаются в Internet Explorer 5-9 , они используют синтаксис комментариев HTML в сочетании с логическими значениями. В зависимости от логического значения (true или false ) код внутри тегов комментариев будет выводиться или скрываться в соответствующих версиях браузера:

КОД, КОТОРЫЙ БУДЕТ ВЫПОЛНЯТЬСЯ // если Internet Explorer // если НЕ Internet Explorer // если Internet Explorer 7 // если НЕ Internet Explorer 7 // если Internet Explorer 9 или НИЖЕ // если Internet Explorer 7 или ВЫШЕ // если Internet Explorer 6 ИЛИ 7 // если ВЫШЕ Internet Explorer 6 НО НИЖЕ 9

Код автоматически скрывается во всех браузерах, не поддерживающих условные комментарии. Наглядным примером того, как условные комментарии могут быть эффективно использованы на практике, является HTML5 Boilerplate , который добавляет специфические классы CSS для устаревших версий Internet Explorer :

Технические несоответствия устаревших браузеров для адаптивного веб-дизайна можно исправить с помощью полифилла. Он представляет собой фрагмент JavaScript кода, который «заполняет » специфический функциональный разрыв между устаревшим браузером и функцией. Существует целый ряд полифиллов, которые могут быть использованы для обеспечения поддержки браузером функций HTML5 .

Ниже приведено несколько полифиллов, предназначенных для устранения проблем кроссбраузерности сайта, указанных в пункте 3:

• respond.js — реализует медиа-запросы CSS3 для Internet Explorer 6 — 8 ;
• html5shiv разрешает использование семантических элементов HTML5 в Internet Explorer 6 — 8 ;
• selectivzr — эмулирует селекторы и псевдоклассы CSS3 в Internet Explorer 6 — 8 . Для полной поддержки требуется либо Mootools 1.3 , либо NWMatcher 1.2.3 . Частичная поддержка доступна с помощью JQuery 1.3/1.4 ;
• REM-unit-polyfill — определяет, поддерживает ли браузер единицы rem, и обеспечивает запасной вариант. Работает с IE8 и ниже.

Для использования указанных полифиллов, их нужно добавить из CDN или в виде файла в корректном формате внутри условных комментариев в разделе (не забудьте включить одну из необходимых для Selectivizr библиотек JavaScript ):

Для каждого проекта необходимо оценить, действительно ли необходимы эти дополнительные скрипты, поскольку они могут привести к проблемам с производительностью. Большинство полифиллов компактные, но каждый дополнительно загружаемый скрипт представляет собой дополнительный HTTP-запрос . Это может замедлить загрузку страницы.

Библиотека Modernizr , написанная на JavaScript , поможет проверить кроссбраузерность сайта: поддерживается ли в различных браузерах конкретная функция HTML5 или CSS3 . Если функция не доступна, то может быть загружен альтернативный CSS или JavaScript-код .

Идея заключается в том, чтобы напрямую определять функциональные возможности браузера, а не пытаться установить его конкретную версию. И на основании этого выводить его функциональные возможности, что является менее эффективным и надежным способом.

Стоит отметить, что Modernizr не добавляет недостающие функции в браузер. Поэтому вам нужно будет предоставить код из резервного CSS или полифилла.

Для начала необходимо скачать полнофункциональную сборку. Позже, когда вы будете готовы к разработке, можно создать пользовательскую сборку со специфическими функциями, которые вы тестируете. Все, что нужно сделать, это добавить класс .no-js в HTML-тег сайта и включить скрипт Modernizr в разделе head после любого CSS-файла :

Modernizr Demo Modernizr Demo

This is a Modernizr exercise.

Класс .no-js используется, чтобы проверить, включен ли JavaScript в браузере пользователя. Если он включен, Modernizr заменит .no-js классом .js . Функция тестирования Modernizr анализирует, поддерживается ли в браузере конкретная функция и генерирует ряд классов, которые добавляются в HTML-элемент . Google Chrome 47.0.2526.111 , например, будет возвращать следующие классы объектов.

В настоящее время Modernizr доступен в качестве глобального объекта, который можно вызвать в сочетании с названием функции, чтобы проверить существует ли она. Он возвращает логическое значение (true или false ).

Рассмотрим два простых примера CSS и JavaScript .

Пример решения проблем CSS кроссбраузерности: проверка поддержки SVG и предоставление в качестве резервного варианта PNG

В настоящее время наблюдается тенденция к все более активному использованию SVG (Scalable Vector Graphics ), но эта графика не поддерживается в IE8 и ниже. Если SVG поддерживается в браузере, Modernizr генерирует CSS-класс.svg . Если SVG не доступен, инструмент добавляет в HTML класс.no-svg . С помощью приведенного ниже CSS браузеры с поддержкой SVG будут использовать обычный класс .logo , в то время как браузеры, не поддерживающие SVG — правила .no-svg :

Logo { background-image: url("logo.svg"); width: 164px; height: 49px; } .no-svg .logo { background-image: url("/logo.png"); width: 164px; height: 49px; }

Пример JavaScript: определение border-radius и добавление соответствующих классов CSS

Округление углов рамки не поддерживается в IE8 и ниже. Мы можем создавать различные CSS-классы , которые применяются в зависимости от наличия функции border-radius :

// Класс для браузера с функцией border-radius .round-borders { border-radius: 5px; } // Класс для браузера без функции border-radius .black-borders { border: 3px solid #000000; }

Теперь можно использовать JavaScript , чтобы сохранить целевой идентификатор в качестве переменной, а затем через условие добавить классы CSS :

var element = document.getElementById("TestID"); if (Modernizr.borderradius) { element.className = "round-borders"; } else { element.className = "black-borders"; }

Когда речь идет об адаптивном веб-дизайне в устаревших браузерах, не существует какого-то универсального решения. Важно проанализировать аудиторию ресурса, чтобы получить представление о реальной численности пользователей браузеров. Затем нужно тщательно протестировать сайт, чтобы выявить потенциальные проблемы кроссбраузерности.

Любой веб-дизайнер или верстальщик знает как 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 ;