Заметки об HTML, CSS, AJAX, DOM, PHP, MySQL и многом другом

Иногда бывает необходимо загрузить стилевой файл CSS из JavaScript. (Например, если head-часть HTML уже выведена, а нарушать стандарт и подключать CSS и в body нежелательно.)

Делается это следующим образом: создается элемент link и добавляется как дочерний элемент к тегу head с помощью функций работы с DOM-моделью. Код для такого действия имеет примерно такой вид:
var tag_css = document.createElement('link');
tag_css.rel = 'stylesheet';
tag_css.href = 'http://test.ru/styles.css'; // здесь указывается URL стилевого файла
tag_css.type = 'text/css';
var tag_head = document.getElementsByTagName('head');
tag_head[0].appendChild(tag_css);

Если используется библиотека jQuery, то можно добавить тег несколько иначе:

$("head").append("<link>");
css = $("head").children(":last");
css.attr({
rel:  "stylesheet",
type: "text/css",
href: "http://test.ru/styles.css" //здесь указывается URL стилевого файла
});


Иногда бывает нужно сделать два блока, у которых будут стыковаться между собой рамки. (Типичная ситуация — заголовок, у которого рамка имеет один цвет, а текст под ним обрамлен рамкой другого цвета, и при этом вся конструкция должна восприниматься как едиое целое). Типичный подход в такой ситуации — использование трех тегов div примерно такого вида:

<div>
<h1 style="border: #ccc 1px solid">Заголовок</h1>
<div style="border: #888 1px solid; border-top: 0">Текст</div>
</div>

Однако имеется более элегантное решение, позволяющее уменьшить число DOM-элементов:

<div style="border: #888 1px solid">
<h1 style="border: #ccc 1px solid; margin: -1px">Заголовок</h1>
Текст
</div>

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

Закругленные или фигурные углы блока в настоящее время — один из самых распространенных элементов дизайна. Решений существует множество и на CSS, и на JavaScript, но большая их часть либо требует большого количества лишних пустых тегов и несемантичной верстки, либо позволяет закруглять углы только блоков с фиксированной высотой или с однородным фоном самого блока и страницы под ним.

Однако есть универсальное решение этой проблемы, которое может применяться в решениях любой сложности. Выглядит оно следующим образом: над блоком с контентом, которому нужны углы, добавляем два блока, высота которых равна радиусу скругления, с горизонтальными полями (margin), также равными отступу. Фон этого блока по цвету совпадает с фоном блока контента. Внутри этого блока помещаем еще два блока, у первого из которых отрицательным является левое поле, у второго — правое (величина отступа опять же равна радиусу скругленного угла). Для этих углов задаем фоновые картинки и отменяем фоновый цвет.

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

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

<div id="containter" style="position: relative; ....">
<div style="width:100%">
<div id="element" style="position: absolute; ...;...">Содержимое элемента</div>
</div>
</div>

Если контейнер содержит только элементы с аттрибутом float, то высота такого контейнера оказывается минимально-допустимой с точки зрения броузера. Для избежания этого обычно в конец контейнера помещается пустой div с clear:both, что нежелательно с точки зрения семантической верстки. Однако если контейнеру задать в свойствах ширину, отличающуюся от auto (например, width: 100%), его высота станет подбираться так, чтобы в нем умещались все плавающие элементы. В результате необходимость в пустом div с clear: both оптадает.

Добавлено (благодарности пользователю Шурик за уточнение): необходимо ещё установить свойство overflow (в auto, но из-за “некоторых” браузеров лучше в hidden).

Об скругленных уголках на сайтах написано достаточно много. Но почти все примеры предназначены для ситуаций, когда либо фон блока, либо область, поверх которой расположен блок, являются однородными. Но бывают ситуации, когда фон блока является градиентным, а область — неоднородной (например, содержит какую-нибудь сетку).

В этом случае внешняя часть уголка делается прозрачной, внутренняя — закрашивается соответствующим градиентом, также делается полоска шириной в 1 пиксель для части блока, которая оказывается между уголками. Все это вставляется с помощью следующей CSS-конструкции:

<div id="block">
<div id="topline"><div><div></div></div></div>
Здесь идет контент блока<
div id="bottomline"><div><div></div></div></div>
</div>

Слои с помощью CSS описываются следующим образом:

#topline, #bottomline { font-size:0 }
#topline div, #bottomline div { margin: 0 0 0 19px }
#topline div div, #bottomline div div { margin: 0 19px 0 0; height: 20px } 

#topline { background-image: url('upload/lockey/corn_tl.gif'); background-repeat: no-repeat }
#topline div { background-image: url('upload/lockey/corn_tr.gif'); background-position: right; background-repeat: no-repeat; }
#topline div div { width: 732px; background: url('upload/lockey/topline.gif') #FFF; background-repeat: repeat-x } 

#bottomline { background-image: url('upload/lockey/corn_bl.gif'); background-repeat: no-repeat }
#bottomline div { background: url('upload/lockey/corn_br.gif'); background-position: right; background-repeat: no-repeat }
#bottomline div div { width: 732px; height: 20px; background: #000 }

