1. CSS Framework
    своими руками. Практика

    Виталий Харисов

    Руководитель группы HTML-вёрстки

    Субботник, Москва, 31 января 2009 года

  2. Как делаем

  3. #nojs / #js

  4. #nojs / #js

    • используем JavaScript для оживления
    • что будет, если скрипта нет?
    • есть очень простое решение

  5. #nojs / #js

    Подготовка

    <html id="nojs">

  6. #nojs / #js

    CSS «без скрипта»

    #nojs .b-blah
{
    display: none;
}

  7. #nojs / #js

    Заменяем nojs на js

    document.documentElement.id = "js"

  8. #nojs / #js

    CSS «со скриптом»

    #js .b-blah
{
    display: block;
}

  9. .quirks

  10. .quirks

    • Компоненты делаем в Standards Mode
    • Подправляем для Quirks Mode

  11. .quirks

    Подготовка

    if (document.compatMode != "CSS1Compat")
    document.documentElement.className +=
        " quirks"

  12. .quirks

    Использование

    .quirks .b-blah
{
    width: 96%;
}

  13. CSS Expressions

  14. CSS Expressions

    Что это?

    • Есть только в Internet Explorer 7 и ниже
    • JavaScript внутри CSS
    • Плохие expressions влияют на производительность
    • Плохая репутация, все слышали, но боятся использовать

  15. CSS Expressions

    Для чего мы их используем

    • добавление экстра-разметки
    • эмуляция :before / :after
    • динамический пересчёт ширины / высоты

  16. CSS Expressions

    Код

    Ширина 100% - 50px.

    Не можем так

    .b-blah
{
    width: 100% - 50px;
}

  17. CSS Expressions

    Код

    Но можем так

    .b-blah
{
    width: expression(
        parentNode.offsetWidth - 50 + 'px')
}

  18. CSS Expressions

    Проблема

    • Expression вычисляется постоянно
    • Сильно снижается производительность браузера

  19. CSS Expressions

    Одноразовый expression

    • Вычисляется один раз
    • Перекрывается статическим значением
    • Безопасны по производительности
    • Можно использовать для добавления элементов в DOM

  20. CSS Expressions

    Одноразовый expression. Код

    * html .b-blah {
    width: expression(
        runtimeStyle.width = "auto",
        appendChild(createElement("blah")));
}

* html .b-blah blah {
    background: red;
}

  21. CSS Expressions

    Кешируемый expression

    • Выполняется постоянно
    • Но меняет значение, только когда надо

  22. CSS Expressions

    Кешируемый expression. Код

    * html .b-blah {
    height: 100%;

    h: expression(
       (this.h != parentNode.offsetHeight) ?
       (this.h = parentNode.offsetHeight,
           style.height = this.h + "px") :
       0 );
}

  23. CSS Expressions

    Кешируемый expression. Код

    * html .b-blah {
    h: expression( function (t) {
        var h = t.parentNode.offsetHeight;

        if (t.h != h) {
            t.h = h;
            t.style.height = h + "px";
        }
    } (this) );
}

  24. Реализация блоков

  25. g-png: поддержка PNG-24 в <img>

  26. g-png: поддержка PNG-24

    Проблема

    • Верстальщикам сильно мешает жить MSIE6
    • Не поддерживает отображение PNG-24 с полупрозрачностью
    • Решений множество
    • У нас есть своё решение

  27. g-png: поддержка PNG-24

    Классическое решение

    • Замена адреса картинки на пустой GIF
    • Применение к этой картинке фильтра


    Недостатки

    • Используется ещё одна картинка,
      лишний HTTP-запрос
    • Полупрозрачные области в ссылке не кликабельны

  28. g-png: поддержка PNG-24

    Наше решение

    • Глобальный модификатор g-png
    • Можно добавлять любому элементу внутри которого есть <img>

  29. g-png: поддержка PNG-24

    HTML

    Код такой

    <i class="g-png"><img src="…"/></i>


    Или такой

    <a class="g-png" href="…"><img src="…"/></a>

  30. g-png: поддержка PNG-24

    HTML. Объяснение

    Введя дополнительный элемент получили:

    • Фильтр навешивается не на картинку,
      а на элемент .g-png
    • Картинка скрывается через visibility: hidden
    • Проблему кликабельности картинки
      решим просто

  31. g-png: поддержка PNG-24

    CSS. Накладываем фильтр

    * html*.g-png { /* Скрываем от MSIE5 */
    zoom: expression(
        runtimeStyle.zoom = 1,
        runtimeStyle.filter +=
            "progid:DXImageTransform." +
            "Microsoft.AlphaImageLoader(src=" +
             getElementsByTagName("img")[0].src + ")"
    );
}

  32. g-png: поддержка PNG-24

    CSS. Скрываем картинку

    * html*.g-png img {
    visibility: expression(
        runtimeStyle.visibility="hidden",

        parentNode.insertBefore(
            createElement("png"), this)
    );
}

  33. g-png: поддержка PNG-24

    CSS. Поддержка кликабельности

    * html*.g-png png {
    font-size: 0;

    position: absolute;

    width: expression(runtimeStyle.width =
        parentNode.offsetWidth + "px");
    height: expression(runtimeStyle.height =
        parentNode.offsetHeight + "px");
}

  34. g-png: поддержка PNG-24

    CSS. Финальный штрих

    * html a.g-png,
* html a .g-png,
* html .g-png a {
    cursor: hand;
}

  35. Реализация блоков

    Примеры можно скачать

    vitaly.harisov.name/article/css-framework-examples.zip

  36. Спасибо за внимание!

  37. Виталий Харисов

    Руководитель группы HTML-вёрстки

    vitaly@yandex-team.ru

Предварительный просмотр    Режим презентации