Давайте посмотрим правде в глаза. Mozilla производит настолько много альф, ночных сборок, релизов для разработчиков, что если Вы так и не обратили внимания на выпущенную недавно версию — Firefox 3.6 alpha — то Вас можно вполне понять.
Хотя, на сей раз основания были очень даже веские, чтобы сосредоточить внимание гиков. Поскольку, среди прочих положительных нововедений, внесенные изменения предусматривают:
- свойство -moz-background-size
- множественные фоновые изображения
- новую единицу длины rem
- CSS градиенты
- улучшенное представление display: table
Теперь давайте сделаем важное замечание для прояснения ситуации — это все еще альфа-релиз (alpha release), который пока будут использовать только малейший процент от пользовательской базы Firefox. Тем не менее, у нас есть все шансы увидеть эти изменения в стабильной версии Firefox в конце года.
Множественные фоновые изображения
Не смотря на то, что поднялась шумиха, когда Mozilla впервые представила -moz-border-radius — позволяющий вам простым свойством CSS сделать закругленные углы — я лично не пришел в восторг от него.
Напротив, меня всегда потрясала возможность, которую сулила концепция множественности фоновых изображений — выполняемая посредством нескольких просто грандиозных трюков над макетом без какого-либо упорствования в изощренной разметке.
Базовый синтаксис очень прост. Вместо указания лишь одного изображения в свойстве background-image, Вы перечисляете вплоть до четырех, разделенных запятыми, изображений.
Также Вы можете указать до четырех соответствующих значений для background-repeat и background-position:
#multi {background-image:url(paper.png), url(paper2.jpg);
background-repeat: no-repeat, no-repeat;
background-position: top left, bottom right;
}
Я должен сказать, что обнаружил несколько неестественный порядок сортировки. Второе по перечислению изображение отображается под первым, и так далее. Но как только Вы это прочувствуете и запомните, проблемы не будет.
Чтож, какие браузеры действительно поддерживают это свойство?
На данный момент, множественные фоновые изображения полностью поддерживаются лишь Safari 4.0, Chrome 3.0, и Firefox 3.6 alpha (Minefield). Вы можете посмотреть мой пример в действии, если перейдете в одном из перечисленных браузеров по этому URL:
http://www.sitepoint.com/examples/css3/multi.html
Хорошо, а стоит ли уже сейчас использовать это свойство?
Одной из первых проблем, с которыми я столкнулся проверяя отображение кода в разных браузерах, было то, что они отказываются брать лишь первое в списке изображение, игнорируя остальные. Запятой достаточно, чтобы убить целую декларацию в этих браузерах, оставляя бэкграунд пустым.
Тем не менее, я обнаружил, что если Вы прежде объявите фоновое изображение согласно всем стандартам, то Опера, старые версии Firefox и Safari просто легко игнорируют любые новейшие CSS-объявления, которые могут идти далее в коде.
То, что Internet Explorer отказывается подчиняться данному правилу — не проблема, поскольку мы вольны использовать комментарии с условием, чтобы заставить выполняться в IE простой, одно-картиночный код:
<!--[if IE]>
<style type="text/css">
#multi {background-image: url(old-paper2.jpg);
background-repeat: no-repeat;
background-position: top left;
}
</style>
<![endif]-->
В общем, я думаю что это свойство практичное и дающее результат даже сегодня, хотя Вам надо быть очень внимательными, чтобы использовать его изящно.
Обязательно убеждайтесь, что Ваш дизайн прекрасно работает со старыми браузерами (в конце концов, от этого хуже Вам не станет), но привнесет дополнительный роскошный лоск в Ваш дизайн во все увеличивающейся массе пользователей новых браузеров. Так что пришло время для экспериментов.
Задание размера бэкграунд-изображению
Как Вы можете предположить из заголовка, background-size позволяет Вам масштабировать изображение, добавленное с помощью CSS на бэкграунд.
В действительности, сейчас свойство background-size испытывает недостаток поддержки везде, кроме своего родного CSS3 формата, но Opera, Chrome/Safari, и Firefox 3.6 alpha поддерживают его, хотя и каждый со своей собственной разметкой.
Разметка выглядит следующим образом:
body {background-image: url(background_image.jpg);
background-size: 50% 50%; /* w3c спецификация */
-moz-background-size: 50% 50%; /* firefox css*/
-webkit-background-size: 50% 50%; /* safari/chrome */
-o-background-size: 50% 50%; /* opera css */
}
Если Вы используете один из этих браузеров, Вы можете увидеть этот код в действии здесь.
Итак, можем ли мы использовать его прямо сейчас?
Снова короткий ответ — да. Все равно такие узконаправленные декларации будут просто игнорироваться другими браузерами, поэтому нет никаких технических препятствий для использования данного свойства.
Лично для меня, кажется менее ясным — где именно я хотел бы применить данное свойство, поскольку немногие изображения подойдут для свободного масштабирования.
Итак, если Вы таки рискнете создать замечательный образец использования данного свойства, я бы желал посмотреть на Вашу работу.
CSS градиенты
Фоновые CSS градиенты — свойство, которое кажется мне наиболее жизнеспособным из нововведений, даже не смотря на то, что в данный момент оно поддерживается лишь в Firefox alpha, Safari 4, и Chrome 3.
Так же как и код свойства background-size, код фоновых градиентов тоже зависит от браузера, хотя каждая команда представляет скорее новое значение для стандарта background-image чем создание совершенно нового CSS свойства.
Проще всего, данное свойство выглядит так:
div#cssgradient2 {background-image: -moz-linear-gradient(top, bottom,from(#A1D004),to(#6B9A00));
background-image: -webkit-gradient(linear, left top, left bottom,color-stop(0.00, #A1D004),color-stop(1.00, #6B9A00));
}
Как Вы можете видеть выше, код для Mozilla (Firefox) и WebKit (Safari/Chrome) подобны но не идентичны. Оба требуют color-start и color-stop для Вашего градиента, так же как и координаты направления (top, left, right, bottom и т. д.).
Хотя оба и WebKit и Mozilla могут отображать как радиальные, так и линейные градиенты, они идут разными путями. Если Mozilla предпочитает использовать два различных значений свойства (такие как, -moz-linear-gradient() и -moz-radial-gradient()), то WebKit использует единственное значение, но с особым параметром (например, -webkit-gradient(radial,…))
Чтобы было еще проще, я создал тестовую страничку, где Вы можете все рассмотреть самостоятельно.
Поскольку CSS градиенты требуют минимум два цвета для отображения, оба метода предоставляют нам возможность использовать множество цветов для создания сложных градиентов на странице.
Так, синтаксис для создания радужного градиента будет следующий:
/* fallback */
background: #F66 url(rainbow-gradient.jpg);
/*mozilla gradient*/
background-image: -moz-linear-gradient(left, right,
from(red),
color-stop(16%, orange),
color-stop(32%, yellow),
color-stop(48%, green),
color-stop(60%, blue),
color-stop(76%, indigo),
to(violet));
/* webkit gradient */
background-image: -webkit-gradient(linear,
left top, left bottom,
color-stop(0.00, red),
color-stop(16%, orange),
color-stop(32%, yellow),
color-stop(48%, green),
color-stop(60%, blue),
color-stop(76%, indigo),
color-stop(1.00, violet));
Что интересно, так, это что IE тоже может отображать подобные простые градиенты (включая и радугу) используя свойство filter которое присутствовало еще со времен IE5.
Так, дружественный для IE код выглядит следующим образом:
filter: progid:DXImageTransform.Microsoft.gradient(
enabled='true',
startColorstr=#A1D004,
endColorstr=#6B9A00,
GradientType=0
);
Здесь есть две вещи, которые необходимо знать об этом коде.
Во-первых, хоть он и уродлив, но Вы можете видеть где установлены начальный и конечный цвета.
Во-вторых, верите или нет, но малоизвестный параметр GradientType фактически устанавливает направление Вашего градиента. Установите его в 0 для вертикального градиента и в 1 для горизонтального. Насколько я знаю, в IE невозможно задать диагональный градиент или промежуточные цвета.
Как мне представляется, существуют три преимущества в использовании CSS градиентов.
- В отличие от изображений, CSS градиенты масштабируются пропорционально элементу, содержащему их, позволяя расширяться и сжиматься соответственно поведению контента на странице.
- CSS градиенты очень эффективны, позволяя Вам генерировать большие, гибкие, структурированные площади необходимых тонов всего лишь с помощью нескольких строчек кода. Это значительно сказывается на скорости загрузки страницы для Ваших пользователей.
- Существует множество ситуаций когда изображения могут быть блокированы пользователем из соображений безопасности или по вопросам пропускной способности своего интернет-канала. CSS градиенты с большой вероятностью дадут Вам комплексные цвета, которые изображения не смогут Вам дать — например в Safari на iPhone.
Итак, можем ли мы использовать это свойство прямо сейчас?
Вновь повторю, настолько, насколько Вы сможете разумно его использовать, отвечу да.
Ясно, что новейшие версии Safari, Chrome, и Firefox будут хорошо поддерживать это свойство. IE реализует достаточно сносную поддержку градиентов. А это составляет грубо говоря половину браузеров, даже не говоря о том моменте, когда выйдет стабильная версия Firefox.
Оставшимся браузерам всегда есть возможность задать градиент тем же способом, как Вы задаете его обычными средствами.
Итог
Достаточно просто нагородить кучу аргументов против использования данных свойств и нововведений — они все еще слишком преждевременны и технологии еще сырые. Тем не менее, Вам стоит хорошенько поиграться с этими инструментами, чтобы квалифицированно пользоваться ими, поскольку и градиенты и множественные фоновые рисунки обязательно станут «хлебом с маслом» для ведущих разработчиков в будущем.
Я полагаю время для игр уже настало.
Примечание:
A/ Прошу прощения за мой несовершенный перевод. Если кто заметит ошибку, пожалуйста, пишите в комментариях, сразу исправлю.
B/ Поскольку статью могут читать в том числе и начинающие, я хочу привести краткую справочку по селекторам и декларациям. Определимся с терминами:
p {
font-family: Arial, Helvetica, sans-serif;
}
здесь селектор это — p
все, что находится между фигурными скобками {} это — блок деклараций
декларация это — font-family: Arial, Helvetica, sans-serif;
сама декларация состоит из свойства — font-family и значения — Arial, Helvetica, sans-serif
комментарии (35)