Размер имеет значение (о ключевых словах)

Проблема размера шрифтов всякий раз волнует веб-разработчиков. В CSS есть 7 ключевых слов для обозначения размера шрифта. Они введены для того, дабы дизайнеры особо не напрягались над задачами доступности текстов на страницах. величина варьируется от xx-small до xx-large и данный размер берется сравнительно установленного пользователем в браузере размера medium. Вот что мы зрим в спецификации CSS-1.

font-size: главное слова - это индекс в таблице размеров шрифтов, которая вычисляется и хранится браузером. вполне вероятные значения: [ xx-small | x-small | small | medium | large | x-large | xx-large ]. На экране pc умножающий причина равен 1.5; в случае если medium точно также 10pt, то large надлежит быть точно также 15pt. разные устройства вывода имеют все шансы иметь разный умножающий фактор.

Вроде бы все круто. Можно применить на здоровье главные слова и ни о чем не думать, но есть проблемы. Вот тут мы с вами станем их решать. И начнем, естественно, с могучего браузера Netscape 4.

В Netscape 4 мы имеем умножающий причина 1.5 меж индексами в таблице, то есть двигаясь от наименьшего к наибольшему, каждое последующее главное слово в 1.5 раза более предыдущего. надобно заметить, что так рекомендовано консорциумом W3 в спецификации CSS-1. Однако, ни к чему неплохому это не ведет, так как small и x-small (не говоря уже о xx-small) шрифты имеют все шансы стать весьма неразборчивы при установленном по умолчанию у юзера размере шрифта medium. тогда как большие габариты выглядят уж чересчур здоровыми.

Вывод напрашивается сам собой: не применить ключевых слов для установки размера шрифта в Netscape 4. Можно элементарно скрыть «правильные» стили от него с помощью инструкции @import. Для Netscape 4 можно установить величина шрифта в пикселях, а для стандартных браузеров переписать данный стиль с помощью импортирования стандартных стилей.

Одним Нетскейпом дело не ограничивается. К великому сожалению WinIE 4/5 также некорректно поддерживает главные слова, но их уважительно поддерживают Netscape6/Mozilla, Opera, и MacIE5/WinIE6. различие заключается в том, что для WinIE 4/5 начальным ролью является small, тогда как по спецификации CSS-1 надлежит быть medium. В итоге имеем, что в WinIE 4/5 шрифт станет на один величина меньше, чем в других корректных браузерах.

Что же нам, бедным, делать? К счастью есть фишка, которая разрешает обойти данный Майкрософтовский баг. Вот он, работающий пример.

body, div, p, th, td, li, dd {

/* это все для Netscape 4.X */

font-family: Verdana, Lucida, Arial, Helvetica, sans-serif;

font-size: 11px;

}

А вот эту таблицу стилей мы импортируем инструкцией @import

body, body div, body p, body th, body td, body li, body dd {

/* переписываем все стили импортированной таблицы стилей */

font-size: x-small;

/* это смысл для WinIE4/5 */

voice-family: ""}"";

/* фишка для WinIE4/5, который некорректно парсит эту штуку и думает, что блок стилей для этого вещества здесь заканчивается. А вообще свойство voice-family задает перечень имен голосов для произнесения содержимого вещества */

voice-family: inherit;

/* восстановление */

font-size: small

/* смысл для стандартных браузеров */

}

html>body, html>body div, html>body p, html>body th,

html>body td, html>body li, html>body dd {

font-size: small

/* для Opera 5 */

}

Итак, что мы имеем? Для Netscape 4.X станет фиксированный величина шрифта в 11px. Для WinIE4/5 смысл small в браузере подлинно будет соответствовать small, а не medium. Для всех стандартных браузеров мы имеем то, что хотим, а для Opera 5 на любой случай объявляем справедливый размер шрифта через селекторы из спецификации CSS-2.

Этот способ работает верно даже в том случае, в случае если элементы вложены, тогда как при применении em или же % всякий раз есть опасность, что браузер наложит размеры, и в итоге шрифт станет слишком большущим или чересчур маленьким. При применении ключевых слов шрифт никогда не станет слишком маленьким, оттого что в IE и Mozilla/Netscape 6 заложено смысл xx-small не меньше 9px.

Перевод: FireFalcon