Переведите свою работу на новый уровень CSS3

Перевод статьи (2 часть) Inayaili de León “Take Your Design To The Next Level With CSS3“, в которой рассматриваются оставшиеся CSS-3 свойства, и примеры их использования.

Первая часть статьи

7. @font-face-Атрибут

Несмотря на то, что @font-face одно из самых ожидаемых свойств в CSS3 (хотя оно присутствует и в CSS2), оно далеко не самое распространенное CSS3-свойство. Это объясняется лицензированием шрифтов и авторскими правами: встроенные шрифты можно легко скачать из интернета, что является серьезной проблемой для создателей шрифтов.

Тем не менее, решение проблемы лицензирования уже в пути. TypeKit обещает разработать решение, которое позволит дизайнерам и разработчикам шрифтов прийти к лицензионному соглашению, которое в значительной мере обогатит типографику  в web-дизайне, и позволит использовать @font-face атрибут на практике.

Один из нескольких сайтов, использующих @font-face, это JetPack MozillaLabs.

@font-face{
    font-family: 'DroidSans';
    src: url('../fonts/DroidSans.ttf') format('truetype');
    }

Для того чтобы использовать встроенные шрифты на сайтах, вы должны объявить каждый стиль отдельно (например, normal, bold или italic). Убедитесь что используете только те шрифты, лицензия которых позволяет использовать их в интернете, и поставьте копирайт дизайнера, в случае необходимости.

После @font-face правила, вы можете вызвать шрифт с помощью обычного свойства font-family в css-файле:

p {
    font-family: "DroidSans";
    }

Если браузер не поддерживает @font-face, он вернет следующий шрифт, указанный в свойстве font-family. Это может быть нормально для некоторых сайтов, если шрифт из @font-face просто дополнительный элемент роскоши для поддерживаемых браузеров; но если шрифт играет важную роль в дизайне или ключевая часть визуального облика компании, вы, возможно, захотите использовать другое решение, такое как sIFR или Cufon. Только помните, что эти инструменты больше подходят для заголовков и небольших абзацев текста, к тому же копи-паст такого контента трудный и не удобный для пользователей.

Поддержка браузерами: @font-face поддерживается Safari 3.1+. Internet Explorer поддерживает, если используются EOT шрифты. Opera 10 и Firefox 3.5 тоже должны поддерживать.

8. Border Radius

Border-radius добавляет скругленные углы к HTML-элементам, без использования фоновых картинок. На сегодняшний день это самое широко используемое CSS3-свойство, по причине того, что закругленные углы создают приятный вид, и не имеют решающего значения для разработки и использования.

Вместо добавления JavaScript или излишнюю HTML-разметку, просто добавьте несколько дополнительных свойств в CSS и надейтесь на лучшее. Это решение является более чистым и эффективным, а также поможет сэкономить время на поиски хитрого решения по скруглению уголков с помощью JavaScript и CSS-хаков.

На своем сайте Sam Brown использует свойство border-radius в заголовках, ссылках и div-ах. Достижение такого же эффекта с помощью изображений, заняло бы слишком много времени. Это один из резонов, почему использование CSS3-свойств в наших проектах настолько важный шаг, на пути к эффективной разработке веб-приложений.

Чтобы добавить скругленные углы к ссылкам рубрик, Сэм использует следующий CSS сниппет:

h2 span {
    color: #1a1a1a;
    padding: .5em;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    }

Мы можем пойти на один шаг вперед, и добавить оригинальное CSS3-свойство и проприетарное расширение для Konqueror:

h2 span {
    color: #1a1a1a;
    padding: .5em;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
    }

Если мы хотим применить свойство к конкретным углам нашего элемента, можно назначить каждый угол отдельно:

div {
    -moz-border-radius-topright: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-top-right-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    }

Поддержка браузерами: border-radius поддерживается Webkit- и Gecko-браузерами, но ни одной из версий Internet Explorer или Opera.

9. Border Image

Свойство border-image позволяет вам назначить изображение в качестве рамки элемента, освобождая вас от использования solid, dotted и других стилей рамки. Это свойство дает дизайнерам лучший инструмент для стилизации рамок или дизайна элементов, лучше, чем свойство background-image (для сложных дизайнов) или жесткие обычные стили рамок. Мы также можем назначить, каким образом рамки будут растянуты или замощены.

В блоге SpoonGraphis, border-image используется в качестве рамок для изображений, следующим образом:

#content .post img {
    border: 6px solid #f2e6d1;
    -webkit-border-image: url(main-border.png) 6 repeat;
    -moz-border-image: url(main-border.png) 6 repeat;
    border-image: url(main-border.png) 6 repeat;
    }

