css3

В CSS3 есть хорошее свойство tab-size, оно контролирует размер, в пробелах, отображаемой табуляции. Оно пока в стадии черновика; например, неизвестно будет ли введена новая единица измерения (скажем «sp») и можно ли будет указать размер в процентах, пикселях и т. п.

Тем временем, свойство уже реализовано в некоторых браузерах, с собственным префиксом. Свойство первым поддержала «Опера» (с версии 10.60, именно от этой компании и было выдвинуто предложение добавить это свойство в CSS3), затем оно было реализовано в четвёртой версии FireFox. Остальные браузеры пока не подтянулись.

Вот как выглядит CSS-код:

body {
    -o-tab-size: 4; /* размер табуляции — 4 (для Оперы 10.60+) */
    -moz-tab-size: 4; /* размер табуляции — 4 (для FireFox 4+) */
    -webkit-tab-size: 4; /* для будущих версий Safari и Chrome */
     tab-size: 4; /* размер табуляции — 4, на будущее */
}

Значение по-умолчанию для этого свойства — 8 (пробелов), так же можно указать специальное значение «inherit», в этом случае значение будет унаследовано от родительского элемента.

Добавлено позднее: для WebKit уже есть патч для поддержки свойства «-webkit-tab-size».

Сегодня я слегка приболел, дома, много свободного времени, решил посмотреть полезную часовую запись, ссылку на которую кинул мне, мне, кажется, Pepelsbey (спасибо!) — это рассказ на конференции РИТ-2010 про будущее layout в CSS.

Три черновика, которые сейчас предлагаются — Grid (от Microsoft), Flexbox (Mozilla) и Template Layout (W3C).

Вкратце.

Первая спецификация (Grid) задаёт на страницу абстрактную сетку, а контенту, при желании, указывается в какой ячейке сетки ему располагаться и сколько занимать. Например:

body { columns:3; column-gap:0.5in; } 
img { float:page top right; width:3gr; }

Это настолько простая и очевидная идея, что у меня возникал вопрос «а почему не так», когда я ещё начинал верстать — в 1997-м году. Спецификация пока не дописана (вот уже три года как) и нигде не реализована.

Спецификация от Mozilla (Flexbox) уже посложнее, это часть XUL, то есть эта сетка уже в браузерах, основанных на Gecko, а так же реализована в Chrome и Safari. Спецификация вводит кучу новых свойств, а сетка получается древовидная. Задаётся родительский контейнер, его потомки группируются и внутри групп задаётся расположение элементов относительно друг друга.

Хотя для понимания это всё сложнее, но, кажется, такая раскладка более подходит для вёрстки «резиновых» сайтов. Чем-то это похоже на старые знакомые таблицы, но круче.

#div1 {
      display: box;
      box-lines: multiple;
      box-pack: center;
      width: 300px;
    }
    button {
      box-flex: 1.0;
      width: 90px;
      max-width: 90px;
    }

Спецификация Template Layout (W3C) — это шаблоны, при помощи свойства display задаются «слоты», «position» задаёт в каком слоте у нас контент. Видимо, это ближе к тому, что предалагает Microsoft.

body { display: "aaa"
                  "bcd" }
  #head { position: a }
  #nav { position: b }
  #adv { position: c }
  #body { position: d }

Эта спецификация нигде пока не реализована, но есть плагин к jQuery, который позволяет начать пользоваться Template Layout уже сейчас (в IE тоже работает).

Это, конечно, только приблизительные описания технологий, краткий обзор. Сами стандарты чуть сложнее, особенно Flexbox.

P.S. Кстати, доклад читал Вячеслав Олиянчук, с которым я познакомился на WSD-2009 в Минске, жалею, что не пошёл на РИТ в этом году.

Лично для меня очевиден ответ на вопрос, вынесенный в заголовок. Но умница pepelsbey расписал всё настолько хорошо, что грех не процитировать:

Чтобы чётко понимать чем стандарт отличается от черновика, прочитайте черновик CSS 3, а особенно места, помеченные красным. Фразы там звучат примерно такие:

— А может назовём свойство blah-blah иначе? Например foo-foo! — А давайте возьмём свойства a, b и с и… объединим их в одно с именем abc? — …и так далее.

И что в итоге? Каким образом производителям браузеров внедрять свойства, которые ещё до конца не описаны? Нет, конечно есть модули, которые близки к статусу рекомендаций, но над большинством вещей ещё думать и думать. В частности, на мой вопрос про border-radius, разработчики Opera ответили, что оно уже реализовано в экспериментальных билдах, но вокруг него крутится столько нюансов, а Mozilla делает так, а Webkit иначе… как же поступать Opera? Вот и тормозит внедрение новых классных фич…

Поэтом заявление MS о том, что, мол, мы не поддерживаем CSS 3, пока черновик не превратится в финальную спецификацию, звучат вполне резонно. Как бы это ни было грустно.

В общем, меньше фанатизма и больше читайте спецификации ;)

