У Галса:Кое-что о расслоении (продолжение).

Продолжая тему, затронутую в предыдущей заметке, я приведу один пример из книги А.Хоумера "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>