Главная → Программирование → by

Стилизация элементов с символы, спрайтов и псевдо-элементов

В 2002 году Марк Ньюхаус опубликована статья " Укрощение Lists ", очень интересная штука, в которой он объяснил, как создавать пользовательские маркеры списка с помощью псевдо-элементов.Почти десять лет спустя, Николас Галлахер придумал метод псевдо-фон crop который использует псевдо-элементов с sprite.

Сегодня, на плечах гигантов, we’ постараемся выйти за границы.We’ обсудим, как вы можете элементов стиля без дополнительной разметки и использования биди с детьми высокая контрастность доказательства CSS sprite техники.Техника будет работать в Internet Explorer 6/7, как well.

Displaying icons in links and as custom list markers

Начиная с особым characters

Существует множество glyphs там, что мы могли бы использовать вместо изображений для создания пользовательских маркеров.Это должно улучшить:

  • Производительности (нет запроса HTTP)
  • Юзабилити (эти символы будут расти или уменьшаться в соответствии с user’ настройки)
  • Техническое обслуживание (без спрайта, чтобы создать, нет активов, чтобы иметь дело с)
  • Доступности (см. ниже)

Пример:

Маркеров (♠ ♣ ♥ ♦) в списке выше, созданным с помощью следующих правил:

HTML: 

<ul class="glyphs"> 
	<li class="one">performance</li>
	<li class="two">usability</li> 
	<li class="three red">maintenance </li> 
	<li class="four red">accessibility</li> 
</ul>

CSS: 

.glyphs {
  list-style-type: none;
}

.glyphs li:before,
.glyphs b {
  display: inline-block;
  width: 1.5em;
  font-size: 1.5em;
  text-align: center;
}

.one {
        background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '♠'+this.innerHTML);
}
.one:before {
        content: "\2660"; /* ♠ */
}
.two {
        background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '♣'+this.innerHTML);
}
.two:before {
        content: "\2663"; /* ♣ */
}
.three {
        background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '♥'+this.innerHTML);
}
.three:before {
        content: "\2665"; /* ♥ */
}
.four {
        background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '♦'+this.innerHTML);
}
.four:before {
        content: "\2666"; /* ♦ */
} 

.red b,
.red:before {
  color: red;
}

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

  • Значение содержания собственности должны быть бежал ссылкой на шестнадцатеричное Unicode character значение (для IE, мы используем HTML entities).
  • Internet Explorer 6/7 не поддерживают ::before ни :before, поэтому герои подключены с помощью CSS expressions.
  • IE8 не поддерживает ::before, но она поддерживает одну толстой кишки notation
  • Пожалуйста, обратите внимание, что отложив в сторону поддержки браузера, “ нет difference между :before и ::before, или между :after и ::after.Единый синтаксис толстой кишки (например, :before или :first-child) является синтаксис, используемый для псевдо-классов и псевдо-селекторов во всех версиях CSS до CSS3.С появлением CSS3, для того, чтобы сделать различие между псевдо-классов и псевдо-элементов, в CSS3 все псевдо-элементы должны использовать двойные двоеточия синтаксис,и все псевдо-классы должны использовать одно двоеточие syntax.”
  • В IE, символы, завернутый в <b> элементов, так что у нас есть средства для целевого и стиль их (можно скорее хочу полагаться на имя класса для этого)

Обратите внимание, что CSS выражения мы используем здесь не так плохо, как те, как правило, используется для имитации мин-width и тому подобное.Они вычисляется только один раз, что должно привести к small производительности.

Отображение изображения с помощью псевдо-Elements

Главное преимущество использования псевдо-элемент с единственной целью отображения изображения, что позволяет дизайнерам, чтобы обрезать спрайт.На самом деле, в этом нет ничего нового, и многие сайты уже используют дополнительный (ака " junk") разметку для достижения этой цели.Например, Yahoo! Search использует пустые <s> и Facebook использует пустые <i> теги для этой цели.Переход этот маршрут дает возможность создания компактных спрайты CSS, без пустого пространства между изображениями в sprite.

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

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

Николя Gallagher’ S method

Стилизация псевдо-элемент с фоновым изоб …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → by

Comments are closed.