больше остального текста, ссылки подчеркнуты и синего цвета и т. д. В от- дельных случаях разные браузеры применяют различное форматирование для каждого из этих элементов. Вы можете решить, что это скучно, так как выглядит
почти одинаково и в Internet Explorer, и в Firefox, и в Safari.
Из-за этих различий браузеров приходится «обнулять» исходное форматиро- вание для тегов, чтобы ваши посетители могли увидеть красивый дизайн, над соз- данием которого вы столь усердно работали (рис. 17.4). Все, что нужно сделать, — настроить в начале своей таблицы стилей некоторые основные стили, которые убирают ненужное форматирование.
556 Часть 4. CSS для продвинутых Рис. 17.4. Устраните различия в отображении страниц, «обнулив» исходные стили браузера. Затем создайте свои собственные стили, чтобы добавить поля, отступы и размеры шрифта, которые являются совместимыми с разными браузерами Вот некоторые действия, которые можно выполнить, чтобы браузеры прекра- тили вмешиваться в ваш дизайн. Уберите отступы и поля. Браузеры добавляют верхние и нижние поля к боль- шинству блочных элементов — знакомые промежутки, которые появляются между тегами , например. Это может вызвать некоторые проблемы ото- бражения, например, когда конкретные размеры поля несовместимы с неко- торыми браузерами. Лучше всего убрать отступы и поля из тегов блочных элементов, которые вы используете, а затем специально добавить нужные при создании новых стилей. Применяйте совместимые размеры шрифта. В то время как текст тега по- казывается размером 1 em, браузеры применяют различные размеры для других тегов. Вы можете сделать так, чтобы все теги были размером 1 em, а затем соз- дать дополнительные стили со специфическими размерами шрифта для разных тегов. Таким образом, у вас будет намного больше шансов получить размеры шрифта, совместимые с различными браузерами. Примите меры к тому, чтобы элементы HTML5 отображались в виде блоков. Новые элементы HTML5, такие как article , aside и section , являются такими же блочными элементами, как заголовки и div -контейнеры. Но браузеры, не различающие эти элементы, могут и не показывать их в виде блоков. Поэтому лучше добавить для этих элементов стиль display: block . Кроме того, нужно воспользоваться средством HTML5 shiv ( http://code.google.com/p/html5shiv/ ), как описано во врезке «Обходной прием. Как заставить Internet Explorer 8 понимать HTML5» в разделе «Дополнительные теги в HTML5» гл. 1, чтобы заставить Глава 17. Совершенствуем навыки работы с CSS 557Internet Explorer 8 и более ранние версии разбираться в коде CSS, применяемом для HTML5-тегов. Установите единую высоту строк. У браузеров могут быть незначительные различия в значениях высоты строк, используемых по умолчанию. Задав коэф- фициент в теге — body { line-height: 1.2; } , — можно обеспечить при- менение браузерами одинаковой высоты строк. Значение 1.2 эквивалентно 120 % от размеров текста тегов. Можно, разумеется, изменить это значение в со- ответствии с вашими дизайнерскими предпочтениями. Улучшайте границы таблиц и создавайте согласующиеся ячейки. Применяя границы к ячейкам таблицы, вы создаете промежуток между ячейками, а также удваиваете границы между ними. Вы должны избавиться как от лишнего про- странства, так и от дополнительных границ. Кроме того, тегам
и
|
за- даются разные типы выравнивания и плотность шрифта.
Уберите границы в изображениях ссылок. Некоторые браузеры добавляют цветные границы вокруг любого изображения внутри ссылки. Наверняка вам, как и многим пользователям, эти границы покажутся ненужными и непривле- кательными. Удалите их и задайте заново там, где считаете необходимым.
Задавайте согласованные отступы для списков и типы маркировки. Различ- ные браузеры делают отступы для маркированных и нумерованных списков по-разному, и, как вы заметите, даже используемый тип маркировки может ва- рьироваться. Желательно устанавливать согласованные отступы и типы мар- кировки.
Убирайте кавычки из цитируемого материала. Если вы когда-либо использова- ли тег
для выделения цитаты (
To err is human
(Человеку свой- ственно ошибаться ), например), то заметите, что некоторые браузеры
(Firefox, Safari) автоматически добавляют кавычки (
'
'
) вокруг цитаты, а не- которые (Internet Explorer 6 и 7) — нет. И даже среди браузеров, которые добав- ляют кавычки, тип этих кавычек может варьироваться. Например, Internet
Explorer 8 вставляет одинарные кавычки (
'
'
), в то время как Firefox добавляет двойные кавычки (
"
"
). Для согласованного представления содержимого лучше всего удалить кавычки. Для реализации описанных идей есть несколько базовых стилей, которые вы можете добавить в начало вашей таблицы стилей:
/* сброс стилей браузера */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt,
var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label,
legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby,
section, summary,
558
Часть 4. CSS для продвинутых time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup,
menu, nav, section {
display: block;
}
body {
line-height: 1.2;
}
table {
border-collapse: collapse;
border-spacing: 0;
} ol { padding-left: 1.4em;
list-style: decimal;
}
ul {
padding-left: 1.4em;
list-style: square;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* завершение сброса стилей браузера */
Первые два стиля здесь — групповые селекторы, которые применяют одно и то же форматирование к каждому из перечисленных тегов. Добавьте эти стили в начало вашей таблицы стилей, а затем внизу таблицы замените их в зависимости от конкретного случая. После «обнуления» полей и размера
Глава 17. Совершенствуем навыки работы с CSS
559
шрифта (
font-size
) в теге
|
|
Скачать 20.28 Mb.