5 секретных свойств CSS3 — секретные свойства CSS3

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 редко используемых свойств.

Успехов!

С Уважением, Юрий Немец