Лого www.SiteHere.ru

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

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

Еще статьи на тему CSS3:

Кстати, свои знания CSS3 вы можете проверить здесь, пройдя небольшой тест:

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

1. Tab Size

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

Свойство Tab-size

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

Вывод в браузере tab-size

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

Как выглядит Tab в браузерах

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

1
2
3
pre {  
    tab-size: 2;  
}

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

2. Text Rendering

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

Text rendering

3. Font Stretch

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

Text-stretch

4. Text Overflow

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

 

Успехов!

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

5 секретных свойств CSS3 — секретные свойства CSS3 5.00/5 (100.00%) 2 голос(ов)

Понравилась статья - расскажи друзьям! :)

5 комментариев к записи
  • sbm

    ага вы пробывали смотреть поддержку свойств на http://caniuse.com/

    tab-size: Global 73.05% unprefixed: 57.41%. по таблице поддерживают только последние версии софта.

    writing-mode поддерживается исключительно IE

    text-rendering — IE не поддерживает.

    Font Stretch — тут штуки 2 подхода точно есть чтоб играться с написание шрифтов.

     
  • Павел

    Статья очень полезна. Особенно такому новичку, как я. СSS3 намного легче в использовании, чем его предшественники? И ещё один вопрос: если код частично написан на предыдущих версиях CSS, и некоторые строчки написаны на CSS3 нужно ли исправлять полностью весь CSS код на CSS3?
    Заранее спасибо за ответ!

     
    • Юрий

      Здравствуйте, Павел!
      CSS3 позволяет делать очень многие вещи (к примеру вот — перейти) не прибегая к Javascript, что проще для новичков! Если код написан на CSS 2.1 — нет необходимости его переписывать, его лишь можно дописывать, добавляя новые свойства CSS3.

       
  • Александр

    К теме 4. Text Overflow.
    С одностроковым текстом все понятно. 
    Парой сталкиваешься с ситуацией, когда необходимо задать определенную высоту для текста, у которого в конце должно стоять троеточие. Естественно в такой ситуации text-overflow: ellipsis применить не получается.
    Вы можете подсказать как реализовать троеточие  в конце многострочного текста средствами css или js.

     

     
    • Юрий Немец

      Добрый день, Александр!

      Проще всего это сделать с помощью библиотеки clamp.js — перейти на GitHub.

       

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *