Скрытые возможности CSS: 10 полезных советов

Даже если вы точно знаете, что изучили все возможности CSS, взгляните на эту статью: некоторые секреты CSS могут стать для вас открытием.

1. CSS-спрайты

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

.icon {
  width: 16px;
  height: 16px;
  float: left;
  background: url(icons.gif) no-repeat;
}

.open .icon {
  background-position: 0 -16px; /* вверх на 16px */
  cursor: pointer;
}

.closed .icon {
  background-position: 0 0px; /* по умолчанию */
  cursor: pointer;
}

.leaf .icon {
  background-position: 0 -32px; /* вверх на 32px */
  cursor: text;
}

CSS-спрайты ускоряют загрузку и работу сайта.

2. Несколько к одному

Применение нескольких стилей/классов к элементу: class="bold red GoldBg"

Foo.Bar(red)

Если у нескольких классов прописаны конфликтующие свойства (например, если бы .red и .GoldBg отвечали за свойство color), тогда применяются правила CSS-специфики. Порядок классов в атрибуте class = "..." не имеет значения. И не забудьте, что IE6 не поддерживает такую возможность, а потому будет применять только последний указанный класс.

3. Отображение title

Вы можете отобразить элемент заголовка документа:

head, title {
    display: block;
}

4. Некоторые простые возможности CSS

Вряд ли это относится к по-настоящему скрытым возможностям, но новички могут не знать:

@charset "UTF-8"; /* первая строка в обязательном порядке устанавливает набор символов */

.element {
        /* имеет преимущество перед другими стилями */
        display: block !important;

        /* mozilla .... закругленные углы без изображений */
        -moz-border-radius: 10px; 

        /* эквивалент webkit */
        -webkit-border-radius: 10px 
}

5. Улучшенный контроль

Вы можете установить ширину переменной для абсолютно позиционированного элемента, указав оба свойства left и right. Это даст вам больше контроля, чем просто установка ширины в процентах:

#myElement {
    position: absolute;
    left: 5px;
    right: 10px;
}

Альтернативный пример:

#myElement{ /* заполнить все пространство :) */
   background: red;
   position:absolute;
   left: 0;
   right:0;
   top: 0;
   bottom: 0;
}

6. Селектор дочерних элементов

На самом деле, это не особенность, но все равно полезная вещь: селектор «потомков» работает во всех браузерах, кроме IE6, что позволяет изолировать IE6 без использования хаков, условных таблиц стилей или т. д. Таким образом, ссылка в следующем коде будет красной в IE6 и синей в любом другом браузере.

CSS

/* Красный для IE6 */
.link {color:#F00;}
/* Синий для всего остального */
#content>.link {color:#00F;}

HTML

    Link

Вот список селекторов (для CSS2) и диаграммы совместимости браузеров.

7. Скроллбар без фрейма

Возможности CSS ориентированы на удобство написания, и этот способ – тому подтверждение. Вы можете создавать области прокрутки без использования фреймов. Делается это так:

div.foo {
    border:   1px solid;
    width:    300px;
    height:   300px;
    overflow: auto;
}

overflow: auto: если содержимое не может быть помещено в div, горизонтальные и/или вертикальные полосы прокрутки появятся по мере необходимости.

overflow: scroll: всегда будут видны обе полосы прокрутки. Если вы хотите, чтобы была только одна полоса, используйте overflow-x или overflow-y, которые поддерживаются современными браузерами, в том числе IE6.

Предупреждение! Некоторые пользователи утверждают, что iPad и iPhone не поддерживают данный трюк: не отображается полоса прокрутки, и просто обрезается контент. Другие же говорят, что в iOS (точнее, в мобильном браузере Safari) все отображается нормально. Тестируйте!

8. Псевдоэлементы :before и :after

Следующий пример вызывает создание строки «Chapter: » перед каждым элементом H1:

H1:before { 
  content: "Chapter: ";
  display: inline;
}

Подробнее об этом рассказывается здесь.

9. Прозрачный PNG в IE6

Этот прием фиксирует прозрачность PNG в браузере IE6. Установите для бэкграунда none и включите изображение в фильтр. Нет необходимости в JavaScript:

.whatever {
   background: none; /* Скрыть текущее фоновое изображение, чтобы вы могли заменить его на фильтр */
   width: 500px; /* Необходимо указать ширину */
   height: 176px; /* Необходимо указать высоту */
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='vehicles.png');
}

10. Чистый СSS код

Каждый разработчик хочет видеть в своем коде только необходимое. Небольшие советы по его «очистке» подойдут новичкам.

До:

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif

После:

font: 1em/1.5em bold italic serif;

До:

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

После:

background: #fff url(image.gif) no-repeat top left;

До:

list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)

После:

list-style: disc outside url(something.gif);

До:

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px

После:

margin:2px 1px 3px 4px; /*также работает для padding*/
margin:0;
margin:2px 3px 5px;

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