1. Вёрстка элементов страниц в общем виде

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

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

    Я.Субботник, Киев, 25 апреля 2009 года

  2. Вводный минимум

  3. Вводный минимум

    Блоки

    1. верстаем блоками
      1. не используем глобальные стили
      2. блоки с префиксом b- и своими стилями
      3. используем только class (множественные классы)
    2. основные стили в b-block.css
    3. стили для MSIE в b-block.ie.css
    4. обнуляющие стили в b-block.reset.css
    5. модификаторы в b-block_modifier.css

  4. Вводный минимум

    Реализация

    1. #nojs для стилей без скрипта
    2. #js для стилей со скриптом
    3. .quirks в Quirks Mode
    4. используем одноразовые expression

  5. Подробнее

  6. Подробнее

    Доклады с январского Субботника

    1. CSS Framework своими руками: теория
      ( презентация;   посмотреть видео;   скачать видео )
    2. CSS Framework своими руками: практика
      ( презентация;   посмотреть видео;   скачать видео )

  7. Подробнее

    Клуб на Я.ру

    clubs.ya.ru/yacf

  8. b-input

  9. b-input

    Задача

    Поле ввода с процентной шириной.

  10. b-input

    Проблема 1: боксовая модель

    Должно быть:




    В Standards Mode при 100% ширине поля
    оно выходит за пределы родителя:

  11. b-input

    Проблема 2: MSIE7-

    1. 100% ширина таблицы и поля ввода
    2. в поле ввода много текста

    Должно быть:



    Поле ввода разносит таблицу:

  12. b-input

    b-input.html

    <div class="b-input">
    <input />
</div>

  13. b-input

    b-input.css: боксовая модель

    .b-input input
{
    width: 100%;

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

  14. b-input

    b-input.ie.css: боксовая модель

    .b-input {
    /* default: 2px border + 1px padding */
    margin-right: 6px;
}

.quirks .b-input {
    margin-right: 0;
}

  15. b-input

    b-input.ie.css: ширина поля ввода



    .b-input input
{
    float: left;
}

  16. b-input

    b-input.reset.css

    .b-input input
{
    font: 100% Arial, sans-serif;
}

  17. b-input-hint

  18. b-input-hint

    Задача

    Подсказка в поле ввода, исчезающая по клику на поле ввода или если в нём есть контент.

  19. b-input-hint

    Проблема

    Поле ввода может быть type="password"

  20. b-input-hint

    b-input-hint.html

    <div class="b-input-hint">
    <label for="input">
        подсказка
    </label>

    <input id="input"/>
</div>

  21. b-input-hint

    b-input-hint.html

    <input id="input"
  onfocus="скрыть label"
  onblur="показать label, если поле пусто"
  onchange="скрыть, если поле не пусто"
  onmouseover="тоже что и onchange"/>

<script type="text/javascript">
    вызвать onchange у input
</script>

  22. b-input-hint

    b-input-hint.css

    #nojs .b-input-hint input {
    display: block;
    margin-top: 0.2em;
}


  23. b-input-hint

    b-input-hint.css

    #js .b-input-hint label {
    position: relative;
    float: left;
    margin: 0.25em 0 -2em 0.2em;

    cursor: text;
    color: #999;
}


  24. b-input-hint

    b-input-hint.reset.css

    .b-input-hint input
{
    font: 100% Arial, sans-serif;

    margin: 0;
}

  25. b-search

  26. b-search

    Задача

    Форма для поиска 100% ширины.

    Собираем из уже имеющихся компонент.




  27. b-search

    b-search.html

    <form action=""><table class="b-search">
<tr>
    <td class="input">
        <div class="b-input"><input /></div>
    </td>
    <td class="button">
        <input type="submit" value="Найти"/>
    </td>
</tr>
</table></form>

  28. b-search

    b-search.html с b-input-hint

    <td class="input">
    <div class="b-input-hint">
        <label for="input"/>

        <div class="b-input">
            <input id="input"/>
        </div>
    </div>
</td>

  29. b-search

    b-search.css

    .b-search
{
    width: 100%;
}

  30. b-search

    b-search.css

    .b-search .input
{
    width: 100%;

    vertical-align: middle;
}

  31. b-search

    b-search.css

    .b-search .button
{
    padding-left: 0.3em;

    vertical-align: middle;
}

  32. b-search

    b-search.reset.css

    .b-search,
.b-search .input,
.b-search .button
{
    padding: 0;

    border-collapse: collapse;
}

  33. b-vlist

  34. b-vlist

    Задача

    Реализовать вертикальный список
    с произвольным маркером.


    Например, длинным тире:

    • Пункт 1
    • Пункт 2
    • Пункт 3
    • Пункт 4

  35. b-vlist

    b-vlist.html

    <ul class="b-vlist b-vlist_mdash">
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
    <li>Пункт 4</li>
</ul>

  36. b-vlist

    b-vlist.css

    .b-vlist,
.b-vlist li
{
    margin: 0 0 0.3em;
    padding: 0;

    list-style: none;
}

  37. b-vlist

    b-vlist.css

    .b-vlist li:before
{
    position: absolute;

    margin-left: -1.3em;
}

  38. b-vlist

    b-vlist_mdash.css

    .b-vlist_mdash li:before
{
    content: "\2014\a0";
}

  39. b-vlist

    b-vlist.ie.css

    .b-vlist li
{
    zoom: expression(
        runtimeStyle.zoom = 0,
        insertBefore(
            createElement("m"), firstChild)
    );
}

  40. b-vlist

    b-vlist.ie.css

    .b-vlist m
{
    position: absolute;

    margin-left: -1.3em;
}

  41. b-vlist

    b-vlist_mdash.ie.css

    .b-vlist_mdash m
{
    zoom: expression(
        runtimeStyle.zoom = 0,
        innerText = "\2014"
    );
}

  42. b-hlist

  43. b-hlist

    Задача

    Реализовать горизонтальный список
    с произвольным разделителем.





    • Ваня
    • Петя
    • Вася








  44. b-hlist

    b-hlist.html

    Пробелов между </ul> и <ul> быть не должно!


    <ul class="b-hlist b-hlist_comma">
    <li>Ваня</li
    ><li>Петя</li
    ><li>Вася</li>
