|
Возвращаясь к теме будущего CSS, расскажу более подробно о некоторых новых возможностях, предлагаемых третьей версией спецификации этой технологии. Селекторы, о которых пойдет речь, на данный момент работают далеко не во всех браузерах, но, учитывая модульность CSS, постепенного появления и распространения таких возможностей стоит ожидать в обозримом будущем.
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 , на мой взгляд, — довольно ожидаемое нововведение. Цвета в новом формате задаются, как не сложно догадаться, тремя параметрами:
- Тон (hue), определяемый углом положения соответствующей точки на цветовом круге (от 0 до 360 градусов).
- Цветность (saturation) — от 0 до 100%.
- Яркость (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.
Написать комментарий
| 
