Ars Longa, Vita Brevis » HTML

HTML Parser для Qt

Vladimir — Wed, 07 Sep 2011 08:03:07 +0000

Использование libxml2 для разбора документов HTML в Qt

XML — это, конечно, хорошо, но очень часто требуется разбирать документы HTML, которые могут и не быть валидными.

В Qt есть множество классов для работы с XML, но они не подходят для HTML, так как ошибки в HTML для них фатальны.

Ниже приведён вариант парсера для HTML, основанный на библиотеке libxml2.

#ifndef LIBXML2READER_H
#define LIBXML2READER_H

#include
#include

class LibXml2ReaderPrivate;

class LibXml2Reader : public QXmlReader {
public:
LibXml2Reader(void);
virtual ~LibXml2Reader(void);

virtual bool feature(const QString& name, bool* ok = 0) const;
virtual void setFeature(const QString& name, bool value);
virtual bool hasFeature(const QString& name) const;
virtual void* property(const QString& name, bool* ok = 0) const;
virtual void setProperty(const QString& name, void* value);
virtual bool hasProperty(const QString& name) const;

virtual void setEntityResolver(QXmlEntityResolver* handler);
virtual QXmlEntityResolver* entityResolver(void) const;
virtual void setDTDHandler(QXmlDTDHandler* handler);
virtual QXmlDTDHandler* DTDHandler(void) const;
virtual void setContentHandler(QXmlContentHandler* handler);
virtual QXmlContentHandler* contentHandler(void) const;
virtual void setErrorHandler(QXmlErrorHandler* handler);
virtual QXmlErrorHandler* errorHandler(void) const;
virtual void setLexicalHandler(QXmlLexicalHandler* handler);
virtual QXmlLexicalHandler* lexicalHandler(void) const;
virtual void setDeclHandler(QXmlDeclHandler* handler);
virtual QXmlDeclHandler* declHandler(void) const;

virtual bool parse(const QXmlInputSource& input);
virtual bool parse(const QXmlInputSource* input);

private:
Q_DISABLE_COPY(LibXml2Reader)
Q_DECLARE_PRIVATE(LibXml2Reader)
QScopedPointer<LibXml2ReaderPrivate> d_ptr;

friend class LibXml2ReaderLocator;
};

#endif // LIBXML2READER_H

#include "libxml2reader.h"
#include
#include
#include
#include

class LibXml2ReaderLocator : public QXmlLocator {
public:
LibXml2ReaderLocator(LibXml2Reader* r) : reader(r) {}
virtual int columnNumber(void) const;
virtual int lineNumber(void) const;
private:
LibXml2Reader* reader;
};

class LibXml2ReaderPrivate {
public:
~LibXml2ReaderPrivate(void) {}
private:
LibXml2ReaderPrivate(LibXml2Reader* reader);

static void startDocument(void* c);
static void endDocument(void* c);
static void startElement(void* c, const xmlChar* name, const xmlChar** attrs);
static void endElement(void* c, const xmlChar* name);
static void comment(void* c, const xmlChar* value);
static void cdataBlock(void* c, const xmlChar* value, int len);
static void processingInstruction(void* c, const xmlChar* target, const xmlChar* data);
static void characters(void* c, const xmlChar* ch, int len);
static void ignorableWhitespace(void* c, const xmlChar* ch, int len);
static void internalSubset(void* c, const xmlChar* name, const xmlChar* publicId, const xmlChar* systemId);

void parse(const QXmlInputSource* input);

QScopedPointer<LibXml2ReaderLocator> locator;
Q_DECLARE_PUBLIC(LibXml2Reader)
LibXml2Reader* q_ptr;

QXmlEntityResolver* entityresolver;
QXmlDTDHandler* dtdhandler;
QXmlContentHandler* contenthandler;
QXmlErrorHandler* errorhandler;
QXmlLexicalHandler* lexicalhandler;
QXmlDeclHandler* declhandler;

xmlParserCtxt* context;

friend class LibXml2ReaderLocator;
};

LibXml2ReaderPrivate::LibXml2ReaderPrivate(LibXml2Reader* reader)
: q_ptr(reader), entityresolver(0), dtdhandler(0), contenthandler(0), errorhandler(0), lexicalhandler(0), declhandler(0), context(0)
{
this->locator.reset(new LibXml2ReaderLocator(reader));
}

void LibXml2ReaderPrivate::parse(const QXmlInputSource* input)
{
htmlSAXHandler handler;
QByteArray arr = input->data().toLocal8Bit();
const char* data = arr.data();

std::memset(&handler, 0, sizeof(handler));
handler.startDocument = &LibXml2ReaderPrivate::startDocument;
handler.endDocument = &LibXml2ReaderPrivate::endDocument;
handler.startElement = &LibXml2ReaderPrivate::startElement;
handler.endElement = &LibXml2ReaderPrivate::endElement;
handler.comment = &LibXml2ReaderPrivate::comment;
handler.cdataBlock = &LibXml2ReaderPrivate::cdataBlock;
handler.processingInstruction = &LibXml2ReaderPrivate::processingInstruction;
handler.characters = &LibXml2ReaderPrivate::characters;
handler.ignorableWhitespace = &LibXml2ReaderPrivate::ignorableWhitespace;
handler.internalSubset = &LibXml2ReaderPrivate::internalSubset;

this->context = htmlCreatePushParserCtxt(&handler, this, data, xmlStrlen(reinterpret_cast<const xmlChar*>(data)), "", XML_CHAR_ENCODING_NONE);
htmlParseChunk(this->context, NULL, 0, 1);
htmlFreeParserCtxt(this->context);
xmlCleanupParser();
}

void LibXml2ReaderPrivate::startDocument(void* c)
{
LibXml2ReaderPrivate* r = reinterpret_cast<LibXml2ReaderPrivate*>(c);
if (r->contenthandler) {
r->contenthandler->startDocument();
}
}

void LibXml2ReaderPrivate::endDocument(void* c)
{
LibXml2ReaderPrivate* r = reinterpret_cast<LibXml2ReaderPrivate*>(c);
if (r->contenthandler) {
r->contenthandler->endDocument();
}
}

void LibXml2ReaderPrivate::startElement(void* c, const xmlChar* name, const xmlChar** attrs)
{
LibXml2ReaderPrivate* r = reinterpret_cast<LibXml2ReaderPrivate*>(c);
if (r->contenthandler) {
QXmlAttributes a;

int i = 0;
if (attrs) {
while (attrs[i]) {
const char* name = reinterpret_cast<const char*>(attrs[i]);
const char* value = reinterpret_cast<const char*>(attrs[i+1]);
i += 2;
a.append(name, "", "", value ? value : name);
}
}

QString uri = "";
QString localName = "";
QString qName = reinterpret_cast<const char*>(name);
r->contenthandler->startElement(uri, localName, qName, a);
}
}

void LibXml2ReaderPrivate::endElement(void* c, const xmlChar* name)
{
LibXml2ReaderPrivate* r = reinterpret_cast<LibXml2ReaderPrivate*>(c);
if (r->contenthandler) {
r->contenthandler->endElement(QString(""), QString(""), QString(reinterpret_cast<const char*>(name)));
}
}

