CSS3 делает веб-дизайн более захватывающим, вводя новые свойства. Возможно вы знаете самые популярные и часто используемые свойства, такие как border-radius, box-shadow и transform, но есть еще много свойств, о которых, возможно, где-то слышали, но хотелось бы узнать подробнее. Консорциум W3C постоянно работает над новыми свойствами CSS, чтобы сделать веб еще лучше для дизайнеров, разработчиков и простых пользователей. Итак, давайте посмотрим что это за 10 свойств!
Еще статьи на тему CSS3:
- Подводные камни CSS и как с ними бороться
- CSSMatic — автоматизированный сервис для веб-дизайнеров
- Загинаем угол на CSS3
Кстати, свои знания CSS3 вы можете проверить здесь, пройдя небольшой тест:
- Тест CSS3. Cтандарт оформления HTML документов
5 секретных свойств CSS3
1. Tab Size
Сейчас речь пойдет о коде (CSS, HTML, PHP и т.д.). При редактировании информации в каком-либо редакторе, для того чтобы она выглядела в удобочитаемом виде, ее форматируют с помощью табов. Табы ставятся с помощью клавиши Tab на клавиатуре. Вот как это выглядит в редакторе Notepad++:
Но как рассматриваемое свойство tab-size связано с табами? А если мы захотим вывести с помощью тегов <,pre>, <,/pre>, в браузере сохранив форматирование как в редакторе:
В браузере это отобразится следующим образом:
Как видите в разных браузерах данный отступы отображаются по-разному. Поэтому мы будем применять следующее свойство:
| 1 2 3 | 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 можно обрезать текст, который выходит за рамки контейнера:
А вот пример кода:
| 1 2 3 4 5 6 | p width: 360px, /* ширина контейнера */ text-overflow: ellipsis, /* вставляем троеточие */ white-space: nowrap, /* запрещаем перенос строк */ overflow: hidden, /* обрезаем всё, что выходит за рамки контейнера */ |
5. Режим письма
Не во всех языках направление письма идет слева направо. В некоторых языках направление письма идет сверху вниз (например, японский), или справа налево (например, арабский или иврит):
Пример кода для режима письма справа налево:
| 1 2 3 | p writing-mode: rl-tb, |
Вывод
Это первая часть статьи, где мы рассмотрели 5 секретных свойств, которые вы можете применять на собственном сайте чтобы изменить какие-либо мелочи, а ведь из мелочей формируется общая картина сайта.
Во второй части статьи вы узнаете еще 5 редко используемых свойств.
Успехов!
С Уважением, Юрий Немец