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 (да, это не опечатка, именно туда его и перенесли). Чтобы разобраться в чем суть данного свойства представим такую ситуацию «один элемент на странице расположен поверх другого, но мы хотим сделать так, чтобы нижний реагировал на указатель мыши, то есть был кликабельным и при наведении менял цвет». В этом случае необходимо использовать данное свойство.
Но мы рассмотрим более стандартный пример, который Вы сможете прямо сейчас применить на собственном сайте. Ситуация следующая: у нас есть меню на сайте, и мы хотим сделать чтобы при активном пункте меню не был кликабельным и не менял цвет при наведении курсора мыши.
Что нам для этого нужно?
- У каждого активного элемента меню задать класс active (как правило, в любой теме WordPress, Joomla, DLE и так далее, этот класс задан у элементов меню по умолчанию).
- Открыть файл стилей и добавить для ссылок меню 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;
}
Вот что мы получим в итоге:
