css

Что я хочу сказать по поводу статьи «Хитрая тень» в блоге Олега Мохова?

<html>
<head>
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<style type="text/css">
.vml {
    behavior: url(#default#VML);
    -ms-behavior: url(#default#VML);
    font: 12px Tahoma, sans-serif;
}
#bar1 {
    width: 400px;
    height: 60px;
    color: white;
    padding: 12px;
    display: block;
}

#bar2 {
    width: 20px;
    height: 22px;
    padding: 12px;
    color: white;
    position:absolute;
}
</style>
</head>

<body>

  <v:roundrect class="vml" id="bar1" fillcolor="navy" strokecolor="navy" strokeweight="1px" arcsize="0.1">
  Привет, ребята из W3C! Отсталый Internet Explorer уже много-много лет умеет смешивать векторный язык и
  HTML, а в 2010 году не все продвинутые браузеры так умеют.
  <v:shadow class="vml" on="true" opacity="0.3" color="navy" offset="7px,5px" />
  </v:roundrect>

   <v:shape class="vml" id="bar2"
   fillcolor="red" strokecolor="red"
   coordorigin="0 0" coordsize="200 200"
   path="m 1,1 l 800,1, 800,400, 1800,400, 1800,1500, 1,1500, x e">
   <v:shadow class="vml" on="true" opacity="0.3" color="red" offset="7px,5px"  />
    <p>Привет<br />ещё раз!</p>
    <p>Вы знаете, уже Internet Explorer 5.0 умеет делать непрямоугольные блоки.</p>
    <p>Причём, делает это непринуждённо.</p>
   </v:shape>
</body>

</html>

Что IE умеет круче ещё с пятой версии.

Добавлено позднее: в комментариях мне подсказывают, что в IE8/9 надо либо включать режим эмуляции, либо использовать «-ms-behavior» и позиционировать элементы абсолютно.

Я недавно делал плеер для Internet Explorer по функциональности похожий на VideoJS. Как я уже упоминал, там ни одной картинки — всё VML. Регулятор громкости и кнопочки — UTF-арт.

Попробую описать как сделан регулятор громкости, но писать буду под стандартные браузеры, так что код будет несколько отличаться.

В UTF-8 есть такой символ «❚», им у меня сделана кнопка «Пауза» и им же нарисован регулятор громкости. Нарисовать нужно что-то подобное вот этому:

На рисунке мы видим прямоугольник со скруглёнными углами, это сумеет сделать даже моя бабуля (в IE для этой цели я использовал VML):

#video_volume {
    width: 34px;
    height: 20px;
    font: 14px Arial;
    color: white;
    background: gray;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    -khtml-border-radius: 0.5em;
    border-radius: 0.5em;
}

У нас получается пустой скруглённый прямоугольник. Теперь надо нарисовать уменьшающиеся прямоугольники. Как? Первая идея, которой я и воспользовался — вложить теги внутрь друг друга и сделать что-то, чтобы каждый потомок был ниже своего родителя:

<span>❚<span>❚<span>❚<span>❚<span>❚</span></span></span></span></span>

В стиле прописываем абсолютную позицию и margin-top, чтобы сделать отступ от родительского элемента:

#video_volume span {
    position: absolute;
    margin-top: 1px;
}

Получилась этакая рекурсия стилей. Уже близко к тому, что хочется получить.

Теперь надо снизу обрезать лишнее. В IE я просто ограничил размеры и выставил overflow-y в hidden, тут я поступлю иначе — воспользуюсь crop.

#video_volume div {
    clip: rect(auto, auto, 14px, auto);
    position: absolute; /* crop работает только у абсолютно позиционированных элементов */
    /* кстати, ребята из W3C, почему вы забыли про crop? почему только прямоугольник, зачем position? */
}

Почти то что нужно, но повёрнуто в другую сторону:

Что делать? Всё просто, это текст, значит, его можно просто развернуть в другую сторону, указав ему direction, правда при указании direction элементы регулятора прилипают к правому краю, для того, что это исправить, укажем отступ справа.

Теперь осталось обрамить это ещё одним родительским контейнером, так как указав абсолютную позицию всех элементов мы вывели их из потока. Родительский контейнер позволит регулятору занять своё место в потоке.

Получился такой код:

<head>
<style type="text/css">
#video_volume, #video_volume div {
    width: 34px;
    height: 20px;
    font: 14px Arial;
    color: white;
    background: gray;
    padding-right: 5px;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    -khtml-border-radius: 0.5em;
    border-radius: 0.5em;
}

#video_volume div {
    clip: rect(auto, auto, 14px, auto);
    position: absolute;
    direction: rtl;
}

#video_volume span {
    position: absolute;
    margin-top: 1px;
}

</style>
</head>
<body>
<div id="video_volume">
<div>
<span>❚<span>❚<span>❚<span>❚<span>❚</span></span></span></span></span>
</div>
</div>
</body>

Кстати, «Опере» rtl правильно не работает (по крайней мере в моей 10.60 alpha), нужно расставлять margin, но я этого делать не буду. В конце-концов, это пример, демонстрирующий идею.

Если у кого-то есть Safari или Chrome (Chromium), проверьте, пожалуйста, CSS-хак, который я сейчас изобрёл:

<head>
<style type="text/css">
   /* содержимое этого стиля увидит только WebKit-браузер */
    body:not([x|x]) div {
        background: red;
        width: 100%;
        height: 100%;
    }
</style>
<body><div></div></body>

Хочется узнать для каких версий браузеров он действует. Можно в почту написать: imbolk@gmail.com

P.S. Должна быть красная страница с белой рамкой.

P.P.S. В WebKit-браузере «Андроида» 2.2 тоже работает.

P.P.P.S. Для Konqueror 3.5 и выше этот CSS hack тоже работает. То есть это, скорее всего, особенность ещё KHTML-движка, из которого появился WebKit.

P.P.P.P.S. В комментариях проверили Safari 2 и Chrome 4, CSS hack работает.

P.P.P.P.P.S. Проверил под Chrome 1.0.154.59, работает.

P.P.P.P.P.P.S В комментариях проверили Chromium 6.0.424.0 (48800), CSS hack работает.

alexleo: Вот оно — наше будущее… Хром, конечно, старается вовсю… 70-80% загрузки двухъядерного p9500/2.5G для рисования простейшей анимации… Жесть.

Meroving: и еще эти люди запрещают адобе ковыряться в носу))

Из обсуждения на «Хабре» CSS-анимации в «Our Solar System» (работает в «Хроме» и «Сафари»), сделанной почти на голом CSS3 (неясно только почему пояс астероидов сделан PNG-картинкой, а не веб-шрифтом, было бы круче).

Забавная тенденция — несколько лет назад я бы сказал, что это Флеш (апплет Джавы можно распознать), теперь я теряюсь что это. SVG+SMIL? SVG+JavaScript? Canvas? CSS3? Flash? Silverlight?

Скоро, видимо, внутри браузера будет столько всякого, что программисты разойдутся на несколько лагерей. Как сейчас с бакэндом — есть те, кто пишет на PHP, те, кто на Python, те кто на Perl и т. д. Кстати, сейчас есть ещё более мелкое деление — по CMS и фреймворкам. Всякие там Django, Twisted, Drupal, Plone, Zend Framework, Catalyst и прочее.

По фреймворкам в браузере разделение уже есть. Я, например, пишу с использованием jQuery и считаю Dojo ересью.

Сегодня я слегка приболел, дома, много свободного времени, решил посмотреть полезную часовую запись, ссылку на которую кинул мне, мне, кажется, Pepelsbey (спасибо!) — это рассказ на конференции РИТ-2010 про будущее layout в CSS.

Три черновика, которые сейчас предлагаются — Grid (от Microsoft), Flexbox (Mozilla) и Template Layout (W3C).

Вкратце.

