БЛОГ

10 свойств CSS3, о которых вы должны знать

Dec 06, 2014

Перевод статьи «10 Hidden CSS3 Properties You Should Know».

Введение новых свойств CSS3 сделало проектирование веб-интерфейсов более захватывающим. Вы наверняка знаете такие популярные свойства, как box-shadow, border-radius и transform, но есть еще множество, о которых вы возможно не слышали, но было бы приятно узнать об их существовании.

W3C постоянно работает над новыми свойствами CSS, чтобы сделать веб лучше и удобнее для дизайнеров, разработчиков и пользователей. А пока давайте посмотрим на 10 свойств, о которых вы можете не знать, но должны их проверить в действии.

1. tab-size

Большинство редакторов кода оснащены настройками размера табуляции (Tab Size), которые позволяют разработчикам указывать ширину отступа, получаемого нажатием клавиши Tab. И лишь с недавних пор мы можем также настраивать отступ кода, встроенного в веб-страницы.

pre { 
  tab-size: 2; 
}

Обратите внимание, что каждый браузер может по-своему интерпретировать, какой длины должна быть одна часть табуляции. Так что мы можем ожидать некоторые расхождения в отображении верстки в разных браузерах.

tab-size

2. text-rendering

Свойство text-rendering говорит браузеру, каким образом он должен отображать шрифт на веб-странице. Текст может быть оптимизирован по производительности, читабельности или геометрической точности, которые в конечном счете и определяют его качество. Присмотритесь к кернингу текста на скриншоте ниже, сравните «нормальное» отображение и со свойтвом text-rendering:optimizedLegibility.

text-rendering

Изображение взято из статьи Cross-browser kerning-pairs & ligatures.

3. font-stretch

Некоторые шрифты имеют дополнительные написания, помимо обычных Normal, Bold и Italic. Например, Helvetica Neue или Myriad Pro могут быть Condensed, Ultra-condensed и Semi-condensed. Здесь и можно воспользоваться новым свойством font-stretch, оно позволит применить эти написания.

normal-condensed

Мы можем использовать font-stretch в сочетании с другими шрифтовыми свойствами, например, font-style.

h1 { 
  font-style: bold; 
  font-stretch: ; 
}

В настоящее время свойство font-stretch поддерживается только Firefox и IE9+.

4. text-overflow

Свойство text-overflow определяет представление контента, когда он не помещается в свой контейнер. Значением по умолчанию является clip, которое просто обрезает лишний текст. Также свойству можно установить значение ellipsis, в этом случае в конце будет добавлено многоточие.

.content-box { 
  text-overflow: ellipsis;
}

text-overflow

5. writing-mode

Не во всех языках направление письма слева направо. В некоторых пишут сверху вниз, как в японском, в других справа налево, как в арабском или на иврите.

writing-mode

В целях реализации этих языков вводится новое свойство writing-mode, чтобы разработчики могли менять направление написания содержимого через CSS. Пример ниже направляет поток контента слева направо (независимо от языка)

p { 
  writing-mode: rl-tb; 
}

Чтобы изменить направление контент на «сверху вниз», нужно указать у свойства значение vertical-lr.

p { 
  writing-mode: vertical-lr; 
}

6. pointer-events

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

a { 
  pointer-events: none; 
}

Однако из-за некоторых критических вопросов свойство pointer-events ожидает следующей версии CSS — CSS4.

7. image-orientation

В графических редакторах типа Photoshop вы можете изменять ориентацию изображения, вращая или переворачивая его. CSS3 позволяет делать тоже самое с изображением на веб-странице с помощью нового свойства image-rotation. Ниже пример, как можно перевернуть изображение горизонтально относительно вертикальной оси с помощью этого свойства.

img { 
  image-orientation: flip; 
}

Также можно сохранить ориентацию оригинала, указав в качестве значения свойства from-image, таким образом

img { 
  image-orientation: from-image; 
}

8. image-rendering

Как и text-rendering, свойство image-rendering определяет качество отображения картинки на веб-странице, в частности, когда у изображения насильно изменяются размеры. С появлением этого свойства появился и ряд новых значений, и каждый браузер имеет свои спецификации в этом вопросе. Например, значение crisp-edges, которое сохраняет контраст и предотвращает размытие краев изображения, для Webkit-а обозначается как -webkit-optimize-contrast, а для IE — nearest-neighbor.

img { 
  image-rendering: crisp-edges; 
  image-rendering: -webkit-optimize-contrast;/* Webkit */ 
  -ms-interpolation-mode: nearest-neighbor; /* IE */ 
}

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

9. columns

Свойство columns позволяет разработчикам с легкостью разбивать контент на колонки. Так мы разбили содержимое на две колонки:

.content { 
  columns: 2; 
}

В браузерах, поддерживающих это свойство — Chrome и Safari — получим такую картину

columns

В сочетании с CSS Shape и каплей креативности вы можете получить «текучее» и более соблазнительное размещение контента на вашем сайте, больше похожее на то, что можно увидеть в журнале мод.

10. flex

Свойство flex стремится сделать построение адаптивной сетки более гладкой, одновременно решая некоторые вопросы основного текущего метода организации веб-страниц — с помощью свойства float.

Кроме того при использовании свойства flex элементы будут полностью заполнять по высоте свой контейнер, что ранее решалось довольно громоздкими способами.

Теперь, если вам нужно будет создать страницу с тремя колонками, вы сможете использовать следующую разметку

<div id="container"> 
  <div class="col">Column 1</div> 
  <div class="col">Column 2</div> 
  <div class="col">Column 3</div> 
</div>

А затем сделать из блоков колонки с помощью свойства flex таким образом

#container { 
  width: 600px; 
  height: 300px; 
  display: flex; 
} 
#container .col { 
  flex: auto; 
}

После добавления декоративных стилей, таких как font и background-color, мы получим следующий результат

flex

Контактная информация