Если вы хотите получать уведомления о новых записях на блоге Mannodesign.Com, то просто подпишитесь на RSS-рассылку.
* Автор статьи — Кирилл «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.
Другие CSS-фреймворки, более сложные и функциональные:
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 мы просто стимулируем разработчиков браузеров засиживаться на работе допоздна: им не особенно приятно, если в их детищах популярные сайты расползаются по швам.
* Автор статьи — Кирилл «Erlang» Панфилов,
Постовой:
Предлагаем: . Собираем: . Любуемся for
Комментарии (38)
Трэкбеки
Пожалуйста, оставьте ваш комментарий. Спасибо!
отличная стать, возьму на заметку. Спасибо Насть ;)
Отличная статья, с удовольствием прочитал и ретвитнул анонс.
К сожалению, не можем мы перестать оглядываться на старые браузеры (привет IE6). 11% пользуются этой древностью. Но применять новые тенденции с оглядкой - вот это правильно.
Да сдохни ты уже, IE6!!!
Спасибо большое за статью, тоже взяла на заметку!
Вот еще что, думаю желающим более углубленно разобраться с технологией “несколько изображений в одном файле” или спрайтов как раз в тему окажется мой подробный видеоурок (я верстаю динамическую кнопку при помощи CSS).
Вот ссылка:
Главное не переборщить с этими модными штучками)
@Kiteg
Ну они скорее полезные, чем модные :)
Но то, что везде надо знать меру, никто не спорит.
Например, использование прозрачности является ресурсоёмким для браузеров. Особенно для Оперы и ИЕ.
Спасибо за статью, в закладки срочно =)
Отличная статья))) немного нового для себя узнал: побольше бы таких конкретных публикаций)))
Нась, спасибо :) Освежил в памяти некоторые вещи, пару новых штук взял на заметку. Ну и Кириллу спасибо, естественно
FireFox 3.5 тоже понимает. В WebKit и KHTML тоже должно работать.
Блин, полезные штуки описал. Надо будет на досуге попробовать. Как раз верстаю один сайт
Кстати, про IE6. У меня есть клиент, который упорно не желает уходить с этой версии. Приходится учитывать его потребности. А так бы схалявил:)
@Dem
Думаю, нельзя будет халявить, пока доля ИЕ 6 не сократится хотя бы до 1-2 процентов — да и то я предпочитаю учитывать и более старые версии, вплоть до того, чтобы сайты можно было хотя бы читать в ИЕ и Нетскейпе совсем древних 4 версий, и в Опере 7, и в ФФ 2.
Спасибо, интересно. Но есть ошибки:
1. Ruby - это язык программирования. Web фреймворки для Ruby: Rails, Sinatra и т.д.
2. CodeIgniter
@ring0
Спасибо, совершенно верно :)
Давно искала как сменить цвет выделения, спасиба!
Переправь CodeIgnitur на CodeIgniter
2Андрей Морковин,Кирилл Erlang и всем, кто «недолюбливает» IE6:
@nuxdie
а зачем, если просто можно пользоваться Хромом? :-)
2Кирилл Erlang^ Вы кажется не поняли, я имел в виду тех людей что мучаются с хаками для «осла». Так вот, для них теперь достаточно вставить одну строчку кода и все проблемы решены.
ps/ людей, исполюзующих смайлики непонимаю…
IE 6 не поддерживает нормально 3ие уровни, не поддерживает Альфу как надо (вообще не отображает див)
:((
@Максиим
Для того, чтобы он отображал альфу, у дива должна быть или ширина, или высота точно назначена.
@nuxdie
Я тебя тоже че-то не пойму. На сколько мне известно, Google Chrome Frame это всего лишь расширение для осла, , позволяющее использовать в браузере ядро Chromium. Это не скрипт, который можно подвесить на сайт и он исправит все глюки IE. Так что Кирилл прав - проще (и лучше) Хром установить.
2INOZ, Вы правы, Google Chrome Frame это всего лишь расширение для осла. Но! Есть скрипт, форсирующий установку плагина в браузер пользователя.
Прочтите вот этот раздел документации:
Если с английским неочень, то вот что происходит:
Загружается JavaScript библиотека, которая проверяет наличие плагина.
Если плагин не обнаружен, то она вставляет на страницу iframe, выглядящий примерно так:
Ну а дальше юзер уже сам разберется.
Как только плагин установился сайт начинает работать через него.
Парсер порезал картинку:
Кстати, из-за этого плагина теперь мелкософт бочку на гошу катит
Ruby – это язык программирования, а Ruby on Rails – фреймворк для создания веб-приложений.
Свойство text-shadow работает в большинстве современных браузеров. Только для браузеров Safari и Chrome используется префикс -webkit, для Firefox > 3.5 – префикс -moz
Похожий пример для свойства CSS3 box-shadow: я проклятый спамер! )))
Запись правила для заголовка будет выглядеть так:
h1 {
text-shadow:0 1px 1px #363;
-webkit-text-shadow: 0 1px 1px #363; /* Safari, Chrome */
-moz-text-shadow: 0 1px 1px #363; /* Firefox */
}
Что-то новенькое. Имелось в виду “меньше”?
А вообще я не вижу в FF -moz-text-shadow — он его просто игнорирует.
PS — а WebKit вообще нормально понимает text-shadow, безо всяких префиксов.
Vladimir, имелось ввиду Firefox версии 3.5 и более поздние. FF 3.5.3 (только что проверил) понимает text-shadow в «чистом виде» без префикса.
Для box-shadow все работало именно так как описано.
Спасибо за фишку с подгружением картинки. Я эту CSS верстку уже полмесяца ищу! :)
Настя,
у тебя как всегда интересно и полезно))
Про прозрачность я не слышал) Спасибо
Спасибо, dedywka, на добром слове! :)
FF -moz-text-shadow прекрасно видит (3.5 версия по крайней мере), но, радости полной, пока не приносит. Валидатор не “ест” префиксы и выдает ошибки. Без префикса, все валидно, но не теней не прчих прелестей не вырисовывается. Встает дилема! Либо валидный css3, либо тени, скругления и прочее. Вот и не знаю или оставить с префиксом - невалид, либо, как бы вы сделали?
2Avatara: Да положи ты на эту валидацию! Накой она тебе сдалась? Вон из-за гребанного “осла 6″ (который png прозрачность не понимает) вся валидность и так идет лесом! А если еще пытаться юзать WC3 черновики в рабочих проектах, так вообще можно на все забить! И кстати webkit как сказано выше прекрасно все понимает но новым стандартам.
А вообщето text-shadow помойму не смертельное свойство! им иожно и пренебречь.
@Avatara
Я обычно жертвую валидностью в пользу функциональности. На мой взгляд, валидность нужна валидатору и фанатичным разработчикам, а остальное пользователям и владельцам сайта, ради которых всё и затевается.
От этого мой код не становится менее семантичным. А как я недавно выяснил, даже официальный валидатор допускает ошибки.
@Avatara, с префиксом как раз-таки всё валидно, это один из примеров, когда валидатор не прав.
Читаем внимательно спецификацию (4.1.2.1 Vendor-specific extensions):
PS — понимает 3.5 text-shadow. Смотреть .
Кстати о text-shadow: если задается несколько теней, то Опера отрисовывает их по стандарту CSS 2, а Webkit/Gecko - CSS 3. В результате тени отрисовываются совершенно по-разному (к слову о кросс-браузерности).