Первая спецификация (Grid) задаёт на страницу абстрактную сетку, а контенту, при желании, указывается в какой ячейке сетки ему располагаться и сколько занимать. Например:

body { columns:3; column-gap:0.5in; } 
img { float:page top right; width:3gr; }

Это настолько простая и очевидная идея, что у меня возникал вопрос «а почему не так», когда я ещё начинал верстать — в 1997-м году. Спецификация пока не дописана (вот уже три года как) и нигде не реализована.

Спецификация от Mozilla (Flexbox) уже посложнее, это часть XUL, то есть эта сетка уже в браузерах, основанных на Gecko, а так же реализована в Chrome и Safari. Спецификация вводит кучу новых свойств, а сетка получается древовидная. Задаётся родительский контейнер, его потомки группируются и внутри групп задаётся расположение элементов относительно друг друга.

Хотя для понимания это всё сложнее, но, кажется, такая раскладка более подходит для вёрстки «резиновых» сайтов. Чем-то это похоже на старые знакомые таблицы, но круче.

#div1 {
      display: box;
      box-lines: multiple;
      box-pack: center;
      width: 300px;
    }
    button {
      box-flex: 1.0;
      width: 90px;
      max-width: 90px;
    }

Спецификация Template Layout (W3C) — это шаблоны, при помощи свойства display задаются «слоты», «position» задаёт в каком слоте у нас контент. Видимо, это ближе к тому, что предалагает Microsoft.

body { display: "aaa"
                  "bcd" }
  #head { position: a }
  #nav { position: b }
  #adv { position: c }
  #body { position: d }

Эта спецификация нигде пока не реализована, но есть плагин к jQuery, который позволяет начать пользоваться Template Layout уже сейчас (в IE тоже работает).

Это, конечно, только приблизительные описания технологий, краткий обзор. Сами стандарты чуть сложнее, особенно Flexbox.

P.S. Кстати, доклад читал Вячеслав Олиянчук, с которым я познакомился на WSD-2009 в Минске, жалею, что не пошёл на РИТ в этом году.

В комментариях на «Хабре» попросили придумать CSS-хак для FireFox 3.5. Пожалуйста:

<style type="text/css">
x:-moz-any-link:nth-child(0), body { background: red; } /* FF 3.5+ */
</style>

Проверил в Firefox 2.0.0.19, Firefox 3.0.3 и в Firefox 3.5.5.

«Опера» 10.50 стала поддерживать border-radius и много других интересных вещей, в этой связи встал вопрос — как отличить 10.50 от более ранних версий в CSS?

Например, у меня на сайте скруглённые уголки для «Оперы», начиная с версии 9.50 делаются при помощи SVG, 10.50 вполне могла бы нарисовать их без этого «изыска». Помучался-помучался и придумал несколько CSS-хаков, собственного изобретения.

<style type="text/css">
@media (0) {
    body { background: red; } /* Opera 10.xx, но < 10.50 */
}

@media all and (resolution = 0dpi) {
    body { background: red; } /* Opera < 10.50, минимальной версии не знаю, 9.27 работает */
}

@media all, () {
    body { background: red; } /* Opera 10.xx (включая 10.50) */
}

@media all, {
    body { background: red; } /* Opera 10.50 prealpha */
}
</style>

Нужно понимать, что хаки сделаны исключительно для того, чтобы отличить одну версию «Оперы» от другой и могут сработать в других браузерах, так что лучше подстраховаться и добавить в стили какой-нибудь хак, чтобы отличать «Оперу» от всего остального.

Я не знаю минимальной версии при которой срабатывает хак №2, но подозреваю, что будет работать где-то начиная с 7-й версии.

Все хаки я испытывал на «Операх» 10.50 prealpha, 10.10, 10.01, 9.50 и 9.27. Надеюсь, баг 10.50 не исправят и хак будет работать и дальше (pepelsbey, пожалуйста, молчи!:).

