Секретные свойства CSS3

CSS3 делает веб-дизайн более захватывающим, вводя новые свойства. Возможно вы знаете самые популярные и часто используемые свойства, такие как border-radius, box-shadow и transform, но есть еще много свойств, о которых, возможно, где-то слышали, но хотелось бы узнать подробнее. Консорциум W3C постоянно работает над новыми свойствами CSS, чтобы сделать веб еще лучше для дизайнеров, разработчиков и простых пользователей. Итак, давайте посмотрим что это за 10 свойств!

1. Tab Size

Сейчас речь пойдет о коде (CSS, HTML, PHP и т.д.). При редактировании информации в каком-либо редакторе, для того чтобы она выглядела в удобочитаемом виде, ее форматируют с помощью табов. Табы ставятся с помощью клавиши Tab на клавиатуре. Вот как это выглядит в редакторе Notepad++:

Но как рассматриваемое свойство tab-size связано с табами? А если мы захотим вывести с помощью тегов <pre> </pre> в браузере сохранив форматирование как в редакторе:

В браузере это отобразится следующим образом:

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

pre {  
    tab-size: 2;  
}

С помощью данного свойства мы можем регулировать данное расстояние.

2. Text Rendering

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

3. Font Stretch

Некоторые шрифты можно сделать жирным, курсивом или он может находится в обычном состоянии. Но, к примеру, шрифты Helvetica Neue или Myriad Pro могут быть в сжатом виде или ‘Condensed‘, также бывают ‘Ultra-condensed‘ и ‘Semi-condensed’. Вот здесь мы и применим данное свойство. Вот результат:

4. Text Overflow

С помощью свойства text-overflow можно обрезать текст, который выходит за рамки контейнера:

А вот пример кода:

p {
    width: 360px; /* ширина контейнера */
    text-overflow: ellipsis; /* вставляем троеточие */
    white-space: nowrap; /* запрещаем перенос строк */
    overflow: hidden; /* обрезаем всё, что выходит за рамки контейнера */
}

5. Режим письма

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

Пример кода для режима письма справа налево:

p {  
    writing-mode: rl-tb;  
}

6. Pointer Events

Начнём мы со свойства pointer-events. Оно было введено для SVG, но затем его перенесли в спецификацию CSS4 (да, это не опечатка, именно туда его и перенесли). Чтобы разобраться в чем суть данного свойства представим такую ситуацию «один элемент на странице расположен поверх другого, но мы хотим сделать так, чтобы нижний реагировал на указатель мыши, то есть был кликабельным и при наведении менял цвет». В этом случае необходимо использовать данное свойство.

Но мы рассмотрим более стандартный пример, который Вы сможете прямо сейчас применить на собственном сайте. Ситуация следующая: у нас есть меню на сайте, и мы хотим сделать чтобы при активном пункте меню не был кликабельным и не менял цвет при наведении курсора мыши.

Что нам для этого нужно?

1. У каждого активного элемента меню задать класс active (как правило, в любой теме WordPress, Joomla, DLE и так далее, этот класс задан у элементов меню по умолчанию).
2. Открыть файл стилей и добавить для ссылок меню a.current следующее свойство:

   a.current {
           /* ... здесь основные стили для этого класс ... */
           pointer-events: none;
       }
   

    

   7. Image Orientation

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

img {  
    image-orientation: flip;      
}

А здесь мы поворачиваем изображение на 90 градусов по часовой:

img {  
    image-orientation: 90deg;  
}

Ну и конечно же, реальный пример:

8. Image Rendering

Подобно тому, как свойство text-rendering (рассматривалось в прошлой статье) влияет на шрифты, так данное свойство image-rendering влияет на качество изображений на странице. С введением данного свойства у каждого браузера появились свои значения. Вот какие значения нужны для соответствующих браузеров:

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

9. Columns

Свойство columns позволяет разработчикам разбить текст на странице в несколько колонок. К примеру мы хотим разбить текст в блоке <div> с классом content в две колонки, для этого в CSS необходимо написать:

.content {  
    columns: 2;  
}

Вот как это будет отображаться в браузере:

10. Flex

С помощью свойства flex можно сделать адаптивную сетку на сайте, без использования свойства float.

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

К примеру возьмем следующую структуру из 3-х колонок:

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

И применим следующие свойства:

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

Вот что мы получим в итоге:

Источник