Большинство из тех, кто верстает уже далеко не первый десяток PSD-шаблонов,
наверняка уже сталкивались со всякими «подводными камнями» со стороны IE и
некоторых других браузеров. Наверняка сделали себе небольшую подборку из кусков
часто используемого полезного CSS-кода.
В этой статье я, как-раз, расскажу о
таких, подобных кастомных сборках CSS-кода, которые я использую при верстке
новых макетов. Чтобы не дублировать каждый раз некий часто используемый код, я
его поместил в файл reset.css, который содержит в себе во-первых, сброс
всяческих отступов у HTML-элементов по умолчанию, и во-вторых: набор полезных
«тулзов» в CSS. В дальнейшем этот файл reset.css мы подключаем к нужным стилям
страницы через @impore 'reset.css'; сверху CSS-файла.
Вы скорее-всего уже
слышали про CSS-хаки? Если нет, то вкрадце — это CSS-код,
оформленный специальным образом так, после чего он воздействует только на
определенный браузер или перечень браузеров определенных версий. Наиболее часто
используемые CSS-хаки для Internet Explorer 6. Для примера следующий CSS-код
сработает в IE 5.5-7: «//clear:both;» и двойной слэш — это совсем не комментарий
в CSS, как некоторые могли подумать (комментарии в CSS бывают только
многострочного типа — /**/).
Еще пару примеров хаков для IE 6:
«-property:value;» или * html .class { /* css-свойства */ }. Существует также
хак для HTML в IE, при котором все браузеры кроме него понимают блок приведенный
ниже, как комментарий. В блоке «if» есть проверка на версии IE, так что можно
сделать вставить необходимый код, который обработается только в нужных версиях
Internet Explorer. Также этот блок проходит валидацию. Возможные вариации
условий: «lt» — меньше, «lte» — меньше или равно, «gt» — меньше, «gte» — меньше
или равно, итд. Пример вставки HTML-кода для IE:
<!--[if lt IE 6]>
Здесь пишем привычный HTML, или подключаем CSS-файл IE only
<![endif]-->
Добиться большей кросс-браузерности позволяет
включение любого доктайпа первой строчкой в код HTML-страницы. Доктайпы бывают
самые разные, полный список можно глянуть на сайте W3C. Приведу один для
примера: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">.
Продолжая
избитую тему, связанную с глюками в верстке для IE 6-7 есть еще несколько
хитростей. В IE «магическими» являются свойства position:relative,
overflow:hidden, width, zoom:1; Если вы сталкнулись с вопиющим безобразием в
поведении IE при верстке и уже буквально рвёте на себе волосы, попробуйте
включить в ваш класс один из приведенных выше CSS-свойств. Подключение доктайпа
дает возможность использования в IE 6 «white-space:nowrap;» для замены тега
«nobr», поддержку «display:inline-block», и кое-чего еще.. (всего и не
упомнишь). Внимание: если вначале страницы в коде пропустить строку (\n) и потом
вставить доктайп, то в IE 6 он не будет работать (как будто не
подключен).
Следующий код также можно отнести к хакам, но уже
кроссбраузерным. Приведенный класс «clearfix» необходим тогда, когда в плавающем
HTML-блоке со свойствами float (left или right), содержимое блока выходит за
границу его размера и сами размеры трактуются неверно, в следствии если мы, в
конце кода внутри блока, не использовали сброс обтекания через CSS-свойство
«clear» или <br clear="all" />.
.clearfix { zoom:1; } /* IE 6-7 */
.clearfix:after { display:block; height:0; overflow:hidden; clear:both; content:""; } /* остальные браузеры */
Иногда
бывает удобно использовать наследование в CSS, используя значение inherit для
различных свойств стиля. Но т.к в IE 6-7 оно не поддерживается, можно сделать
его аналог через expression.
Приведенный код, мною частенько использовался
тогда, когда необходимо было сверстать блок с бэкграндом используя одну
картинку, и приведенный код ниже был использован для дорисовки правого уголка
блока (например при верстке табов).
.corner-bgc { position:absolute; width:10px; height:100%; right:-10px; top:0; background:inherit;
background-image:expression(this.parentNode.currentStyle.backgroundImage); background-position:right top !important; }
При
помощи CSS, можно организовать предзагрузку изображений через свойство
background, что может пригодиться для дальнейшей работы, например в JS или при
показе скрытых элементов при наведении. Предзагрузка изображений может быть
сделана следующим образом:
.loading * { position:absolute; visibility:hidden; }
.loading .img1 { background-image:url(адрес-изображения); }
/* итд. сколько угодно изображений */
Для того, чтобы использовать
маркер списка для UL, в виде любого текстового символа, можно воспользоваться
следующим кодом ниже:
.li { list-style:none; behavior:expression( !this.before ? this.before = this.innerHTML = '« ' + this.innerHTML : '' ); } /* IE */
.li:before { content: "\ab\ "; } /* для браузеров, поддерживающих свойство «content», код символа указывается в HEX */
В
файл с часто используемым CSS-кодом также было бы удобно включить способы прозрачности PNG-32 в IE 6, код
для верстки закгругленных уголков и основные способы блочной
верстки, итд. Сам файл reset.css, который я использовал на этом сайте, можно
скачать и сохранить по этой
ссылке.
Если вы знаете какие-то другие интересные хаки или, может
быть, у вас есть свои «ноу-хау» по части верстки, не поленитесь поделится ими в
комментариях и с вашего позволения я внесу их в статью.
|
