CSS-трюк с background-image

Довольно интересное применение псевдо-элемента :before показал Nicolas Gallagher в своем блоге. Плюс в том, что мы избавляемся от лишних презентационных элементов в теле документа и выносим их в CSS.
В коде это выглядит так:

#content {
  position:relative;
  z-index:1;
  background:#4B92C0;
}
#content:before {
   content:""; /*вместо того, чтобы создавать div с фоном и позиционировать внутри родительского блока*/
   position:absolute;
   z-index:-1;
   bottom:10px;
   right:10px;
   width:500px;
   height:300px;
   background:url(image.jpg);
}

А в теле документа при этом никаких дополнительных элементов:

<div id="content"></div>

Пример по ссылке.
(поддерживается браузерами: Firefox 3.5+, Opera 10+, Safari 4+, Chrome 4+, IE 8+)

Псевдо-фон из спрайта

Также показан интересный прием при работе со спрайтами: фоновое изображение подрезается по размерам псевдо-элемента.
css background :before

.someclass a:before {
   content:"";
   float:left;
   width: 24px; /*эти размеры определяют область, которая будет «вырезана» из спрайта*/
   height: 24px;
   margin:0 5px 0 0;
   background:url(sprite.png);
}
.class1 a:before {background-position:0 -24px;}
.class2 a:before {background-position:0 -48px;}
.class3 a:before {background-position:0 -72px;}
.class4 a:before {background-position:0 -96px;}

В теле документа это выглядит таким образом:

<ul class="someclass">
   <li class="class1"><a href="#">Ссылка раз</a></li>
   <li class="class2"><a href="#">Ссылка два</a></li>
   <li class="class3"><a href="#">Ссылка три</a></li>
   <li class="class4"><a href="#">И у каждой свой фон</a></li>
</ul>

Пример в новом окне.

CSS3 Media запросы или более гибкий дизайн web-страницы

В CSS3 имеется возможность подгружать различные таблицы стилей в зависимости от ширины экрана. Это дает возможность подогнать содержимое страницы под различные разрешения и получить более удобное отображение в конечном счете.
Начнем с примеров:

Стили при минимальной ширине

Если ширина просматриваемой области не более 1000px, то для блока назначается размер шрифта и цвет фона:

@media screen and (max-width: 1000px) {
.content{
background: #ccc;
font-size:1.2em;
}
}

Можно указать и в коде страницы:

<link rel="stylesheet" media="screen and (max-width: 1000px)" href="main.css" />

Комбинированные стили

Например, если ширина области просмотра находится в интервале 1000–1400px:

@media screen and (min-width: 1000px) and (max-width: 1400px) {
body {
background: #000; /*...и хочу перекрасить ее в черный*/
}
}

Для html соответсвенно:

<link rel="stylesheet" media="screen and (min-width: 1000px) and (max-width: 1400px)" href="mid.css" />

IE и CSS3 media

Тут все ожидаемо. Поддержки данных свойств нет в IE8 и ниже. Реализация через js. Примеры решения:

  • css3-mediaqueries-js — библиотека для реализации css media в IE
  • вариант решения, предложенный на Particletree
  • В частных случаях написать самому будет проще

Примеры сайтов

Поменяйте ширину окна браузера и все поймете:
alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html
lessframework.com — целый фреймворк, сравнимый с 960.gs

Примечание:
Media запросы — в первую очередь дизайн-презентация, а не оптимизация сайта. Следует учесть, что, например, для мобильных устройств стоит убирать лишнюю графику и элементы оформления.

CSS RGBa или как бы еще задать прозрачность фона элемента

Свойство CSS RGBa позволяет задать фоновый цвет с альфа-каналом (читай, заливать блоки полупрозрачным цветом).
Разумеется, в CSS есть свойство opacity, однако основной его недостаток: все дочерние элементы внутри прозрачного блока будут также наследовать его прозрачность.

Пример:

На макете ссылки в навигации имеют полупрозрачный фон.

Распространенные подходы:

  1. Заливаем фон элемента 1-пиксельным PNG24, фиксим прозрачность в IE6
  2. Фон делаем прозрачным через css opacity. Текст позиционируем отдельно уже в другом элементе
  3. Еще более интересные танцы с бубном

С помощью RGBa решение выглядит следующим образом:

Допустим, нужен синий фон с прозрачностью 50%

.element{
background: rgb(0, 0, 255); /* Для тех, кто не поддерживает данное свойство будет сплошной фоновый цвет*/
background: rgba(0, 0, 255, 0.5);
}

А не поддерживать его будут IE6–8, Opera 9.x, Mozilla Firefox 2.x
Для IE можно постараться и сделать более изящно:

<!--[if IE]>
<style type="text/css">
.element{
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#990000ff,endColorstr=#990000ff);
zoom: 1;
}
<! [endif]-->

Примечание
Цвет в фильтре задается 8 числами. Первые 2 числа это степень прозрачности: FF — полностью непрозрачный, 00 — прозрачный. Следующие 6 чисел привычное обозначение HTML-цвета.

