Для переноса длинных 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: пока писал пост и рассматривал предосмотр печати страниц своего сайта, сделал оформление цитат и блоков с кодом, а так же оформление списков. В общем, смотрите стиль для печати
Обновив 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 год. Я взял этот календарь, выделил в отдельную страницу, оформил ее и опубликовал на сайте «Скифов»
Привет! Я — шрифт Days.
Попробуйте выделить строку выше. Получилось? Здорово. Этот текст так же можно скопировать и куда-нибудь вставить.
Да, шрифт встроен в страницу посредством @font-face, причем внедрение кроссбраузерно, и все это хозяйство вполне успешно отображается в IE6 и в IE5.
Много поясняющих букв с картинками есть в посте на Хабре. Я же от себя рекомендую @font-face Generator, который может из любого шрифта сделать готовый набор для встраивания на страницу.
Думаю, не для многих это будет новостью, однако лишний раз стоит напомнить.
Поисковые роботы индексируют только html-код. Таким образом, если используется JavaScript для подгрузки контента, то этот контент индексироваться не будет. Посему самый простой способ узнать, что увидит робот — отключить в браузере JS и обновить страничку.
Посему пришлось немного подпилить скрипт галереи в одном из разрабатываемых проектов. Изначально миниатюры подгружались AJAX‘ом уже после загрузки страницы и перезагружались им же при нажатии заветной кнопки. Теперь же первая «партия» миниатюрок отдается в html-коде, дабы картинки индексировались роботами.
Да, название записи не дает полного представления об эффекте, которого порой нужно добиться. Посему для большей ясности я сделал анимацию:
Обратите внимание, что как только у браузера пропадает горизонтальный скролл, фон начинает выезжать вправо вместе с контентом. Пока же горизонтальный скролл присутствует, часть фоновой картинки скрыта за левым краем окна браузера.
Код под катом.
дальше →
ТхП-пользователи в курсе, что поиск у этой CMS оставляет желать много лучшего. Главная проблема встроенного поиска — регистрозависимость при запросе на языке, отличном от английского. На сегодняшний день единственная вменяемая альтернатива — Пользовательский поиск от Google.
Вариантов встраивания поиска целых 3:
- На сайте — только форма, результаты поиска — на сервере Google.
- Форма — где угодно, результаты поиска — на отдельной странице сайта.
- Форма и результаты на одной странице.
Собственно, меня устроил второй вариант. Посему в админ-панели Системы поиска для результатов поиска я задал страницу http://kotelnikov.net/search/, в шаблоне которой вставил нужный код. Форму поиска же вставил в шапку.
Да здравствует нормальный поиск!
Вчера в процессе кодинга динамической фотогалереи с блэкджеком и поэтэссами столкнулся с ситуацией, когда Slimbox не отрабатывал клик по миниатюрам после того, как эти самые миниатюры были подгружены через load().
Решение оказалось в одну строчку:
$("#images a").slimbox();
Если повесить эту функцию на callback у load(), то она инициализирует Slimbox для всех ссылок внутри элемента с id="images", что, собственно и требовалось.
