Separator

 

user agent stylesheet vs. reset.css? normalize.css!

Для кроссбраузерной верстки многие используют reset.css который "сбрасывает" все стили, в результате чего верстка будет выглядеть более-менее похожей по всем браузерам. Тем не менее сбросив стили, мы лишаемся некоторых стандартных padding'ов и margin'ов, в результате чего, в будущем, при наполнении сайта контентом, который ранее не стилизовался (например ранее на сайте не было новостей, а теперь появились) мы можем увидеть грустную картину - этот контент будет выглядеть весьма некрасиво. Чтобы решить эту проблему, можно воспользоваться user agent stylesheet. О нём и поговорим далее.
user agent stylesheet - это те стили, которые браузер применяет первым делом, и они всегда есть, даже если верстка не использует CSS. Для каждого браузера они свои, собственно это одна из причин по которой верстка выглядит в разных браузерах по-разному.
Узнать какие user agent stylesheet использует браузер наверное не сложно, если есть его исходник, но у нас его нет, поэтому воспользуемся наработками добрых людей восстановивших user agent stylesheet для разных браузеров. Один из таких сайтов - iecss.com. На самом деле таких сайтов много, так что ищущий, да найдёт.
Мне же пригодились стили от ie8. В готовом проекте, было бы трудно удалять reset.css и переверстывать все, чтобы стили одного из блоков были "как в IE". Поэтому я сделал следующее:
  • Скачал user agent stylesheet для IE8
  • Сделал замену по регулярке "/}\r\n/" => "}\r\n#news_containter". Это действие модифицировало все селекторы таким образом, чтобы они применялись только внутри блока с id="news_containter"
  • Прикрепил этот css на страницу, где выводится блок id="news_containter"
В результате и основная верстка не поехала, и блок стал выглядеть не скинуто (из-за reset.css), а так, как он выглядел бы в IE8. Чего и требовалось достичь.
В будущем, буду базировать верстку не на reset.css, а на user agent stylesheet, хотя наверное не от злосчастного IE, а от Chrome или Opera.
Удачной верстки!

update 15.05.2016: Как продолжение идеи "единых" правил для стилей было придумана normalize.css. Рекомендовано к использованию :)

1 комментарий: