proglib
Сообщение

Почему специалистом по кибербезопасности быть интереснее, чем разработчиком или сисадмином? Приглашаем на вебинар от HackerU

Почему специалистом по кибербезопасности быть интереснее, чем разработчиком или сисадмином? Приглашаем на вебинар от HackerU

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

0
14109

Даже если вы точно знаете, что изучили все возможности CSS, взгляните на эту статью: некоторые секреты 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

Вот список селекторов (для 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 сделают работу с каскадными таблицами стилей более комфортной. Удачи!

РУБРИКИ В СТАТЬЕ

МЕРОПРИЯТИЯ

Комментарии 0

ВАКАНСИИ

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ

BUG