Верстка иконок с помощью псевдо-элементов и css свойства clip

    Хороший способ верстки иконок, расположенных рядом с заголовками, или в качестве нестандартных маркеров списка — с помощью псевдо-элементов.

    Раньше я это делал с помощью дополнительной разметки — например, тега <i>, который позиционировал абсолютно и фоном задавал картинку-спрайт с иконками.

    Это способ позволяет избежать дополнительной разметки, но для IE младше 8го нужно написать expression, который будет осуществлять вставку псевдо-элемента.

    Итак, есть заголовок:
    <h1 id="anchor-header">Заголовок</h1>

    И перед ним мы хотим поставить иконку из спрайта:


    #anchor-header {
      position: relative;
      padding-left: 21px;
      background-image: expression(this.runtimeStyle.backgroundImage="none",
      this.innerHTML = '<img alt="" src="https://habrastorage.org/getpro/habr/post_images/09d/0ed/ce7/09d0edce7dbfd104c807e273376dc8f8.png">'+this.innerHTML);
    }
     
    #anchor-header:before,
    #anchor-header img {
      content: url(habrastorage.org/getpro/habr/post_images/09d/0ed/ce7/09d0edce7dbfd104c807e273376dc8f8.png);
      position: absolute;
      top: 3px;
      clip: rect(4px 15px 18px 0);
      left: -14px;   
    }

    Получаем заголовок с иконкой:

    По сравнению со способом, где иконка делается background'ом, преимущества следующие:
    • При печати иконка будет выводиться, потому что задана с помощью <img>, а не фоном;
    • Не нужна дополнительная html-разметка.


    Пример на jsfiddle
    Поделиться публикацией

    Похожие публикации

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

      0
      Спасибо, интересный способ. А как у него с поддержкой в браузерах?
        0
        Firefox, Opera, Webkit, IE8, IE7 — нужно писать expression, IE6 — тоже нужен expression и небольшая коррекция позции img.
          0
          … Вот только пустой альт (или его отсутствие) — не есть хорошо. Хотя, с другой стороны, таким образом вставляется, как правило, мелкая малозначимая графика.
            0
            Пустой аттрибут alt, мне кажется, в этом случае не страшно, по-скольку картинка является графическим отображением надписи, которая рядом с ней же и находится. При желании можно в alt дописать содержимое тэга.
              0
              Согласен, можно и дописать на лету, но тогда красота и изящность метода теряется.
                +2
                Категорически поддерживаю. Надписи при отключенной графике типа «Заголовок»/«Заголовок» ужасно раздражают.
              0
              Странно, когда я экспериментировал с clip, в IE6/7 он работал. Вы уверены, что expression нужен? К сожалению, у меня нет доступа к IE сейчас.
                +2
                expression нужне не для clip, а для обеспечения работы псевдо-класса :before
            +6
            Есть ещё несколько способов размещения маркеров и иконок. Вот перевод статьи со Smashing Magazine.
              0
              Это прекрасно. Надо было его опубликовать.
                0
                И, кстати, способ с заданием псевдо-элементу бэкграунда, описаный в этой статье, не работает в IE версии < 8
                  0
                  Конечно, ведь в нём нет поддержки :before. Нужно писать экспрешн.
                +3
                Если я не ошибаюсь, то вот тут написано подробнее и больше
                  +1
                  Не ошибаетесь. Это, видимо, альтернативный перевод статьи, ссылку на другой перевод которой дал 404 выше. С моей точки зрения там слишком много не нужного.
                  Символы из таблицы utf никогда не использовал, потому что дизайнеры никогда их не рисуют, а иконку с помощью бэкграунда можно сделать и без псевдоэлементов. Хотя можно и с.

                  Здесь же один конкретный способ, который можно добавить в закладки и подглядывать когда нужно. Что, я, собственно, и буду делать.
                    +4
                    С точки зрения «надо быстро сделать и забыть» — согласен.
                    С точки зрения «надо понять, как это и почему так» — та статья много лучше.

                    P.S. имхо
                  +1
                  Кто вам мешает продолжать использовать фоновое изображение и псевдоэлемент, а i вставлять для ie7 через expression?

                  -ms-inject: expression(this.bh||this.innerHTML='<i></i> '+this.innerHTML,this.bh=1);
                    0
                    Бывают мемонты, когда именно иконку нужно обернуть в ссылку. С псевдоэлементами это невозможно. Еще большой минус в зависимости от интерлиньяжа. Да и сам метод кривой какой-то.
                      0
                      Ну как бы метод не претендует на универсальность. Как и большинство остальных.

                      А по поводу кривой — я думаю это утверждение можно применить к любому методу, который предложите вы — везде можно найти какие либо изъяны.

                      У меня там где я его применял все отлично работает.
                        0
                        Я смотрю Вы скопировали где-то метод и не думая его используете. Есть гораздо более лучший способ. Да, он не мой, но переделан мной под мои потребности и гораздо универсальнее, чем то, что в этом посте. Вы по сути сделали открытие в CSS вида ::before/::after. Это полезные инструменты, но не для иконок.

                        Хоть я и считаю, что иконки это информативный элемент, а не функциональный, но всё же иногда приходится оборачивать иконки в ссылки.
                          0
                          Я не люблю универсальность и считаю универсальные решения работающими хуже, чем те, которые заточены под конкретную задачу. По этому я не использую этот метод всегда и везде, представляю себе чем он отличается от остальных, и говорю еще раз что он не претендует на универсальность.
                      0
                      Картинкой поставить иконку можно и более простым способом. Например в DOM, что тоже позволит напечатать этот ваш плюсик у заголовка. А если написать у картинки position:relative и порулить свойством top, то и позиция отлично выровняется.

                      Expression — вообще зло.
                        0
                        В DOM это уже javascript применять надо. Можно все сделать с помощью javascript — колонки одинаковой высоты, выпадающие меню… Так ведь нет, мучаются же люди зачем-то. А expression не такое уж и зло. По крайней мере в этой ситуации. Зло — пользователи, у которых стоит браузер древний как дерьмо мамонта.
                          +1
                          >В DOM это уже javascript применять надо
                          Простите, а expression это не тот же JS? Поправьте если не прав…
                            0
                            Да, но применяемый для конкретных устаревших браузеров, чтобы заставить их работать так же как остальные, не на столько старые.

                            Не вижу смысла в дальнейшем обсуждении — хотите делать все на JS — делайте. Я предпочитаю другие методы.
                            0
                            Javascript не нужно использовать для верстки. Для этого есть css. Если не получается сделать через css — читайте, учитесь, переверстайте внешние элементы, все получится. Верстка на js — костыль.
                              0
                              Знаете способ сделать без костылей min-width для IE6? Хотя нет, такой способ есть, но он адски неудобен.
                              А, например, способ сделать без костылей для IE 6,7 запятые после элементов списка, растянутого в линию?

                              Вот такого вот: первый элемент, второй элемент, третий элемент

                              Не для всего есть решение на чистом CSS для чего-то приходтися задвинуть гордость и честолюбие и применить костыли.

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

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