Переносим длинные строки

Для переноса длинных URL и слов пригодится следующий код, который применяется для блочных элементов (например для <pre>):

pre {
	white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5+ */
	}

Нараспашку

Традиционный CSS Naked Day — хороший повод подумать о семантической разметке и просто удивить посетителей вашего сайта. Присоединяйтесь, ещё не поздно ;)

Стили для печати

Генерирование «страницы для печати» — это прошлый век, да и лишняя нагрузка на сервер. Ведь в спецификации CSS 2.1, выпущенной более десятка лет назад, присутствует такая замечательная штука, как возможность указания стилей, которые будут использоваться для печати.

<link rel="stylesheet" type="text/css" media="print" href="/print.css" />

media="print" — это указание типа носителя, в данном случае задание стиля для вывода документа на печать. На самом деле типов носителей много:

  • all — стили будут работать для любого типа устройства по мере его способностей
  • braille — для вывода на устройства, выводящие информацию азбукой Брайля для слепых
  • embossed — то же что и braille, но не для устройств, а для физических страниц
  • handheld — говорит за себя — для устройств, ограниченных в разрешении и пропускной способности сети
  • print — тоже очевидно — для вывода на устройство печати постраничного материала (он же будет отображен в предпросмотре печати большинством современных броузеров)
  • projection — для презентаций, тоже постраничных
  • screen — для вывода на экран компьютера, где мы чаще всего сейчас и видим HTML-документы
  • speech — для вывода на «читалки»-синтезаторы (в CSS2 назывался «aural»)
  • tty — для любителей Lynx, проще говоря — для терминального вывода с ограничениями по форматированию
  • tv — для вывода на телевизор (низкое разрешение, проблемы с промоткой)

На деле же используются all, screen и print. Так же иногда используется handheld, однако пока точно неизвестно, наколько на него реагируют мобильные браузеры.

Но вернемся к print. Стиль с этим типом подключается при печати и при предварительном просмотре.

Для понимания процесса покажу свой стиль для печати:

#header ul, #sidebar, #txpCommentInputForm, .col2, 
#leave_comment, #link_to_top, .avatar, .quote, .comment_feed, 
.comments img {display:none;}

.author_name {font-weight: bold}

a, a:hover, a:active, a:visited {text-decoration: none; color: black;}

#header h1 a:after {content:" [http://kotelnikov.net]";}

Сначала я поотключал ненужные при распечатке блоки (верхнее меню, боковую панель, форму комменитрования, аватарки коментаторов, лишние ссылки и т.п.). Затем я «зажирнил» имена коментаторов для удобства чтения комментариев. После чего полностью убрал оформление ссылок, ибо толку от них на бумаге нет. :) Ну и наконец добавил к заголовку моего сайта в скобках адрес сайта, на всякий случай.

UPD: пока писал пост и рассматривал предосмотр печати страниц своего сайта, сделал оформление цитат и блоков с кодом, а так же оформление списков. В общем, смотрите стиль для печати

Чиним плагин ajw_comments_feed

Обновив TextPattern до версии 4.2.0, я столкнулся с печальным фактом: сломался плагин ajw_comments_feed, который отдавал комментарии к посту в виде RSS-ленты.

Сегодня на форуме моральной поддержки ТхП я нашел решение.

Итак, в исходном коде плагина меняем:

//turn on compression if we aren't using it already
if (extension_loaded('zlib') && ini_get("zlib.output_compression") == 0 && ini_get('output_handler') != 'ob_gzhandler' && !headers_sent()) {
    @ob_start("ob_gzhandler");
}

на:

//turn on compression if we aren't using it already
if (extension_loaded('zlib') && ini_get("zlib.output_compression") == 0 && ini_get('output_handler') != 'ob_gzhandler' && !headers_sent()) {
    $buf = '';
    while ($b = @ob_get_clean())
        $buf .= $b;
    @ob_start('ob_gzhandler');
    echo $buf;
}

и эту строчку:

$title = escape_output(strip_tags($article['Title']));

заменяем на эту:

$title = htmlspecialchars(strip_tags($article['Title']));

Вуаля! У меня все заработало.

Внедорожный календарь Юга России 2010

Какое-то время назад на сайте «Экстремальный Юг» был опубликован Внедорожный календарь Юга России на 2010 год. Я взял этот календарь, выделил в отдельную страницу, оформил ее и опубликовал на сайте «Скифов»

@font-face для чайников

Привет! Я — шрифт Days.

Попробуйте выделить строку выше. Получилось? Здорово. Этот текст так же можно скопировать и куда-нибудь вставить.

Да, шрифт встроен в страницу посредством @font-face, причем внедрение кроссбраузерно, и все это хозяйство вполне успешно отображается в IE6 и в IE5.

Много поясняющих букв с картинками есть в посте на Хабре. Я же от себя рекомендую @font-face Generator, который может из любого шрифта сделать готовый набор для встраивания на страницу.

AJAX и индексация

Думаю, не для многих это будет новостью, однако лишний раз стоит напомнить.

Поисковые роботы индексируют только html-код. Таким образом, если используется JavaScript для подгрузки контента, то этот контент индексироваться не будет. Посему самый простой способ узнать, что увидит робот — отключить в браузере JS и обновить страничку.

Посему пришлось немного подпилить скрипт галереи в одном из разрабатываемых проектов. Изначально миниатюры подгружались AJAX‘ом уже после загрузки страницы и перезагружались им же при нажатии заветной кнопки. Теперь же первая «партия» миниатюрок отдается в html-коде, дабы картинки индексировались роботами.

Фон, частично уходящий за край

Да, название записи не дает полного представления об эффекте, которого порой нужно добиться. Посему для большей ясности я сделал анимацию:

Обратите внимание, что как только у браузера пропадает горизонтальный скролл, фон начинает выезжать вправо вместе с контентом. Пока же горизонтальный скролл присутствует, часть фоновой картинки скрыта за левым краем окна браузера.

Код под катом.

дальше →

Гуглопоиск

ТхП-пользователи в курсе, что поиск у этой CMS оставляет желать много лучшего. Главная проблема встроенного поиска — регистрозависимость при запросе на языке, отличном от английского. На сегодняшний день единственная вменяемая альтернатива — Пользовательский поиск от Google.

Вариантов встраивания поиска целых 3:

  1. На сайте — только форма, результаты поиска — на сервере Google.
  2. Форма — где угодно, результаты поиска — на отдельной странице сайта.
  3. Форма и результаты на одной странице.

Собственно, меня устроил второй вариант. Посему в админ-панели Системы поиска для результатов поиска я задал страницу http://kotelnikov.net/search/, в шаблоне которой вставил нужный код. Форму поиска же вставил в шапку.

Да здравствует нормальный поиск!

jQuery.load() и Slimbox

Вчера в процессе кодинга динамической фотогалереи с блэкджеком и поэтэссами столкнулся с ситуацией, когда Slimbox не отрабатывал клик по миниатюрам после того, как эти самые миниатюры были подгружены через load().

Решение оказалось в одну строчку:

$("#images a").slimbox(); 

Если повесить эту функцию на callback у load(), то она инициализирует Slimbox для всех ссылок внутри элемента с id="images", что, собственно и требовалось.