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

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

В этом случае внешняя часть уголка делается прозрачной, внутренняя — закрашивается соответствующим градиентом, также делается полоска шириной в 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), а также уменьшить количество обращений к серверу за счет объединения нескольких файлов с уголками в один.

Иногда бывает нужно сделать блок, который будет виден только в том случае, если у пользователя включен JavaScript. Самый простой способ сделать это выглядит так:

<noscript><div style="display:none"></noscript>
Здесь размещается часть, которая должна быть видна только при включенным JavaScript.
<noscript></div></noscript>

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

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

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

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

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

Часто требуется отсортировать массив хешей (ассоциативных массивов) по одному из полей. Обычно это делается это с помощью встроенной PHP-фунции usort и специальной callback-функции. Но вместо отдельной callback_функции можно использовать анонимную функцию, созданную с помощью create_function. Пример:

$array=usort($array,create_function('$a,$b','return strcmp($a["field1"],$b["field1"])')); // строкое сравнение двух полей

$array=usort($array,create_function('$a,$b','return $a["field2"]-$b["field2"])')); // числовое сравнение

Использование таких анонимных функций упрощает читаемость кода (т.к. не требуется перемещаться по коду и искать эту функцию) и позволяет не загромождать пространство имен лишними функциями.