URI медиа фрагменты – пространственное измерение.

Автор статьи: Fabrice Weinberg. Оригинал:http://css-tricks.com/media-fragments-uri-spatial-dimension/

Автор этой статьи Фабрис Вейнберг относится к типу людей, которые любят покопаться в крайних, еще не достаточно освоенных сторонах CSS и веб-технологий. И этот пост не является исключением.

Уважаемые читатели, предлагаю вам заглянуть в спецификацию Media Fragments URI, посвященную URI медиа фрагментам. В частности в тот ее раздел, в котором говориться о пространственном измерении. Часть спецификации, представляющая временное измерение медиа файлов, была реализована в прошлом году браузерами Chrome и Firefox, но то, что касается пространственного измерения, то оно на момент написания этой статьи не поддерживается ни одним из современных браузеров.

К вашему сведению:  Вопрос, рассматриваемый в данной статье относится к категории крайне экспериментальных. Единственно возможным вариантом его применения на практике является использование созданного мной полифила, который работает только в Chrome и Firefox. Не используйте его в проектах для масштабного применения.

Для того, чтобы прояснить ситуацию и помочь вам понять, о чем идет речь, предлагаю представить случай, когда используются временные параметры для задания смещения начала и конца проигрывания контента видео/аудио элементов страницы (<video>/<audio>), создающие требуемый фрагмент. Вот здесь можно увидеть живой пример.

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

Как это работает?

URI медиа фрагменты (Media Fragments URI) представляют собой синтаксис, при помощи которого мы можем лишь определить необходимый фрагмент изображения. Вот как это выглядит:

#xywh=160,120,320,240 # => results in a 320×240 box at x=160 and y=120
#xywh=pixel:160,120,320,240 # => results in a 320×240 box at x=160 and y=120
#xywh=percent:25,25,50,50 # => results in a 50%x50% box at x=25% and y=25%

Это, собственно, обычный хэш, добавляемый вами к URL адресам медиа файлов.

Пример.

Если вы добавите эти фрагменты к URL адресу изображения, вот таким образом:

http://placekitten.com/500#xywh=160,120,320,240

То в результате получим:

Изображение.

Оригинальное изображение выглядит вот так:

Изображение.

Как и заявлено в спецификации, в результате мы получили изображение размером 320×240 пикселей, верхний левый угол которого смещен в точку 160×120.

Для чего это может пригодиться?

Для совершенствования технологии CSS спрайтов.

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

При помощи медиа фрагментов мы сможем создать повторяющийся фон элемента background-image, используя находящееся в спрайте изображение.

Пример:

Изображения.

При создании спрайта для примера я применил вот этот шаблон, а также несколько Twitter Bootstrap иконок. Здесь традиционная технология CSS спрайтов используется для создания иконок, а медиа фрагмент для формирования фона элемента повторяющимся изображением.

Анимация изображений.

Другой возможный путь использования медиа фрагментов – создание анимации изображения. Этот вопрос обсуждался в статье Джона Скиннера (John Skinner) "Animated GIFs the Hard Way" («Сложный способ GIF анимации»), посвященной созданию веб-страницы для текстового редактора Sublime Text 2. Но я совсем не сторонник применения такого метода для масштабных проектов, так как разделяю существующее мнение, что JavaScript больше подходит для подобной анимации. Я просто пытаюсь выжать из CSS максимум возможностей.

Создание полифила.

В поисках решения, позволяющего протестировать URI медиа фрагменты в современных браузерах, я пытался найти метод, симулирующий их поведение. Полную версию созданного мной полифила можно увидеть на CodePen.

Firefox

То, что касается Firefox, то здесь особых проблем не возникло. Мы можем использовать CSS функцию -moz-image-rect, которая идеально подходит для решения нашей задачи, к тому же она была реализована в Firefox, начиная с четвертой версии в марте 2011 года.

WebKit

В движке WebKit имеется отличный инструмент, так называемый CSSCanvas (-webkit-canvas drawing). Вы можете рассматривать это как фон элемента (background-image), реализованный элементом canvas, доступ к которому можно получить при помощи JavaScript. Но проблема в данном случае заключается в том, что не существует никакой спецификации, касательно данного функционала, и по этой причине такое решение будет работать только на WebKit, по крайней мере, определенное время (в Firefox есть что-то подобное — -moz-element). В действующей версии (23) браузера Google Chrome имеет место баг (Bug 16199), который уже исправлен в Google Chrome Canary. Но этот баг никак не влияет на реализацию данного полифила, так как проблема заключается лишь в корректном обновлении канвы при анимации контента.

Пример кода:

div {
background: -webkit-canvas(name_of_canvas);
}

Теперь можно использовать этот canvas для создания контекста отрисовки в JavaScript:

var ctx = document.getCSSCanvasContext("2d", "name_of_canvas", 100, 100);

Все, что нам нужно сделать – это извлечь контекст рисования, определенный в нашем CSS коде под именем name_of_canvas и установить его размеры (длину и ширину по 100 пикселей).

Вот пример, по понятным причинам работающий только в Webkit:

<div class="canvasBackground"></div>
.canvasBackground{
background:-webkit-canvas(name_of_canvas);

width:100px;
height:100px;
}

var ctx = document.getCSSCanvasContext("2d", "name_of_canvas", 100, 100);

ctx.fillStyle = "#FF1C0A";
ctx.beginPath();
ctx.arc(50, 50, 50, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();

Результат:

Изображение.

Итоги.

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

* Примечание переводчика.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *