Для кроссбраузерной верстки многие используют reset.css который "сбрасывает" все стили, в результате чего верстка будет выглядеть более-менее похожей по всем браузерам. Тем не менее сбросив стили, мы лишаемся некоторых стандартных padding'ов и margin'ов, в результате чего, в будущем, при наполнении сайта контентом, который ранее не стилизовался (например ранее на сайте не было новостей, а теперь появились) мы можем увидеть грустную картину - этот контент будет выглядеть весьма некрасиво. Чтобы решить эту проблему, можно воспользоваться user agent stylesheet. О нём и поговорим далее.
user agent stylesheet - это те стили, которые браузер применяет первым делом, и они всегда есть, даже если верстка не использует CSS. Для каждого браузера они свои, собственно это одна из причин по которой верстка выглядит в разных браузерах по-разному.
Узнать какие user agent stylesheet использует браузер наверное не сложно, если есть его исходник, но у нас его нет, поэтому воспользуемся наработками добрых людей восстановивших user agent stylesheet для разных браузеров. Один из таких сайтов - iecss.com. На самом деле таких сайтов много, так что ищущий, да найдёт.
Мне же пригодились стили от ie8. В готовом проекте, было бы трудно удалять reset.css и переверстывать все, чтобы стили одного из блоков были "как в IE". Поэтому я сделал следующее:
В будущем, буду базировать верстку не на reset.css, а на user agent stylesheet, хотя наверное не от злосчастного IE, а от Chrome или Opera.
Удачной верстки!
update 15.05.2016: Как продолжение идеи "единых" правил для стилей было придумана normalize.css. Рекомендовано к использованию :)
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, а на user agent stylesheet, хотя наверное не от злосчастного IE, а от Chrome или Opera.
Удачной верстки!
update 15.05.2016: Как продолжение идеи "единых" правил для стилей было придумана normalize.css. Рекомендовано к использованию :)
Good!
ОтветитьУдалить