void LibXml2ReaderPrivate::comment(void* c, const xmlChar* value)
{
LibXml2ReaderPrivate* r = reinterpret_cast<LibXml2ReaderPrivate*>(c);
if (r->lexicalhandler) {
r->lexicalhandler->comment(QString::fromLocal8Bit(reinterpret_cast<const char*>(value)));
}
}

void LibXml2ReaderPrivate::cdataBlock(void* c, const xmlChar* value, int len)
{
LibXml2ReaderPrivate* r = reinterpret_cast<LibXml2ReaderPrivate*>(c);
if (r->lexicalhandler) {
r->lexicalhandler->startCDATA();
if (r->contenthandler) {
QByteArray arr(reinterpret_cast<const char*>(value), len);
r->contenthandler->characters(arr);
}

r->lexicalhandler->endCDATA();
}
}

void LibXml2ReaderPrivate::processingInstruction(void* c, const xmlChar* target, const xmlChar* data)
{
LibXml2ReaderPrivate* r = reinterpret_cast<LibXml2ReaderPrivate*>(c);
if (r->contenthandler) {
r->contenthandler->processingInstruction(reinterpret_cast<const char*>(target), reinterpret_cast<const char*>(data));
}
}

void LibXml2ReaderPrivate::characters(void* c, const xmlChar* ch, int len)
{
LibXml2ReaderPrivate* r = reinterpret_cast<LibXml2ReaderPrivate*>(c);
if (r->contenthandler) {
r->contenthandler->characters(QString::fromLocal8Bit(reinterpret_cast<const char*>(ch), len));
}
}

void LibXml2ReaderPrivate::ignorableWhitespace(void* c, const xmlChar* ch, int len)
{
LibXml2ReaderPrivate* r = reinterpret_cast<LibXml2ReaderPrivate*>(c);
if (r->contenthandler) {
r->contenthandler->ignorableWhitespace(QString::fromLocal8Bit(reinterpret_cast<const char*>(ch), len));
}
}

void LibXml2ReaderPrivate::internalSubset(void* c, const xmlChar* name, const xmlChar* publicId, const xmlChar* systemId)
{
LibXml2ReaderPrivate* r = reinterpret_cast<LibXml2ReaderPrivate*>(c);
if (r->lexicalhandler) {
QString n(QString::fromLocal8Bit(reinterpret_cast<const char*>(name)));
QString p(QString::fromLocal8Bit(reinterpret_cast<const char*>(publicId)));
QString s(QString::fromLocal8Bit(reinterpret_cast<const char*>(systemId)));
r->lexicalhandler->startDTD(n, p, s);
r->lexicalhandler->endDTD();
}

}

LibXml2Reader::LibXml2Reader(void)
: d_ptr(new LibXml2ReaderPrivate(this))
{
}

LibXml2Reader::~LibXml2Reader(void)
{
}

bool LibXml2Reader::feature(const QString&, bool* ok) const
{
if (ok) {
*ok = false;
}

return false;
}

void LibXml2Reader::setFeature(const QString&, bool)
{
}

bool LibXml2Reader::hasFeature(const QString&) const
{
return false;
}

void* LibXml2Reader::property(const QString&, bool* ok) const
{
if (ok) {
*ok = false;
}

return 0;
}

void LibXml2Reader::setProperty(const QString&, void*)
{
}

bool LibXml2Reader::hasProperty(const QString&) const
{
return false;
}

void LibXml2Reader::setEntityResolver(QXmlEntityResolver* handler)
{
Q_D(LibXml2Reader);
d->entityresolver = handler;
}

QXmlEntityResolver* LibXml2Reader::entityResolver(void) const
{
const LibXml2ReaderPrivate* d = this->d_func();
return d->entityresolver;
}

void LibXml2Reader::setDTDHandler(QXmlDTDHandler* handler)
{
Q_D(LibXml2Reader);
d->dtdhandler = handler;
}

QXmlDTDHandler* LibXml2Reader::DTDHandler(void) const
{
const LibXml2ReaderPrivate* d = this->d_func();
return d->dtdhandler;
}

void LibXml2Reader::setContentHandler(QXmlContentHandler* handler)
{
Q_D(LibXml2Reader);
d->contenthandler = handler;
}

QXmlContentHandler* LibXml2Reader::contentHandler(void) const
{
const LibXml2ReaderPrivate* d = this->d_func();
return d->contenthandler;
}

void LibXml2Reader::setErrorHandler(QXmlErrorHandler* handler)
{
Q_D(LibXml2Reader);
d->errorhandler = handler;
}

QXmlErrorHandler* LibXml2Reader::errorHandler(void) const
{
const LibXml2ReaderPrivate* d = this->d_func();
return d->errorhandler;
}

void LibXml2Reader::setLexicalHandler(QXmlLexicalHandler* handler)
{
Q_D(LibXml2Reader);
d->lexicalhandler = handler;
}

QXmlLexicalHandler* LibXml2Reader::lexicalHandler(void) const
{
const LibXml2ReaderPrivate* d = this->d_func();
return d->lexicalhandler;
}

void LibXml2Reader::setDeclHandler(QXmlDeclHandler* handler)
{
Q_D(LibXml2Reader);
d->declhandler = handler;
}

QXmlDeclHandler* LibXml2Reader::declHandler(void) const
{
const LibXml2ReaderPrivate* d = this->d_func();
return d->declhandler;
}

bool LibXml2Reader::parse(const QXmlInputSource& input)
{
return this->parse(&input);
}

bool LibXml2Reader::parse(const QXmlInputSource* input)
{
Q_D(LibXml2Reader);

if (d->contenthandler) {
d->contenthandler->setDocumentLocator(d->locator.data());
}

d->parse(input);

return true;
}

int LibXml2ReaderLocator::columnNumber(void) const
{
return this->reader->d_func()->context->input->col;
}

int LibXml2ReaderLocator::lineNumber(void) const
{
return this->reader->d_func()->context->input->line;
}

Использование:

QByteArray data;
QXmlInputSource src;
LibXml2Reader reader;
QDomDocument doc;

/* здесь читаем данные в data */

src.setData(data);
doc.setContent(&src, &reader);

/* doc будет содержать дерево DOM, построенное из документа HTML */

В файл проекта нужно будет добавить две строки:

INCLUDEPATH += /usr/include/libxml2
LIBS += -lxml2

В INCLUDEPATH помещается путь к заголовочным файлам libxml2, в LIBS — опции компилятора для подключения библиотеки libxml2.

Скачать:

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

KSES в WordPress: можно ли проще?

Vladimir — Thu, 10 Feb 2011 06:07:09 +0000

Регулярные выражения против DOM XML

Вчера мне довелось разбираться с тем, как работает KSES в WordPress.

KSES (рекурсивный акроним от KSES Strips Evil Scripts) — подсистема в WordPress (изначально написанная Ulf Harnhammar), предназначенная для проверки и очистки текста, введённого пользователем: она позволяет задать список допустимых тэгов, стилей и протоколов и на основе этих параметров убрать из текста пользователя всё, что им не соответствует.

KSES является довольно стабильной подсистемой; что немаловажно, KSES работает. Работает — не трогай, а то сломаешь…

Лично мне в KSES не нравится использование регулярных выражений. Одна из причин — теория разработки компиляторов. Известно, что HTML — это грамматика второго типа в иерархии Хомского (контекстно-свободная грамматика), а регулярные выражения — грамматика третьего типа (регулярная грамматика). Грамматика второго типа является более сложной, нежели грамматика третьего типа. Как следствие, описать более простой грамматикой то, что соответствует более сложной, очень трудно (вряд ли возможно на 100%, но это моё мнение).

Что плохо, среди тестов WordPress я не нашёл тестов для KSES. Что может означать, что, вероятно, никто из разработчиков не строил и не проверял граф путей в KSES; как следствие, не гарантии, что при граничных условиях всё будет работать нормально.

Другая причина, по которой я не люблю регулярные выражения — это скорость: особой производительностью они не отличаются. Хотя с другой стороны, объёмы проверяемого текста не так велики, чтобы KSES оказывал существенное влияние на производительность.

Каковы альтернативы? Обзор.

На мой взгляд, самая удобная альтернатива — использование DOM XML и работа с полученным деревом. Тем более, что в PHP есть соответствующая поддержка. А парсер на C в любом случае быстрее парсера на PHP.

Парсер DOM XML в PHP позволяет работать даже с некорректным HTML. Что означает, что он берёт на себя решение проблемы с неправильно закрытыми или незакрытыми тэгами. Парсер понимает HTML entities и преобразует их в нормальный текст. Что означает, что не нужно возиться с разными форматами записи entities и переводить их к одному виду (чему в KSES уделено не мало кода). И так далее.

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

class Xex
{
private $protocols = array();
private $tags = array();
private $css = array();

private $strip_comments = true;
private $strip_script_text = true;
private $strip_style_text = true;

private $script_text = true;
private $style_text = true;

private $trim_text = false;

public function __construct(array $tags = null, array $protocols = null, array $css = null)
{
if (null !== $tags) $this->tags = $tags;
if (null !== $protocols) $this->protocols = array_combine($protocols, $protocols);
if (null !== $css) $this->css = array_combine($css, $css);
}

protected function checkProtocols($str)
{
$s = str_replace(array("\r", "\n", "\t", ""), '', $str);
$s = explode(':', $s, 2);

// See http://tools.ietf.org/html/rfc3986#section-3.1
if (preg_match('/^[a-z][a-z0-9+.-]*$/', $s[0]) && !isset($this->protocols[$s[0]])) {
return '';
}

return $str;
}

protected function sanitizeCss($css)
{
$css = str_replace(array("\n","\r","\t"), '', $css);

if (preg_match('![\\(&=}]|/\\*!', $css)) {
return '';
}

$arr = explode(';', trim($css));

$css = '';
foreach ($arr as $x) {
$x = trim($x);
if ($x) {
$found = false;
if (false === strpos($x, ':')) {
$found = true;
}
else {
$parts = explode(':', $x, 2);
if (isset($this->css[rtrim($parts[0])])) {
$found = true;
}
}

if ($found) {
$css .= $x . ';';
}
}
}

return $css;
}

protected function parseDOM(DOMNode $el, DOMNode $new)
{
switch ($el->nodeType) {
case XML_ELEMENT_NODE:
$prefix = $el->prefix ? ($el->prefix . ':') : '';
$tag = $prefix . $el->tagName;

if (isset($this->tags[$tag])) {
$n = $new->appendChild($el->cloneNode(false));
if ($el->hasAttributes()) {
$attrs = $this->tags[$tag];
foreach ($el->attributes as $a) {
if (!isset($attrs[$a->name])) {
$n->removeAttribute($a->name);
}
elseif ('style' == $a->name) {
$css = $this->sanitizeCss($a->value);
if ($css != $a->value) {
$n->setAttribute($a->name, $css);
}
}
elseif (in_array($a->name, array('xmlns', 'profile', 'href', 'src', 'cite', 'classid', 'codebase', 'data', 'usemap', 'longdesc', 'action'))) {
$s = $this->checkProtocols($a->value);
if ($s != $a->value) {
$n->setAttribute($a->name, $s);
}
}
}
}
}
else {
if ($tag == 'script' && $this->strip_script_text || $tag == 'style' && $this->strip_style_text) {
return;
}

$n = $new;
}

if ($el->hasChildNodes()) {
foreach ($el->childNodes as $e) {
$this->parseDOM($e, $n);
}
}

return;

case XML_TEXT_NODE:
if (!$this->trim_text) {
$new->appendChild($el->cloneNode(true));
}
else {
$new->appendChild(new DOMText(trim($el->wholeText)));
}

return;

case XML_CDATA_SECTION_NODE:
$new->appendChild($el->cloneNode(true));
return;

case XML_COMMENT_NODE:
$parent = $el->parentNode;
if ($parent && $parent->tagName) {
$prefix = $parent->prefix ? ($parent->prefix . ':') : '';
$tag = $prefix . $parent->tagName;

if ('style' == $tag && $this->style_text || 'script' == $tag && $this->script_text) {
$new->appendChild(new DOMText($el->data));
return;
}
}

if (!$this->strip_comments) {
$new->appendChild($el->cloneNode(true));
}

return;

default:
break;
}
}

public function sanitize($s)
{
$dom = new DOMDocument();
$dom->recover = true;
$dom->strictErrorChecking = false;
$dom->substituteEntities = true;
$dom->resolveExternals = false;
$dom->formatOutput = false;

$old = libxml_use_internal_errors(true);

$s = str_replace(chr(0), '', $s);
$s = preg_replace('!<([^a-z\\?\\!/])!i', '<$1', $s);
$s = preg_replace('!<((?:[\\?\\!/]\\s*)?[a-z][^>]*)(?=<)!i', '<$1', $s);
@$dom->loadHTML($s);
libxml_use_internal_errors($old);

$new = $dom->createDocumentFragment();
$new->appendChild(new DOMElement('wrap'));
$this->parseDOM($dom->documentElement, $new->firstChild);
$dom->replaceChild($new, $dom->documentElement);
$s = $dom->saveXML($dom->documentElement, LIBXML_NOEMPTYTAG);

return substr($s, strpos($s, '') + 6, -7);
}
}
?>

Менее 200 строк против почти полутора тысяч.

На 45-килобайтном документе DOM быстрее KSES от 5 до 9 раз.
На 90-килобайтном документе DOM быстрее KSES от 6 до 9 раз.
На 180-килобайтном документе DOM быстрее KSES от 9 до 10 раз.

Производительность зависит от количества тэгов и стилей (разбор стилей реализован практически одинаково). Например, на домашней странице Google XEX может опережать KSES в 25 раз; если же соединить домашнюю страницу Google саму с собой 4 раза, разница во времени сокращается.

На домашней странице WordPress разница в 7 раз.

На этой странице разница в 4 раза.

Всё-таки KSES очень медленный…

Генерация карты сайта в HTML из XML

Wandering Soul — Sun, 07 Nov 2010 01:22:20 +0000

Помогаем ботам найти все страница сайта

