Как новенький

Инициатива, начатая порядка трёх месяцев назад, наконец-то обернулась новым сайтом. Вы можете недоверчиво приглядываться — мол, вроде тот же, нет? Но уверяю вас, весь HTML, CSS и JS-код, а также часть плагинов для WordPress были написаны с нуля, а дизайн претерпел некоторые изменения.

С чего бы вдруг? Всё просто — предыдущей вёрстке исполнилось примерно полтора года и настало время её обновить для того, чтобы сделать сайт ещё быстрее, ещё удобнее и просто продемонстрировать некоторые новые технологические приёмы. Итак, чего же новенького?

Документ и HTML

Минусом предыдущей раскладки было не слишком логичное расположение блоков — элемент #sidebar, в силу технических особенностей вёрстки, располагался в коде после элемента #foot, теперь же всё логично:

<div id="page">
    <div id="head"></div>
    <div id="content"></div>
    <div id="sidebar"></div>
    <div id="foot"></div>
</div>

Также, для повышения доступности, было добавлено более подробное скрытое навигационное меню:

<ul class="skipto">
    <li><a href="#content">Содержимое</a></li>
    <li><a href="#menu">Навигация</a></li>
    <li><a href="#latest">Из последнего</a></li>
    <li><a href="#search">Поиск</a></li>
</ul>

В ответ на просьбы, были несколько доработаны комментарии. Изменился список разрешённых элементов: <blockquote cite="">, <a href="">, <strong>, <em>, <del>, из которого, в силу презентационной природы, ушли <b> и <i>.

Также в тексте комментария теперь можно удобно публиковать фрагменты кода. Достаточно обернуть ваш фрагмент в тег [source]. За этот плагин к WordPress нужно поблагодарить Ольгу Алексашенко — в дальнейшем планируется его публикация. В качестве примера — ваш код в поле ввода:

[source]<div class="title">
    <h1>Пепелсбей.net</h1>
    <a href="#">RSS</a>
</div>[/source]

…и то, что в итоге оказывается в комментарии:

<ol class="code">
<li><code>&lt;div class="title"&gt;</code></li>
<li><code>    &lt;h1&gt;Пепелсбей.net&lt;/h1&gt;</code></li>
<li><code>    &lt;a href="#"&gt;RSS&lt;/a&gt;</code></li>
<li><code>&lt;/div&gt;</code></li>
</ol>

Представление, вёрстка и CSS

Размеры CSS остались примерно в тех же рамках, однако файл reset.css теперь не подключается директивой @import, а входит в состав главного и единственного файла style.css, что позволило сэкономить на одном запросе к серверу — и это только начало.

Что касается хаков для IE, теперь они разделены на два файла ie.css (для всех версий) и ie6.css (для шестой версии и младше). IE8, от греха подальше, пока переключён в режим совместимости со стандартами при помощи директивы X-UA-Compatible. Подробнее об этой технике я уже писал в заметке «Уличная магия IE».

Отдельной строкой хочется упомянуть о причинах, которые заставили меня не чистить отдаваемые файлы от пробелов и переводов строк, а также не сжимать их явно при помощи GZIP. Дело в том, что этот сайт является не только демонстрацией моих навыков, но также может стать хорошим примером для тех, кто учится вёрстке. Я отлично помню сколько интересного я узнал много лет назад, прошерстив CSS-файл ещё первой версии A List Apart. Надеюсь, кому-то это будет полезно.

Что касается новых вещей, то в теперь в CSS есть правила, отвечающие за обработку инлайн-цитат <q>, к сожалению — по причинам кроссбраузерности, не при помощи правил content:open-quote и content:close-quote, а более грубо:

Q:before {
    content:'\00AB';
    }
    Q Q:before {
       content:'\201E';
       }
Q:after {
    content:'\00BB';
    }
    Q Q:after {
       content:'\201C';
       }

…ну и другие радости из черновика CSS 3 с вендорными префиксами, которые хоть и благословлены W3C, но делают CSS невалидным:

-webkit-border-radius:4px 4px;
-moz-border-radius:4px 4px;
border-radius:4px 4px;

Но самым интересным в работе над новым сайтом, оказалось использование CSS-спрайтов. Прежняя версия сайта подключала в CSS-файле 22 (двадцать две) картинки. При общем весе порядка 12 килобайт, за этими картинками уходило 22 запроса к серверу. И вроде бы — чёрт с ним, справится с такой нагрузкой, чай не Яндекс по пиковой посещамости. Но если можно сделать лучше, зачем себе в этом отказывать?

Новая версия вёрстки использует всего 7 картинок, хотя самой графики на сайте стало использоваться больше. Как я умудрился? Всё просто — множество файлов картинок были сгруппированы в несколько, которые при использовании были спозиционированы нужным образом. Самый яркий пример такого объединения — файл graphics.png. Для удобства просмотра, прозрачность заменена на зелёный цвет.

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

Помимо версии для обычных браузеров, в скором времени появится полноценная версия для печати, а также версия сайта для iPhone — и всё это будет решено подключением двух дополнительных файлов: print.css и iphone.css.

Немного блёсток и JavaScript

Предыдущая версия сайта уже использовала JS, но весьма скромно. По этой причине, подключение примерно 30 килобайт фреймворка jQuery было явно не слишком целесообразным. Теперь всё лучше: фреймворк по-прежнему подключается (одним файлом, вместе со скриптами), но теперь он ощутимо помогает делать сайт удобнее и надёжнее, а именно:

• Поле поиска избавилось от лишнего заголовка и теперь о его функциональности говорит написанное прямо в нём недвусмысленное предложение поискать, которое скрывается при фокусе.
• Правила публикации комментариев вежливо спрятаны в разворачивающемся блоке, чтобы не мозолить ваши глаза, а поле ввода плавно увеличивается до более удобных размеров, если вы решите оставить комментарий.
• Картинки теперь открываются не просто как отдельный файл в новом окне, а довольно удобно подгружаются над затемнённым экраном. Попробовать как это работает можно в заметке «Firefox против Photoshop», кликнув на превьюшки. Описанию этого скрипта в скором времени будет посвящёна отдельная публикация.
• Ну, и для хромых — упомянутое выше свойство для автоматического закавычивания фраз внутри элемента <q> эмулируется при помощи JS. Кхм, речь конечно же об IE.

В общем, в целом

В числе небольших изменений в дизайне — третий цвет. Хорошо это или плохо — судить вам. Мне кажется, что это, по меньшей мере, удобно — ведь зелёный цвет имеет отношение только к вашей активности на этом сайта — к коммментариям. Также изменения коснулись постраничной навигации на главной: теперь она организована при помощи специальных «ушек» слева и справа внизу страницы — они не занимают много места и вполне интуитивно понятны.

Поиск на сайте работает при помощи Яндекса и его слегка подкрашенного поиска по сайтам. Попробуйте — это гораздо удобнее, чем калечный поиск от WordPress. При всём уважении к последнему — теперь поиском действительно можно пользоваться.

Надеюсь, что сайт стал лучше. Поэтому с меня новые публикации, а с вас — впечатления и багрепорты.

<div id="content">
<div id="content-inner" class="content">

#latest {
    }