Статьи

Сделать CSS Count Backwards

Декабрь 24, 2018

Знаете ли вы, что счетчики CSS могут идти в обратном направлении?

Так же как и я до тех пор, пока мне это не понадобилось, и я обнаружил, что свойства counter-resetcounter-increment

Считать вперед

Основная идея счетчиков заключается в том, что они позволяют вам внедрять системы счисления в CSS , по существу заменяя и дополняя атрибуты упорядоченного списка, такие как value и start . С двумя свойствами вы объявляете имя переменной подсчета в базовом селекторе, затем увеличиваете его в селекторе экземпляра; затем результат обычно выводится с использованием свойства content Вот простой пример, который воссоздает нумерацию стандартного упорядоченного списка ( пример1 ): 

 ol
{
    list-style-type:none;
    counter-reset:item;
}
ol > li
{
    counter-increment:item;
}
ol > li:before
{
    content:counter(item) ". ";
}

Но, как я уже говорил ранее, вы можете «затравить» оба эти свойства дополнительными значениями, чтобы они начинались с другого числа и / или учитывались в разных шагах. Вот еще один пример, на этот раз начиная с десяти и считая по двое ( пример2 ): 

 ol
{
    list-style-type:none;
    counter-reset:item 10;
}
ol > li
{
    counter-increment:item 2;
}
ol > li:before
{
    content:counter(item) ". ";
}

Считать в обратном направлении!

Теперь вот хитрый кусочек! Дополнительное значение counter-incrementнулевым или отрицательным . Итак, вот пример счетчика, который идет назад от десяти до одного ( пример3 ): 

 ol
{
    list-style-type:none;
    counter-reset:item 11;
}
ol > li
{
    counter-increment:item -1;
}
ol > li:before
{
    content:counter(item) ". ";
}

Следует отметить, как мы должны начать counter-resetодин счет выше, чем наибольшее число, которое мы хотим отобразить, потому что counter-incrementуже подсчитывалось один раз, когда отображается первый элемент (он считается этим элементом).

Конечно, тот факт, что нам вообще приходится жестко кодировать начальный номер, затрудняет его использование в дикой природе, поскольку списки, с которыми он сталкивается, обычно имеют разное количество элементов. Затем нужно разделить правила между таблицей стилей и встроенным правилом style

Код производства

Итак, сначала у нас есть следующие правила таблицы стилей, которые определяют активирующий classCSS- хаков для IE6 и IE7 , чтобы восстановить их обычный list-style 

 ol.count-backwards
{
    list-style-type:none;
}
ol.count-backwards > li
{
    counter-increment:start-from -1;
}
ol.count-backwards > li:before
{
    content:counter(start-from) ". ";
}

* html ol.count-backwards { list-style-type:decimal; }
*+html ol.count-backwards { list-style-type:decimal; }

Затем мы создаем экземпляр счетчика со counter-resetstyle Я использовал "start-from"пример 4 ): 

 <ol class="count-backwards" style="counter-reset:start-from 11">
    <li>In tenth place..</li>
    <li>In ninth place..</li>
    <li>In eighth place..</li>
    <li>In seventh place..</li>
    <li>In sixth place..</li>
    <li>In fifth place..</li>
    <li>In fourth place..</li>
    <li>In third place..</li>
    <li>In second place..</li>
    <li>In first place..</li>
</ol>

Мы даже можем определить дополнительные правила class Вот один для строчных греческого ( пример 5 ): 

 ol.count-backwards.lower-greek > li:before
{
    content:counter(start-from, lower-greek) ". ";
}

Но для чего все это? Ну, я хотел сделать архивный список сообщений в блоге для моего сайта, перечисляя самые последние в верхней части. Так как первое и самое раннее находится внизу, это означает, что список должен вести обратный отсчет.

И я уверен, что вы можете подумать о своих собственных ситуациях, когда это может быть полезно и полезно, чтобы иметь способ мгновенной реализации, без неизбежного отставания в результате выполнения сценариев.

Если вам не хватает IE6 / 7 , вы всегда можете добавить слой сценариев…

Запоздалая мысль: взлом IE

Или, в крайнем случае, вы можете сделать это с помощью свойства expressionписал ранее ) и использовать <ol>startIE, чтобы прочитать начальный номер из ( пример6 ): 

 <ol start="10" class="count-backwards" style="counter-reset:start-from 11">
 
ol.count-backwards li
{
    zoom:expression(
        (typeof counter == "undefined" 
            ? counter = parseInt(this.parentNode.getAttribute('start'), 10) 
            : counter--), 
        this.innerHTML = (typeof this.processed == "undefined" 
                ? ("<strong>" + counter + ". </strong>") 
                : "") 
            + this.innerHTML, 
        this.style.marginLeft = "-1.5em",
        this.processed = true, 
        this.runtimeStyle.zoom = "1"
        );
}

IE8 будет игнорировать этот код, так как он больше не реализует expression Woo-Hoo!

Миниатюра кредит: Стивенванс

35
Share: