background-size

Теперь для фоновых графических изображений можно будет определять размеры, так же как и для обычных картинок на странице. Что интересно, ширину и высоту фона можно будет задавать не только в пикселях, но и в процентах. В таком случае она сможет динамически изменяться, при масштабировании того элемента, для которого определен фон.

На данный момент работает в Opera 9.5, Safari 3 и Konqueror (их селекторы называются соответственно -o-background-size, -webkit-background-size and -khtml-background-size).

Множественные background-image

Множественного определения фона все ждали еще с первой версии CSS, и, наконец, она включена в стандарт. Селектор background можно будет определять так:

background: url(body-top.gif) top left no-repeat,
url(banner_fresco.jpg)  top 11px no-repeat,
url(body-bottom.gif) bottom left no-repeat,
url(body-middle.gif) left repeat-y;

Работает в Safari, Konqueror и OmniWeb.

word-wrap

С помощью этого селектора, предложенного Microsoft, можно будет автоматически разбивать длинные сова на фрагменты так, чтобы они помещались по ширине в отведенную им область. Очень полезный селектор для сохранения целостности дизайна страниц и предотвращения нежелательного появления полосы горизонтальной прокрутки.

У селектора могут быть два значения: normal и break-word.

Я проверил работу селектора в седьмой версии Internet Explorer. В шестом IE этого сделать не получилось, т.к. сегодня по непонятной причине, при попытке открытия любой ссылки, он перебрасывает ее в Firefox (?!). По сведениям css3.info, селектор так же работает в Safari.

Многоколоночное форматирование текста

Отформатировать текст в «газетном» стиле можно будет задав ширину колонки селектором column-width, или указав нужное количество колонок с помощью column-count. Для определения размера отступов между соседними колонками предназначается селектор column-gap.

-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;

Пока работает только в Safari 3 (с префиксами селекторов -moz- и -webkit-).

Цветовая модель HSL

Возможность задавать цвета не только в RGB, но и в HSL , на мой взгляд, — довольно ожидаемое нововведение. Цвета в новом формате задаются, как не сложно догадаться, тремя параметрами:

1. Тон (hue), определяемый углом положения соответствующей точки на цветовом круге (от 0 до 360 градусов).
2. Цветность (saturation) — от 0 до 100%.
3. Яркость (lightness) — так же в процентах. 0% соответствует самому темному оттенку, 100% — самому светлому (проще говоря, яркость изменяет цвет от черного до белого).

Пример:

<div style="background-color: hsl(0,100%, 50%);"></div>
<div style="background-color: hsl(240,100%, 50%);"></div>
<div style="background-color: hsl(120,100%, 50%);"></div>

Работает в Opera 9.5, Safari 3, Konqueror и Mozilla.

Цветовые модели HSLA и RGBA

В уже существующем форматом записи цвета RGB, а так же в новым HSL можно будет использовать дополнительный, четвертый параметр — alpha, задающий уровень прозрачности. Alpha может принимать дробные значения от 0 до 1 (0 соответствует полной прозрачности).

Примеры:

<div style="background-color: hsla(0,100%,50%,0.4);"></div>
<div style="background-color: hsla(0,100%,50%,0.6);"></div>
<div style=”background: rgba(255, 0, 0, 0.8);”></div>
<div style=”background: rgba(255, 0, 0, 1)  ;”></div>

Теоретически работает в Safari 3 и пререлизах Firefox 3.

Ссылки по теме:

• css3.info — All you ever needed to know about CSS3.