Прикрашаємо списки

Почнемо зі спецсимволів

Існує безліч символів, які ми могли б використовувати як зображення для створення різних маркерів. Що може вийти:

Ці маркери (, , , ) у списку вище створені так:HTML:

Як це працює

  • Значення властивостіcontentповинно вказувати на Unicode-символ у шістнадцятковому форматі (для IE ми використовуємо HTML-сутності).
  • Internet Explorer 6 і 7 версії не підтримує ні::before, ні:before, тому символи ми підключаємо через CSS-вирази.
  • Internet Explorer 8 не підтримує::before, але підтримує запис з однією двокрапкою.
  • Зверніть увагу, що ігноруючи сумісність з різними браузерами "немає жодної різниці як між:beforeта::before, так і між:afterта: :afterСинтаксис з однією двокрапкою (тобто:beforeабо:after-child) використовується для опису як псевдо-класів, так і псевдо-селекторів у всіх версіях CSS до CSS3: З введенням CSS3, щоб відрізняти псевдо-класи від псевдо-елементів, перші записуються, використовуючи одинарну двокрапку, останні ж, використовуючи подвійну двокрапку".
  • В Internet Explorer символи загортаються в елементах, отже ми маємо можливість якось вказати на них і стилізувати (вам швидше за все захочеться використовувати класи для цих цілей).
Зауважте, що CSS-вирази, які ми тут використовуємо не гірші за ті, які ми використовуємо для імітації min-width і подібних. Вона обчислюється один раз, що згодом має призвести до невеликого збільшення продуктивності.

Виводимо зображення через псевдоелементи

Основна перевага використання псевдо-елемента з метою відображеннякартинок полягає в тому, що дозволяє використовувати спрайт. Взагалі-то в цьому немає нічого нового, і багато сайтів вже використовують додаткову (так звану сміттєву) розмітку для досягнення цієї мети. Наприклад, Yahoo! Search використовує порожній тег, а Facebook -. Дотримуючись цього, можна створювати компактні CSS-спрайти, без будь-яких порожніх областей. Наступні два приклади не використовують додаткової розмітки, ґрунтуючись на тому самому спрайте:

Обидва зображення нижче - друга іконка у спрайте - створені, використовуючи двома методами відповідно.

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

Стилізація псевдо-елемента, використовуючи фонове зображення:

Новий метод із використанням url() / clip

Використовуємо властивістьcontentдля вставки спрайту, який потім ріжеться в clip:

Якщо вам раптом цікаво, чому я вище використовуюposition: absolute, пояснюю: тому що властивістьclipзастосовується тільки до елементів, які абсолютно позиціонуються.

Новий спосіб: як воно все працює?

  • Замість того, щоб прикрашати псевдо-елемент будь-яким фоном, ми використовуємо його, щоб вставити зображення (через властивістьcontent)
  • Використовуючи властивістьclip, ми «вирізаємо» із зображення тільки ту частину, яку хочемо відобразити. Це означає, що немає необхідності додавати в картинку порожній простір з метою уникнути відображення інших її частин (зазвичай використовувалося як фонове зображення для більших елементів).
  • Ми компенсуємо значенняclip, використовуючи властивостіleftта/абоtop
У разі, якщо не потрібно обрізати зображення, зображення в спрайте повинні вирівнюватися по правому або лівому краю для розміщення, задовольняючиRTL/LTR-контексту (background-position: [left][right][vertical value]). Ще одним обмеженням буде створення спрайтів із зображеннями, що йдуть один за одним (інші частини зображення можуть також відображатися). У процесі «розрізання» спрайту ці нюанси не відіграють ніякої ролі, отже, картинки можна стикувати один з одним. Приклад дивіться нижче:

Переваги даного методу перед іншими

Стиль, який використовується під час друкуНа відміну від фонових зображень, ці зображення друкуються разом із документом (вони надсилаються на принтер).

Стиль, який є доступнимНа відміну від фонових зображень, ці зображення не зникнуть у режимі високої контрастності у Windows або у високо контрастних таблицях стилів.

Стиль, який працює в Internet Explorer 8Цей метод також працює і в Internet Explorer версії 6 та 7.

Зверніть увагу, щоб зайвого HTTP-запиту може бути використана схема data: URI. Internet Explorer не підтримує схеми data: URI, але ми можемо використовувати MHTML для Internet Explorer 6/7, що дозволить старим браузерам їх зрозуміти.

Прикрашаємо посилання псевдо-елементами

Ніколас Галлахер показує багато цікавих фішок, які можна зробити за допомогою псевдо-елементів. Єдине, що я тут додав, це використання::afterу стилях посилань, як на прикладі нижче:CSS:

Пара слів про зручність використання

Вам доведеться змиритися з тим, що весь вміст відображається на екрані, а тому що відсутній механізм присвоєння альтернативного тексту до зображень, які додані через властивість вмісту, слід переконатися, що ці зображення використовуються чисто в декоративних цілях. Інакше користувачі просто не матимутьдоступу до цієї інформації.

Додатковий матеріал

p.s. Зауваження щодо перекладу та привіти :) приймаються в особу. p.p.s. У парі місць підмінив текст малюнком, живий приклад можна побачити в оригіналі.

А у нас тут можна отримати грант на тестовий період Яндекс.Хмари. Варто лише у полі «секретний пароль» запровадити «Хабр»