Добавлено 25 декабря 2009 10:38: проснувшись утром, я обнаружил, что умудрился ночью запостить этот текст два раза. Решил удалить один из них и удалил тот, что с комментариями. Простите, это утро :(

Вадим Макишвили описал несколько примеров применения rgba в Internet Explorer. Примеры очень и очень полезны, и я скопирую их (без картинок, за ними идите в исходный пост) к себе:

Сегодня, благодаря этому новому знанию, я понял как решить две труднорешаемые задачи. Издавна, чтобы сделать фон блока полупрозрачным, мы вынуждены были использовать или png-24 картинку в фоне или opacity-свойство.

Но в случае с png-24, для ИЕ6 нужно писать AlphaImageLoader фильтр, который катастрофически замедляет рендеринг страницы. А в случае с opacity приходилось придумывать трюки, чтобы дети блока не бледнели от родительского opacity.

А теперь проблему opacity можно забыть, как страшный сон: .block { background: #rgba } * html .block { filter:progid:DXImageTransform.Microsoft.gradient (startColorstr=#99000000, endColorstr=#99000000); }

В начальной и конечной позиции один и тот же RGB (000000) и добавляю перед ним одно и то же значение Alpha (99) Значение Alpha указывается в 16-тиричной системе, где 00 — полностью прозрачный, а ff — непрозрачный пиксел

Я протестировал скорость рендеринга страницы, на которой выливается 300 элементов с gradient-фильтром — он не замедляет рендеринг и это сильно радует.

Но этот случай описывает ситуацию, когда нужно сделать однотонный полупрозрачный цвет, как например в модальных диалогах, когда вся остальная страница затемняется.

Иногда использовать png-24 всё-таки необходимо, как например в случае, когда нужно обрезать длинную неразрывную строку, уводя ее градиентом в непрозрачность.

В этом случае можно использовать второй способ. .block { background: url(image.png) } * html .block { filter:progid:DXImageTransform.Microsoft.gradient (startColorstr=#00ffffff, endColorstr=#ffffffff, GradientType=1); }

GradientType принимает значение 1, если градиент рисуется слева-направо; и 0, если градиент сверху-вниз.

MSIE хороший браузер.

Век живи, век учись. Оказывается, в Internet Explorer есть возможность, через фильтры, указывать rgba-цвет:

.element{
    /*color = black, opacity = 0.6 */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000); /*AARRGGBB*/
    zoom: 1
}

Большая часть фильтров понимает цвет в формате argb (первая компонента — прозрачность).

Вадим Макеев упомянул в «Ярушке» интересное о новых версиях «Оперы»:

Opera будет поддерживать border-radius уже в 10.x версии, очень вероятно, что где-то в начале будущего года (…)

Я уже давно тестирую версию, которая работает с border-radius, border-image, box-shadow, transform… и ещё десятком вещей из черновика CSS 3, что интересно — без префиксов. Это всё будет в движке Presto 2.4, который сейчас встроен во внутренние беты с индексом 10.x.

Ничего прямо вот так обещать не могу, но некоторую вероятность высказал выше, имея в виду финальные стабильные версии.

На эту тему я уже, кстати, давал цитату.

Although Opera 10 has just been released, the Opera Core team has not been sitting idly while the Desktop team were at work. The next version of the rendering engine; Opera Presto 2.3 is already finished (including the likes of border-radius, box-shadow (including the spread value and inset keyword), and friends, and Opera Presto 2.4 is under heavy development. It already is and will be an exciting time for CSS 3.

В следующей «Опере» будет border-radius! Но лучше бы они дробные проценты сделали.

Как говорится «хозяйке на заметку».

У WebKit (браузер Safari) есть CSS-свойство «-webkit-text-security», которое позволяет установить на что заменять введённые в текстовое поле символы. Может принимать следующие значения: «none», «disk», «circle» и «square». Переводить не надо, думаю.

Это помогает обойти не очень (на мой взгляд) удобное ограничение Mac OS, что в поле пароля нельзя вводить русские буквы. У меня некоторые пароли содержат символы в двух раскладках.

Лично для меня очевиден ответ на вопрос, вынесенный в заголовок. Но умница pepelsbey расписал всё настолько хорошо, что грех не процитировать:

Чтобы чётко понимать чем стандарт отличается от черновика, прочитайте черновик CSS 3, а особенно места, помеченные красным. Фразы там звучат примерно такие:

— А может назовём свойство blah-blah иначе? Например foo-foo! — А давайте возьмём свойства a, b и с и… объединим их в одно с именем abc? — …и так далее.

И что в итоге? Каким образом производителям браузеров внедрять свойства, которые ещё до конца не описаны? Нет, конечно есть модули, которые близки к статусу рекомендаций, но над большинством вещей ещё думать и думать. В частности, на мой вопрос про border-radius, разработчики Opera ответили, что оно уже реализовано в экспериментальных билдах, но вокруг него крутится столько нюансов, а Mozilla делает так, а Webkit иначе… как же поступать Opera? Вот и тормозит внедрение новых классных фич…

Поэтом заявление MS о том, что, мол, мы не поддерживаем CSS 3, пока черновик не превратится в финальную спецификацию, звучат вполне резонно. Как бы это ни было грустно.

В общем, меньше фанатизма и больше читайте спецификации ;)

Я помню многие ругали Microsoft за то, что в IE когда-то появилась возможность задать стили для полос прокрутки. Честно сказать, и мне это казалось чем-то сомнительным. Прошло время и эти стили редко используются где-то, кроме «уютных дняфок» чёрно-розовых подростков и эксперементальных бастардов дизайнеров с вёрсткой.

Как бы то ни было, WebKit в свою новую сборку включил селекторы для очередных измывательств над полосой прокрутки (причём, отдельно для ресайзера, горизонтальной и вертикальной прокрутки).

Стилей там добрый мешок, лучше сходить на сайт «ВебКита» и посмотреть, а мне же нравится, что появился новый CSS-хак, который позволит выделять эту и выше версии «ВебКита» (и браузеров на нём). Например, он может выглядеть так:

noindex::-webkit-scrollbar, .someclass {
    color: red;
}

Прелюдия

Некоторое время назад, я нашёл способ, использования data URI в Internet Explorer. Data URI — специальный вид URL, который включает в себя код самого объекта. Например, таким образом можно внедрять изображения прямо в код HTML-страницы.

Выглядит такой HTML вот так:

<img src="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP…и так далее" />

Где «data» — это протокол URI, image/gif — тип объекта (картинка GIF), base64 — тип кодирования, после запятой идёт сам код картинки.

Такой вид URI понимают сейчас все современные браузеры, включая Internet Explorer 8 (правда, со многими ограничениями). Плохо то, что Internet Explorer 7 и ниже этого не поддерживает, а доля этих версий настолько велика (около 50% на данный момент по данным LiveInternet), что до недавнего времени data URI использовалась крайне редко.

Я, увлёкшись исследованием малодокументированного протокола mhtml (MIME HTML), поддерживаемого в браузерах Microsoft с пятой версии, в одном из экспериментов разобрался как внедрить объект в тело HTML-документа и, что важнее, придумал как совместить оба способа (data URI и MHTML) в одном документе.

Вообще mhtml был придумал для адресации внутри так называемых «веб-архивах» — формат, очень похожий на формат писем электронной почты и предназначенный для сохранения веб-страниц вместе с картинками, стилями, JavaScript и прочим в одном файле. Сейчас он, так или иначе, поддерживается большинством браузеров.

Типичный mhtml-адрес выглядит следующим образом:

mhtml:http://example.net/index.html!fhhryregdy4gere

Где после «mhtml» идёт обычный веб-адрес, а после восклицательного знака — идентификатор объекта внутри веб-архива. Как я уже сказал, веб-архив очень похож на почтовое сообщение, где один из методов кодирования объектов — base64, тот же самый, который применяется и в dataURI.

В итоге, когда мне пришла эта идея, я совместил оба способа так, чтобы Internet Explorer видел файл как веб-архив с закодированным base64 объектом, а остальные браузеры видели этот закодированный объект как часть dataURI.

Специфика HTML допускает переносы, в том числе и внутри data URI, поэтому мне удалось задуманное относительно быстро. В CSS всё сложнее, а тема использования data URI в CSS, как оказалось, актуальнее, чем для HTML. Например, в книге Николая Мациевского «Разгони свой сайт» сделана попытка расширения моего способа на CSS, к сожалению, менее удачная, чем хотелось бы: требуется включение закодированного объекта два раза.

Фуга

Итак, мне захотелось посмотреть, не получится ли расширить мой способ на CSS, не прибегая к включению закодированного файла два раза. Причём, сфера тут уже, подключаемый к CSS объект это, в 99,99% — картинка.

После немногочисленных экспериментов, оказалось, что оторвать закодированный объект от начала data URI не представляется возможным, что мешает использованить mhtml — там заголовок и кодированный объект должны отделяться пустой строкой.

Тем не менее, других способов побороть IE я не видел и потому продолжал эксперименты. Несколько слов о том, что такое base64. Base64, по сути, анахронизм, доставшийся нам от электронной почты на заре её зарождения. Письма тогда ходили исключительно в латинице и все почтовые системы полагали, что никаких других символов в письмах не бывает.

Таким образом, когда встала задача передавать в письмах что-то кроме англоязычных текстов (например, файлы или тексты на других языках), было придумано несколько способов кодирования таких объектов. Один из них — base64 (для математиков — это позиционная система счисления с основанием 64). 64 — это количество знаков, которая использует это кодирование. Это символы A-Z, a-z, 0-9 и плюс со слешем.

Хорошие новости, заключаются в том, что браузеры игнорируют в кодированной строке символы, которые не входят в упомянутые 64. Можно было ожидать, что браузеры вообще откажутся разбирать такую строку.

Итак, строка data URI начинается с чего-то вроде «data:image/gif;base64,» и в CSS не терпит переносов, а MHTML требует, чтобы кодированная строка начиналась с начала строки.

Из вышесказанного следует, что нужно как-то сделать начало data URI частью кодированной строки. Тут надо немного рассказать из чего состоят принятые в вебе стандарты кодирования изображений.

Оставим в покое XBM, BMP, ART, WMF/EMF, JPEG200 и прочую экзотику, поддерживаемую браузерами, и остановимся на триплете JPEG, GIF, PNG. Честно сказать с форматом GIF я знаком плохо, а JPEG и PNG исследовал несколько лет назад довольно подробно.

JPEG и PNG состоят из секций. В общих чертах, сначала идёт заголовок файла, потом сами секции, в формате (с некоторыми вариациями) «имя секции», «длина секции», «конец секции». И у JPEG, и у PNG есть секции для произвольного содержимого. У JPEG это COM и APPn, у PNG — iTXt, tEXt и zTXt. Кстати, и у GIF тоже есть похожее место — Application Extension.

Отсюда идея: Internet Explorer, декодировав файл с начала строки, получает заголовок с секцией из содержимого, куда помещается заголовок для остальных браузеров и мусор, оставшийся от декодирования начала data URI, остальные браузеры должны пропустить заголовок для IE и начать декодирование с data URI.

Получаем, на примере JPEG:

FF D8 — заголовок JPEG для IE FF E0 xx xx — секция APP0, куда прячется всё до данных изображения, «;background-color:url(data:image/jpeg;base64,» — это видят остальные браузеры FF D8 — начало JPEG для остальных браузеров «данные изображения» — это место видят уже все браузеры

Все бинарные данные выравниваются и кодируются (строка начала CSS-стиля для остальных браузеров не кодируется и IE декодирует её как мусор внутри APP0).

В моём примере такой CSS выглядит вот так:

/9j/4AAs;background-image:url(data:image/jpeg;base64;BOLKNOTE.RU,/9j/4AAC…

Легко увидеть, как видит этот стиль браузер: «/9j/4AAs» кажется ему ошибочным атрибутом (его, кстати, можно взять в комментарий), а «;» — разделителем атрибутов. И хорошо просматривается («/9j/AA») двойной старт заголовка JPEG-файла. IE начнёт декодирование с первого заголовка, другие браузеры — со второго.

Остальное должно быть понятно из примера («!ie» — CSS hack, делающий стиль видимым только для IE), как это выглядит в браузере, можно увидеть в разделе «Храню» у меня на сайте.

Сергей Чикуенок из студии Лебедева сделал потрясающее открытие: чем сложнее структура документа, тем больше тормозит браузер.

Но то, что в этом режиме простое обращение к document.body.filters волшебным образом прекращает дрожание (как background-position:fixed в рецепте от студии Лебедева) — похоже, открытие. Больше того, по моим наскоро проведенным опытам, аналогичный эффект дает и такая бессмысленная (как и вышеприведенный скрипт!) запись в CSS:

body { _filter: true; }

Способ «background-position: fixed» знают многие, а вот такие трюки с filter — что-то новенькое.

На сайте MSDN нашёл полезную страницу, где очень понятно, по разделам описывается что из CSS умеют различные версии Internet Explorer (5.0, 5.5, 6.0, 7.0, 8.0beta1, 8.0beta2, 8.0).

Век живи, век учись. Оказывается, конструкцию «-webkit-min-device-pixel-ratio:0» понимает Opera 9.2x. Какое безобразие. На «Хабре» появилась статья, где описаны популярные хаки для браузеров и, в частности, есть решение этой проблемы:

/* Первая конструкция — против Opera 9.5, которая понимает вторую, а вторая — против Opera 9.2, которая
понимает первую. Верх извратства :) Вобщем-то безопасная конструкция, т. к. 9.2 уже не будет
эволюционировать и явно не сможет обработать :first-of-type, а -webkit- — проприетарное свойство и 
обрабатывается Opera 9.2 скорее по ошибке, что следует из отсутсвия поддержки в 9.5 */

/* Safari понимает обе, поэтому хак работает */
@media all and (-webkit-min-device-pixel-ratio:0) {
   
   body:first-of-type #lightSF3 { display: block }
   /* вместо :first-of-type можно еще использовать :nth-of-type(1) — он для Safari 3.1 */
   
}

Когда на земле было всего два браузера — IE и Netscape Navigator, они оба поддерживали разные виды внедряемых шрифтов. IE поддерживал своё, но бесплатное решение, Netscape использовал платное решение от BitStream. В те времена вебмастера интересовались возможностями браузеров ещё меньше, чем сейчас и этой возможностью мало кто пользовался.

Хотя в Татарстане, где я жил, технологию внедряемых шрифтов использовали очень часто для поддержки татарского алфавита на сайтах.

Суть технологии очень проста: шрифт подключается как любой внешний ресурс (другие примеры — графика, CSS, JS) и им можно писать что-то на странице. Netscape помер, а решение Microsoft всё-таки вошло в CSS, хотя и в изменённом виде.

На данный момент, оказывается, во всех браузерах, включая альтернативный, на какой-то стадии есть поддержка внедрения шрифтов (@font-face):

• у Internet Explorer есть наиболее удачная из всего зоопарка разработка — поддержка шрифтов в формате EOT
• у Opera эта поддержка есть в лабораторном билде, значит появится и в самом браузере (поддерживается TTF)
• Safari (WebKit) поддерживает эту технологию ещё с октября прошлого года
• у FireFox, вероятно, поддержка появится в версии 3.1, по крайней мере сейчас существуют сборки, в которых она уже есть
  Хочу сразу сказать почему я считаю, что у IE наиболее удачное решение: разработчик может указать какие именно знаки оставить в шрифте, что даёт огромную экономию по размеру. Другие же браузеры поддерживают шрифты в форматах TrueTypeFont и OpenType. Легко представить к чему это приведёт: подключать будут гигантские Unicode-шрифты, содержащие всё что только возможно, вплоть до вымерших алфавитов.