В Firefox 3.6 добавится вырезание фонов

Автор оригинала: Peter Gasston
  • Перевод
  • Tutorial
Вдобавок ко всем новым возможностям CSS, ранее нами упомянутым, Firefox 3.6* обретает свежайшее новое значение свойства: image-rect. Это позволит вам вырезать область фонового изображения, чтобы показать только часть от целого.

Оно использует собственническую приставку Мозиллы (то есть «-moz-» — прим. перев.) и берёт пару входных значений — URI изображения и границы вырезаемой области (в виде четырёх значений, разделённых запятыми, как во свойстве clip):

foo { background-image: -moz-image-rect(
    url(<uri>),
    <top>,<right>,<bottom>,<left>
); }

Вот пример:

.aside {
    background-image: -moz-image-rect(
    url('link.png'), 0, 32, 26, 0);
}

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

Я подготовил быструю демонстрацию этого свойства; если у вас стоит недавняя ночная сборка* Файерфокса, то можете увидеть чуть выше одно изображение Линка, которое при наведении мыши переменяется. Все, кто смотрит не недавней ночной сборкою, увидят три статических Линка. (В перевод на Хабрахабр демонстрацию перетащить нет технической возможности, глядите оригинал прим. перев.)

__________________
* Хотя image-rect планируют включить в версию 3.6, сейчас это значение работает только в ночных сборках Firefox 3.7 (ветвь mozilla-central).
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 25

    +8
    Вот, вот, дальше будут все больше и больше сайтов с Firefox 3.6+ only :)
      +2
      Я считаю, для таких постов стоит создавать видеодемонстрацию. У меня, например, нету возможности поставить новый Firefox, таким образом для меня пост теряет полезность.
        0
        Зачем они делают "-moz-"? Потом приходится писать что-то вроде
        -moz-
          +5
          Извиняюсь, бешеная мышка.
          приходится писать:

          display: inline-block;
          -moz-display: inline-block; /* Hello, Firefox 2! */
            0
            Вы от балды сейчас код написали, или действительно есть свойство -moz-display во втором фф? (профессиональный интерес)
              0
              Кажется, только -moz-значения для обычного display.
                0
                Да, попутал (display: -moz-inline-box), но неудобство все равно есть. И вот при написании CSS надо вспоминать, в какой же версии как что называется. Это же вроде стандарт, а такими именованиями только запутывают.
              +3
              Видимо, эти свойства еще не являются официально стандартными, поэтому при именовании их все браузеры должны использовать вендорные префиксы.
                +1
                лишь бы это не привело к разделению как в OpenGL: каждый вендор свой огород городит. а то у нас будет не противостояние IE/Gecko, куча отдельных огородов.
                  +1
                  Именно поэтому и стоит использовать префиксы — пока нет стандарта каждый реализует как хочет. А если разные реализации будут называться одинаково, то это будет ад.
                  Вот примут стандарт — тогда все переделают реализацию под него и будут называть без префиксов.
                    +1
                    Конечно. Я говорю о том, что в OGL сколько времени уже прошло, а из-за разногласий так стандарт толком и не развивается с 1.2 и вот уже 3.0. Очень надеюсь, так не будет с передовыми технологиями и идеями в Web.
                0
                Для тестирования новых CSS-свойств. И это правильно, даже MS пошла по этому пути. Если свойство, придуманное самими или нет, но являющееся новым и реализовано пока в качестве тестирования, то так и стоит делать.
                –2
                Так это и есть правильная поддержка веб-стандартов?
                  –4
                  Да.
                    –2
                    Нет!
                    +2
                    Я всегда был сторонником стандартизации, и хотел, чтобы все браузеры одинаково отображали любую страницу, но mozilla придумывает удобные вещи! Часто пользуюсь -moz-border-radius…
                      +1
                      ага, я тоже, как и -webkit-border-radius
                        0
                        Это не Мозилла придумала.
                        –5
                        Зачем использовать свойства, которые будут работать только в одном браузере? Разве что в проектах только для себя.
                          +1
                          думаю, они просто экспериментируют и, если нововведение будет удачным — идея будет представлена перед всемирным сообществом и, возможно поддержана.
                          +2
                          Очень неплохая идея, хорошо дополняет спрайты.
                            –5
                            почему, БЛЯТЬ, никто не следует стандартам?
                              –2
                              Это нехорошо — ругаться.
                                –4
                                А ну все, блядь, быстро следовать стандартам!
                                0
                                Мда. А немодальных диалогов авторизации, я так чувствую, опять не будет…

                                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                Самое читаемое