Автор статьи — Кирилл «Erlang» Панфилов. Специально для www.mannodesign.com
В веб-разработке, как и везде, есть своя мода. К счастью, веб-дизайнеры не собираются на помпезных показах и светских тусовках, о них не пишут скандальные таблоиды, поэтому новинки, тенденции и смелые находки нужно собирать в бесконечных поисках по дизайнерским блогам. Сегодня мы рассмотрим несколько современных практик, которые завоёвывают всё большую популярность.
1. Используем возможности CSS третьего уровня
Современные браузеры всё больше приближаются к CSS Level 3, которые направлены не только на гибкую вёрстку, но и позволяют более корректно распечатывать веб-страницы на принтере и воспроизводить их на звуковых устройствах, а также расширяют обычные возможности разметки. Например, сейчас в коде многих сайтов можно встретить такое:
::selection {
background: #600;
color:#FFC;
}
::-moz-selection {
background: #600;
color:#FFC;
}
Этот кусочек кода позволяет изменять цвет фона и текста, который вы выделяете на веб-странице мышкой. Вставьте эти строки в начало своего CSS-файла, выделите фрагмент текста, и вы увидите, что текст стал бледно-жёлтым на красивом бордовом фоне. Работает это, разумеется, везде, кроме браузера Internet Explorer 6: он оказался очень далёким от модных тенденций.
Мы бы, конечно, с удовольствием использовали и падающую тень от букв:
h1 {
text-shadow:0 1px 1px #363;
}
Но понимает такое свойство, к сожалению, похоже, только Opera.
2. Начинаем код с CSS-фреймворка
Фреймворк — это некоторый фрагмент кода, который позволяет решать часто используемые задачи. Те, кто программирует сложные веб-приложения, наверняка знают о таких программных фреймворках, как Yii, Zend, Kohana, CodeIgniter, Struts, Ruby и других (в них сразу реализованы и методы работы с базами данных, и системы безопасности, и процессы авторизации и регистрации пользователей, и обработка пользовательских данных). Если вы часто используете возможности языка JavaScript, то, вероятно, вы не обходитесь без фреймворков jQuery, Mootools или Prototype (динамическое построение веб-страницы, анимация и сложные эффекты, сравнимые с Flash). Сложно говорить о HTML-фреймворках, но вот CSS-фреймворки используются достаточно часто.
Что они делают? Обнуляют отступы, исправляют браузерные разночтения, касающиеся таблиц, границ и размеров, описывают часто используемые элементы. Например, я вёрстку всех своих проектов начинаю со вставки своего же небольшого фреймворка, который я не обновляю уже достаточно долго, потому что он решает все нужные мне задачи:
/* CSS Framework by Erlang, 2009 */
/* General Cleaning */
* {
margin:0;
padding:0;
font-family:Verdana, Arial, Helvetica, Sans-Serif;
}
html, body {
height:100%;
}
input {
padding:2px 4px;
}
body, p, div, table, td, th, input, option, select, button, li, a {
font-size:9pt;
}
body {
background-color:#fff;
}
table, img {
border:0;
}
table {
border-collapse:collapse;
}
table td {
padding:0px;
vertical-align:top;
}
div {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
a, a:link, a:visited, a:active {
color:#00f;
}
a:hover {
color:#f00;
}
:focus {
outline:none;
}
label {
cursor:pointer;
}
/* Special Elements */
/* Описываем остальные элементы */
Если в двух словах, этот код обнуляет отступы у всех элементов, задаёт стандартные шрифты (а также размеры и цвета) на веб-странице, исправляет браузерные разночтения, которые не позволяют растягивать блоки на высоту окна, убирает рамки у таблиц и изображений, если они по каким-то причинам появятся (картинки-ссылки в некоторых браузерах по умолчанию снабжаются некрасивой рамкой), убирает отступы у ячеек таблиц и выравнивает содержимое этих ячеек по верхнему краю, убирает в Firefox пунктирную рамку вокруг нажатых ссылок, назначает элементу LABEL вид курсора — «лапку», которая подталкивает пользователя к нажатию, а также приводит к единообразию ширину элементов, у которых есть рамки и отступы — Opera и Firefox в плане последнего сильно отличается от Internet Explorer.
3. Использование прозрачности
Всегда приятнее, если какой-то блок на странице выглядит не так:
а так:
Для этого совершенно необязательно готовить картинку с полупрозрачным фрагментом в фотошопе. Достаточно поместить картинку фоном в блок, а внутри этого блока сделать ещё один DIV-блок, позиционированный относительно внешнего, и назначить ему свойство прозрачности:
#inner_block {
opacity:0.3;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
}
Первую строчку в описании понимают модные *зачёркнуто* современные браузеры, а вторую — Internet Explorer. Мы бы не возились с ним так, если бы он не занимал 60-70% рынка браузеров. Обратите внимание, что обычное свойство opacity измеряется в абсолютной величине (0 — полная прозрачность, когда элемента не видно, 0.5 — полупрозрачный элемент, а 1 — непрозрачный), а для IE значения задаются в процентах, только без значка процента (соответственно, те же значения нужно задать как 0, 50, 100).
4. Спрайты — скрытые возможности
Если раньше, в 90-е годы и в начале двухтысячных веб-дизайнеры советовали разрезать большие изображения на несколько маленьких, чтобы они быстрее загружались, то теперь всё как раз наоборот: верстальщики предпочитают хранить в одной картинке сразу несколько. Скорости соединения всё выше, а загрузкой одного изображения вместо нескольких мы даже добиваемся некоторой экономии. Такие изображения называются спрайтами, и в определённых фрагментах страницы они показываются частями. Так, например, мы добиваемся, чтобы фон ссылки или кнопки при наведении мышки загружался мгновенно, а не запрашивался с сервера: ведь картинка уже загрузилась, только часть её скрыта.
Тут мы видим сразу два состояния. При загрузке страницы используется такой код:
a.button {
background:#742319 url(/images/button.png) no-repeat 0 0;
color:#EBCABA;
display:block;
font-size:11pt;
font-weight:bold;
height:25px;
line-height:25px;
text-align:center;
text-decoration:none;
width:170px;
}
А если навести мышку на ссылку, то одна строка перекрывается таким кодом:
a.button:hover {
background:#6A1C13 url(/images/button.png) no-repeat 0 -25px;
}
Как видим, используется одна и та же картинка в заданной области, но при наведении она смещается вверх на 25 пикселей. В одном из проектов я поместил в одно изображение сразу 6 стилей кнопок, сведя таким образом всю графику на странице к 2 картинкам: логотип и набор кнопок.
Большинство из нас сталкивались с картами Google, где по щелчку на объекте открывается белый блок с указателем, скруглёнными углами, кнопками и другими элементами. Все элементы этого блока собраны в одной картинке, а с помощью CSS лишь расставляются по местам:
5. Перестать оглядываться на старые браузеры
Их используют всё меньше. А использованием новых возможностей CSS мы просто стимулируем разработчиков браузеров засиживаться на работе допоздна: им не особенно приятно, если в их детищах популярные сайты расползаются по швам.
