Еще недавно было впечатление, что за последние 10 лет html развился, лишь до того, чтобы кое-как скруглять уголки без использования графики, с помощью border-radius. Но с выходом html5 появилось много удобных фишек. Пока, конечно, не все браузеры между собой договорились, но времена IE6 прошли, и теперь все не так плачевно. На сайте Can I Use можно проверить, в каких браузерах работают фишки.

За последнии три года HTML развился больше чем за предыдущие 10 лет. W3C прилепили приставку в виде цифры «5» к названию стандарта HTML и понеслась. Не проходит и дня, чтобы не появилось какого-то сайта или решения на html5 и css3.

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

Прикидывая в уме, как может выглядеть такая контрукция, то первое, что приходит на ум. Это вот что:

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

Вот так пишем такой CSS:

Иногда так хочется сделать все такое оптекамое и красивое, но когда начинаешь рисовать понимаешь, что это потом надоест верстать и вообще сайт может без этих скруглений, а когда уже верстаешь все-таки начинаешь резать эти маленькие уголки, ставить лишние дивы и спаны или какие-нибудь другие тэги, писать новые строчки в CSS. Потом открывешь это всё в осле и видишь, что где-то что-то съехало на пиксель, потом создаешь специальные стили для осла, ну и так далее, волокиты много. И в голове иногда сумбур наступает, появляются такие как бы весы, на одной чаще большое желание положить болт на IE и воспользоваться свойством -border-radius, а на другой сомнения, а вдруг пользователей с ИЕ будет много.

Нужно посчитать, что получится. Зайдем на ЛайвИнтернет и посмотрим статистику современных браузеров. Какая у них аудитоия?

Допустим, какой-нибудь main.css, после долгой с ним работы, стал неприлично большим. Как следствие поиск нужной строки в нем стал занимать непозволительно долгий промежуиток времени. В этом случае можно, конечно, отформатировать его, но у нас же main.css очень большой, и форматирование может оказаться бесполезным. Например, вот как правильно разместить имена стилей, в алфавитном порядке или согласно иерархии? Когда стилей много, искать все равно сложнее. Удобным решением может быть, использование нескольких css файлов. А в каком-нибудь результирующем собирать все остальные. Вот как раз директива @import позволяет это делать.

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

С помощью html5 и CSS3 используя всякие простые свойства типа text-shadow можно создавать вот такие шикарные заголовки:

Все люди, которые хотя бы раз пробовали сверстать какую-нибудь страницу, или нажимали в браузере ctrl+U или даже просто лазили по интернетику, пользуясь разными браузерами, знают, что существуют нормальные браузеры, а существует IE, в разных воплощениях (6, 7 и 8). IE мало, что умеет, но самый главный его недостаток это его способность всё испортить. Микрософты как бы понимая, что создали монстра, постарались облегчить жизнь людям, дав возможность разработчикам использовать условные комментарии.