css_maniac

Регулярные выражения в CSS

Tue, 31 Mar 2009 06:43:22 GMT

Я вот тут задумался, а почему в CSS нет регулярных выражений? Ведь это было бы здорово описывать правила так:

#ph[\d] {
    border:1px solid black
}

И это правило применяется ко всем элементам от id="ph0" до id="ph9"

Как сократить background

Wed, 18 Mar 2009 10:15:11 GMT

Свойство background довольно активно используется при верстке нестандартных интерфейсов и вообще более или менее сложных сайтов. При его использовании необязательно прописывать каждое свойство по отдельности:

div {
background-color:#F0F0F0
background-image: url(bg_img.gif) 
}

Короткий стиль позволяет записать все свойства одной строкой:
background: color-image-repeat-attachment-position
Например:
background: #F0F0F0 url(bg_img.gif) no-repeat fixed top left
В этом случае фон будет серым, на него будет наложено изображение bg_img.gif, оно будет использовано только один раз, не будет перемещаться и начнется с верхнего левого угла.

Про тонкости указания каждого параметра я еще напишу, а на этом у меня все.

Маленькая точка с запятой

Wed, 18 Mar 2009 10:10:52 GMT

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

p { 
text-align: center;
width:250px
}

Этот маленький ньюанс позволит сократить размер средней таблицы стилей на 20-30 символов.

Отдельно от других приемов оптимизации он, конечно, не серьезен. Но вместе с указанием свойств в одну строку, использованием сокращенний margin и padding, сокращений для font и других вполне может оказаться полезным.

Короче, кто не знал - знайте. =)

Короткий стиль для margin и padding

Tue, 17 Mar 2009 10:47:56 GMT

Каждый css-верстальщик должен знать и уметь использовать короткий стиль для задания свойств margin и padding. Как известно, margin отвечает за внешний отступ блочного элемента, а padding за внутренний.
Как запомнить порядок этих отступов? Все просто. Первым задается верхний отступ и дальше по часовой стрелке правый, нижний и левый.

div { margin:5px 10px 15px 20px }

В данном случае у нас верхний отступ будет 5px, правый 10px нижний 15px и левый 20px

Еще один способ задания отступа это Верхний+Нижний и Правый+Левый

div {margin: 10px 20px }

В этом примере верхний и нижний отступы будут по 10px, а правый и левый по 20px

Самый простой способ состоит в указании всего одного значения.

div { margin:20px }

В таком случае все отступы: верхний, правый, нижний и левый будут по 20px

В случае с padding все в общем задается также.
Следует помнить, что строчные inline элементы работают с отступами иначе, чем блочные.

Сокращения для font в CSS

Sat, 14 Mar 2009 22:45:25 GMT

Наверно все знают, как сократить запись стилей для шрифта. Вместо перечисления всех параметров

p {
    font-style: italic;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 12px;
    font-family: arial
}

можно написать их одной строкой:

p {
    font: italic small-caps bold 12px arial
}

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

p {
    font: bold 12px arial
}

А запомнить такую сокращенную схему становится проще. Три значения вместо пяти.

Согласитесь, на сайтах курсивом и жирным делают текст несколько реже, чем просто жирным или просто курсивом.

Наслоение стилей...

Fri, 13 Mar 2009 23:08:00 GMT

Существует довольно интересная и вместе с тем, редко используемая особенность каскадных таблиц стилей.

Бывалые веб-верстальщики, знают, что если в свойстве class визуально отображаемого тега перечислить через пробел несколько названий классов, то они последовательно будут применены к этому тегу.

Приведу пример. Вот стили:

.class1 { width:100px;height:20px }
.class2 { background:red }

А вот html-код:

<div class="class1 class2"> </div>

У блока div будет ширина 100px, высота 20px и фон красного цвета.

Почему-то эта особенность используется обычно в разных css-фрейворках, а в обычных сайтах встретить ее почти невозможно.

Решение проблем с Internet Explorer

Tue, 10 Mar 2009 09:44:42 GMT

Общеизвестен способ подключения стилей только для IE6 или IE7.


<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="/css/ie6.css"/><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="/css/ie7.css"/><![endif]-->

Однако использования этого хоть и общеупотребимого хака можно избежать грамотно строя верстку страницы. Например, можно взять для себя за стандарт использовать при верстке только режим HTML strict. В него можно переключить браузер использовав директиву


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

После некоторой тренировки жизнь без этой директивы кажется невозможной, а необходимость использования стилей CSS, специфичных для разных версий IE отпадает. Поверьте это возможно.

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

Первая запись про CSS

Sun, 08 Mar 2009 22:26:29 GMT

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

В данном случае, под CSS подразумеваются каскадные таблицы стилей.