</ul>

  45. b-hlist

    b-hlist.css

    .b-hlist, .b-hlist li
{
    display: inline;

    margin: 0;
    padding: 0;
}

  46. b-hlist

    b-hlist.css

    .b-hlist li:first-child:before
{
    content: "";
}

  47. b-hlist

    b-hlist.ie.css

    .b-hlist li
{
    zoom: expression(
        runtimeStyle.zoom = 0,
        previousSibling &&
        insertBefore(
            createElement("m"), firstChild)
    );
}

  48. b-hlist

    b-hlist_comma.css

    .b-hlist_comma li:before
{
    content: ",\20";
}

  49. b-hlist

    b-hlist_comma.ie.css

    .b-hlist_comma m
{
    zoom: expression(
        runtimeStyle.zoom = 0,
        innerText = ",\20"
    );
}

  50. b-hlist

    b-hlist_middot.css

    .b-hlist_middot li:before
{
    content: "\a0\b7\20";
}

  51. b-hlist

    b-hlist_middot.ie.css

    .b-hlist_middot m
{
    zoom: expression(
        runtimeStyle.zoom = 0,
        innerText = "\a0\b7\20"
    );
}

  52. b-hlist

    b-hlist_arrow.css

    .b-hlist_arrow li:before
{
    font-family: "Times New Roman",
                  sans-serif;

    content: "\a0\2192\20";
}

  53. b-hlist

    b-hlist_arrow.ie.css

    .b-hlist_arrow m
{
    font-family: "Times New Roman",
                  sans-serif;

    zoom: expression(
        runtimeStyle.zoom = 0,
        innerText = "\a0\2192\20"
    );
}

  54. b-icon

  55. b-icon

    Задача

    1. унифицировать использование пиктограмм
    2. использовать как отдельные картинки, так и спрайты
    3. использовать спрайты в PNG-24

  56. b-icon

    Проблема

    При использовании спрайтов в PNG-24
    невозможно использовать background-position
    в MSIE для сдвига фильтра.

  57. b-icon

    Решение

    Отказываемся от использования background-position и используем позиционирование.

  58. b-icon

    b-icon.html

    <i class="b-icon"><i></i></i>

  59. b-icon

    Демонстрация техники

    .b-icon i 
    .b-icon

  60. b-icon

    Демонстрация техники

    .b-icon i 
    .b-icon



    .b-icon_links2 i
{
    left: -16px;
}

  61. b-icon

    b-icon.css

    .b-icon
{
    position: absolute;
    overflow: hidden;

    width: 16px;
    height: 16px;
    margin-left: -19px;
}

  62. b-icon

    b-icon.css

    .b-icon i
{
 /* position: absolute; */

    position: relative;
    display: block;
}

  63. b-icon

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

    .b-icon i
{
    width: 48px;
    height: 16px;

    background: url(path-to-image);
}

  64. b-icon

    Использование: смещения

    .b-icon_links1 i
{
    left: -16px;
}

.b-icon_links2 i
{
    left: -32px;
}

  65. b-icon

    Использование: фильтр для MSIE6

    Если спрайт в PNG-24 задаём фильтр

    * html .b-icon i
{
    -background: none;
    -filter: progid:DXImageTransform:…;
}

  66. b-icon

    b-icon.ie.css

    * html*.b-icon i
{
    zoom: expression(
        runtimeStyle.zoom = 1,

        /* Добавляем элемент <png>, перекрывающий
           фильтр (для кликабельности ссылки) */
        parentNode.appendChild(
            createElement("png"))
    );
}

  67. b-icon

    b-icon.ie.css

    * html .b-icon png {
    position: absolute;
    top: 0; left: 0;

    width: 100%; height: 100%;

    background: red;
    filter: alpha(opacity=0);
}

  68. b-icon

    b-icon.ie.css

    * html a .b-icon
{
    cursor: hand;
}

  69. b-icon

    Вариант: от контекста

    <ul class="b-links">
    <li class="link1">
        <i class="b-icon"><i></i></i>Link 1

    .b-links .b-icon i {
    /* width / height / background */
}

.b-links .link2 .b-icon i {
    left: -16px;
}

  70. b-icon

    Вариант: с модификатором

    <i class="b-icon b-icon_alert"><i></i></i>

    .b-icon i {
    /* width / height / background */
}

.b-icon_alert i {
    left: -16px
}

  71. b-icon

    Вариант: с внутренним классом

    <i class="b-icon"><i class="alert"></i></i>

    .b-icon i {
    /* width / height / background */
}

.b-icon .alert {
    left: -16px
}

  72. b-icon

    Вариант: с модификатором и внутренним классом

    <i class="b-icon b-icon_32x32"
    ><i class="main"></i></i>

    .b-icon_32x32 {
    /* width / height / background */
}

.b-icon_32x32 .alert {
    left: -16px
}

  73. b-round

  74. b-round

    Задача

    1. релизовать скругление уголков у блока на известном фоне
    2. блоки со скруглёнными углами могут
      вкладываться один в другой
    3. скругляемый блок может быть с рамкой
    4. скруглять как display: block, так и inline-block и float

  75. b-round

    Решение

    Слишком большое для доклада.

    Будет опубликовано в клубе на Яру

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

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

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

    vitaly@yandex-team.ru

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