Кое-какие соображения насчет CSS3

Следует помнить, что разные объявления можно использовать для различных по размеру областей просмотра. Например, я ничего не имею против того, как описанный выше градиентный узор выглядит в меньших областях просмотра (рисунок 6.20).

Однако я могу предпочесть не использовать его для более крупных областей просмотра (например, шириной 768 пикселов и более). Следовательно, можно просто создать специфическое правило для обеспечения фонового градиента с использованием медиазапросов:

@media screen and (max-width: 768px) {body {background-color: white; background-image: radial-gradient (hsla (0, 0%, 87%, 0.31) 9px, transparent 10px), repeating-radial-gradient (hsla (0, 0%, 87%, 0.31) О, hsla (0, 0%, 87%, 0.31) 4px, transparent 5px, transparent 20px, hsla (0, 0%, 87%, 0.31) 21px, hsla (0, 0%, 87%, 0.31) 25px, transparent 26px, transparent 50px); background-size: 30px 30px, 90px 90px; background-position: 0 0;

}

Фон в виде узора на странице, открытой в небольшой области просмотра.

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

ЛЕГКОЕ СОЗДАНИЕ CSS3-КОДА С ПОМОЩЬЮ ПРЕПРОЦЕССОРОВ CSS.

В настоящее время CSS3-правилам требуются свойства с разными префиксами поставщиков. Вместо того чтобы сохранять вырезанные сегменты кода с этими префиксами для каждого объявления или использовать JavaScript-файл для добавления префиксов в браузере, можно задействовать препроцессоры CSS вроде SASS и LESS. Например, используя SASS с плагином Compass, вы сможете написать простое правило box-shadow вроде следующего: элемент {@include box-shadow;}. Сгенерированный CSS-код будет включать полный набор определяемых поставщиками правил наряду с соответствующими исправлениями для Internet Explorer (при наличии таковых).

Если этого недостаточно для того, чтобы вы обратили на них внимание, то замечу, что препроцессоры также позволяют использовать переменные и относящиеся к программированию соглашения вроде операторов if/while. Подробнее о SASS вы сможете узнать на сайте http:// sass-lang.com, а о LESS — по адресу http://lesscss. org.