Я всегда мечтал, чтобы при помощи 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 все уже слышали и использовали.

Самые частые заблуждения

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

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

Как от этого избавится? Просто не использовать функцию дримвака менять цвет, шрифт и другие параметры при помощи панели Properties. Эта панель служит только для просмотра стилей примененных к тэгу. Это меняет еще один минус дримвака в плюс.

Работа со стилями

Тут важна последовательность. Если вы умеете верстать в слепую, то есть сначала полностью создать HTML, с примененными классами, а потом уже создавать CSS файл, то дримвак просто создан для вас.

и так чтобы создать класс в файле CSS, нужно просто выделить тэг и нажать на панели CSS во вкладке CSS Styles кнопку New CSS Rule . После чего открывается соответствующее окно в котором уже прописан класс со всеми предками, что конечно же очень удобно.

Так же как и с design view, можно с легкостью найти нужный класс в CSS просто кликнув по его названию в панели CSS.

Еще несколько плюсов

При выделении любого элемента в коде, ниже показываются все его предки, кликнув по которым, они выделяются в коде.

Если присваивать к элементу класс, то дримвак предлагает выбрать из уже существующих.

Запомнить все символы вряд ли кому то удастся, но стоит вам написать & и дримвак предствит вам список всех символов.

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

Минусы

Одним из минусов можно считать долгую загрузку, но если вы работаете не прерывно, то получается, что запускать дримвак нужно всего один раз в день. Думаю, что можно пожертвовать этими секундами, чтобы сократить время верстки в целом.

Самый главный минус дримвака — это его цена.