Проблема: есть достаточно большой сайт, у которого есть карта в формате XML. Есть бот, который этот сайт индексирует. Но бот не может найти страницы, имеющие уровень вложенности больше трёх. Нужно помочь боту проиндексировать весь сайт.

Самый простой способ — создание страницы, в которой будут перечислены все страницы сайта и размещение на неё ссылки из подвала сайта. Идеальный кандидат на такую страницу — карта сайта в формате XML. Проблема в том, что не все боты утруждают себя разбором XML-карт. Для таких ботов карту нужно преобразовывать в формат HTML.

Как и в другом похожем случае, на помощь приходит преобразование XSL.

Пример шаблона стилей XML:

version="1.0" encoding="utf-8"?>
version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:x="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns="http://www.w3.org/1999/xhtml" exclude-result-prefixes="x">
method="xml" indent="yes" encoding="UTF-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>

elements="*"/>

match="/x:urlset">
>
>
http-equiv="Content-Type" content="text/html; charset=utf-8"/>
>Site Map>
>
>
> href="http://blog.sjinks.pro/">Карта сайта>>
>

select="x:url">

select="lastmod" order="descending"/>
>
>
>
>
>

match="/x:urlset/x:url">
>> href="{x:loc}">

select="x:loc" disable-output-escaping="yes"/>>

> test="x:lastmod"> (

select="x:lastmod" disable-output-escaping="yes"/>

)>>
>
>

Преобразование выполняется так:

xsltproc -o /path/to/sitemap.html /path/to/sitemap2html.xml /path/to/sitemap.xml

Можно выполнение xsltproc повесить на крон и наслаждаться результатом.

Создание отражения рисунка с помощью JavaScript

Vladimir — Sun, 16 Nov 2008 22:12:36 +0000

HTML 5 приходит на помощь

Постановка задачи: из исходного изображения

получить отраженное изображение:

Дополнительное условие: генерировать изображение на стороне клиента (то есть без использования GD, ImageMagick и иже с ними).

В черновике стандарта HTML 5 пристутствует такой замечательный элемент как . Если вкратце, то данный элемент предназначен для создания изображений при помощи JavaScript.

Впервые элемент был представлен компанией Apple и использовался как компонент WebKit для Mac OS X в таких приложениях как Dashboard и Safari.

Поддержка в Gecko появилась в версии 1.5, в Presto с версии 9.0 веб-браузера Opera. Текущие версии Internet Explorer (включая восьмую бету) не поддерживают . Несмотря на это, для поставленной задачи существует кросс-браузерное решение.

В Microsoft Internet Explorer отражения с прозрачностью можно достичь путём использования комбинации фильтров. В частности, для вертикального отражения используется фильтр flipv, для горизонтального — fliph. Про реализацию прозрачности в Internet Explorer, наверное, знает каждый: progid:DXImageTransform.Microsoft.Alpha. Тем не менее, не все знают, что можно задавать градиентную прозрачность.

Перейдём к решению. Пусть у нас имеется такая разметка:

Будем полагать, что ширина и высота контейнера заданы (если мы делаем отражение по вертикали, то ширина контейнера совпадает с шириной рисунка, а высота контейнера в два раза больше высоты рисунка; аналогично для горизонтального отражения).

Начнём с классики (MSIE).

/**
* @param container

В случае с IE всё просто и сводится к заданию соответствующих фильтров. С браузерами, поддерживающими HTML 5, всё гораздо сложнее (ad deliberandum: сколько строк занимает программа на C++, если она использует COM-технологию?)

/**
* @param container

* @param image
* @param ratio Коэффициент сжатия/растягивания отражения
* @param opacity_start Начальная (ближняя к отражаемому изображению) непрозрачность
* @param opacity_end Конечная непрозрачность
* @param horizontal 0 = вертикальное отражение, 1 = горизонтальное отражение
*/
function reflect_image(container, image, ratio, opacity_start, opacity_end, horizontal)
{
var reflection = document.createElement('canvas');
var context = reflection.getContext('2d');
reflection.style.height = image.height + 'px';
reflection.style.width = image.width + 'px';
reflection.height = image.height;
reflection.width = image.width;

//Подводный камень: на canvas нельзя рисовать, если она не в DOM-дереве документа
container.appendChild(reflection);

context.save();
var gradient;

if (0 == horizontal) {
// Задаём точку отсчёта, отражаем ось y и создаём вертикальный градиент
context.translate(0, image.height);
context.scale(1, -1);
gradient = context.createLinearGradient(0, 0, 0, image.height);
}
else {
// Задаём точку отсчёта, отражаем ось x и создаём горизонтальный градиент
context.translate(image.width, 0);
context.scale(-1, 1);
gradient = context.createLinearGradient(0, 0, image.width, 0);
}

// Рисуем исходное изображение (оно будет отражено по одной из осей)
context.drawImage(image, 0, 0, image.width, image.height);
context.restore();

// Задаём режим операции
context.globalCompositeOperation = "destination-out";

// Параметры градинтной заливки (в параметрах передаётся НЕпрозрачность, нам нужна прозрачность)
gradient.addColorStop(1, "rgba(255, 255, 255, " + (1 - opacity_end) + ")");
gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - opacity_start) + ")");
context.fillStyle = gradient;

// Заливаем
if (-1 != navigator.appVersion.indexOf('WebKit')) {
context.fill();
}
else {
context.fillRect(0, 0, image.width, image.height);
}
}

Тестовый пример.

Canvas Tutorial в Mozilla Developer Center

Пять звёздочек без JavaScript

Vladimir — Fri, 30 May 2008 19:26:35 +0000

Кросс-браузерный вариант реализации механизма рейтинга без использования JavaScript

Прочитал сегодня статью "Пять звёздочек" на Pepelsbey.net. Автор описывает очень интересный подход для реализации механизма рейтингов; основное преимущество описываемого подхода — минимум JavaScript за счет грамотного использования CSS.

Решение Вадима основано на использовании CSS rollovers, плавающих элементах и z-index и выглядит очень красиво. Особенно меня впечатлило то, что его решение будет работать с выключенной загрузкой изображений и отключенным CSS. Весьма приятно, ибо о usability отечественные разработчики задумываются далеко не всегда.

Среди недостатков отмечу следующие:

При использовании IE6 с выключенным JavaScript вся красота перестаёт работать (оффтопик: не могу понять, по каким причинам народ до сих пор сидит на IE6?)
Некоторое неудобство при изменении шкалы: например, если изменить код так, чтобы можно было учитывать полбалла, то помимо ширин придется менять и z-index каждого элемента a. Хотя, в принципе, это мелочь.

Полгода назад я какое-то работал над проектом myfolio.com, там тоже применялось пятизвёздочное голосование (правда, принцип несколько другой). Считая, что тот подход тоже имеет право жить , привожу его здесь.

Разметка очень проста:

Про условные комментарии вокруг элемента ul можно прочитать в статье "Кросс-браузерное одноуровневое вертикальное меню без JavaScript".

Из особенностей — нумерация идёт в обратном порядке (это связано отказом от float и z-index, ибо код в myfolio был гораздо сложнее и с z-index возникали некоторые проблемы в IE6).

Теперь самое интересное: стили:

.vote, .vote li.rated, .vote li a:hover {
background: url(stars.gif) no-repeat 0 0;
}

/* Небольшая особенность: если задавать цвет, то картинка не должна быть прозрачной.
Задание цвета используется для тех, кто выключил загрузку изображений в настройках браузера.
В этом случае пользователь увидит нечто наподобие progress bar (но это всё же лучше, чем ничего).
*/
.vote li.rated, .vote li a:hover {
background-color: red;
}

.vote {
background-position: 0 -14px;
}

.vote:hover li, .ievote:hover li {
background: none;
}

.vote {
width: 80px;
overflow: hidden;
position: relative;
}

.vote, .vote li, .vote li a {
height: 14px;
display: block;
}

.vote li {
position: absolute;
}

.vote, .vote li {
left: 0;
top: 0;
list-style: none;
margin: 0;
padding: 0;
}

.vote li a {
overflow: hidden;
text-indent: -100px;
outline: 0;
}

/* Задаем ширину каждого балла; каждый последующий балл включает в себя предыдущий*/
.vote li.one { width: 7px; }
.vote li.two { width: 16px; }
.vote li.three { width: 23px; }
.vote li.four { width: 32px; }
.vote li.five { width: 39px; }
.vote li.six { width: 48px; }
.vote li.seven { width: 55px; }
.vote li.eight { width: 64px; }
.vote li.nine { width: 71px; }
.vote li.ten { width: 80px; }

/* Для IE6 */
.ievote {
text-decoration: none !important;
}

Наконец, страница с рабочим примером.

Достоинства метода:

Метод кросс-браузерный, работает даже при отключенной загрузке изображений и выключенном CSS;
Превосходно работает даже при отключённом JavaScript (в том числе, и в IE6);
Благодаря использованию CSS rollover достаточно всего лишь одного HTTP-запроса (в отличие от реализаций, где используются списки с элементами img).

Еще одно красивое решение от site-creator.info.

Размещение блока неизвестного размера в центре страницы при помощи CSS

Vladimir — Tue, 01 Apr 2008 06:43:33 +0000

Как разместить блок неизвестного размера точно в центре страницы

Гуляя по Internet, совершенно случайно натолкнулся на статью "Стили CSS - центрируем объекты по центру веб-страницы".

Первой мыслью было, что автор начнёт рассказывать про вертикальное центрирование и всем известный margin: 0 auto. Но не тут-то было, всё гораздо интереснее

Статья, на которую я наткнулся — это перевод статьи Криса Койера (Chris Coyier) Quick CSS Trick: How To Center an Object Exactly In The Center. При этом высота и ширина центрируемого объекта в статье полагаются известными. Что ж, я ожидал чего-то большего.

Я сначала вкратце опишу идею Криса, потом расскажу, почему так не надо делать и затем покажу, что простого решения, удовлетворяющего всем требованиям, нет

Начнём. Пусть у нас имеется, например,

размерами 200×100 пикселей. Поступаем следующим образом:

.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px; /* 50% высоты */
margin-left: -100px; /* 50% ширины */
height: 100px;
width: 200px;
}

Начнём с того, что IE6 position: fixed очень плохо понимает. Для него нужно добавить небольшой хак:

* html .centered {
position: absolute;
}

Теперь о минусах:

размеры блока должны быть известны;
при уменьшении окна так, чтобы оно перекрывало отцентрированный объект, скроллер хотя и появляется, но прокрутить отцентрированный объект не сможет (из-за position: fixed);
при уменьшении ширины окна можно дойти до такого размера, когда у объекта границы станут отрицательными.

Теперь о реализации центрирования в общем виде (считаем, что высота объекта нам неизвестна; ширина же должна быть известной, так как блочный элемент, не имеющий явно заданной ширины автоматически получает width: 100%). Решение основывается на идеях, представленных в следующих статьях:

Разметка:

<body>
<div id="outer">
<div id="middle">
<div id="inner">
Ego autem quem timeam lectorem, cum ad te ne Graecis quidem cedentem in philosophia audeam scribere?
</div>
</div>
</div>
</body>

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

Стили будут почти аналогичными приведённым в той статье, но с небольшими изменениями для IE.
Начнём со стилей для нормальных браузеров:

html {
overflow: auto;
}

html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

#outer {
height: 100%; /* В этом случае нельзя использовать min-height. Для таблиц (элементов с display: table) мир устроен иначе */
display: table;
vertical-align: middle;
width: 600px; /* Если ширина не задана явно, будет 100% */
margin: 0 auto;
}

#middle {
display: table-row;
vertical-align: middle;
}

#inner {
display: table-cell;
vertical-align: middle;
}

Теперь стили для Ишака. Я бы поместил их в условный комментарий, например, так:

Вышеприведённый условный комментарий не должен работать для IE8, и это сделано специально: во-первых, IE8 поддерживает display: table, display: table-row и display: table-cell; во-вторых, будучи бетой, он не поддерживает vertical-align ни в каком виде. В общем, когда Microsoft выпустит полноценный браузер, тогда и будем думать

Стили для Internet Explorer:

* > html body { /* Выравниваем блок по центру для IE4-IE5.5 */
text-align: center;
}

#outer {
position: relative;
}

#middle {
top: 50%;
position: relative; /* Не используем абсолютное позиционирование, чтобы избежать проблем с прокруткой */
width: 100%;
}

#inner {
position: relative;
top: -50%;
}

Если посмотреть на то, что получилось, можно заметить, что это один из тех случаев, когда код работает корректно в IE6, но не в IE7 (последний будет показывать совершенно ненужный отступ снизу). Если вспомнить статью "Вертикальное выравнивание без таблиц"), то там мы ставили overflow: hidden элементу #outer, чтобы избежать подобного рода неприятностей в IE6/7. И, хотя в IE6 можно обойтись и без этого (перейдя от абсолютного позиционирования к относительному), с IE7 всё не так просто. В качестве быстрого исправления можно предложить такой вариант:

*:first-child+html #outer {
overflow-x: hidden;
}

Что характерно, будет работать хоть overflow-x, хоть overflow-y.

В результате получаем код, который работает нормально везде, кроме IE7: в IE7 при уменьшении размера окна по вертикали полоса прокрутки появляться не будет. Сделать нормальную прокрутку непосредственно для элемента #outer также представляется проблематичным — нижний отступ будет слишком большим. Поэтому остаётся одно решение — таблица. Причём можно сделать так, что таблицу будет видеть только IE7:

<div id="outer">
<div id="middle">
<div id="inner">
Ego autem quem timeam lectorem, cum ad te ne Graecis quidem cedentem in philosophia audeam scribere? quamquam a te ipso id quidem facio provocatus gratissimo mihi libro, quem ad me de virtute misisti. Sed ex eo credo quibusdam usu venire; ut abhorreant a Latinis, quod inciderint in inculta quaedam et horrida, de malis Graecis Latine scripta deterius. quibus ego assentior, dum modo de isdem rebus ne Graecos quidem legendos putent. res vero bonas verbis electis graviter ornateque dictas quis non legat? nisi qui se plane Graecum dici velit, ut a Scaevola est praetore salutatus Athenis Albucius.
</div>
</div>
</div>

По большому счёту, это извращение — ибо проще всего использовать таблицу для всех браузеров. Но проще не значит лучше, ибо очень часто встречаются ситуации, когда заказчики требуют, чтобы вёрстка была семантической (а когда видят "незапланированную таблицу", начинают громко ругаться). Правда, в этом случае для IE7 семантика теряется, но, как заметил Максим Покровский, для него [IE], вообще, много чего теряется….

Итак, для комбинированного решения у нас получаются следующие стили для IE:

* > html body {
text-align: center;
}

* html #outer {
position: relative;
}

* html #middle {
top: 50%;
position: relative;
width: 100%;
overflow: auto;
}

* html #inner {
position: relative;
top: -50%;
overflow: auto;
}

*:first-child+html table.outer {
height: 100%;
width: 600px;
margin: 0 auto;
}

*:first-child+html table.outer tbody {
vertical-align: middle;
}

Результат можно посмотреть на этой странице.

Есть еще один вариант решения, но он полагается на использование JavaScript в IE:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Centering</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

html {
display: table;
overflow: auto;
}

body {
display: table-cell;
vertical-align: middle;
}

.item {
margin: 0 auto;
width: 600px;
}
</style>

</head>
<body>
<div class="item">
Ego autem quem timeam lectorem, cum ad te ne Graecis quidem cedentem in philosophia audeam scribere? quamquam a te ipso id quidem facio provocatus gratissimo mihi libro, quem ad me de virtute misisti. Sed ex eo credo quibusdam usu venire; ut abhorreant a Latinis, quod inciderint in inculta quaedam et horrida, de malis Graecis Latine scripta deterius. quibus ego assentior, dum modo de isdem rebus ne Graecos quidem legendos putent. res vero bonas verbis electis graviter ornateque dictas quis non legat? nisi qui se plane Graecum dici velit, ut a Scaevola est praetore salutatus Athenis Albucius.
</div>
</body>
</html>

Результат можно посмотреть здесь.

Кросс-браузерное всплывающее гибридное меню на CSS без использования JavaScript

Vladimir — Sun, 23 Mar 2008 04:33:58 +0000

Реализация кросс-браузерного горизонтального меню на чистом CSS 3 без использования JavaScript

Ранее я уже говорил о причинах, побудивших меня сделать меню на чистом CSS без использования JavaScript. Борясь с IE6, у меня получилась красивая версия вертикального меню — его реализация оказалась проще. Теперь обещанное горизонтальное меню.

Требования, которые я поставил:

Нельзя использовать JavaScript;
Полученный код (CSS и XHTML) должен успешно проходить валидацию.

Разметка для тестового примера была взята из этой статьи (которая и сподвигла меня на написание своего меню). В предыдущей статье код пришлось немного переработать (а всё из-за необходимости поддерживать IE6), и именно эту переработанную версию кода мы будем использовать.

<ul id="menu">
<li>
<a href="#">Renaissance</a>

<ul>
<li><a href="#">Brunelleschi</a></li>
<li><a href="#">Alberti</a></li>
<li><a href="#">Palladio</a></li>
<li><a href="#">Michelangelo</a></li>
<li><a href="#">Bramante</a></li>
</ul>

</li>

<li>
<a href="#">Art Nouveau</a>

<ul>
<li><a href="#">Mackintosh</a></li>
<li><a href="#">Guimard</a></li>
<li><a href="#">Horta</a></li>
<li><a href="#">van de Velde</a></li>
</ul>

</li>

<li class="on">
<a href="#">Modern</a>

<ul>
<li><a href="#">Sullivan</a></li>
<li><a href="#">Le Corbusier</a></li>
<li><a href="#">Mies</a></li>
<li><a href="#">Gropius</a></li>
<li><a href="#">Yamasaki</a></li>
</ul>

</li>

<li>
<a href="#">Postmodern</a>

<ul>
<li><a href="#">Venturi</a></li>
<li><a href="#">Eisenman</a></li>
<li><a href="#">Stern</a></li>
<li><a href="#">Graves</a></li>
<li><a href="#">Gehry</a></li>
</ul>

</li>

<li>
<a href="#">Digital</a>

<ul>
<li><a href="#">Xenakis</a></li>
<li><a href="#">Lynn</a></li>
<li><a href="#">Diller+Scofidio</a></li>
<li><a href="#">Zellner</a></li>
<li><a href="#">Hadid</a></li>
</ul>

</li>
</ul>

Таблица стилей для браузеров, поддерживающих CSS 2.1:

#menu, #menu li, #menu ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu {
display: block;
width: 100%;
position: relative;
}

#menu li {
float: left;
height: 2em;
line-height: 2em;
}

#menu li a {
float: left;
border: 1px solid red;
vertical-align: middle;
padding: 0 .5em;
width: 100px;
}

#menu li ul {
display: none;
position: absolute;
top: 2em;
left: 0;
margin-top: 1px;
width: 100%;
background: #FFF;
height: auto;
}

#menu li.on ul, #menu li:hover ul {
display: block;
z-index: 10;
}

#menu li:hover ul {
z-index: 100;
}

#menu li li a {
display: block;
border: 1px solid red;
vertical-align: middle;
padding: 0 .5em;
}

Презентационные стили:

#menu > li + li {
margin-left: -1px;
}

#menu li ul li + li {
margin-left: -1px;
}

#menu li a {
outline: 0;
text-decoration: none;
}

#menu li.on {
background: yellow;
}

#menu li:hover a, #menu li a:hover, #menu li a:hover a {
background: #EEE;
}

#menu li ul li:hover, #menu li ul li a:hover {
background: #EAFBFC;
}

Более детально это всё объяснено в предыдущей статье.

Теперь будем лечить IE6. У меня этот процесс занял несколько часов, но результат стоил того — оно работает!!!

* html #menu {
overflow-x: hidden; /* Скрыть побочный эффект следующего исправления */
}

* html #menu li ul {
display: block;
z-index: 1;
margin-top: 2px;
overflow: visible;
/* Это исправляет неверное определение ширины - абсолютное значение width: 100% без этих строк было бы равно ширине родительского */
padding-right: 1000em;
margin-right: -1000em;
}

* html #menu li.on a table,
* html #menu li a:hover table
{
visibility: visible;
}

* html #menu li.on a table ul {
z-index: -1; /* Ключевое исправление - без него меню правильно работать не будет. Предназначено для исправления последствий многочисленных багов в реализации z-index. Благодаря этому исправлению, все li a:hover table, находящиеся перед li.on table, будут нормально отображаться (не будут перекрываться li.on table) */
}

* html #menu li a:hover table ul {
z-index: 100;
}

* html #menu li a:hover {
position: static;
}

/* У таблицы теперь статическая позиция. Абсолютное/относительное позиционирование вносит ужасный бедлам в и без того глючную реализацию z-index в IE6. */
* html #menu table {
border-collapse: collapse;
visibility: hidden;
}

Замечания по реализации:

Из-за плохой поддержки z-index Ишаком возможны проблемы с border-top/bottom у крайних правых элементов меню;
Из-за того, что пришлось использовать overflow-x, CSS не валидируется в рамках спецификации CSS 2.1 (но проходит валидацию CSS 3).

Тестовая страница лежит здесь.

Кросс-браузерное одноуровневое вертикальное меню без JavaScript

Vladimir — Sun, 23 Mar 2008 01:45:46 +0000

Создание вертикального кросс-браузерного меню без использования JavaScript — чистый CSS!

Так случилось, что срочно понадобилось сделать горизонтальное меню, причем для проекта, который нужно было сдавать вчера Естественно, самому писать не было времени, нужно было взять что-то готовое. Я недавно прочитал статью «Всплывающее гибридное меню на CSS», поэтому взял код именно оттуда. Но не в этом дело. У подавляющего большинства меню камнем преткновения становится IE6 — а всё из-за того, что он понимает :hover только для тэга <a>. Когда-то у меня был заказчик, требовавший, чтобы всё одинаково работало с выключенным JavaScript'ом; вспомнив его, я решил попробовать сделать меню, работающее безо всякого JavaScript. Так получилось, что попутно я нашел еще один очень интересный глюк в IE6 (о нём далее), в борьбе с которым у меня получилось вертикальное меню.

Друг заметил, что смысла уродоваться не было, ибо есть whatever:hover, который применяется многими разработчиками. Для всех, кто такого же мнения, отмечу, что whatever:hover — это HTC-компонент, суть JavaScript, вследствие чего при выключенном JavaScript работать не будет. Помимо этого, whatever:hover не будет работать при динамическом построении меню. И еще его использование негативно сказывается на отклик IE при начальном рендеринге (в смысле, когда весь DOM уже загружен, и наступило время выполнять deferred-скрипты и грузить картинки).

Приступим.
Разметку я взял все из той же статьи, она (разметка) имеет следующий вид:

<ul id="menu">
<li>
<a href="#">Renaissance</a>
<ul>
<li><a href="#">Brunelleschi</a></li>
<li><a href="#">Alberti</a></li>
<li><a href="#">Palladio</a></li>
<li><a href="#">Michelangelo</a></li>
<li><a href="#">Bramante</a></li>
</ul>
</li>

<li>
<a href="#">Art Nouveau</a>
<ul>
<li><a href="#">Mackintosh</a></li>
<li><a href="#">Guimard</a></li>
<li><a href="#">Horta</a></li>
<li><a href="#">van de Velde</a></li>
</ul>
</li>

<li>
<a href="#">Modern</a>
<ul>
<li><a href="#">Sullivan</a></li>
<li><a href="#">Le Corbusier</a></li>
<li><a href="#">Mies</a></li>
<li><a href="#">Gropius</a></li>
<li><a href="#">Yamasaki</a></li>
</ul>
</li>

<li>
<a href="#">Postmodern</a>
<ul>
<li><a href="#">Venturi</a></li>
<li><a href="#">Eisenman</a></li>
<li><a href="#">Stern</a></li>
<li><a href="#">Graves</a></li>
<li><a href="#">Gehry</a></li>
</ul>
</li>

<li>
<a href="#">Digital</a>
<ul>
<li><a href="#">Xenakis</a></li>
<li><a href="#">Lynn</a></li>
<li><a href="#">Diller+Scofidio</a></li>
<li><a href="#">Zellner</a></li>
<li><a href="#">Hadid</a></li>
</ul>
</li>
</ul>

Начнём с браузеров, поддерживающих CSS 2.1. Таблица стилей для них будет иметь следующий вид:

#menu {
height: 2em;
}

#menu, #menu ul, #menu ul li {
list-style: none;
display: block;
margin: 0;
padding: 0;
}

#menu li {
float: left;
height: 2em;
line-height: 2em;
position: relative;
}

#menu li a {
display: block;
border: 1px solid red;
vertical-align: middle;
padding: 0 .5em;
}

#menu li ul {
display: none;
position: absolute;
top: 2em;
left: 0;
margin: 1px 0 0 0;
padding: 0;
background: #FFF;
width: 100px;
}

#menu li:hover ul {
display: block;
}

#menu li ul li {
float: none;
width: 100%;
}

#menu li ul li a {
border: 1px solid red;
vertical-align: middle;
padding: 0 .5em;
}

Вся магия содержится в двух правилах:

#menu li ul {
display: none;
position: absolute;
top: 2em;
left: 0;
margin: 1px 0 0 0;
padding: 0;
background: #FFF;
width: 100px;
}

#menu li:hover ul {
display: block;
}

Первое задаёт размеры/позицию выпадающего меню; позиция вычисляется относительно родительского элемента >. Второе же правило показывает выпадающее меню при наведении курсора мыши на заголовок. Ничего сложного.

Презентационные стили:

#menu > li + li {
margin-left: -1px;
}

#menu li ul li + li {
margin-top: -1px;
}

#menu li a {
outline: 0;
text-decoration: none;
}

#menu li:hover a, #menu li a:hover a {
background: #EEE;
}

#menu li li a, #menu li:hover li a, #menu li a:hover li a {
background: #FFF;
}

#menu li ul li:hover a, #menu li ul li a:hover {
background: #EAFBFC;
}

Первые два правила позиционируют элементы списков так, чтобы border-right (border-bottom) предыдущего элемента совпадал с border-left (border-top) следующего.

Теперь переходим к IE6. В нём не работает второе магическое правило (#menu li:hover ul), так как IE6 воспринимает :hover только на элементах .

Первая мысль — закрывать для IE6 <a> не до списка, а после. Мысль хорошая, но просмотр дерева в IE Developer Toolbar показал, что IE как-то «криво» понимает код (в принципе, здесь Ишак прав: невалидный код каждый волен понимать так, как может). Следовательно, надо список «обернуть» во что-нибудь, но так, чтобы <a> нормально работал. И совершенно случайно я вспомнил один случай, когда разгребал одну ужасную табличную вёрстку (а уровень вложенности таблиц переваливал там за 16), и открытый тэг <a> превратил всю таблицу в сплошную гиперссылку. Чем чёрт не шутит, я решил попробовать.

Код стал таким:

<li>
<a href="#">Renaissance</a>

<ul>
<li><a href="#">Brunelleschi</a></li>
<li><a href="#">Alberti</a></li>
<li><a href="#">Palladio</a></li>
<li><a href="#">Michelangelo</a></li>
<li><a href="#">Bramante</a></li>
</ul>

</li>

Получилось! Ишак нормально распарсил код и сгенерировал нормальное дерево:

Теперь нужно немного поколдовать, чтобы заставить всё работать как надо.
Первое, что приходит в голову — это такие вот стили:

* html #menu li ul {
display: block;
}

* html #menu li a:hover {
position: static;
}

* html #menu li a:hover table {
display: block;
}

* html #menu table {
position: absolute;
border-collapse: collapse;
top: 0;
left: -1px;
display: none;
}

Иными словами, мы всю магию перенесли на уровень выше (так как теперь у нас <ul> обёрнут <table>). Правило position: static в * html #menu li a:hover — это вуду, без этого не работает (как вариант, можно задать background с цветом, отличным от transparent).

И тут начинаются проблемы. Я, конечно, всегда подозревал, что IE написан очень криво, но чтобы так криво… После нескольких наведений на меню получается такая картина:

То есть таблицы как бы нет (display: none), но место в потоке она занимает, и при этом хотя текста дочерних элементов не видно, но border остался. Нет таблицы, и в то же время есть. Чудеса.

От таких чудес невольно опускаются руки. Потратив пару часов на эксперименты, я чудом нашел рабочую комбинацию: вместо display: none/block нужно использовать visibility: visible/hidden. Не знаю, почему, но оно работает. Но всё же мне интересно, что курили разработчики, писавшие Ишака?

Страница с рабочим кросс-браузерным меню находится здесь. Никакого JavaScript, только CSS!

Update: еще одна версия вертикального меню.

Резиновый трехколоночный макет с правосторонними сайдбарами

Vladimir — Sat, 22 Mar 2008 01:24:37 +0000

Кросс-браузерный семантически корректный резиновый макет с тремя колонками (сайдбары справа)

Очередной раз попав не туда, куда надо из Google, я натолкнулся на статью "Трехколоночный макет на CSS с одинаковой высотой колонок". Да, трехколоночные макеты (да еще и резиновые!) очень популярны, я смотрю Но, несмотря на популярность таких макетов, многие верстальщики почему-то ~~не хотят учиться и~~ городят целый огород на div'ах.

В указанной статье приводится следующая разметка (я убрал пустые строки и изменил форматирование):

Что мы видим: пример, как верстать не надо. Может быть, сказано слишком резко, но на мой взгляд, суп из div'ов (с глубиной вложенности 6) ничем не лучше табличной вёрстки (табличная вёрстка будет даже компактнее). Кроме того, большая часть этого супа не несёт семантической нагрузки. И вообще, при верстке нужно руководствоваться принципом KISS, но это моё сугубо личное мнение.

Попробуем переделать.
Начнём с разметки:

Как я уже отмечал в предыдущих статьях, названиям классов и атрибутам id нужно давать семантически значимые имена, но в качестве тестового примера пойдут и такие.

Простая разметка — простые стили:

html, body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
}

html { /* Для IE6 и IE7 */
overflow: auto;
}

body {
min-width: 50em; /* #container.paddingRight + #col1.offsetWidth + #col2.offsetWidth */
}

#container {
overflow: hidden;
padding-right: 25em; /* #col1.offsetWidth + #col2.offsetWidth */
position: relative;
}

/*\*/
* html #container {
height: 1%;
}
/**/

.column {
position: relative;
float: left;
padding-bottom: 1002em !important;
margin-bottom: -1000em !important;
overflow: hidden;
}

#content {
width: 100%;
}

#col1 {
width: 10em;
margin-right: -100%;
}

#col2 {
width: 15em;
margin-right: -100%;
margin-left: 10em; /* #col1.offsetWidth */
}

#footer {
clear: both;
}

Для краткости презентационные стили (aka расцветка) опущены.

Тестовая страница доступна здесь. Кстати, разметка получилась даже проще, чем здесь

Но макет не был бы так хорош, если бы не позволял с лёгкостью добавлять отступы, границы и бордюры. В статье "IE7/8 и общий случай двухколоночной резиновой вёрстки" я показывал, как получаются формулы для вычисления значений границ и иже с ними (вспоминаем про эквивалентность преобразований), поэтому здесь приведу только конечный результат:

Элемент	Свойство	Формула
body	min-width	`(#container.offsetWidth - #container.width) + (#content.offsetWidth - #content.width) + #col1.offsetWidth + #col2.offsetWidth`
#container	padding-right	`(#content.offsetWidth - #content.width) + #col1.offsetWidth + #col2.offsetWidth`
#content	margin-left	`=#container.paddingLeft`
#col1	margin-left	`=#content.marginRight`
#col2	margin-left	`#col1.offsetWidth + #col2.желаемый_marginLeft`
#col1, #col2	margin-right	`-100%`

В #container.paddingRight входит желаемый #col2.marginRight (но у Opera есть некоторые проблемы с его отображением).

Из-за того, что все колонки имеют равную высоту, отобразить border-bottom у них не представилось возможным.

Для IE8 добавляются следующие изменения:

#col1.marginLeft устанавливается в сумму горизонтальных отступов, границ и бордюров элемента #content;
#col2.marginLeft увеличивается на величину #col1.marginLeft.

Тестовая страница для экспериментов находится здесь.

html, body {
margin: 0;
padding: 0;
border: 0;
font: 12px Verdana, Tahoma, Arial, Helvetica, sans-serif;
width: 100%;
}

html {
overflow: auto;
}

body {
min-width: 81em; /* (38.5 + 0.5 + 2*1 + 2*1) + (2*1 + 2*1 + 0.5) + (10 + 2*1 + 2*1) + (15 + 0.5 + 2*1 + 2*1) = 43 + 4.5 + 14 + 19.5 = 57 + 24 */
}

#container {
overflow: hidden;
padding-right: 38.5em; /* (2*1 + 2*1 + 0.5) + (10 + 2*1 + 2*1) + (15 + 0.5 + 2*1 + 2*1) + желаемый margin-right для #col2 (0.5em) */
position: relative;
padding-left: .5em;
padding-top: .5em;
padding-bottom: .5em;
margin: 1em;
border: 1em solid black;
}

/*\*/
* html #container {
height: 1%;
}
/**/

.column {
position: relative;
float: left;
padding-bottom: 1002em !important; /* Фактически, padding-bottom = 2em */
margin-bottom: -1000em !important;
overflow: hidden;
}

#content {
width: 100%;
border: 1em solid green;
padding: 1em;
margin-right: .5em;
}

#col1 {
width: 10em;
margin-right: -100%;
padding: 1em;
border: 1em solid red;
}

*:first-child/**/+html #col1 {
margin-left: 4.5em; /* #col1.paddingLeft + #col1.paddingRight + #col1.borderLeft + #col1.borderRight + #col2.желаемый_marginLeft */
}

#col2 {
width: 15em;
margin-right: -100%;
margin-left: 14.5em; /* #col1.paddingLeft + #col1.paddingRight + #col1.borderLeft + #col1.borderRight + #col2.желаемый_marginLeft + #col1.width */
padding: 1em;
border: 1em solid blue;
}

*:first-child/**/+html #col2 {
margin-left: 19em; /* #col2.marginLeft + #col1.marginLeft */
}

#footer {
clear: both;
}

WassUp for WordPress и Windows

Vladimir — Fri, 21 Mar 2008 00:25:16 +0000

Как заставить Wassup работать под Windows

Для WordPress есть замечательный плагин — Wassup. Хороший плагин, но вот беда: не дружит с Windows. Не дружит из-за того, что переменные хардкодить нельзя. Это в Unix/Linux каталоги разделяются ‘/’, а в Windows используется ‘\’. И вот из-за невнимательности автора плагин не работает в Windows. К счастью, всё лечится очень просто.

Патч лежит здесь. Патч нужно применить к файлу /wp-content/plugins/wassup/lib/action.php.

Помимо исправления ошибки с разделителями каталогов, патч исправляет небольшую ошибку, связанную с невалидностью (инвалидностью?) генерируемого (X)HTML-кода.