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

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