Мысли вслух о css3

[zanilee]

Замечательные и казалось бы облегчающие жизнь новые возможности, которые открывает нам css3, окрыляют, но тут же полет обламывается о старые версии браузеров (особенно ИЕ6-8). Если позволяет заказчик или концепция проекта, необходимо придерживаться принципа Progressive enhancement. Он основан на том, что сайты НЕ ДОЛЖНЫ выглядеть одинаково во всех браузерах. Если браузер не поддерживает те или иные новые свойства, необходимо просто показывать пользователям таких браузеров такой дизайн, который они смогут отобразить, а не городить кучу кода и картинок для формирования резинового блока со скругленными уголками и тенью для ИЕ6. В таком случаи код будет построен следующим образом:

1. значение по умолчанию
2. свойства с вендорными префиксами браузеров
3. стандартные свойства css3

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

background: rgb(255,0,0); /* пользователи ИЕ6-8 увидят ярко-красный фон*/
background: rgba(255,0,0,0.2); /* пользователи современных браузеров увидят красный фон прозрачностью 20%, более старые браузеры проигнорируют эту директиву и выполнят предыдущую */