CSS3 в старых броузерах

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

Верхняя часть макета

Верхняя часть макета

Мы видим, что в дизайне используются модные сейчас тени для блоков и текста, градиенты и вечная классика — закругленные уголки. При этом заказчик настаивал на совместимости с IE7. Я решил сверстать страницу, используя html5 и LESS для работы с CSS3. Совместимость со старыми (и новыми) версиями IE я реализовал при помощи javascript.

Структура макета довольно простая: header, footer, основной контент и боковая колонка с виджетами. Я оформил код страницы семантически, использовал соответствующие html5 теги для структурных частей макета. Это дало мне +5 к ЧСВ и +1 к последующему геморрою с осликом. Для уменьшения запросов к серверу изображения объединены в спрайт, где это целесообразно, также был использован data:image base64. Html-код страницы получился довольно простым, из заковыристых штук можно назвать только блок с адресом в подвале, я его сделал по стандарту
hcard с использованием микроформатов.

LESS — динамический CSS

В этом проекте я решил потренироваться работать с LESS — динамической надстройкой над CSS. Вкратце эта надстройка дает использовать при работе с таблицами стилей переменные, простейшие арифметические операции, параметры и повторяющиеся элементы. Это аналог SASS или SCSS, который компилируется прямов браузере без использования Ruby — очень удобно при разработке.

Мощь LESS видно при создании так называемых pure-CSS кнопок. Вот такую кнопку можно создать при помощи кода, приведенного ниже.

Кнопка с градиентом, закругленными уголками и тенями

Кнопка с градиентом, закругленными уголками и тенями

Тени в раю

Для нескольких блоков дизайнер использовал необычные тени. Я реализовал ее на чистом CSS (вот инструкция).

Тень от нижнего блока ACG

Тень от нижнего блока ACG

Тень от виджета

Тень от виджета

Я позволил себе немного изменить тень. Пользователи старых версий IE увидят ее такой как на PSD.

JS против IE

Годзилла против Кинг-Конга

Годзилла против Кинг-Конга, кто бы ни выиграл — пострадают люди

Для совместимости всех вышеперечисленных красот с классическим браузером я использовал:

  1. Библиотеку PIE.js. Появились закругленные уголки, простые тени (сложные всё-таки пришлось делать картинкой) и градиенты. Кнопки пришлось ставить картинкой, pie некорректно работает со ссылками, у которых блочная модель, — оформление перекрывает ссылку и становится невозможно кликнуть.
  2. Для поддержки свойства text-shadow, которое не поддерживается ни в одной версии IE была использована библиотека отсюда с небольшим ручным допилом. В некоторых местах теней пришлось отказаться: уж очень они некрасиво выглядели.
  3. Стандартный и привычный костыль — conditional comments.

В итоге страница выглядит одинаково во всех браузерах. Пользователи IE могут и дальше тешить себя иллюзиями.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>