Список з російськими буквами

Влад Мержевич

У CSS нумерований список може містити латинські та грецькі букви, але російських букв немає. Незважаючи на обіцянки CSS3, коли браузери підтримають цю можливість, невідомо. Тож не чекаючи цього моменту, з допомогою CSS3 можна додати російські букви в список вже зараз.

Оскільки нумерація здійснюється за допомогою стилів, сам список залишається незмінним, лише додається обраний клас, назвемо його cyrilic (приклад 1).

Приклад 1

<ol class="cyrilic">
  <li>Один</li>
  <li>Два</li>
  <li>Три</li>
</ol>

У цьому випадку немає різниці, який тег використовувати — <ul> або <ol>, ми, у будь-якому випадку, прибираємо початкову нумерацію, щоб вона не перекривалася нашою. Додання букв відбувається за допомогою псевдоелемента ::before та властивості content. Кожному рядку потрібна своя буква, для цього ми скористаємося псевдокласом :nth-child(1), де в дужках позначається номер букви. Першою буквою, звісно, йде А, другою — Б, третьою — В і так далі. Цей набір додається до селектора li таким чином (приклад 2).

Приклад 2

.cyrilic li:nth-child(1)::before { content: 'а)'; }
.cyrilic li:nth-child(2)::before { content: 'б)'; }
.cyrilic li:nth-child(3)::before { content: 'в)'; }

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

Остаточно налаштовуємо вирівнювання та положення букв, за бажанням вказуємо розмір шрифту, колір та інші параметри (приклад 3).

Приклад 3

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
  <style>
   .cyrilic { 
    list-style-type: none; /* Приховуємо початкову нумерацію */
   }
   .cyrilic li::before {
    margin-right: 5px; /* Відстань від букви до тексту */
    width: 1em; /* Ширина */
    text-align: right; /* Вирівнювання по правому краю */
    display: inline-block; /* Рядково-блоковий елемент */
   }
   .cyrilic li:nth-child(1)::before { content: 'а)'; }
   .cyrilic li:nth-child(2)::before { content: 'б)'; }
   .cyrilic li:nth-child(3)::before { content: 'в)'; }
   .cyrilic li:nth-child(4)::before { content: 'г)'; }
   .cyrilic li:nth-child(5)::before { content: 'д)'; }
   .cyrilic li:nth-child(6)::before { content: 'е)'; }
   .cyrilic li:nth-child(7)::before { content: 'ё)'; }
   .cyrilic li:nth-child(8)::before { content: 'ж)'; }
   .cyrilic li:nth-child(9)::before { content: 'з)'; }
   .cyrilic li:nth-child(10)::before { content: 'и)'; }
  </style>
 </head>
 <body>
  <ol class="cyrilic">
    <li>Борщ</li>
    <li>Котлеты из щуки</li>
    <li>Кулебяка</li>
    <li>Грибы в сметане</li>
    <li>Блины с икрой</li>
    <li>Квас</li>
  </ol>
 </body>
</html>

Результат цього прикладу показано на малюнку 1.

Переваги

Цей метод нумерації має багато переваг:

  • Можна використовувати букви будь-якого алфавіту, не лише російського.
  • Ми визначаємо, включати в список спірні букви, такі як Ё та Й, чи ні.
  • Вигляд нумерації та оформлення букв встановлюються через CSS.
  • Список легко розширити та створити вкладені списки.
  • Можна створити кілька списків різного виду та застосовувати їх у потрібних ситуаціях або комбінувати між собою.

Підтримка браузерів

Ми працюємо з CSS3, тому старі браузери, такі як IE8, відразу відпадають. Internet Explorer 9 вже повністю підтримує все, що стосується інших браузерів, проблем не виникає, навіть в iPhone та Android.

списки

Часті запитання