Для описания свойства border-image мы должны указать расположение картинки, какая часть изображения должна быть обрезана и использована для каждой стороны элемента, и как изображение должно быть растянуто, или замощено.

Чтобы создать div, который использует изображение в качестве рамки, будем использовать следующий код (мы добавим расширения для Opera и Konqueror в этом примере):

div {
    border-width: 18px 25px 25px 18px;
    -webkit-border-image: url(example.png) 18 25 25 18 stretch stretch;
    -moz-border-image: url(example.png) 18 25 25 18 stretch stretch;
    -o-border-image: url(example.png) 18 25 25 18 stretch stretch;
    -khtml-border-image: url(example.png) 18 25 25 18 stretch stretch;
    border-image: url(example.png) 18 25 25 18 stretch stretch;
    }

Последнее значение этого свойства может быть stretch (по умолчанию), round (допускается только целое число повторных изображений в свободном пространстве) или repeat. В нашем примере изображение  верхней, нижней, левой и правой рамки растянуто (stretched).  Если нам нужно растянуть только верхнюю и нижнюю стороны, мы должны использовать следующий CSS:

div {
    (...)
    border-image: url(example.png) 18 25 25 18 stretch repeat;
    }

Мы также можем назначить отдельно каждый угол, если для каждого из них нужно использовать разные изображения:

div {
    border-top-image: url(example.png) 5 5 stretch;
    border-right-image: url(example.png) 5 5 stretch;
    border-bottom-image: url(example.png) 5 5 stretch;
    border-left-image: url(example.png) 5 5 stretch;
    border-top-left-image: url(example.png) 5 5 stretch;
    border-top-right-image: url(example.png) 5 5 stretch;
    border-bottom-left-image: url(example.png) 5 5 stretch;
    border-bottom-right-image: url(example.png) 5 5 stretch;
    }

Если браузер не поддерживает свойство border-image, он его проигнорирует и применит только различные описанные свойства рамок, таких как border-width и border-color.

Поддержка браузеров: border-image пока что поддерживается только Webkit-браузерами. Поддержка в следующих версиях Firefox не гарантирована.

10. Box Shadow

Свойство box-shadow добавляет тени к HTML-элементам без дополнительной разметки или фоновых изображений. Подобно свойство text-shadow, оно увеличивает детализацию дизайна, а так как оно реально не влияет на читаемость содержимого, то это хороший способ добавить дополнительный эффект.

10to1 добавляет простые тени к навигации сайта и использует свойство для эффекта наведения на ссылках меню:

#navigation {
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    }
    #navigation li a:hover,
    #navigation li a:focus {
    -webkit-box-shadow: 0 0 5px #111;
    -moz-box-shadow: 0 0 5px #111;
    }

Свойство box-shadow может принимать множественные значения: горизонтальное смещение, вертикальное смещение, радиус размытия, радиус действия и цвет тени. Наиболее часто используются горизонтальное и вертикальное смещение, а также цвет тени.

Чтобы применить красную тень, расположенную на 4 пикселя справа и вниз для div-а, без размытия, нам понадобится следующий код:

div {
    -moz-box-shadow: 4px 4px 0 #f00;
    -webkit-box-shadow: 4px 4px 0 #f00;
    box-shadow: 4px 4px 0 #f00;
    }

Поддержка браузерами: box-shadow сейчас поддерживается только Webkit-браузерами, но будущая версия Firefox 3.5 вероятно будет поддерживать.

11. Box Sizing

Согласно спецификации CSS 2.1, когда рассчитывается размеры бокса, рамки и отступы элемента должны быть добавлены к ширине и высоте. Но старые браузеры известны интерпретацией этой спецификации весьма творческим способом. Свойство box-sizing позволяет вам указать как браузер будет рассчитывать высоту и ширину элемента.

Админка в WordPress демонстрирует это свойство во всех input-тэгах текстового типа, а также в тэгах textarea (наряду с другими элементами):

input[type="text"],
    textarea {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    }

Третье свойство (-ms-box-sizing) работает только в Internet Explorer 8. Что касается других селекторов, WordPress добавляет в свой CSS-файл расширение для Konqueror: -khtml-box-sizing.

Свойство box-sizing может принимать два значения: border-box и content-box. Content-box возвращает ширину бокса по правилам спецификации CSS 2.1. Border-box вычитает внутренние отступы и рамки из указанной ширины и высоты (как делают более старые браузеры).

