Применение clip для PNG в ИЕ

01 Oct, 2008

Пожалуй, самое редкоиспользуемое CSS-свойство, из вообще используемых. Особенно удивительно при этом, что все броузеры его поддерживают. Еще удивительнее, что от него есть реальная польза.

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

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

илюстрация clipНеяркие части картинки на самом деле невидимы. А жаль, да?

Логика этих параметров нетривиальная. Проще всего запомнить что: 1е и последнее число — это координаты левого верхнего угла, а средние два числа — правого нижнего угла вырезаемого прямоугольника. Я сделал специальный интересный пример, чтобы это проиллюстрировать. Если считать что (x1, y1) и (x2, y2) координаты левого верхнего и правого нижнего углов, то вот так все выглядит:
  1. clip: rect(y1 x2, y2 x1) /*Логично, не правда ли? может поэтому его никто и не использует?*/

Очевидно, подразумевается, что в будущем появится возможность вырезать эллипсы:

  1. clip: ellipse(42px,14px,188px, 200px);
И где-то в CSS3D, я надеюсь, наконец появятся додекаэдры:
  1. clip: dodecahedron(42px,16px, 188px, 100px); /*да! для построения додекадра достаточно знать координаты центра его симметрии, и радиус*/
Вы ведь знаете что:

Вселенная представляет собой набор бесконечно повторяющихся додекаэдров

clip: ИЕ и все остальные

Разумеется и тут не обошлось без нестыковок. Согласно спецификации расстояния должны писаться через запятую, вот так:
  1. clip: rect(5px, 40px, 45px, 5px);
Однако, при использовании запятых ИЕ не воспринимает значения. Таким образом, приходится писать без них:
  1. clip: rect(5px 40px 45px 5px);
Это не совсем валидно, но, тем не менее, воспринимается всеми броузерами. Такие вот милые казусы на окраинах CSS.

png-24 в ИЕ

Пожалуй все уже знают что полупрозрачные PNG-24 файлы в ИЕ6 и ниже не работают. И для их нормальной работы нужно задавать фон как-то так:
  1. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='MYTERRIFIC.png')
В этом методе прекрасно только одно: он вообще работает. Но он не позволяет нам использовать background-position. То есть вся крутость от прелоадов и спрайтов со всякими сдвиганиями фона теряется.

Мы можем заменить «crop» на «scale», тогда картинка просто растянется (не повторится), но контролировать background-posiiton не можем. Я думал, что не можем.

Можем! png-24 background-position в ИЕ!

Будем использовать, к примеру, такой вот рисунок, 200 на 200 пикселей. Для пущей простоты вычислений.

картинкаВ картинке два состояния пункта меню. Каждое размером 200 на 100 пикселей. Если у вас старый ИЕ, она коряво отобразится, мне очень жаль.

Так как все кроме ИЕ уже отображают PNG нормально, то для них сработает обычное:

  1. a{
  2. height:100px; width:200px;
  3. background:url(nav.png) no-repeat 0 0;
  4. }
  5. a:hover{
  6. background-position:0 -100px; /*фоновый рисунок сместится на 100 пикселей вверх, и визуально цвет пункта меню изменится*/
  7. }
Для начала заставим ИЕ нормально отображать полупрозрачный PNG (эти стили должен увидеть только ИЕ):
  1. a{
  2. background:none;
  3. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="nav.png", sizingMethod="crop");
Вот что нужно теперь сделать для ИЕ:
  1. a{
  2. height:200px;/*чтобы вся картинка поместилась в фон, и было из чего вырезать*/
  3. clip:rect(0px 200px 100px 0px); /*Вырезаем верхнюю часть картинки*/
  4. }
  5. a:hover{
  6. clip:rect(100px 200px 200px 0px); /*Вырезаем нижнюю часть картинки*/
  7. top:-100px;/*Так как clip вырезал нижнюю часть, и оставил пространство вверху, нужно приподнять видимую часть картинки вверх, прямо как на фотках с Надин*/
  8. }
Можно любоваться результатом. Работает!

Если словами: при наведении мышки, clip вырезает нижнюю часть ссылки (верхняя некликабельна становится). Таким образом, чтобы визуально она осталась на месте, приходится её поднять на высоту 100px вверх. А кликабельная область остается того же размера.

Ссылки

И

Кроме clip, существует так же свойство crop. Отличается только тем, что crop не просто оставляет видимой часть блока, а еще и убирает все остальное (не остается отступов равных размеру картинки по сторонам, как на фотках с «Каталиной»). Вторым важным отличием этого свойства от clip является то, что никто его не поддерживает. CSS3 Working Draft все-таки.

Свойство интересное, но найти ему применение нелегко. Кроме описанной техники для ИЕ, я слышал еще лишь об обрезании аватар, под квадратный размер, либо подобный же контроль за загружаемыми пользоваталем картинками (когда лень делать это на сервере).

Возможно у вас есть идея?

48 комментариев к “Применение clip для PNG в ИЕ”

1.cssing :: Архив :: CSSing 2008 | 28 Feb, 2009
[...] Применение clip для PNG в ИЕ — эмуляция свойства background-position для полупрозрачных PNG-картинок в ИЕ [...]
2.Юрко | 01 Oct, 2008
Щось в тебе все якось «корявєнько». От Студія Лєбєдєва жжот.
3.Busla | 01 Oct, 2008
"Так как все кроме ИЕ уже отображают PNG нормально" почему-то, говоря про всех, подразумеваем современную версию, а говоря про IE - разработку семилетней давности ;) Может, вообще "забить" на IE6 ? Главное же - информация, а не допиксельная точность на всех абсолютно платформах и устройствах.
4.Lynn | 01 Oct, 2008
> Отличается только тем, что crop не просто оставляет видимой часть блока, а еще и убирает все остальное (не остается отступов равных размеру картинки по сторонам, как на фотках с «Каталиной»). clip тоже ничего не оставляет, т.к. применяется только к абсолютно спозиционированным элементам. А отступы в примере из-за заданных размеров у DIV'а
5.Vladson | 01 Oct, 2008
Busla, лично я с вами согласен (давно "забил" на IE6) но у меня узкоспециализированные сайты где сидят люди в большей части на FF/Opera/итд но взять в пример тот-же Mail.ru там сидят очень многие кто и не знают что такое браузер (им как с магазина комп с WinXP и IE6 пришёл, они так ничего и не меняли ибо не умеют) (Вот если бы в XP-SP3 по дефолту был IE7 то уже максимум через год можно было бы смело "забить" на IE6)
6.akella | 01 Oct, 2008
@Busla: Да, я был не совсем корректен, привык слишком к ИЕ6, ведь когда-то я вообще верстал под ИЕ5 ;). Но серьезные сайты еще пару лет(или больше) не смогут отказаться от ИЕ6 =(, слишком большой процент. Хорошо хоть ИЕ5 мы победили =) это на самом деле, очень хорошо. Насчет допиксельной согласен, на этом блоге я например на ИЕ6 почти забил, но когда дело касается прозрачных ПНГ, там уж совсем ужасно оно без хаков будет выглядеть ( @Lynn: а как могут заданные размеры у ДИВ влиять на отступы? клип оставляет сам блок в "потоке", просто показывает только его часть, так уж он работает. Именно поэтому в хаке для ие приходится дописывать top:-100px; Под отступами я имел ввиду "весь остальной невидимый блок", возможно это послужило причиной неверного толкования.
7.Михаил Валенцев | 01 Oct, 2008
Для IE и png часто использую "универсальное" решение: http://www.twinhelix.com/css/iepngfix/ (v2 - для background-position там подключается небольшой js, также с clip), правда часто и критикуемое за подобную универсальность.
8.Мир CSS » Clip? Что это? | 01 Oct, 2008
[...] Краткое описание [...]
9.xain | 01 Oct, 2008
На том, же сайте Лебедева, crop используется и по моему работает. http://www.artlebedev.ru/tools/technogrette/html/links/ (это так, для информации) И очень полезный хак с position в ИЕ, но для меня, это пока очень сложная магия :-)
10.xain | 01 Oct, 2008
+8 в исходниках странички, 116 строка.
11.akella | 01 Oct, 2008
Очень хорошо что вы читаете их сайт, это говорит о вашем высоком уровне! Хотя мне некоторые разделы на их сайте не очень по душе, и я уже говорил почему ;) Но очевидно вы спутали crop: rect(0 10px 10px 0); с sizingMethod='crop'. Вот по этой ссылке вы можете почитать подробнее о том, что я имел ввиду. Она в посте в конце была, прямо на слове crop ;).
12.Макисим Покровский | 01 Oct, 2008
Я пользуюсь IE PNG Fix.
13.akella | 01 Oct, 2008
Неужели мне одному нравится копаться у истоков и писать такие кусочки от руки? =) Отучиться что ли... =)
14.Vitaly Harisov | 01 Oct, 2008
Мы используем для спрайтов на один больше и единую реализацию во всех браузерах, не черех background-position, а через смещение вложенного элемента. Я называю это Advanced CSS Sprites. Всё никак статью не напишу.
15.Vitaly Harisov | 01 Oct, 2008
Неужели мне одному нравится копаться у истоков и писать такие кусочки от руки? =) Отучиться что ли… =)
Мне тоже нравится. Я практически не использую готовые решения, до всего пробую дойти сам. У нас, кстати, есть отличное решение для закруглённых уголков, н днях набрейнштормили. Поделюсь, как доделаю всё. Как обычно, bullet-proof и всё такое.
16.miripiruni | 02 Oct, 2008
> ...на этом блоге я например на ИЕ6 почти забил... Вот и правильно. Вероятнее всего, что 98%—99% посетителей этого блога не используют IE...
17.akella | 02 Oct, 2008
@miripiruni: Кстати любопытно, аж 9 процентов на ИЕ6 ;) И еще несколько педантов смотрят в ИЕ5.0! Статистика броузеров на CSSing Вот и "забивай" на него после этого... @Vitaly Harisov: Ха! Буду ждать с нетерпением =) Любопытно. Насколько я понял, в Advanced CSS Sprites получился такой себе клиппинг через overflow.
18.Денис Чистяков | 02 Oct, 2008
Отличная статья, как всегда очень интересно и познавательно. Только, как уже отмечалось выше, 6-ой ослик действительно по тихонькую исчезает, чему конечно все веб-разработчики радуются. Очень надеюсь, что с выходом IE8-final мелкомягкие сделают таки принудительную замену хотя бы на гораздо более вменяемый в плане восприятия CSS и рендера IE7, а то три осла это уже будет явный перебор ) Эту бы статью да год-полтора назад, просто цены бы не было.
19.Genn | 02 Oct, 2008
Юра, в твоей таблице посещений показательно не то, что многие мучаются с шестым Эксплорером, а то, что пользователей Сафари практически не меньше — третья часть от пользователей Эксплорера. Так что всем разработчикам, которые «забивают» на Сафари хочется передать пламенный привет. При всей их ненависти к Эппл, все же стоит учитывать пользователей ПО этой компании.
20.Vitaly Harisov | 02 Oct, 2008
Насколько я понял, в Advanced CSS Sprites получился такой себе клиппинг через overflow.
Ага, но при этом нет ограничения, что у родителя должен быть position: relative (ты используешь для сдвига left). Если убрать por и использовать для сдвига margin-left: -100px, то теряется возможность двигать элемент со спрайтом маргином, если будет надо. В общем, два элемента и overflow: hidden всяко баще.
21.Роман | 02 Oct, 2008
не совсем хороший способ с этим clip, для каких-то случаев подойдёт, для каких то нет. скажем для блоков с текстом у которых должен быть фон-png (возьмите ваш же пример и попробуйте сделать ссылки текстом) В этом случае вы просто не сможете воспользоваться crop.
22.akella | 02 Oct, 2008
@Роман: для текста действительно чуть труднее. Изначально я сделал пример с текстовым словом "Работает!", но мне не понравилось что идея усложняется и не так красива, потому сделал проще. Ничего там особенного нет, просто нужно отдельно позиционировать сам текст при хавере, добавлять ему паддинг. Ничего такого невозможного.
23.Mourner | 02 Oct, 2008
Юра, ты не один, я с тобой. :)
24.Busla | 04 Oct, 2008
На счёт того, где использовать clip - на многих страницах имеется сторонний контент - виджеты/информеры. Невзирая на богатство выбора оформлений, рамочки и тени у всех разные. Клипом можно оставить только информативную часть, которая генерится сторонним сервером, а рамочки/тени нарисовать самому, более единообразно с оформлением страницы.
25.Вебдайджест | HTML и CSS, доступность и юзабилити — Life Style | 09 Oct, 2008
[...] Применение clip для PNG в ИЕ — использование css свойства clip для реализации эффекта [...]
26.Интересное за неделю… Wordpress, PNG и JQuery | Вебмастеру посвящается... | 06 Oct, 2008
[...] 2. Применение clip для PNG в ИЕ [...]
27.Vladson | 06 Oct, 2008
Пишу сейчас из под IE4 о боже, ощущения просто космические. Советую попробовать (в жизни вообще надо всё попробовать)
28.smithrix | 11 Oct, 2008
Классный эффект, правда фон у результата адский :)
29.Kolchin | 11 Oct, 2008
Поставьте себе облако тегов. Будет намного проще ориентироваться в Ваших записях. Кстати, могу посоветовать плагин для WordPress, называется "WP Cumulus" - очень прикольное облако получается в форме шара из меток. Ссылку давать не буду, гугл поможет)
30.Chicherin | 15 Oct, 2008
[q]В общем, два элемента и overflow: hidden всяко баще.[/q] А насколько это семантично? К тому же, когда IE6 отправится на заслуженный отдых, гораздо проще будет грохнуть пару строк в стилях, нежели вычищать ставшие уже ненужными лишние элементы из DOMа.
31.Vitaly Harisov | 15 Oct, 2008
[q]В общем, два элемента и overflow: hidden всяко баще.[/q] А насколько это семантично? К тому же, когда IE6 отправится на заслуженный отдых, гораздо проще будет грохнуть пару строк в стилях, нежели вычищать ставшие уже ненужными лишние элементы из DOMа.
Настолько же семантично, как использование div для разметки шапки сайта. MSIE6 отправится на заслуженный отдых не раньше чем через 2-3 года.
32.Chicherin | 15 Oct, 2008
Ну это еще не повод отказываться от уменьшения количества элементов в DOMe по возможности. Данный способ в некоторых случаях позволит этого добиться.
33.Vitaly Harisov | 15 Oct, 2008
Это неуниверсально.
34.cr_ | 17 Oct, 2008
спасибо! нужна была именно такая реализация чтобы не заморачиваться как всегда ради ие6 и мусорить код и этот способ прошёл проверку в боевых условиях! :)
35.designer | 22 Oct, 2008
У меня вопрос , как задавать цвет фона ?
36.akella | 22 Oct, 2008
Обычный background-color сработает.
37.Jman | 06 Nov, 2008
Однако красота, многие вещи мне в голову приходили.... но это разорвало мне мозг...
38.Алексей Ог | 08 Nov, 2008
А движение этого видимого блока (его попеременное открытие) можно задать в зависимости от места нахождения курсора? Привязать открытие неыидимой части к курсору я хотел сказать.
39.fletcher | 01 Dec, 2008
[q]clip: rect(y1 x2, y2 x1) /*Логично, не правда ли? может поэтому его никто и не использует?*/[/q] На самом деле и вправду логично, если проводить аналогию с тем, в каком порядке записываются значения для margin, например.
40.akella | 22 Dec, 2008
Да, но клип же позволяет не привязываться к контенту - а делать это для любого содержимого без всяких паддингов - вроде как удобней же)
41.Егор | 22 Dec, 2008
Попробовал clip - клевая штука :) Мне вот интересно - а зачем вообще нужен clip, если можно просто двигать контейнер с фоном (ссылку) относительно видимой области контейнера-родителя (элемент списка) и все лишнее будет отсекаться с помощью overflow:hidden ?
42.Егор | 22 Dec, 2008
Кстати с текстом ничего сложного - просто добавляется паддинг кратный высоте строки.
43.Егор | 22 Dec, 2008
Вот если бы crop работал - то да :) несомненно было бы полезно. С clip - неоднозначная ситуация.. Ведь мы точно так же двигаем контейнер относительно родителя, точно так же скрываем лишнюю часть контейнера с помощью overflow, но в добавок еще делаем "обрезание" :) визуально эфект и с обрезанием и без - одинаковый, тогда я не вижу смысла нагружать клиентский и без того не сильно быстрый IE дополнительными вычислениями. Вот как-то так. А в целом - несомненно интересный способ... Я давно ничего такого интересного не узнавал, оказывается есть еще загадки :) Главное применение найти правильное :)
44.Егор | 22 Dec, 2008
В догонку добавлю, может для кого-то это был секрет или может кто-то сможет прояснить феномен, но — вот такой вот способ реализации спрайтов (через абсолютное позиционирование самого контейнера с фоном, а не фона в контейнере) — в IE6 работает ощутимо быстрее даже с обычными (непрозрачными) изображениями. А background-position в IE6 при смене состояний почему-то как-то неправильно работает (например вместо того чтобы подвинуть фон - он его сначала снова загружает... особенности кэширования? так и не разобрался в общем ).
45.INOZ | 28 Dec, 2008
Еще один способ, как заставить IE правильно отображать png с альфа-прозрачностью: http://habrahabr.ru/blogs/webdev/46597/ Метод преобразует png в VML. Из достоинств: 1) в отличии от других fixов не использует AlphaImageLoader; 2) свойства CSS background-repeat и background-position работают; 3) поддерживается доступ к стилю элемента через element.style и работа с псевдо-классом :hover.
46.JavaScript, с помощью которого ИЕ5.5-8 поддерживает веб-стандарты | Искусство создания и продвижения сайта | 03 Jun, 2010
[...] Статья об использовании PNG и background-position в ИЕ6: cssing.org.ua/2008/10/01/clip-it-baby/ [...]
47.Зубчики на CSS | Просто блог | 19 Feb, 2014
[...] Пост про clip, там есть фотка красивой модели [...]
48.cssing » Архив » Зубчики на CSS | 31 Jul, 2013
[...] Пост про clip, там есть фотка красивой модели [...]