Я всегда мечтал, чтобы при помощи CSS можно было применить несколько фоновых рисунков к одному элементу, чтобы можно было обрезать фоновые рисунки. Мне надоело высчитывать у элементов padding, border, margin, чтобы потом присвоить width и height.

В CSS3 наступит почти рай для верстальщиков. Можно будет наконец сделать идеальную верстку.

Самое полезное в CSS3

Начну с нескольких фоновых рисунков в одном элементе, так как для меня это самое полезное добавление.

На самом деле все максимально просто, нужно всего лишь прописывать url и его параметры через запятую.
Пример: background: url (‘bg1.jpg’) top left no-repeat scroll, url (‘bg2.jpg’) 100px 20% repeat-x scroll, url (‘bg3.jpg’) bottom right repeat-y scroll;

Сайты с большим количеством графики, иконок и т.д. обычно делаются «спрайтами», то есть вся графика в одном файле. Сейчас все поместить в один файл не получается, потому, что файл придется делать огромных размеров (если страница «резиновая»). Но в CSS3 решили эту проблему, придумав параметр image-rect, при помощи которого можно обрезать фоновую картинку убирая лишнее. В данный момент этот параметр работает только в последних версиях Mozilla Firefox и пишется -moz-image-rect.
Пример: background-image: -moz-image-rect (url (‘bg.jpg’), 20, 30, 15, 40);

Следующее супер-мега нововведение — параметр box-sizing. В CSS 2.1 padding и border добавляют элементу ширину и высоту. К примеру, если к диву применить width: 10px; border: 10px; padding: 10px, то в иторе этот див будет 50 пикселей в ширину. Если же применить к элементу box-sizing: border-box, то все бордеры и паддинги окажутся внутри элемента, естественно это отразится на содержании элемента.

В CSS3 к селекторам можно будет применять особые атрибуты. Нужны они для того, чтобы применять стили к элементам с определенными атрибутами и значениями. Существует три варианта записи: [атрибут^=значение], [атрибут$=значение], [атрибут*=значение]. Первый применяет стили если к элементам потомкам, которым присвоен указанный атрибут и его значение начинается с указанного, второй если заканчивается и третий если содержит.
Пример: ul.filelist a[href$=”mp3”] { background: url (‘mp3.png’);}

Еще несколько полезностей

word-wrap: break-word позволяет разбивать слово для переноса его на следующую строку. Еще бы ставил знак переноса, так ему бы цены не было.

Сейчас многие сайты пишут заголовки не стандартными шрифтами, вставляя их при помощи Adobe Flash. Теперь вместо flash можно воспользоваться @font-face.
Пример: В CSS файле прописываем нужный шрифт @font-face { font-family: Helvetica; src: url(Helvetica.ttf'); }. Ну, а дальше можно спокойно указывать Helvetica в font-family.

Думаю про border-radius, border-image, text-shadow, box-shadow, opacity все уже слышали и использовали.