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

8
10845
Добавить в избранное

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

возможности CSS

1. CSS-спрайты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS

HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

До:

После:

До:

После:

До:

После:

До:

После:

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

Интересуетесь фронтендом?

Подпишитесь на нашу рассылку, чтобы получать больше интересных материалов:

И не беспокойтесь, мы тоже не любим спам. Отписаться можно в любое время.




Комментариев: 8

  1. «Скрытые возможности», извечные всем.
    Уровень полезности статьи стремится к нулю.

  2. list-style-type: circle;
    list-style-position: outside;
    Не, так серьезно кто-то пишет?

  3. IE6? Пост из прошлого?)

Добавить комментарий