Метка: верстка

В HTML-элементе LI есть простое как два пальца свойство «value», которое просто и ненавязчиво позволяет установить номер элемента в нумерованном списке. Работает с любыми типами нумераций (например, с римскими числами тоже), ненапряжно устанавливается через JavaScript ( <элемент>.value=»10″ без каких-либо ухищрений), не создавая большого overhead’а и не сильно загрязняя код позволяет легко оперировать нумерацией, так как следующий элемент после того, которому мы установили value продолжает нумерацию от него (т.е. если в value поставили «5», то у следующего LI даже без установленного value сразу будет номер «6» и не важно, что было у предыдущих)… Одним словом — хорошее и полезное свойство, не вызывающее никаких спорных вопросов и, с моей точки зрения, не создающее проблем с точки зрения семантики.

Однако де, W3C решил несколько иначе и с HTML 4, а также во всех XHTML это свойство осуждается и валидный код можно получить только установив DOCTYPE в Transitional. Казалось бы — ну по любому, умные дяди решили так не зря и нам предлагают что-то более удобное, простое или хотя бы — более функциональное. Однако же, нам предлагают концепцию «CSS Counters«, которая, если в тезисах, состоит в следующем:

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

  ol {
counter-reset: section; /* Set the section counter to 0 */
list-style-type: none;
}


• Значения этих переменных локальны для каждого списка (!!!).
• Изменять значения этих переменных можно опять же либо через CSS-команду counter-reset, указывая конкретное значение, либо через counter-increment, чтобы увеличить его (например, на каждом пункте списка):
  

  li {
counter-increment: section; /* Increments only this instance of the section counter */
}

• Вставка непосредственно номеров элементов осуществляется через генерацию контента процедурами counters() и counter() в свойстве content в псевдоклассах :before и :after, например:
  

  li:before {
content: counters(section, ".") " "; /* Adds the value of all instances of the section counter separated by a ".". */
}