Небольшая подборка CSS трюков и хитростей - Каталог статей - Уроки по html/css - Разное www.Sefirut.ru - разработка шаблонов, сайтов, иконок, скриптов, создание сайтов набережные челны, студия веб-дизайна в Набережных Челнах, раскрутка и продвижение сайтов в интернете
| Сегодня Пятница 09.12.2016

Небольшая подборка CSS трюков и хитростей


Большинство из тех, кто верстает уже далеко не первый десяток 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, который я использовал на этом сайте, можно скачать и сохранить по этой ссылке.

Если вы знаете какие-то другие интересные хаки или, может быть, у вас есть свои «ноу-хау» по части верстки, не поленитесь поделится ими в комментариях и с вашего позволения я внесу их в статью.
Категория: Разное | Добавил: Admin (10.10.2010)
Просмотров: 1819 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]