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

1 October, 2008

XHTML/CSS

Пожалуй, самое редкоиспользуемое 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 все-таки.

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

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

XHTML/CSS

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

Юрко | 1. 1 October, 2008

Щось в тебе все якось «корявєнько». От Студія Лєбєдєва жжот.

Busla | 2. 1 October, 2008

“Так как все кроме ИЕ уже отображают PNG нормально”
почему-то, говоря про всех, подразумеваем современную версию, а говоря про IE – разработку семилетней давности ;)
Может, вообще “забить” на IE6 ? Главное же – информация, а не допиксельная точность на всех абсолютно платформах и устройствах.

Lynn | 3. 1 October, 2008

> Отличается только тем, что crop не просто оставляет видимой часть блока, а еще и убирает все остальное (не остается отступов равных размеру картинки по сторонам, как на фотках с «Каталиной»).

clip тоже ничего не оставляет, т.к. применяется только к абсолютно спозиционированным элементам. А отступы в примере из-за заданных размеров у DIV’а

Vladson | 4. 1 October, 2008

Busla, лично я с вами согласен (давно “забил” на IE6) но у меня узкоспециализированные сайты где сидят люди в большей части на FF/Opera/итд но взять в пример тот-же Mail.ru там сидят очень многие кто и не знают что такое браузер (им как с магазина комп с WinXP и IE6 пришёл, они так ничего и не меняли ибо не умеют)

(Вот если бы в XP-SP3 по дефолту был IE7 то уже максимум через год можно было бы смело “забить” на IE6)

akella | 5. 1 October, 2008

@Busla: Да, я был не совсем корректен, привык слишком к ИЕ6, ведь когда-то я вообще верстал под ИЕ5 ;).
Но серьезные сайты еще пару лет(или больше) не смогут отказаться от ИЕ6 =(, слишком большой процент. Хорошо хоть ИЕ5 мы победили =) это на самом деле, очень хорошо.
Насчет допиксельной согласен, на этом блоге я например на ИЕ6 почти забил, но когда дело касается прозрачных ПНГ, там уж совсем ужасно оно без хаков будет выглядеть (

@Lynn: а как могут заданные размеры у ДИВ влиять на отступы? клип оставляет сам блок в “потоке”, просто показывает только его часть, так уж он работает. Именно поэтому в хаке для ие приходится дописывать top:-100px;
Под отступами я имел ввиду “весь остальной невидимый блок”, возможно это послужило причиной неверного толкования.

Михаил Валенцев | 6. 1 October, 2008

Для IE и png часто использую “универсальное” решение: http://www.twinhelix.com/css/iepngfix/ (v2 – для background-position там подключается небольшой js, также с clip), правда часто и критикуемое за подобную универсальность.

Мир CSS » Clip? Что это? | 7. 1 October, 2008

[…] Краткое описание […]

xain | 8. 1 October, 2008

На том, же сайте Лебедева, crop используется и по моему работает.
http://www.artlebedev.ru/tools/technogrette/html/links/
(это так, для информации)
И очень полезный хак с position в ИЕ, но для меня, это пока очень сложная магия :-)

xain | 9. 1 October, 2008

+8 в исходниках странички, 116 строка.

akella | 10. 1 October, 2008

Очень хорошо что вы читаете их сайт, это говорит о вашем высоком уровне! Хотя мне некоторые разделы на их сайте не очень по душе, и я уже говорил почему ;)
Но очевидно вы спутали
crop: rect(0 10px 10px 0);
с
sizingMethod=’crop’.
Вот по этой ссылке вы можете почитать подробнее о том, что я имел ввиду. Она в посте в конце была, прямо на слове crop ;).

Макисим Покровский | 11. 1 October, 2008

Я пользуюсь IE PNG Fix.

akella | 12. 1 October, 2008

Неужели мне одному нравится копаться у истоков и писать такие кусочки от руки? =)
Отучиться что ли… =)

Vitaly Harisov | 13. 1 October, 2008

Мы используем для спрайтов на один больше и единую реализацию во всех браузерах, не черех background-position, а через смещение вложенного элемента. Я называю это Advanced CSS Sprites. Всё никак статью не напишу.

Vitaly Harisov | 14. 1 October, 2008

Неужели мне одному нравится копаться у истоков и писать такие кусочки от руки? =)
Отучиться что ли… =)

Мне тоже нравится. Я практически не использую готовые решения, до всего пробую дойти сам. У нас, кстати, есть отличное решение для закруглённых уголков, н днях набрейнштормили. Поделюсь, как доделаю всё. Как обычно, bullet-proof и всё такое.

miripiruni | 15. 2 October, 2008

> …на этом блоге я например на ИЕ6 почти забил…
Вот и правильно. Вероятнее всего, что 98%—99% посетителей этого блога не используют IE…

akella | 16. 2 October, 2008

@miripiruni: Кстати любопытно, аж 9 процентов на ИЕ6 ;) И еще несколько педантов смотрят в ИЕ5.0!
Статистика броузеров на CSSing
Вот и “забивай” на него после этого…

@Vitaly Harisov: Ха! Буду ждать с нетерпением =) Любопытно.
Насколько я понял, в Advanced CSS Sprites получился такой себе клиппинг через overflow.

Денис Чистяков | 17. 2 October, 2008

Отличная статья, как всегда очень интересно и познавательно.
Только, как уже отмечалось выше, 6-ой ослик действительно по тихонькую исчезает, чему конечно все веб-разработчики радуются. Очень надеюсь, что с выходом IE8-final мелкомягкие сделают таки принудительную замену хотя бы на гораздо более вменяемый в плане восприятия CSS и рендера IE7, а то три осла это уже будет явный перебор )
Эту бы статью да год-полтора назад, просто цены бы не было.

Genn | 18. 2 October, 2008

Юра, в твоей таблице посещений показательно не то, что многие мучаются с шестым Эксплорером, а то, что пользователей Сафари практически не меньше — третья часть от пользователей Эксплорера. Так что всем разработчикам, которые «забивают» на Сафари хочется передать пламенный привет. При всей их ненависти к Эппл, все же стоит учитывать пользователей ПО этой компании.

Vitaly Harisov | 19. 2 October, 2008

Насколько я понял, в Advanced CSS Sprites получился такой себе клиппинг через overflow.

Ага, но при этом нет ограничения, что у родителя должен быть position: relative (ты используешь для сдвига left). Если убрать por и использовать для сдвига margin-left: -100px, то теряется возможность двигать элемент со спрайтом маргином, если будет надо. В общем, два элемента и overflow: hidden всяко баще.

Роман | 20. 2 October, 2008

не совсем хороший способ с этим clip, для каких-то случаев подойдёт, для каких то нет. скажем для блоков с текстом у которых должен быть фон-png (возьмите ваш же пример и попробуйте сделать ссылки текстом) В этом случае вы просто не сможете воспользоваться crop.

akella | 21. 2 October, 2008

@Роман: для текста действительно чуть труднее. Изначально я сделал пример с текстовым словом “Работает!”, но мне не понравилось что идея усложняется и не так красива, потому сделал проще. Ничего там особенного нет, просто нужно отдельно позиционировать сам текст при хавере, добавлять ему паддинг. Ничего такого невозможного.

Mourner | 22. 2 October, 2008

Юра, ты не один, я с тобой. :)

Busla | 23. 4 October, 2008

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

Интересное за неделю… Wordpress, PNG и JQuery | Вебмастеру посвящается... | 24. 6 October, 2008

[…] 2. Применение clip для PNG в ИЕ […]

Vladson | 25. 6 October, 2008

Пишу сейчас из под IE4 о боже, ощущения просто космические. Советую попробовать (в жизни вообще надо всё попробовать)

Вебдайджест | HTML и CSS, доступность и юзабилити — Life Style | 26. 9 October, 2008

[…] Применение clip для PNG в ИЕ — использование css свойства clip для реализации эффекта […]

smithrix | 27. 11 October, 2008

Классный эффект, правда фон у результата адский :)

Kolchin | 28. 11 October, 2008

Поставьте себе облако тегов. Будет намного проще ориентироваться в Ваших записях. Кстати, могу посоветовать плагин для WordPress, называется “WP Cumulus” – очень прикольное облако получается в форме шара из меток. Ссылку давать не буду, гугл поможет)

Chicherin | 29. 15 October, 2008

[q]В общем, два элемента и overflow: hidden всяко баще.[/q]
А насколько это семантично?
К тому же, когда IE6 отправится на заслуженный отдых, гораздо проще будет грохнуть пару строк в стилях, нежели вычищать ставшие уже ненужными лишние элементы из DOMа.

Vitaly Harisov | 30. 15 October, 2008

[q]В общем, два элемента и overflow: hidden всяко баще.[/q]
А насколько это семантично?
К тому же, когда IE6 отправится на заслуженный отдых, гораздо проще будет грохнуть пару строк в стилях, нежели вычищать ставшие уже ненужными лишние элементы из DOMа.