Здесь corn_?? — это файлы уголков (top, left, bottom, right сокращаются по первым буквам соответственно) . Также возможно попытаться оптимизировать код, объединив некоторые div (например, вместо второго div в topline можно использовать сам #block), а также уменьшить количество обращений к серверу за счет объединения нескольких файлов с уголками в один.

Как известно, CSS можно размещать двумя способами: в теге style внутри HTML-страницы и в отдельном файле, подключаемом с помощью тега link. Каждый из этих вариантов имеет свои достоинства и недостатки.

Главный недостаток первого варианта — увеличение объема каждой Web-страницы сайта, что крайне нежелательно для пользователей с модемной или GPRS-связью. Достоинство — страница в процессе загрузки сразу отображается правильно, кроме того, если страница будет сохранена в локальный файл, ее разметка сохранится даже в том случае, если при сохранении была выбрана опция “Только html-файл”. Кроме того, если сайт выполнен на статике, без применения CMS с общим для всех страниц шаблоном или SSI-вставок, то при внесении каких-то изменений в дизайн потрбуется редактировать каждую страницу.

Достоинство второго варианта — уменьшение объема траффика. Но при этом возникают два недостатка: а) до того, как будет подгружен CSS, сайт будет отображаться без стилей вообще (что раздражает некоторых пользователей), б) при сохранении страницы в локальный файл может быть потерян CSS-файл (точнее, каталог, в который помещаются вспомогательные файлы), что опять приведет к неправильному отображению страницы.

Также следует учитывать, что каждое новое обращение к серверу (для загрузки отдельного CSS-файла) — это достаточно большая задержка для пользователей с быстрым каналом связи (если сравнивать со скачиванием одного файла, объем которого равен объему этих двух файлов). Кроме того, если пользователь выставил в настройках броузера “проверять обновление страниц”, то задержка будет возникать при каждой загрузке страницы, а не толкьо при первой (из-за наличия GET-запроса с условием If-modified-since).

Таким образом, если сайт сделан на CMS, и его целевой аудтиторией являются пользователи с хорошими каналами связи (или существует упрощенная версия для PDA-устройств), то вариант со встроенными стилями CSS оказывается более предпочтительным, чем с вынесением их в отдельный файл.

Как известно, в MSIE псевдокласс :hover работает только для ссылок. Это создает массу неудобств, но существует решение, которое позволяет обойти эту проблему. Основано оно на использовании так называемых behaviors для Internet Explorer и htc-скрипта, разработанного Peter Nederlof. Скачать его можно здесь: http://www.xs4all.nl/~peterned/htc/csshover.htc, скрипт распространяется по лицензии LGPL.

Подключается данный скрипт с помощью такого CSS-правила (чтобы не нарушать валидность CSS, желательно размещать это правило с помощью условных комментариев):

body { behavior:url("csshover.htc"); }

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

Также существует версия 2.x этого htc-скрипта, которая позволяет использовать псевдокласс :focus, однако содержит определенное ограничение: если для элементов a, input, textarea используются какие-то неизвестные псевдоклассы, в MSIE они также будут срабатывать как :focus.

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

Стили, которые должны применяться только к версии для печати, описываются внутри директивы @media print. В этой директиве можно задать черный цвет текста и белый цвет фона для элемента body, а также скрыть меню, подвал и прочие вспомогательные блоки с помощью display: none.

Эта директива должна размещаться в конце стилевого файла и иметь примерно такой вид:

@media print {
body { color: #000; background: #FFF }
#menu { display: none }
a:link, a:visited { color: #400; text-decoration: underline }
/* переопределение других CSS-стилей */
}

Кроме того, можно вынести стили для печати в отдельный файл и подключать его обычным способом, но указывая тип устройства отображения в параметре media:

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

Еще одной проблемой является вывод адресов ссылок. Решить его можно с помощью следующей конструкции:

a:link:after, a:visited:after { content: " (" attr(href) ") " }

Но следует иметь в виду, что работает она не во всех броузерах (в частности, не работает в MSIE 6).

Если задать для элемента body свойство font-size: 62.5%, то относительная величина 0.1em при нормальном размере шрифта начинает соответствовать 1 пикселю (т.е. font-size: 1.2em приведет к выводу текста 12-пиксельным шрифтом), но при этом текст остается масштабируемым при увеличении/уменьшении размера шрифта во всех броузерах, включая MSIE. Кроме того, становится удобно задавать с помощью em ширину колонок/блоков, которые должны масштабироваться вместе с находящимся в них текстом (например, вертикальное меню).

(Идея заимствована отсюда: http://snook.ca/archives/html_and_css/top_css_tips/ )

Однако для вложенных блоков, если во внешнем блоке задан font-size в масштабируемых единицах (em, %, и т.п.), размер шрифта перестанет соответствовать пикселям. Поэтому рекомендуется задавать его не в em, а с помощью относительных показателей (значения larger, smaller, x-smaller, x-larger свойства font-size).

Кроме того, имеет смысл ставить для тега html cвойство font-size: 100.01%, т.к. это решает проблему с некорректным размером шрифта в Opera.