Что? Зачем? Почему?

В последнее время всё больше верстальщиков применяют в своих проектах сброс стилей, установленных браузером.

О применении сброса стилей написано уже очень много статей, поэтому подробно останавливаться на этом я не буду. Интересующимся и всем новичкам предлагаю статью «Сброс стилей с помощью CSS Reset».

Для сброса обычно используется Reset CSS от Эрика Мейера или Reset CSS от Yahoo!.

Ошибки верстальщиков

Всё бы хорошо, но подавляющее большинство верстальщиков не удосуживается снова определить стили для элементов! Кто-то просто не думает об этом, кто-то забывает или ленится, кому-то «не платят за переработку». А потом контент-менеджеры (которые заполняют сайты содержимым, если кто не знает) начинают метать громы и молнии: «Куда делись маркеры у списков? Почему текст жирным и курсивом не выделяется?! Где этот „гений“ криворукий???».

Особенно часто это проявляется, если вёрстка сайта потом дорабатывается другим верстальщиком. Если ему тоже «не платят за переработку», то он не обратит внимания на то, что, например, маркеры для списков прописаны только в #main .leftcol .content, а во всех остальных частях сайта списки по-прежнему ничем не отличаются от обычного текста. Та же беда с отступами у параграфов и заголовков. Про такую экзотику, как стили для <blockquote>, я скромно умолчу.

Что же делать?

Ответ один — обязательно возвращать элементам их традиционное отображение. Правда, применения специально сделанного для этого base.css от всё того же Yahoo! я практически не встречал! Кто-то пользуется готовыми фреймворками, но подавляющее большинство верстальщиков не применяют вообще ничего. Сбросят стили, потом не универсально (скажем, в правой колонке нижнего блока макета) их вернут, и думают, что выполнили свою задачу на 100%. Ну, а что ещё нужно, макет ведь один в один с тем, что дизайнер нарисовал. Конечно, в основном этим грешат новички и «студенты», но и их продукцию не стоит сбрасывать со счетов.

p {
margin: 1.12em 0;
}
#page .content .wrapper p {
margin: 1.12em 0;
}

Стили, прописанные для второго селектора, не могут быть универсальными, зато первый селектор охватывает все параграфы на всех страницах.

Мой вариант решения проблемы

Сверстав определённое количество страниц, я понял, что лучший reset.css — собственный. Тот, который написан не «дядей», а самим верстальщиком на основе его личного опыта.

Я не стал откладывать дело в долгий ящик и написал «Quick-Website-Template» — собственную «заготовку» для вёрстки, которая включает в себя файл стилей, демонстрационную html-страницу и ещё много всего интересного. Стили состоят из reset.css и base.css, которые я, в отличие от других авторов, не стал разделять на два файла.

Проект размещён на GitHub. Вы можете использовать QWT в соответствии с лицензией Creative Commons Attribution 3.0 License.

Чем я могу немного гордиться

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

Речь идёт о блоке кода, задющим стили для элементов с моноширинным шрифтом:

/* Моноширинное начертание */
code, kbd, pre, samp {
font: 100%/1.25 monospace, sans-serif;
}}

Так вот, как только вы захотите задать этим элементам размеры шрифтов в процентах, то будете неприятно удивлены. Вместо того, чтобы наследовать эти размеры от родителя (для простоты возьмём 16px — это стандартное значение в современных браузерах), эти элементы наследуют размеры шрифтов от неких «установок», которые сделаны в браузере для всего семейства моноширинных шрифтов! Как правило это 13 пикселей.

Ладно, к этому можно было бы приноровиться, но тут сюрприз нам преподносит Opera, в которой размер шрифта для моноширинного текста равен 16px. Как же обеспечить кроссбраузерное отображение?!

Я долго ломал голову над этой проблемой, и в конце концов меня осенило. Раз размер шрифта устанавливается для семейства Monospace, то почему бы не обмануть браузер и не заставить его сменить семейство шрифтов? На наше счастье, браузер не умеет (или не хочет) определять принадлежность шрифта к тому или иному семейству.

font: 100%/1.25 monospace, sans-serif;

Браузер видит, что указано не моноширинное семейство шрифтов (оно идёт последним) и правильно определяет исходные размеры шрифтов для элементов, а явное указание monospac задаёт моноширинное начертание!

Если вам интересен мой проект — присоединяйтесь, будем делиться опытом.