Настолько же семантично, как использование div для разметки шапки сайта.
MSIE6 отправится на заслуженный отдых не раньше чем через 2-3 года.

Chicherin | 31. 15 October, 2008

Ну это еще не повод отказываться от уменьшения количества элементов в DOMe по возможности.
Данный способ в некоторых случаях позволит этого добиться.

Vitaly Harisov | 32. 15 October, 2008

Это неуниверсально.

cr_ | 33. 17 October, 2008

спасибо! нужна была именно такая реализация чтобы не заморачиваться как всегда ради ие6 и мусорить код и этот способ прошёл проверку в боевых условиях! :)

designer | 34. 22 October, 2008

У меня вопрос , как задавать цвет фона ?

akella | 35. 22 October, 2008

Обычный background-color сработает.

Jman | 36. 6 November, 2008

Однако красота, многие вещи мне в голову приходили…. но это разорвало мне мозг…

Алексей Ог | 37. 8 November, 2008

А движение этого видимого блока (его попеременное открытие) можно задать в зависимости от места нахождения курсора? Привязать открытие неыидимой части к курсору я хотел сказать.

fletcher | 38. 1 December, 2008

[q]clip: rect(y1 x2, y2 x1) /*Логично, не правда ли? может поэтому его никто и не использует?*/[/q]
На самом деле и вправду логично, если проводить аналогию с тем, в каком порядке записываются значения для margin, например.

Егор | 39. 22 December, 2008

Попробовал clip – клевая штука :)
Мне вот интересно – а зачем вообще нужен clip, если можно просто двигать контейнер с фоном (ссылку) относительно видимой области контейнера-родителя (элемент списка) и все лишнее будет отсекаться с помощью overflow:hidden ?

Егор | 40. 22 December, 2008

Кстати с текстом ничего сложного – просто добавляется паддинг кратный высоте строки.

akella | 41. 22 December, 2008

Да, но клип же позволяет не привязываться к контенту – а делать это для любого содержимого без всяких паддингов – вроде как удобней же)

Егор | 42. 22 December, 2008

Вот если бы crop работал – то да :) несомненно было бы полезно. С clip – неоднозначная ситуация.. Ведь мы точно так же двигаем контейнер относительно родителя, точно так же скрываем лишнюю часть контейнера с помощью overflow, но в добавок еще делаем “обрезание” :) визуально эфект и с обрезанием и без – одинаковый, тогда я не вижу смысла нагружать клиентский и без того не сильно быстрый IE дополнительными вычислениями. Вот как-то так.

А в целом – несомненно интересный способ… Я давно ничего такого интересного не узнавал, оказывается есть еще загадки :) Главное применение найти правильное :)

Егор | 43. 22 December, 2008

В догонку добавлю, может для кого-то это был секрет или может кто-то сможет прояснить феномен, но — вот такой вот способ реализации спрайтов (через абсолютное позиционирование самого контейнера с фоном, а не фона в контейнере) — в IE6 работает ощутимо быстрее даже с обычными (непрозрачными) изображениями. А background-position в IE6 при смене состояний почему-то как-то неправильно работает (например вместо того чтобы подвинуть фон – он его сначала снова загружает… особенности кэширования? так и не разобрался в общем ).

INOZ | 44. 28 December, 2008

Еще один способ, как заставить IE правильно отображать png с альфа-прозрачностью:
http://habrahabr.ru/blogs/webdev/46597/
Метод преобразует png в VML. Из достоинств:
1) в отличии от других fixов не использует AlphaImageLoader;
2) свойства CSS background-repeat и background-position работают;
3) поддерживается доступ к стилю элемента через element.style и работа с псевдо-классом :hover.

cssing :: Архив :: CSSing 2008 | 45. 28 February, 2009

[…] Применение clip для PNG в ИЕ — эмуляция свойства background-position для полупрозрачных PNG-картинок в ИЕ […]

JavaScript, с помощью которого ИЕ5.5-8 поддерживает веб-стандарты | Искусство создания и продвижения сайта | 46. 3 June, 2010

[…] Статья об использовании PNG и background-position в ИЕ6: cssing.org.ua/2008/10/01/clip-it-baby/ […]

cssing » Архив » Зубчики на CSS | 47. 31 July, 2013

[…] Пост про clip, там есть фотка красивой модели […]

Зубчики на CSS | Просто блог | 48. 19 February, 2014

[…] Пост про clip, там есть фотка красивой модели […]

Оставить комментарий