Осенью я получил тестовое задание от компании 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
Тень от виджета
Я позволил себе немного изменить тень. Пользователи старых версий IE увидят ее такой как на PSD.
JS против IE
Годзилла против Кинг-Конга, кто бы ни выиграл — пострадают люди
Для совместимости всех вышеперечисленных красот с классическим браузером я использовал:
- Библиотеку PIE.js. Появились закругленные уголки, простые тени (сложные всё-таки пришлось делать картинкой) и градиенты. Кнопки пришлось ставить картинкой, pie некорректно работает со ссылками, у которых блочная модель, — оформление перекрывает ссылку и становится невозможно кликнуть.
- Для поддержки свойства text-shadow, которое не поддерживается ни в одной версии IE была использована библиотека отсюда с небольшим ручным допилом. В некоторых местах теней пришлось отказаться: уж очень они некрасиво выглядели.
- Стандартный и привычный костыль — conditional comments.
В итоге страница выглядит одинаково во всех браузерах. Пользователи IE могут и дальше тешить себя иллюзиями.