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

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

• Поделись ТвиттерЛинкедин

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

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

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

• производительность (отсутствует 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).
• Интернет-проводник ⁶⁄₇ не поддерживаю ::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]). Другим ограничением является создание спрайтов с изображениями, отображаемыми рядом друг с другом (поскольку другие изображения также могут отображаться). Но когда обрезка спрайты, эти проблемы не в игре, так что все изображения могут быть собраны вместе.

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

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

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

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

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

В отличие от фоновых изображений, эти изображения не исчезнут в режиме высокой контрастности 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+’ »’); }