Всё, надоело. Никто не использует VML и SVG? Почему все делают скруглённые углы только кучей картинок или через CSS3-свойства? В общем, представляю код, который работает для Opera 9.50 и выше (через SVG background), IE5.0 и выше (через VML), на FireFox 1.5, Safari3 и Konqueror (через свойства CSS3). Та-да:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<!-- подключаем пространство имён VML для IE -->
<!--[if vml]>
    <xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
    <style> v\:* { behavior: url(#default#VML); display: block; } </style>

<![endif]-->

<title>Скруглённые углы</title>

<style type="text/css">
    *    { padding: 0; margin: 0; }
    body { background: white; color: black; font: 12px Arial, sans-serif; }

    .rounded { margin: 100px auto; text-align: center; width: 50%; position: relative; padding: 10px; }

/*
Нижеприведённые background-image работает только в Opera 9.50 и представляет собой закодированный алгоритомом base64
код SVG-картинки:

<svg xmlns="http://www.w3.org/2000/svg">
<mask id="mask">
   <rect width="100%" height="100%" rx="10" ry="10" fill="white" stroke="black" stroke-width="2"/>
</mask>
<rect stroke="black" fill="white" stroke-width="4" mask="url(#mask)" width="100%" height="100%" rx="10" ry="10"/>
</svg>


В этой картинке подготавливается бакграунд со скруглёнными углами
*/
    noindex:-o-prefocus, .rounded-svg {
        background-image: url(data:image/svg+xml;base64,cюда нужно положить base64-кодированную картинку);
        border: none !important;
    }

    /* для разных браузеров указываем rounded corner через CSS3-свойство */
    .rounded-css3 {
        border: 1px solid black;
        -moz-border-radius: 1em;     /* mozilla 1.5 */
        -webkit-border-radius: 1em;  /* safari 3 */
        -khtml-border-radius: 1em;   /* Konqueror */
        border-radius: 1em;          /* CSS3 */
    }
</style>

</head>

<body >
    <!--[if vml]><v:roundrect class="rounded" strokecolor="black" strokeweight="1px" arcsize="0.25" ><![endif]-->
    <!--[if !vml]>--><div class="rounded rounded-css3 rounded-svg"><!--<![endif]-->
        <p>Вот эти ребята!</p>
    <!--[if !vml]>--></div><!--<![endif]-->
    <!--[if vml]></v:roundrect><![endif]-->
</body></html>

В коде есть несколько хаков. В частности, для «Оперы» я использую background, вставленный как SVG-изображение, через data URL. Поэтому приходится выключать border, иначе он закрывает края background. SVG закодировано в base64 (функция base64_encode в PHP), потому что оно занимает так меньше, чем в URL encoded.

Далее. Для IE включается VML, это, если кто не знает, появившаяся ещё до SVG технология построения векторных изображений. Более мощная, чем SVG, кстати. Весь VML включается через условные комментарии и другие браузеры этого безобразия не видят, в том числе их не увидит и валидатор (хотя ему и без VML тут есть на что поругаться).

Для остальных браузеров используются их префиксное свойство border-radius, которое включено в CSS3.

FireFox3 хорошеет на глазах. Не знаю насколько он хорош как средство для сёрфинга (выйдет — обязательно скачаю и посмотрю), но как браузер он, безусловно, становится всё лучше. На днях FireFox 3.1 стал проходить тесты селекторов CSS3. Хорошие новости, теперь все три основных браузера — Opera, Safari и FireFox поддерживают CSS3.

Как вы думаете, на фоне Mini Cooper «копейка» является автомобилем? С этого дня я называю «Оперу», FireFox и «Сафари» «основными браузерами», поскольку именно они и являются браузерами, а IE — «альтернативным», поскольку это политкорректное название для «куска говна с окошками», да и понимание новых стандартов у него «альтернативное». При этом я не умаляю заслуг специалистов из компании Microsoft, создавших IE6 — шедевр для тех лет, и положивших начало многим современным стандартам. Спасибо, ребята, надеюсь IE9 будет достоин тех же похвал.

В CSS3 есть замечательный селектор ::selection. Позволяет указать цвет выделения текста мышкой для определённого тега. В исходной статье, например, три абзаца выделяются каждый своим цветом — красным, голубым и розовым.

Фокус прост, в таблице стилей пишем:

p.red::selection { background: #ffb7b7 }      /* Safari, Opera */
p.red::-moz-selection { background: #ffb7b7 } /* FireFox */

всё привычно — для тега «P» с классом «red» указывается цвет выделения. Для FireFox при помощи селектора «::-moz-selection», для Safari и Opera — при помощи «::selection». Opera поддерживает указание цвета для «::selection» начиная с версии 9.50 build 9770.

P.S. Если у вас FireFox, Safari или Opera 9.50 build 9770, попробуйте выделить этот текст, можно заметить, что в «Опере» цвет выделения наследуется, а в Safari и FireFox — нет.