Поддержка браузерами: box-sizing поддерживается IE8, Opera, Gecko и Webkit-браузерами.

12. Media Queries

Media Queries позволяет вам описать различные стили для разных устройств, основываясь на их возможностях. Например вы хотите расположить сайдбар под основным контентом, если сайт просматривается на устройствах с экраном не более 480 пикселей, в этом случае сайдбар не должен быть плавающим, и отображаться на правой стороне:

#sidebar {
    float: right;
    display: inline; /* IE Double-Margin Bugfix */
    }  

@media all and (max-width:480px) {
    #sidebar {
        float: none;
        clear: both;
        }
    }

Вы также можете назначить устройства с цветными экранами:

a {
    color: grey;
    }  

@media screen and (color) {
    a {
        color: red;
        }
    }

Возможности неограниченны. Это свойство очень удобно, потому, что вам больше не понадобится заводить отдельные CSS-файлы для различных устройств, и не нужно использовать JavaScript для определения возможностей и свойств каждого пользовательского браузера. Более популярное JavaScript решение для получения резиновой раскладки будет использовано в адаптивном тянущемся макете, позволяющим сделать раскладку более чувствительной к разрешению пользовательских браузеров.

Поддержка браузерами: Media queries поддерживается Webkit-браузерами и Opera. Firefox планирует поддерживать его в версии 3.5. Internet Explorer пока не поддерживает и не планирует начать поддержку в будущих версиях.

13. Speech

Модуль речи в CSS3 позволяет вам назначить стиль речи для голосовых модулей браузера. Вы можете управлять различными аспектами речи, такими как:

• voice-volume
  Установите громкость используя числа от 0 до 100 (0 означает тишину), проценты или ключевые слова (silent, x-soft, soft, medium, loud и x-loud).
• voice-balance
  Следит за тем, из какого канала приходит звук (если аудиосистема пользователя поддерживает стерео).
• Речь
  Проинструктируйте голосовой модуль как расшифровать редкие слова, цифры или знаки препинания. Доступные ключевые слова: none, normal, spell-out, digits, literal—punctuation, no-punctuation и inherit.
• Паузы и перерывы
  Установите паузу или перерыв до или после прочтенного содержания элемента. Вы можете использовать любые единицы времени (например «2s» для двух секунд) или ключевые слова (none, x-weak, weak, medium, strong и x-strong).
• Подсказки
  Используйте звуки для разграничения отдельных элементов, и управления уровнем звука.
• voice-family
  Установить определенные типы голосов и голосовые комбинации (так же как со шрифтами).
• voice-rate
  Управление скоростью, с которой озвучиваются элементы. Может быть установлено в процентах или ключевых словах: x-slow, slow, medium, fast и  x-fast.
• voice-stress
  Определите любой акцент, который должен быть применен, используя различные ключевые слова: none, moderate, strong и reduced.

Например, чтобы задать голосовому модулю прочтение всех h2-тэгов  женским голосом, из левой колонки, мягким тоном и после определенного звука, задайте следующие CSS-стили:

h2 {
    voice-family: female;
    voice-balance: left;
    voice-volume: soft;
    cue-after: url(sound.au);
    }

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

Поддержка браузерами:  На сегодняшний день только Opera для Windows XP и 2000 поддерживает некоторые свойства речевых модулей. Чтобы использовать их, установите префикс –xv-; например, -xv-voice-balance: right.

Заключение

CSS3-свойства могут значительно улучшить вашу работу, выполнить некоторые, занимающие большое количество времени, задачи лучше, вычистить и значительно облегчить разметку. Некоторые свойства все еще не имеют широкой поддержки, даже у большинства популярных браузеров, но это не значит, что нам нельзя экспериментировать с ними, или позволить пользователям, с современными браузерами, ощутить продвинутые возможности CSS3-стилизации.

В связи с этим, следует иметь в виду, что образование наших клиентов одновременно является полезным и необходимым: сайты не должны смотреться одинаково во всех браузерах, и если разница не сказывается негативно на эстетике и удобстве сайта, он будет востребован. Если мы будем продолжать терять драгоценное время и деньги, вымеряя каждый пиксель (вместо принятия более гибких и ориентированных на будущее решений), пользователи не почувствуют необходимости в замене браузера, и мы еще долго будем ждать пока старые браузеры выйдут из обращения, а современные новые браузеры станут стандартом.

Чем раньше мы начнем экспериментировать с новыми CSS3-свойствами, тем раньше браузеры начнут их поддерживать, и тем быстрее мы сможем использовать их в полную мощь.