Ксдыщь!

Дилетантские заметки про XSLT/XPath, HTML/CSS и всякую фигню

Записи в разделе 'Рецептарий'

Семантическая верстка — советы и решения. Часть третья. Блочная модель

22 декабря 2007 · HTML/CSS, Рецептарий

Блочная модель

Одна из ключевых особенностей cемантической валидной верстки — использование правильной блочной модели. Рассмотрим на примере, как она работает.
Читать дальше →

Теги: · ·

Комментариев: 14

Генерация URL’ов в XSLT 1.0

13 декабря 2007 · XSLT/XPath, Рецептарий

В первой версии XSLT самой слабой, пожалуй, остаётся работа со строками.

Наиболее часто проблемы из-за этого возникают с генерацией URL’ов. Допустим, мы имеем страницу с адресом:

http://example.com/index.xml?section=catalog&cat-id=10&item-id=1404&item-unique-key=809124

Нам нужно, скажем, сгенерировать три ссылки: на главную страницу категории (cat-id), главную страницу (section) и независимую от категории страницу итема (item-id, item-unique-key).

Способов много, я по-началу даже использовал substring, но потом ради разнообразия включил моск и набросал небольшой шаблончик. Открытием для хоть сколько-то опытных разработчиков он не будет, так что будем считать это очередным self-note. Читать дальше →

Теги: · ·

Комментариев: 7

Семантическая верстка — советы и решения. Часть вторая. Хаки-шмаки, даём люлей IE

7 декабря 2007 · HTML/CSS, Рецептарий

CSS-хаки

При использовании семантической верстки каждый разработчик обязательно столкнется с проблемами кроссбраузерности, для решения которых в большинстве случаев приходится использовать так называемые «хаки». Обычно под этим термином подразумевается особый способ написания селекторов или правил, понимаемый только конкретным браузером. Однако совместимость с CSS в большинстве браузеров уже достигла уровня, при котором следует ограничивать использование «хаков».

Как правило, основным источником неприятностей бывает Internet Explorer. Многообразие ошибок в реализации CSS в браузерах Microsoft удивляет даже самых опытных верстальщиков. В связи с этим возникают ситуации, когда необходимо использовать дополнительные или альтернативные правила для IE. Именно в таких случаях рекомендуется применять «хаки». Если же вам вдруг понадобились альтернативные правила, скажем, только для Firefox, то рекомендуется пересмотреть ваш код, и в 99% случаев вы найдете более элегантное решение.
Читать дальше →

Теги: · ·

Комментариев: 14

Семантическая верстка — советы и решения. Часть первая. Капля теории, DTD и ластики

29 ноября 2007 · HTML/CSS, Рецептарий

Сегодня я начинаю публиковать по частям статью, написанную для русского издания PC Magazine, в которой рассказывается о приёмах семантической вёрстки. Первая часть: немного теории, DTD и ластики. Уровень — начинающие.

Вместо вступления

В последнее время все чаще требованием при разработке сайта становится бестабличная или «дивная» верстка. Оба термина стали чрезвычайно популярны, несмотря на то, что они в корне неверны.

Изначально, таблицы были выбраны дизайнерами и разработчиками для верстки по одной единственной причине — не существовало других средств реализации хоть сколько-нибудь сложных макетов. Со временем таблицы стали нормой и остаются ею до сих пор. Но мы уже не в девяностых и браузеры, которые значатся в наших технических заданиях, способны интерпретировать CSS на том уровне, который необходим для более корректной, структурированной и современной верстки.
Читать дальше →

Теги: · ·

Комментариев: 14

IE 7, conditional comments и хаки

2 ноября 2006 · HTML/CSS, Рецептарий

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

Оптимальным вариантом для меня является подключение специфичного листа стилей для всех IE через conditional comments.

<!--[if IE]>...<![endif]-->

И использование классического сочетания «star html hack» и метода экранирования для старых IE, а также варианта без хаков для седьмого.

В результате в ie.css используются конструкции примерно следующего вида:

#element {
    zoom:1; /* IE 7 */
    }
    * HTML #element {
        height:auto; /* IE 5 */
        he\ight:1%; /* IE 6 */
        }

А у нас в квартире газ А какими методами пользуетесь Вы?

P.S. Пример с height:auto имеет абстрактный характер, height:1% для self clearing вполне достаточно.

Теги: · · · ·

Комментариев: 24