Использование RGBa не ограничивается только фоновым цветом у блоков, например, этим свойством можно имитировать тени или делать полупрозрачные бордеры, все зависит от вашей фантазии.

upd. В IE9 имеется поддержка RGBA, HSLA. Ура, товарищи!

Печатаем web-документ правильно с помощью CSS

Кого-то это может удивить, но распечатывают web-страницы довольно часто.
В данной заметке показаны полезные приемы на CSS для подготовки страницы к печати.

Предварительные изменения в стилях

Желательно разбивать CSS-стили на отдельные файлы в зависимости от микроформатов:

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen,projection"> <!-- основной файл -->
<link rel="stylesheet" href="css/print.css" type="text/css" media="print"> <!-- для печати -->
<link rel="stylesheet" href="css/handheld.css" type="text/css" media="handheld"> <!-- мобильные устройства -->

Это поможет избежать путаницы в дальнейшем и сэкономит ваше время. Стоит учесть, что шрифты на печати следует задавать в пунктах (pt), дюймах (in), пиках (pc) или сантиметрах/миллиметрах(cm/mm).

Задаем цвет фона, выставляем отсупы

Убираем отступы, задаем для страницы белый цвет фона и черный шрифт (для контрастности), выставляем поля в 0,5дюйма. Также убираем свойство float у плавающих элементов, чтобы при печати веб-страницы блоки не съезжали.

body{margin:0.5in;font-family:times}
*{background:#fff !important;color:#000 !important;float:none !important;width:auto !important;height:auto !important;}

Убираем лишние стили

При печати многие элементы сайта являются лишними: навигация, реклама, баннеры. Убираем их при помощи display:none.
У меня получилось нечто подобное:

#menu, #topmenu, #thedrot, .meta, #comments, #commentform, #postcomment, #resplink, #footer{display:none}

Работа с гиперссылками

Убираем подчеркивание у ссылок, на печати они нам не понадобятся. Также выводим URL (в скобках рядом с текстом ссылки).

a{border:0;text-decoration:none;}
a img{border:0}
a:after{content:" (" attr(href) ") ";font-size: 90%;}
a[href^="/"]:after {content: " (http://www.aimweb.name" attr(href) ") ";}

Постраничная разбивка на CSS

Свойство page-break-before позволяет устанавливать место разрыва страницы при печати.
Если мы поленились, и все стили находятся в одном css-файле, то код будет выглядеть следующим образом:

@media all
{
.nextpage { display:none; }
}

@media print
{
.nextpage { display:block; page-break-before:always; }
}

Получаем класс, который будет не виден на странице, но будет выполнять свое предназначение при печати.
Пример использования:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Пример page-break-before</title>
  <style type="text/css">
   @media print{
   .newpage{page-break-before: always;}
   }
  </style>
 </head>
<body>
    <h1>Разрывы страниц на CSS</h1>
    <p>Попробуйте распечатать эту страницу (да съесть еще этих мягких французских булок, да выпить чаю).</p>
    <p>Это 1-ый параграф, он будет расположен на первой странице при печати.</p>
    <div class="newpage"></div>
    <p>Это 2-ой параграф, он будет расположен на второй странице при печати.</p>
    <div class="newpage"></div>
    <p>Это 3-ий параграф, он будет расположен на третьей странице при печати. Все так просто.</p>
</body>
</html>

CSS-свойства: widows, orphans

Свойство widows задает минимальное число строк текста, которое располагается на следующей странице при печати документа.
Пример:
css widow
Другое css-cвойство  — orphans — задаёт минимальное количество строк, которые могут оставаться в нижней части страницы без разрыва страницы.
Если значение widows конфликтует со значением orphans, тогда widows будет иметь приоритет.
Пример использования:

   @media print {
    p {widows: 3;orphans: 3;}
   }

Подводим итоги:

В результате у меня получилось что-то подобное:

body{margin:0.5in;font-family:times}
*{background:#fff !important;color:#000 !important;float:none !important;width:auto !important;height:auto !important;}
#context{margin:0 !important;padding:0}
#menu, #topmenu, #thedrot, .meta, #comments, #commentform, #postcomment, #resplink, #footer{display:none}
#zag h1 span{font-size:small;display:block}
a{border:0;text-decoration:none;}
a img{border:0}
a:after{content:" (" attr(href) ") ";font-size: 90%;}
a[href^="/"]:after {content: " (http://www.aimweb.name" attr(href) ") ";}

Данная таблица стилей достаточна проста и, на мой взгляд, требует более детальной проработки отдельных элементов, но результат на печати весьма ощутим по сравнению с обычной таблицей стилей. Разумеется, CSS-файл будет довольно сильно отличаться в зависимости от дизайна, но общие принципы, указанные в статье, применимы к практически любому проекту.

Unicorn — комплексный валидатор W3C

Консорциум Всемирной паутины (W3C) порадовал совмещенным валидатором HTML+CSS+Feed с милым названием Unicorn (англ. Единорог).

Все как обычно: проходим по ссылке на валидатор Unicorn, скармливаем адрес своего сайта, «радуемся» указанным ошибкам.
И вроде бы мелочь, но оптимизация труда — это всегда к лучшему.