Способы использования png, в том числе для отображения теней
При использовании PNG в качестве фонового рисунка надо учитывать, что IE версий ниже 7 (далее под IE понимается IE≤6) не понимает прозрачность в PNG. Для реализации в IE надо использовать фильтр:
CSS:
div{
background:url(image.png);
}
* html div{
background:none;
filter:progid:dximagetransform.microsoft.alphaimageloader(src='image.png', sizingmethod='crop');
}
Важно! Параметр src указывается относительно страницы, а неCSS, т.е. еслиcss-файл лежит в папкеCSS,aimage.pngв IMAGES, то код будет выглядеть так:
CSS:
div{
background:url(../images/image.png);
}
* html div{
background:none;
filter:progid:dximagetransform.microsoft.alphaimageloader(src='images/image.png', sizingmethod='crop');
}
В то же время, если поместить в контейнер, например, ссылку, то в IE ссылка не будет рабочей, т.к. фильтр перекроет собой ссылку. У этой проблемы есть два варианта решения: либо вырезаем в PNG на месте ссылки дыру и тогда фильтр пропустит фокус на ссылку, либо назначаем ссылке свойство position:relative и ссылка, образно выражаясь, поднимется выше фильтра и станет активна. Второй вариант, как правило, наиболее приемлем им и будем пользоваться.
При использовании PNG в качестве тянущегося фона (тени):
в строке filter:progid… необходимо указывать параметр sizingmethod='scale', в этом случае изображение будет растянуто по размеру всего блока. И снова все дочерние блоки окажутся перекрыты фильтром и ссылки не будут активными. Указываем первому дочернему блоку position:relative и проблема решается.
HTML:
<div class="shadow">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis risus. Nam et <a href="#">ipsum ut justo</a> condimentum… </p>
<p>Nullam sit amet libero. Pellentesque… </p>
</div>
CSS:
.shadow{
width:410px;
background:url(shadow.png) repeat-y;
padding:5px 0 100px;
margin:0 auto;
}
* html .shadow{
background:none;
filter:progid:dximagetransform.microsoft.alphaimageloader(src='shadow.png', sizingmethod='scale');
}
.shadow p{
position:relative;
margin:0 20px 16px;
font:11px/16px solid tahoma,sans-serif;
}
Следующий момент надо запомнить, как догму и при использовании фильтра в IE всегда учитывать: так как фильтр в IE не является полноправным заменителем свойства background, то и ни один из параметров этого свойства на него не распространяется:
-repeat – номинально заменяется методом sizingmethod, но:
при значении scale изображение растягивается, а не повторяется,
при значении crop изображение обрезается, по размеру блока;
-position – не работает совсем, невозможно позиционировать изображение относительно блока;
-color – тоже никак не реализуется средствами непосредственно фильтра. Но если вместо background:none указать background:red, то под изображением затеплится красный фон.
Важно не забывать всегда обрабатывать готовые PNG-файлы программой pngout.exe (см. 3.4)
Способы и особенности создания страниц с изменяемым размером шрифта
В IE, при изменении состояния пункта меню «Вид → Размер шрифта» или вращении колеса мыши с зажатым Ctrl, наблюдается изменение размера текста.
Под изменяемым размером шрифта понимается указание относительного значения в параметре font-size. Относительными единицами измерения являются % и em. При этом, по сути, 1em = 100%. При принятии решения каких именно единицах измерения делать верстку надо учитывать, что при указании в em разница между размерами при разных состояниях пункта меню будет больше, чем при использовании %. По-умолчанию в IE font-size имеет значение middle, что соответствует 16px.
Расчет производится относительно унаследованного значения:
HTML:
<p><a href=”#”>Link</a></p>
Важно!Значение 100,01% у html указывается для решения проблемы неверного вычисления размера шрифта вOpera.
CSS:
html{
`font-size:100.01%; /* см.ниже*/
}
body{
font-size:middle;
}
p{
font-size:70%; /* 11px */
}
p a{
font-size:100%;
}
В данном случае размер шрифта у тэга <a> будет примерно равен 11px (на самом деле 11,24px, такое значение необходимо для Opera, в ней не корректно организовано вычисление дробных величин).
Порядок работы может быть разный:
можно сначала рассчитать соответствие %илиemкpx, используя как базовый16px и использовать полученные значения при дальнейшей верстке;
можно сначала сделать верстку с использованием px, а потом пройтись по всемуCSSи заменить все значенияfont-sizeсpx на%илиem;
можно использовать и такой вариант:
CSS:
html{
font-size:100.01%
}
body{
font-size:64%;
}
Важно!Во всех руководствах указывается значение 62.5% дляbody, но опытным путем выявлено, что вернее ставить именно 64% (большое спасибоOpera).
Важно!Следует помнить, что при использовании относительных величин свойствоline-heightвычисляется от величиныfont-sizeэтого же блока, если не было унаследовано от родительского блока. Т.е. при font:10px/1.2emили font:10px/120%line-heightбудет равняться 12px.
Теперь 10% = 1px или 1em = 10px. Далее можно указывать размеры шрифтов, вычисляя делением указанных в дизайне на 10. Также теперь можно использовать em (но только em) для указания линейных размеров блоков, при изменении размера шрифта размер сайта будет меняться. (см. 6.8)