Java, UX, HTML, CSS, WEB-design

Стилизация элементов с помощью глифов, спрайтов и псевдоэлементов

[ad_1]

  • Тьерри Кобленц

  • 0 Комментарии

Стилизация элементов с помощью глифов, спрайтов и псевдоэлементов

  • 6 минут чтения

  • Кодирование, Типографика, CSS, Техники

Краткое резюме ↬

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

Сегодня, на плечах гигантов, мы попробуем раздвинуть границы возможного. Мы обсудим, как можно стилизовать элементы без дополнительной разметки и с использованием высококонтрастной техники спрайтов CSS, удобной для двунаправленного текста. Техника будет работать в Internet Explorer 67 также.

Отображение значков в ссылках и в качестве настраиваемых маркеров списка

Начиная со специальных символов

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

Еще после прыжка! Продолжить чтение ниже ↓
  • производительность (отсутствует HTTP-запрос)
  • удобство использования (эти символы будут увеличиваться или уменьшаться в зависимости от настроек пользователя)
  • техническое обслуживание (нет спрайтов для создания, нет ресурсов для работы)
  • доступность (см. ниже).

Пример:

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

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;
}

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

  • Значением свойства content должна быть экранированная ссылка на шестнадцатеричный символ Unicode») значение (для IE мы используем сущности HTML).
  • Интернет-проводник 67 не поддерживаю ::before ни :beforeпоэтому символы подключаются с помощью выражений CSS.
  • IE8 не поддерживает ::beforeно поддерживает запись с одним двоеточием
  • Пожалуйста, обратите внимание, что если оставить в стороне поддержку браузера, «нет никакой разницы между :before а также ::beforeили между :after а также ::after. Синтаксис с одним двоеточием (например, :before или :first-child) — это синтаксис, используемый как для псевдоклассов, так и для псевдоселекторов во всех версиях CSS до CSS3. С введением CSS3, чтобы провести различие между псевдоклассами и псевдоэлементами, в CSS3 все псевдоэлементы должны использовать синтаксис с двойным двоеточием, а все псевдоклассы должны использовать синтаксис с одним двоеточием».
  • В IE символы завернуты в <b> элементы, поэтому у нас есть средства для их настройки и стилизации (вы можете предпочесть полагаться на имя класса для этого).

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

Отображение изображений через псевдоэлементы

Основное преимущество использования псевдоэлемента с единственной целью отображения изображения заключается в том, что он позволяет дизайнерам обрезать спрайт. На самом деле, в этом нет ничего нового, и многие веб-сайты уже используют для этого дополнительную (она же «мусорную») разметку. Например, Yahoo! Поиск использует пустой <s> и Facebook использует пустой <i> теги для этой цели. Этот путь позволяет создавать компактные CSS-спрайты без пустого пространства между изображениями внутри спрайта.

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

спрайт

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

Метод Николаса Галлахера

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

#first:before {
    content: "";
    float: left;
    width: 15px;
    height: 15px;
    margin: 4px 5px 0 0;
    background: url(sprite.png) -15px 0;
}

### Новый метод url() / clip

С использованием content свойство для вставки спрайта, который затем обрезается с помощью clip:
#second {
  position: relative;
  padding-left: 20px;
  background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '<img alt="" src="sprite.png">'+this.innerHTML);
}

#second:before,
#second img {
  content: url(sprite.png);
  position: absolute;
  top: 3px;
  clip: rect(0 30px 15px 15px);
  left: -15px; /* to offset the clip value */
  _left: -35px; /* some massaging for IE 6 */
}

Если вам интересно, почему я использую position: absolute в приведенном выше правиле, это потому, что clip свойство относится только к абсолютно позиционировано элементы.

Новая техника: как она работает?

  • Вместо того, чтобы стилизовать псевдоэлемент фоном, мы используем его для вставки изображения (через content).
  • С использованием clip свойство, мы обрезаем это изображение, чтобы отобразить только ту часть, которую мы хотим показать. Это означает, что нет необходимости добавлять пустое пространство в изображение, чтобы избежать отображения других частей (обычно используется в качестве фонового изображения для более крупных элементов).
  • Мы компенсируем clip значения с помощью left и/или top характеристики.

При использовании метода без обрезки изображения в спрайтах должны начинаться с правой или левой стороны, чтобы соответствовать контекстам RTL/LTR (background-position: [left]|[right] [vertical value]). Другим ограничением является создание спрайтов с изображениями, отображаемыми рядом друг с другом (поскольку другие изображения также могут отображаться). Но когда обрезка спрайты, эти проблемы не в игре, так что все изображения могут быть собраны вместе.

Для примера см. рисунок ниже:

Два спрайта для разных контекстов вместо одного спрайта для интерфейсов LTR и RTL

Преимущества этого метода перед существующими методами

Стиль для печати

В отличие от фоновых изображений, эти изображения печатаются вместе с документом (отправляются на принтер).

Доступный стиль

В отличие от фоновых изображений, эти изображения не исчезнут в режиме высокой контрастности MS Windows или с таблицами стилей высокой контрастности.

Стилизован для работы в IE л 8

Этот метод также работает в Internet Explorer 6 и 7.

Обратите внимание, что схема данных URI может использоваться, чтобы избежать HTTP-запроса. IE6/7 не поддерживает схему data URI, но мы можем использовать MHTML для IE6/7, чтобы IE7 и более старые браузеры также понимали его.

Николас Галлагер показывает множество крутых вещей, которые можно делать с псевдоэлементами. Единственное, что я хотел бы добавить здесь, это использование ::after оформлять ссылки а-ля «подробнее» и тому подобное, например:

Подробнее

CSS:

.more:after {
        white-space:nowrap;
        content: " 0BB"; /* » */
}
.more {
        white-space:nowrap;
        background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = this.innerHTML+' »');
}

Несколько слов о доступности

Вы должны исходить из того, что сгенерированный контент читается программами чтения с экрана, и, поскольку нет механизма, предлагающего альтернативный текст для изображений, подключенных через content свойство, мы должны убедиться, что эти изображения являются чисто декоративными, потому что пользователи программ чтения с экрана не будут иметь доступа к этой информации.

дальнейшее чтение

Возможно, вы захотите взглянуть на следующие связанные ресурсы:

  • Модуль CSS3: Списки — псевдоэлемент ::marker
  • Генерируемый контент, автоматическая нумерация и списки
  • Свойство клипа
  • Цветовой контраст и карты спрайтов CSS
  • Высококонтрастные CSS-спрайты

_Credits: Icons by FatCow Web Hosting [CC-BY-3.0-us]через Викисклад_

dt {начертание шрифта: полужирный; } .glyphs {тип стиля списка: нет;} .glyphs li:before, .glyphs b {дисплей: встроенный блок; ширина: 1,5 em; размер шрифта: 1,5 em; выравнивание текста: по центру;} /* преимущество их группировки: правило будет отображаться в Firebug 🙂 / .one, .one:before { содержимое: «2660»; / ? / фоновое изображение: выражение (this.runtimeStyle.backgroundImage = «нет», this.innerHTML = ‘‘+this.innerHTML); } .two, .two:before { содержимое: «2663»; / ? / фоновое изображение: выражение (this.runtimeStyle.backgroundImage = «нет», this.innerHTML = ‘‘+this.innerHTML); } .three, .three:before { content: «2665»; / ? / фоновое изображение: выражение (this.runtimeStyle.backgroundImage = «нет», this.innerHTML = ‘‘+this.innerHTML); } .four, .four:before { содержимое: «2666»; / ? / фоновое изображение: выражение (this.runtimeStyle.backgroundImage = «нет», this.innerHTML = ‘‘+this.innerHTML); } .red b, .red:before {color:red;} .one:hover:before, .two:hover:before, .three:hover:before, .four:hover:before {color:teal;} #first :before { содержание:»»; плыть налево; ширина: 15 пикселей; высота: 15 пикселей; поле: 4px 5px 0 0; background:url(https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7b539238-47cc-4737-82e3-15749b706d3a/sprite.png) -15px 0; } #second { position:relative; отступ слева: 20px; фоновое изображение: выражение (this.runtimeStyle.backgroundImage = «нет», this.innerHTML = ‘‘+this.innerHTML); } #second:before, #second img { content:url(https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7b539238-47cc-4737-82e3-15749b706d3a/sprite.png) ; положение: абсолютное; клип: прямоугольник (0 30px 15px 15px); верх: 3px; слева:-15px; / для смещения значения клипа / _left:-35px; / немного массажа для IE 6 / } .more, .more:after { white-space:nowrap; содержание: «0BB»; / » */ background-image: выражение(this.runtimeStyle.backgroundImage=“none”,this.innerHTML = this.innerHTML+’ »’); }



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Стилизация элементов с помощью глифов, спрайтов и псевдоэлементов

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Краткое описание по статье Стилизация элементов с помощью глифов, спрайтов и псевдоэлементов

Название: Стилизация элементов с помощью глифов, спрайтов и псевдоэлементов . Краткое описание: [ad_1] ⭐ Тьерри . Дата публикации: 22.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»