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

Архив ‘CSS’

Оптимизация графики

Пятница, 29 февраля, 2008

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

<div style="background:url('allpics.gif'); height: 16px; width: 16px; background-position: 0px 0px"></div>Картинка 1
<div style="background:url('allpics.gif'); height: 16px; width: 16px; background-position: 16px 0px"></div>Картинка 2
<div style="background:url('allpics.gif'); height: 16px; width: 16px; background-position: 32px 0px"></div>Картинка 3

Еще одним достоинством этого способа оптимизации является более семантически правильная верстка (т.к. служебные изображения с семантической точки зрения предпочтительнее представлять в виде divов с background, чем в виде img).

Метки: ускорение загрузки сайта
Рубрика: CSS, HTML | Комментариев: 6 »

Объединение JavaScript и CSS-файлов для ускорения загрузки

Четверг, 28 февраля, 2008

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

Существует уже готовое решение. Для того, чтобы воспользоваться им, нужно скачать и поместить в корень сайта файл combine.phps, а затем прописать в .htaccess такие правила для mod_rewrite:

RewriteEngine On
RewriteBase /
RewriteRule ^css/(.*\.css) /combine.php?type=css&files=$1
RewriteRule ^javascript/(.*\.js) /combine.php?type=javascript&files=$1

Далее можно подключать JavaScript-файлы, просто перечисляя их через запятую с помощью таких конструкций:

<script src="/javascript/my1.js,my2.js,jquery.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/css/style.css,my1.css,my2.css">

Если файлы физически расположены в каком-то другом каталоге, то достаточно изменить переменные в самом файле combine.phps:

	$cachedir = dirname(__FILE__) . '/cache';
	$cssdir   = dirname(__FILE__) . '/css';
	$jsdir    = dirname(__FILE__) . '/javascript';

на нужные пути.

К недостаткам данного способа можно отнести обязательное наличие mod_rewrite на сервере. Впрочем, в большинстве броузеров будет работать и прямой вызов скрипта (потрбуется переименовать его из combine.phps в combine.php) вида “/combine.php?type=javascript&files=my1.js,my2.js,jquery.js".

Метки: ускорение загрузки сайта
Рубрика: CSS, JavaScript, AJAX, PHP | Комментариев: 7 »

Формы без использования таблиц

Суббота, 16 февраля, 2008

При верстке форм часто требуется расположить поля ввода и подписи к ним в два столбца (обычно слева подписи, справа — поля). Часто такое делается с помощью таблиц, но есть более удобный и правильный с точки зрения семантической верстки способ: использование тега label и свойств CSS.

Выполняется такая верстка следующим образом: форме задается свойство position: relative, затем внутри нее помещаются теги label, у которых также задано свойство position: relative, и в эти теги помещаются поля ввода с position:absolute.

В итоге получается примерно такой код:

<html><head><style type="text/css"><!--
form {position: relative }
label {position: relative; display: block }
input {position: absolute; left: 50% }
--> </head><body>
<form action="" method="get"><fieldset><legend></legend>
<label>Название поля 1: <input type="text" name="f1" size="30"></label>
<label>Название поля 2: <input type="text" name="f2" size="30"></label>
<button type="submit">Отправить</button>
</fieldset></form>
</body></html>

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

Кроме того, в указанном примере приведен тег fieldset (стандарт HTML 4.01 Strict предусматривает его обязательное наличие в форме). Если поля формы заключены в этот тег, то они по умолчанию размещаются в одной строке (если бы его не было, после каждого поля начиналась бы новая строка). Так как в данном случае этого не нужно, мы поменяли режим отображения label на блочный (свойство display: block).

Рубрика: CSS, HTML | Комментариев: 2 »

Особенность свойства position:absolute

Суббота, 16 февраля, 2008

Частым заблуждением начинающих верстальщиков является мнение, что свойство position:absolute позволяет задавать координаты элемента только относительно страницы (элемента body). На самом деле, можно сделать и абсолютное позиционирование элемента относительно родительского элемента. Для этого родительского элемента также должно быть задано свойство position:absolute или же position:relative.

Например, вот в этом коде у вложенный слой будет отстоять на 150 пикселей по вертикали от начала страницы:

<div style="height:100px"></div>
<div style="position: relative; height: 200px; width: 200px;">
  <div style="position: absolute; top: 50px;">Этот текст будет в 150 пикселях от верха страницы</div>
</div>

Если же в указанном примере убрать position:relative, текст будет выводиться в 50 пикселях от верха.

Рубрика: CSS | 1 комментрий »

Отображение блока в нижней части страницы

Пятница, 18 января, 2008

Часто требуется сделать так, чтобы “подвал” страницы отображался в самом ее низу даже в тех случаях, когда на странице мало контента. Реализуется это следующим образом: в CSS тегам body и html присваивается высота 100%.

Далее основной контент берется в один блок div (назовем его content), “подвал” — в другой (назовем его footer). Блоку content присваивается минимальная высота (min-height) 100%, для footerа высота задается явно. Нижнее поле блока content задается равным высоте footerа, а для самого footerа верхнее поле указывается в 2 раза больше, чем его высота.

В результате получаем следующий код:

<html><head><style type="text/css"><!--
html { height: 100%; }
body { height: 100%}
#content { min-height: 100%; margin-bottom: 50px }
* html #content { height: 100% } /* Это для Internet Explorer, который не воспринимает min-height */
footer { height: 50px; position: relative; margin-top: -100px; }
--></style></head>
<body>
<div id="content">
Здесь находится основное содержимое
</div>
<div id="footer">
А это подвал сайта
</div>
</body></html>

Советы: 1) для того, чтобы подвал масштабировался при изменении размера шрифта в броузере, поля и высоту имеет смысл задавать не в пикселях, а в относительных единицах (em);
2) нижнее поле у body должно быть равно нулю (типичная ошибка — использование конструкций вида body { 5px 10px}, которые добавляют не только верхнее, но и нижнее поле).

Метки: Internet Explorer, MSIE, верстка
Рубрика: CSS, HTML | Нет комментариев »

Полупрозрачный фон в Internet Explorer

Воскресенье, 6 января, 2008

MSIE 6 не поддерживает свойство прозрачности opacity. Однако добиться прозрачности в нем все же возможно с помощью двух специальных фильтров: Alpha и AlphaImageLoader. Фильтр Alpha позволяет отображать изображения с определенной степенью прозрачности (и применим только к тегу img), фильтр AlphaImageLoader — загружать фоновое изображение (точнее, располагаемое между фоном и передним планом).

Использование выглядит следующим образом:
в CSS для броузеров, поддерживающих полупрозрачные PNG, пишем:

.trans { background: url('images/trans.png'); }

Или, если нам достаточно равномерной однотонной прозрачности:

.trans { background: цвет; opactity: значение }

Здесь значение — степень непрозрачности от 0.0 до 1.0. Такой подход позволяет одно обращение к серверу (не нужно подгружать файл с полупрозрачной картинкой).

Для отображения прозрачного фона в Internet Explorer в head-части HTML-страницы пишем

<!--[if lt ie 7.0]>
<style type="text/css">
.trans { background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/trans.png', SizingMethod="scale" )}
</style>-->

Здесь SizingMethod=”scale” растягивает рисунок до размеров элемента. Если этот параметр не указать, элемент сожмется до размеров рисунка, что в нашем случае нежелательно.

Таким образом, мы создали класс .trans, применение которого к блочным элементам будет делать их полупрозрачными. Файл images/trans.png в простейшем случае должен быть пикселем 1×1

Гораздо удобнее иметь полупрозрачность в виде отдельного класса, и указывать при необходимости два класса для элемента (делается это так: class=”class1 trans”, где class1 — имя другого класса), чем приписывать ее ко всем классам элементов, которые ее используют.

Оффтопик: Также хотелось бы заметить, что в Сети существует статья (причем растиражированная в огромном количестве экземпляров) с опечатками в названии фильтра AlphaImageLoader и параметра SizingMethod. Названия фильтров должны писаться именно так, как они написаны здесь.

Метки: Internet Explorer, MSIE, PNG, полупрозрачность
Рубрика: CSS, HTML | Комментариев: 3 »

Свойство clear

Вторник, 18 декабря, 2007

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

Чтобы избавиться от этого явления, следует воспользоваться свойством clear, предусмотренным в CSS. Это свойтсво помещает блочный элемент, идущий после блока со свойством float, не справа/слева от этого элемента, а ниже (иными словами, clear отменяет действие float). Если элемент со свойством clear находится в самом низу внутри контейнера, то высота этого контейнера определяется по позиции такого элемента, в результате чего проблема с наложением плавающих элементов на нижележащий текст исчезает.

Свойство clear поддерживает следующие значения: none (не используется), left (отменяет float: left), right (отменяет float: right), both (отменяет и float:left, и float:right).

Таким образом, горизонтальное меню, построенное с помощью ненумерованного списка (в соответствии с рекомендациями W3C), будет иметь такой вид:

<div class="menu">
  <ul style="display: block">
    <li style="display: block; float:left">Элемент 1</li>
    <li style="display: block; float:left">Элемент 2</li>
    <li style="display: block; float:left">Элемент 3</li>
  </ul>
  <div style="clear: both"></div>
</div>

Рубрика: CSS, HTML | Комментариев: 2 »

DIV высотой в 2 пикселя в Internet Explorer

Воскресенье, 16 декабря, 2007

Иногда бывает нужно создать пустой слой высотой 1-2 пикселя. В большинстве броузеров это не вызывает проблем, но MSIE упорно увеличивает высоту слоя примерно до 10 пикселей. Бороться с этим нужно следующим образом: указать в стиле слоя высоту шрифта размером 0%:

<div style="height: 2px; font-size: 0%"></div>

Метки: MSIE
Рубрика: CSS | Комментариев: 6 »

Условные комментарии и min-width в MSIE

Суббота, 15 декабря, 2007

Существенным недостатком MSIE 5.x и 6.x является то, что в нем не работают свойства CSS min-width, max-width и тому подобные. Эту проблему можно обойти с помощью применения выражений (expressions) в CSS, например, таких:

#bd { width:expression((document.documentElement.clientWidth
|| document.body.clientWidth) < 780? "780px" : "auto"); }

Но сразу возникает новая проблема: такой код не проходит валидацию. Но, к счастью, в MSIE предусмотрена возможность ее решения — так называемые “условные комментарии”, которые представляют собой часть HTML-кода, заключенную в такую конструкцию:

<!--[if lt ie 7.0]>
код
<![endif]-->

Для всех броузеров, кроме MSIE, а также для валидаторов, данный код является комментарием и никак не обрабатывается. MSIE же проверяет условие, которое написано в квадратных скобках (в приведенном примере — проверка на то, что версия младше MSIE 7) и если оно истинно, обрабатывает код обычным образом.

Теперь поместим в этот условный комментарий CSS-выражение для MSIE:

<!--[if lt ie 7.0]>
<style type="text/css">
#bd { width:expression((document.documentElement.clientWidth
 || document.body.clientWidth) < 780? "780px" : "auto"); }
</style>
<![endif]-->

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

Примечание: этот условный комментарий должен находиться после тега style с основными стилями или тега meta, подключающего внешний CSS.

Метки: MSIE
Рубрика: CSS | Комментариев: 4 »