У статті представлено кілька способів, які дозволяють встановити певний маркер для ненумерованого списку, а також вказані їх переваги та недоліки
Якщо проаналізувати будь-якої сайт, то можна виявити той факт, що в контенті дуже часто присутні списки різного роду: меню, список товарів і т. Д. В HTML-коді за нумерований список відповідає тег ol. а за маркований - ul.
Ще варто відзначити той факт, що на практиці марковані списки зустрічаються набагато частіше, але при цьому у них є один невеликий недолік. Маркер в списку відображається по-різному, в залежності від використовуваного браузера. Для серйозного дизайнера це проблема.
Щоб усунути цей негативний ефект треба скасувати висновок маркера, скориставшись властивістю list-style:
З цього починається формування списку з унікальними маркерами і значками. Нижче представлені найбільш поширені способи подання унікальних і однакових для всіх браузерів значків елементів списку.
Маркери через картинки
Найбільш поширений і простий спосіб вказати для списку маркер - це скористатися бекграундной картинкою (властивість background). Метод грунтується на зазначенні в таблиці стилів фонового малюнка для елементів списку, а також внутрішній відступ (властивість padding), який зарезервує місце для нового маркера. Нижче представлений приклад коду:
Цей спосіб радує своєю унікальністю, так як дозволяє встановити абсолютно будь-який маркер у вигляді картинки. Нижче показано, як наш код буде виглядати в браузері:
Головна позитивна сторона цього методу полягає в 100% -ної кросбраузерності, але, не дивлячись на це, є маленький недолік. Використання картинки - це додаткове звернення до сервера.
Маркери за допомогою before
Існує варіант, коли можна обійтися без картинки, якщо дизайнерські умови дозволяють це. Таке дуже часто допускається при оформленні основного контенту, коли список маркується найпростішими елементами, типу квадратик (•) або стрілочка (→). Таким чином, ми підійшли до того, що в якості маркера може виступати будь-якої відповідний спецсимвол.
Далі виникає питання, яким чином спецсимволи вставляти в елементи списку. Природно не в ручну, інакше це був би дуже затягнутий і нудний процес, плюс до всього ще і трудомісткий. Вийти з цієї ситуації нам допоможе псевдоелемент before. застосування якого прив'язується до певного селектору, що дозволяє автоматизувати наш процес присвоєння маркерів з спецсимволов. Таке рішення підходить до більшості браузерів, з урахуванням того, що для IE. буде прописаний expression.
Нижче представлений приклад коду, який формує маркований список з коротким тире:
На практиці отримаємо таку картину:
При використанні цього методу головне знати кодування необхідного значка. Також варто відзначити, що для expression спецсимволи прописуються числовий комбінацією або мнемонічним кодом. Що стосується властивості content. то в цьому випадку спочатку ставиться слеш, а потім йде запис шістнадцятирічного коду.
Використання insertAdjacentHTML
Вищезгаданий спосіб не завжди коректно відпрацьовує в легендарному IE (не дивлячись на хак). Точніше, «милиці» для цього браузера не до кінця допрацьовані. Більш дієвим є метод, заснований на insertAdjacentHTML. нижче представлений код цього методу:
Маркери, намальовані CSS-властивостями
Деякі квадратні маркери можна намалювати з використанням деяких CSS-властивостей. Наприклад, квадрат з кольоровою заливкою малюється через властивість background-color. а квадратик у вигляді рамки - border (до речі кажучи, квадрат з заливанням можна намалювати і таким способом). Приклад запису в CSS-файлі:
Таким чином мальований CSS-властивостями маркер буде виглядати на практиці:
Використання before і first-child в комплексі
Такий метод часто застосовується при оформленні хлібних крихт на сайті. Хто не знає про що мова, дивимося на приклад нижче
Варто також відзначити, що такий прийом використовують не тільки для хлібних крихт, а й для звичайних маркованих списків, в залежності від дизайнерського завдання.
В яких браузерах працює?
Підводячи підсумок, можна відзначити той факт, що застосування псевдоелемента before є виправданим і раціональним в основному контенті, так як там не висувають особливих вимог до оформлення списків. Це в свою чергу дозволить зменшити навантаження на сервер, в порівнянні з варіантом, коли використовують картинку. А якщо ще відзначити той факт, що в основному контенті може бути дуже багато маркованих списків, то різниця може стати істотніше. Але картинки значно виграють в плані дизайнерських рішень маркера.
Оцінок: 3 (середня 5 з 5)
Курси по CSS (у відкритому доступі)
Для українського підрозділу компанії Bizonoff потрібен розробник на Drupal 7
Блог "Vaden Pro"
Розробка і просування сайту