|
Кое-что о расслоении (продолжение).
Продолжая тему, затронутую в предыдущей заметке, я приведу один
пример из книги А.Хоумера "Dynamic HTML: справочник", которая сейчас
активно продвигается издательством Piter-Press. Речь идет о совместимости шрифтов
для браузеров NN и MSIE при использовании тега <DIV>.
Небезызвестный в моем городе вебмастер сервера jeo.ru
в своем комментарии справедливо заметил, что Netscape понимает тег DIV в сочетании
с CSS-позиционированием, но при этом теряются свойства шрифта. Однако, решить
эту проблему оказалось довольно просто.
Рассмотрим пример создания рельефной надписи.
<html>
<head><title>3D title</title>
<style>
P { font-family: "Impact, sans-serif";
font-size:96; color=red }
P.highlight { color:silver }
P.shadow { color:darkred }
</style>
<body bgcolor=#408080>
<div style="position:absolute; top:5; left:5;
width:600; height:100; margin:10">
<P class=shadow>Be happy!</P>
</div>
<div style="position:absolute; top:0; left:0;
width:600; height:100; margin:10">
<P class=highlight>Be happy!</P>
</div>
<div style="position:absolute; top:2; left:2;
width:600; height:100; margin:10">
<P>Be happy!</P>
</div>
</body>
</html>
В Internet Explorer все выглядит именно так, как и было задумано, но вот в
Netscape куда-то пропадают заданные свойства шрифта (размер и гарнитура).
Эта проблема касается только тех свойств, которые пишутся через дефис: font-size,
font-family. Кроме того, Netscape требует, чтобы шрифты задавались по отдельности.
Следовательно тег <STYLE> должен выгдядеть так:
P { fontfamily: "Impact", "sans-serif"; fontsize:96;
color=red }
Правда такую конструкцию не понимает уже Internet Explorer. Для достижения
совместимости, нужно создать универсальный набор стилей. В нижеследующем примере
первая часть работает в обоих браузерах и определяет цвет шрифта, вторая задает
свойства для NN и третья для MSIE.
<style>
P { color:red }
P { fontfamily: "Impact", "sans-serif"; fontsize:96 }
P { font-family: "Impact", "sans-serif"; font-size:96 }
P.highlight { color:silver }
P.shadow { color:darkred }
</style>
|
