safari

Итак, у нас, оказывается, есть надёжные CSS-фильтры для всех современных браузеров. О некоторых я уже писал, но перечислю все (стиль срабатывает только в указанном браузере):

<style type="text/css">
 /* только для Opera 9.50 и выше */
 noindex:-o-prefocus, tag { display: none; }

/* только для FireFox */
noindex:-moz-anylink, tag { display: none; }

/* только для FireFox /all/1623 */
@-moz-document url-prefix()
{
        tag { display: none }
}

/* только для Safari */
@media screen and (-webkit-min-device-pixel-ratio:0){
           tag { display: none }
}

xxx\:*, tag { display: none } /* только для IE */

</style>

Всё, надоело. Никто не использует VML и SVG? Почему все делают скруглённые углы только кучей картинок или через CSS3-свойства? В общем, представляю код, который работает для Opera 9.50 и выше (через SVG background), IE5.0 и выше (через VML), на FireFox 1.5, Safari3 и Konqueror (через свойства CSS3). Та-да:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<!-- подключаем пространство имён VML для IE -->
<!--[if vml]>
    <xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
    <style> v\:* { behavior: url(#default#VML); display: block; } </style>

<![endif]-->

<title>Скруглённые углы</title>

<style type="text/css">
    *    { padding: 0; margin: 0; }
    body { background: white; color: black; font: 12px Arial, sans-serif; }

    .rounded { margin: 100px auto; text-align: center; width: 50%; position: relative; padding: 10px; }

/*
Нижеприведённые background-image работает только в Opera 9.50 и представляет собой закодированный алгоритомом base64
код SVG-картинки:

<svg xmlns="http://www.w3.org/2000/svg">
<mask id="mask">
   <rect width="100%" height="100%" rx="10" ry="10" fill="white" stroke="black" stroke-width="2"/>
</mask>
<rect stroke="black" fill="white" stroke-width="4" mask="url(#mask)" width="100%" height="100%" rx="10" ry="10"/>
</svg>


В этой картинке подготавливается бакграунд со скруглёнными углами
*/
    noindex:-o-prefocus, .rounded-svg {
        background-image: url(data:image/svg+xml;base64,cюда нужно положить base64-кодированную картинку);
        border: none !important;
    }

    /* для разных браузеров указываем rounded corner через CSS3-свойство */
    .rounded-css3 {
        border: 1px solid black;
        -moz-border-radius: 1em;     /* mozilla 1.5 */
        -webkit-border-radius: 1em;  /* safari 3 */
        -khtml-border-radius: 1em;   /* Konqueror */
        border-radius: 1em;          /* CSS3 */
    }
</style>

</head>

<body >
    <!--[if vml]><v:roundrect class="rounded" strokecolor="black" strokeweight="1px" arcsize="0.25" ><![endif]-->
    <!--[if !vml]>--><div class="rounded rounded-css3 rounded-svg"><!--<![endif]-->
        <p>Вот эти ребята!</p>
    <!--[if !vml]>--></div><!--<![endif]-->
    <!--[if vml]></v:roundrect><![endif]-->
</body></html>

В коде есть несколько хаков. В частности, для «Оперы» я использую background, вставленный как SVG-изображение, через data URL. Поэтому приходится выключать border, иначе он закрывает края background. SVG закодировано в base64 (функция base64_encode в PHP), потому что оно занимает так меньше, чем в URL encoded.

Далее. Для IE включается VML, это, если кто не знает, появившаяся ещё до SVG технология построения векторных изображений. Более мощная, чем SVG, кстати. Весь VML включается через условные комментарии и другие браузеры этого безобразия не видят, в том числе их не увидит и валидатор (хотя ему и без VML тут есть на что поругаться).

Для остальных браузеров используются их префиксное свойство border-radius, которое включено в CSS3.

Как мне справедливо подсказали в предыдущей заметке большинство современных браузеров поддерживает свойство text-overflow, позволяющее добиться того, что я сделал в предыдущем примере одной строкой. Работает для всех браузеров, кроме FireFox, у него таких стилей нет.

Я модифицировал предыдущий пример так, чтобы он работал в FireFox и сделал для остальных браузеров поддержку через их родные свойства. Получилось несколько громоздко, но это первый в интернете пример, работающий без JavaScript:

<style type="text/css">
body { background: white; color: black; font-family: Arial; font-size: 16px }

.crop div div
{
    text-overflow: ellipsis;    /* Internet Explorer 6.0 и выше, Safari, Konqueror */
    -o-text-overflow: ellipsis; /* Opera 9.0TP1 и выше */
    white-space: nowrap;
    width: 100%;                /* для IE */
    overflow: hidden;
}

.crop ins, .crop del { display: none } /* скрываем свои хаки от остальных браузеров */

/* стили только для FF, см. /all/1623 */
@-moz-document url-prefix()
{ 
    /* ширина «…» — 16px, высота строки — 18px */
    .crop          { overflow: hidden; height: 18px; width: 100% }
    .crop div      { clear: none; float: left }
    .crop div div  { white-space: nowrap; overflow: hidden; margin-right: 16px; width: auto}
    .crop ins      { float: right; margin-left: -16px }

    /* margin делаем на -1px уже, чем ширина «…», чтобы блок «свалился» чуть раньше */
    .crop del      { float: right; color: white; background: white; width: 16x; margin-left: -15px }
    .crop del, .crop ins { display: block; text-decoration: none }
}
</style>
<div style="max-width: 700px; margin-left: 10px">

<div class="crop">
<div>
    <div>Who let the dogs out (woof, woof, woof, woof)!</div>
    <ins>&hellip;</ins> 
    <del>&hellip;</del>
</div>
</div>

</div>

Вот такая эмуляция text-overflow в FireFox.

Возникла у меня на днях задача — обрезать текст средствами браузера с красивым многоточием, если текст не умещался. Обычно такую проблему решают через JavaScript, но мне пришло в голову сделать это средствами CSS, я даже сразу придумал откуда можно начать.

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

В качестве concept proof я накидал небольшой пример, который сразу заработал в «Опере» и «Сафари», FF2 и IE7 возможностями победнее, они не потянули, видимо, в них придётся убрать селектор «:after» и заменить всё тегами с многоточиями внутри.

Сам код:

<style type="text/css">
    body { background: white; color: black; font-family: Arial; font-size: 16px }

    div.crop { width: 100%; height: 20px; overflow: hidden; z-index: 1 }

    div.crop div { float: left; width: auto }

    div.crop:after     { content: '\2026'; position: relative; z-index: 2; background: white; margin-left: -16px }
    div.crop div:after { content: '\2026'; position: relative; z-index: 3; background: white; color: white }
</style>

<body>
<div class="crop"><div>Текст не умещается в контейнер, до того он длинный</div></div>
<div class="crop"><div>Текст не умещается в контейнер</div></div>
</body>

Ни для кого не секрет, что браузере «Сафари» под Windows использует тот же метод сглаживания, что и под Mac OS. Один из его известных недостатков (кроме сломанных глаз) — текст на тёмном фоне получается (не кажется, а получается) жирнее, чем на светлом, что прекрасно иллюстрирует нижеприведённый скриншот:

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

.our_text { text-shadow: 0 0 0 #000 }

Удивительная избирательная слепота у людей. На «Хабре» опубликовали статью «Новые возможности HTML и CSS в Safari 3.1», где народ восторженно обсуждает возможности, появившиеся в браузере «Сафари». Этим возможностями сто лет в обед — те же яйца, только боком уже давным-давно реализованы в Internet Explorer, причём в версиях 4.xx—5.5.

Это вообще какое-то чудо — все стандарты от Internet Explorer называются «мировым злом» (например, «фильтры»), а стандарты от других производителей — охренительными фичами (вроде тех же «transforms» или CANVAS от Apple). При этом последние шесть лет целая куча функционала была скомуниҗҗена с IE, а сколько там ещё можно утащить (самый известный пример, конечно же, HttpRequest, который придумали в Microsoft и на котором работает AJAX)!

Я составил небольшую таблицу соответствий технологий IE и их реализаций в других браузерах:

Таблицу можно продолжать. Учтите, что всё, что перечислено в ней слева, появилось ещё шесть лет назад.

Мне интересно, кто первым реализует «data binding» из IE, при помощи этой технологии я написал «Песню о пиве» на HTML.

Вышел браузер «Сафари» версии 3.1, в пресс-релизе написано, что «Сафари» — первый браузер, поддерживающий новые теги video и audio из HTML5:

Safari 3.1 is the first browser to support the new video and audio tags in HTML 5 and the first to support CSS Animations. Safari also supports CSS Web Fonts, giving designers limitless choices of fonts to create stunning new web sites

Что касается тега AUDIO — чистая правда, а с VIDEO — вышла накладка. Специальный билд «Оперы», поддерживающий этот тег, вышел 8-го ноября 2007-го года, тогда как Webkit (на движке которого сделан «Сафари») — 12-го ноября, на четыре дня позже.

Кстати, самое интересное, что появилось в том билде «Оперы», это не тег VIDEO, а 3D Canvas — до этого момента тег CANVAS позволял работать только с примитивами на плоскости (отрезками, прямоугольниками, кругами и так далее), знаменитая игра «Canvascape», сделанная с применением этого тега (требует для работы любой браузер, поддерживающий CANVAS), просчитывае 3D-графику самостоятельно, из-за чего игра на средних компьютерах заметно притормаживает.

Для 3D CANVAS задача вращения куба с текстурой, например — тривиальная. Примеров работы с этим новшеством пока немного, в оригинально статье упомянута Snake («змейка») в 3D, написанная Mathieu ’p01’ HENRI.

Как я говорил, Safari (точнее WebKit) движется к прохождению теста ACID3 семимильными шагами. И вот пожалуйста: вчерашняя ночная сборка r30123 проходит 80% (!) процентов теста. Кстати, оказывается многие этого не знают — если кликнуть на букве «A» в слове «ACID3» после прохождения теста, то можно увидеть какие тесты браузер не прошёл.

И ещё раз к теме быстродействия JavaScript. Jeff Atwood произвёл ряд JavaScript-тестов на разных браузерах. В результате получилась любопытнейшая картинка. Расшифровка тестов:

• 3d — тест на основе библиотеки работы с 3D, написанной на JavaScript (испытывается —
• быстродействие массивов и чисел с плавающей точкой)
• access — массивы, свойства объектов, доступ к переменным
• bitops — битовые операции на целых числах
• controlflow — циклы, рекурсия, условия
• crypto — криптоалгоритмы (AES, MD5, SHA1)
• date — производительность при работе с объектом «Date»
• math — различные математические операции
• regpexp — регулярные выражения
• string — работа со строками

Хуже все справился IE7, но, если не принимать во внимание операции для работы со строками, он обгонит FireFox, который сейчас занимает предпоследнее место. В комментариях есть тестирование FireFox 3 b2, вцелом он справляется на 23% лучше, чем вторая версия, но на некоторых тестах проигрывает.

Когда я только начинал выходить в интернет (годах в 1997—1998), обе программы, который в то время считались браузерами — Internet Explorer 4.0 и Netscape Navigator 4.0 умели показывать так называемые «embeded fonts» («внедрённые шрифты», сейчас эту технологию всё чаще называют «web fonts»). IE использовал собственный формат — EOT («Embedded Font Technology»), а компания Netscape — лицензированную у Bitstream технологию.

С помощью «внедрённых шрифтов» в браузер можно было подгружать любой специально подготовленный шрифт и писать тексты им (например, в моём родном Татарстане так делали сайты на татарском языке, ещё до введения татарского алфавита на основе кириллицы в Unicode). Причём IE позволял включать в шрифт не все буквы, а только те, которые могут понадобиться. Технологию незаслуженно ругают — говорят, что из горе-дизайнеров на сайты будет больно смотреть. Запрещать инструмент только потому, что наверняка будут люди, которые не научатся им пользоваться?

Как обычно, то, что появляется в IE, со временем появляется и в других браузерах, только в другом виде. В данный момент «web fonts» является частью не вышедшей ещё спецификации CSS3 (впервые встречается ещё в CSS2) и уже есть браузер, который поддерживает часть возможностей — движок браузеров WebKit (на нём построен, например, браузер Safari) уже начал поддерживать правило «@font-face», позволяющее указывать загружаемый шрифт. Технический директор норвежской компании «Opera Software» Håkon Wium Lie обещал недавно, что «Опера» вот-вот начнёт поддерживать «@font-face», но WebKit обошёл на повороте.

В CSS это всё выглядит следующим образом:

@font-face {
  font-family: "Kimberley";
  src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }

Указывается путь до шрифта, его имя в документе и его формат («truetype»).

Браузер «Сафари» под «Мак», оказывается, умеет отображать PDF (и TIFF, кстати, тоже) в теге IMG. Т. е. как простую картинку. Поскольку в OSX есть встроенная поддержка PDF, такое поведение браузера, видимо, вытекает из того, что картинки в браузере отображаются через какой-то системный компонент. Причём, с отображением PDF через тег OBJECT у «Сафари» есть проблемы, если только не установить специальный плагин от фирмы Adobe.

А вот браузер «Опера», помимо стандартного набора JPEG/PNG/GIF/XBM умеет отображать ещё и ICO. Почему этого не делают остальные браузеры — загадка, ведь им всё равно приходится работать с этим форматом, чтобы отобразить favicon.ico.