Картинки против CSS

Когда можно обойтись инструкцией CSS — это самый лучший вариант. Достаточно написать border-radius: 5px и получим закругленные уголки с радиусом 5 пикселей. Но эта инструкция доступна только в браузерах поддерживающих CSS3.

Еще раньше были созданны собственные свойства у браузеров Mozilla Firefox 2 (-moz-border-radius) и Safari 3 (-webkit-border-radius) с аналогичным действием. Еще были слухи о мистическом -khtml-border-radius для Konqueror, но говорят, что это не работает. Корректно поддерживал закругленные уголки только Safari, когда как в Мозиле эти уголки выглядят ужасно — пиксельные, без сглаживания, они могли быть использованы только если цвета не слишком контрастные.

В Firefox 3 была реализована более правильная поддержка таких уголков. Они стали красивые, сглаженные.

Опера и IE никогда и не пытались это реализовать. О них и о некрасивых уголках в FF2 и пойдет речь в этом посте.

Opera и SVG

Opera, первый и единственный браузер, в котором была реализована поддержка использования SVG в качестве фона блока. Делается это довольно просто.

В отдельный файл (например bg.svg) пишем SVG-код и сохраняем. Это обычный текстовой файл, только с раcширением svg. В CSS для нужного нам блока прописываем фон:

.block {
   background: url(bg.svg);
}

Чтобы это были именно закругленные уголки, нужно в SVG-файле написать что-то вроде такого:

<svg xmlns="http://www.w3.org/2000/svg">
<rect stroke="#000" fill="#DDD" stroke-width="4" width="100%" height="100%" rx="15" ry="15" />
</svg>

Атрибуты тэга rect меняйте как вам нужно.

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

Firefox 2

Пиксели, пиксели, пиксели… Они повсюду, они атакуют… Они напоминают времена DOS-овских игр…

Исправить можно. Опять же через SVG. Но поскольку FF2 не поддерживает SVG в качестве фона, то придется хитрить и добавить пару лишних блоков, один из которых будет являться внедренным объектом, а в другой будет помещено нужное нам содержимое. Таким образом object будет играть роль подложки.

Добавим позиционирование.

/* внешний блок */
.block {
position: relative;
}

/* объект */
.block > object {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}

В результате .content будет наложен на object.

Осталось придумать как это показать только FF2 и скрыть от других браузеров. В вашем распоряжении наверное только хаки.

IE

Много пелось диферамбов языку VML. Сколько статей о том, на сколько он лучше SVG. А в нашем случае все в основном предлагают использовать код такого плана:

Content of the block

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

Как вы заметили радиус углов задается атрибутом arcsize, куда записывается или некое дробное число или число процентов. Как это понимать?

Оказывается неутомимые редмондовские индусы придумали динамичное решение описав его такой ремаркой:

Defines the rounded corners of a rounded rectangle as a percentage of half the smaller dimension of the length and width of a rectangle. 0% would have square corners, and 100% would form circular corners. A square with an ArcSize value of 1.0 would be a circle. The default value is 0.2 (20%).

Перевожу: Определяет закругленные углы у прямоугольника как проценты от половины меньшего размера длины или ширины прямоугольника. Т. е. берется ширина или высота (что из них меньше, то и берется), делится пополам и высчитываются проценты от этой величины.

А теперь внимание вопрос: с какого укура нужно было быть, чтобы такое придумать?

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

Решение

Вставляем внутрь блока два VML-блока, выставляем высоту в два раза большую нужного нам радиуса, радиус прописывам 1, и размещаем с абсолютным позиционированием один прямоугольник наверх, другой — вниз.

Тупое, но все-таки решение.

И на сладкое

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

Я попробовал все выровнять, но использовал очень много хакков, и проверял в браузерах FF2, FF3, Safari 3, IE 6, IE 7, Opera 9.5. Не знаю в каких условиях, но где-то обязательно даст сбой. Так что, мой материал несет учебно-ознакомительный характер, а не руководство к использованию.

Пример закругленных уголков без использования картинок

Зацепило

О Silverlight 1.0 говорить нечего. Тот же Flash, только элементы в приложении описаны с помощью XAML, что позволяет индексировать содержимое, и не имеет своего скрипта, а использует JavaScript. Зная, как IE обрабатывает JS можем предположить, на сколько может быть популярной эта версия.

Логично, что MS не стали оптимизировать обработку JS в своём браузере, а пошли другим путём. А точнее…

Silverlight 1.1

Эта версия может иметь программную составляющую написанную на любом .NET или web-языке (С#, Visual Basic, PHP, Ruby и др.). Т.е. получив доступ к элементам в приложении через описание XAML, можно забыть про JavaScript и писать на своём любимом языке. Потом это каким-то образом экспортируется в свой формат исполняемый маленьким фреймворком установленным на компьютере пользователя вместе с Silverlight-плагином для браузера. Я не буду вдаваться в подробности, о том как это всё работает, меня это не интересует.

Лектор озвучил плюсы:

• Очень маленький размер файла плагина
• Быстрая обработка видео
• Быстрая обработка скрипта

Я не буду искать опровержений или подтверждений данным высказываниям. Скажу лишь, что для создания аналоговых часов, лектор скопировал около 200 строчек C# кода, и ещё около 100 XAML кода. Многовато что-то…

XML based structure

Так, всё-таки что же меня зацепило? А сам принцип. С принципом описания структуры элементов в XML языке и управления им через скрипт я столкнулся в TYPO3 в плагине TemplaVoila!. Плагин позволяет взять HTML шаблон, отметить на нём «горячие» тэги, дать им соответствующие уникальные имена для того, чтобы можно было ими управлять (помещать контент, настраивать внешний вид) в TypoScript.

К примеру:

• Отметим на сайте какой-то тэг, например <div id=”sidebar”>…</div>.
• Дадим ему уникальное имя: lib.sidebar (lib —глобальный объект содержащий внутренние объекты на странице).
• В XML структуре запишется (причём самому ничего не надо писать):

  
  	
  
  		Just place some content in sidebar
  		
  			[ ### Sidebar goes here ### ]
  		
  		TypoScriptObject
  		div:inner
  		lib.sidebar
  	
  

• А в TypoScript можем описать, какого типа это будет объект и что же он должен содержать:
  lib.sidebar = TEXT
lib.sidebar .value = Hello, world!

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