Начинаем работать с CSS-счётчиками
Для веб-разработчиков правильное представление информации стоит на первом месте. Одним из способов соответственного отображения информации — обозначить иерархию, отвечая на вопрос «что идёт первым?».
Верный путь для обозначения иерархии — через нумерацию объектов. Кроме нумерованного списка в CSS нет другого элемента, который позволяет нам увеличивать порядок. Если бы мы хотели отобразить числа, то должны были сделать некоторую подготовку. Слежение за индексом, его автоинкремент и др. Что-то вроде этого.
total_count; $i++): ?> Это хорошо до определённой степени, но здесь имеются свои ограничения. Что, если мы хотим использовать буквы, римские цифры, греческие символы и др. Реализация чего-либо потребует использования пользовательских библиотек.
К счастью, в CSS мы можем реализовать подобные вещи, не прилагая особых усилий.
Сброс и инкремент счётчика
Прежде чем делать счётчики на CSS, вы должны знать, что счётчик включает в себя две вещи: сброс и инкремент. Сброс — это то, где мы сбрасываем счётчик или даём ему начальную точку. Инкремент фактически увеличивает счётчик. Давайте быстро набросаем нашу разметку.
Всё, что нам нужно — это базовая, но простая для понимания разметка. В нашем CSS-файле нужно определить сброс и инкремент.
Установим в качестве точки сброса. Для этого мы просто делаем следующее.
.numbered-list
Замечание: counter-name может быть произвольным.
Поскольку мы установили нашу точку сброса, то должны сообщить увеличивать его значение. Для этого мы используем следующее.
.numbered-list__counter
Обращаясь к указанной выше точке сброса, мы говорим счётчику через counter-increment начинать считать. В таком виде наш пример пока не работает.
Поскольку счётчик является генерируемым контентом, вроде :before и :after , нам нужно вставлять счётчики с помощью свойства content в :after , либо в :before . Кроме того, CSS-функция counter позволяет идеально сбросить значение счётчика.
.numbered-list__counter:before
Примечание. Я опустил стиль содержимого, чтобы свести наш CSS к минимуму.
Смещение индекса инкремента
counter-increment также может принимать положительное или отрицательное значение для изменения шага инкремента.
counter-increment: counter-name 2; /* counter-increment: counter-name +2; */Это увеличит инкремент на множитель 2. Чтобы поменять инкремент на обратный, вы можете использовать отрицательное значение, что уменьшит значение индекса на указанный множитель.
counter-increment: counter-name -2;Изменение начальной точки счётчика
Передача целого числа после объявления counter-reset говорит браузеру изменить смещение начального значения.
.numbered-list
Задав значение равным 2, мы начинаем счётчик с 3, вроде этого. Вы также должны знать, что значение counter-reset по умолчанию равно 0.
Обратная нумерация
Обратная нумерация использует отрицательный индекс для counter-increment . Но это также может привести к сложностям, потому что если список генерируется динамически, пользователь должен найти способ отслеживать индекс.
Сам видел, что люди делают нечто вроде этого.
>>;"> total_count; $i++): ?> Счётчик сбрасывается строчно через генерацию в PHP значения counter-reset . В CSS-файле мы можем затем установить отрицательное значение для counter-increment .
Использование других форматов
Кроме увеличения счётчика с числами, мы можем также использовать инкремент с буквами, греческими символами, римскими цифрами и др.
Если вы являетесь поклонником римских цифр (как я), то для использования римских цифр всё, что вам нужно сделать, это просто передать второй параметр ( lower-roman ) в функцию counter .
content: content(counter-name, lower-roman);Другие варианты включают: decimal , decimal-leading-zero , lower-roman , upper-roman , lower-greek , lower-latin , upper-latin , armenian , georgian , lower-alpha , upper-alpha .
Поддержка браузерами
Как говорится, «одна картинка стоит тысячи слов». Этот график от CanIUse иллюстрирует, насколько широко поддерживаются счётчики в CSS. Они хорошо поддерживаются в Internet Explorer и Safari, что говорит о многом. Поэтому вам не стоит беспокоиться об использовании счётчиков, они массово поддерживаются браузерами.
Лично я считаю, что CSS-счётчики — это круто. Некоторым людям подсчёт с помощью CSS кажется непонятным и они продолжают использовать имеющийся у них метод.
counter-increment
Стилевое свойство counter-increment предназначено для увеличения значения счётчика приращений, который задается свойством counter-reset . Такой счётчик подсчитывает количество отображений элементов на странице и может выводиться с помощью свойства content и псевдоэлементов :after и :before . Это позволяет создавать списки (в том числе многоуровневые), в которых нумерация и вид задаются через стили.
Синтаксис
counter-increment: none | inherit | идентификатор | целое число
Значения
none Запрещает увеличение счетчика для текущего селектора. inherit Наследует значение родителя. идентификатор
Задает одну или несколько переменных, для которых требуется изменить значение счетчика. Переменные разделяются между собой пробелом. целое число Определяет значение приращения счетчика. По умолчанию оно равно 1. Допускается использовать отрицательные и нулевые значения.
Возможные сочетания значений свойств counter-reset и counter-increment показаны в табл. 1.
Список начинается с нуля.
Выводятся все четные числа.
Выводятся все нечетные числа.
Список начинается с 10.
HTML5 CSS2.1 IE Cr Op Sa Fx
counter-increment Теория ловли льва в пустыне
Методы инверсной кинематики
Ловля льва численными методами
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства counter-increment
Примечание
Для элементов, у которых установлено display: none , значение счётчика не меняется.
CSS по теме
Как сделать счетчик для сайта?
mlpro
29.11.2013 19:42 6 103
Как сделать примитивный счетчик для сайта который
был раз в 10-15 секунд прибавлял бы по 1 цифре. Т.е. как счетчик времени
только наоборот.
Пример:
Ответы на пост (7) Написать ответ
30.11.2013 01:22
Разберетесь сами?
Как добавить счетчик посещений на сайт
Счетчики посещений можно найти почти на любом сайте, а если их не видно визуально, то это ещё совсем не означает, что их нету. Настоящий веб-мастер и оптимизатор обязательно должен знать сколько человек посещают его ресурс, по каким запросам они переходят и т.п. Некоторые даже ставят счетчики на видное место, чтобы похвастаться перед другими пользователями (веб-мастерами). Из этой статьи Вы узнаете о том, как добавить счетчик посещений к себе на сайт, а также как выбрать счетчик.
1. Кому и для чего нужен счетчик на сайте
Обычный пользователь далекий от создания сайтов не имеет представления, что считается большой посещаемостью, а что маленькой. Значит хвастаться перед такими пользователями посещаемостью нету никакого смысла. Поэтому надо чётко понимать, что счетчик необходим прежде всего веб-мастеру. А нужен он для того, чтобы отслеживать общую посещаемость, а так же следить за детальной статистикой: какой материал на сайте наиболее интересен, какое среднее время пребывания на сайте, какие поисковые запросы привлекли пользователей и т.д.
2. Какой счетчик выбрать
Для начала надо определиться какой счетчик установить на свой сайт. Сразу скажу, что выбор из действительно стоящих бесплатных счетчиков не велик. Я бы порекомендовал обязательно поставить на сайт счетчик от liveinternet.ru. Этот счетчик обладает большими статистическими способностями. Например, он позволяет отслеживать поисковые запросы (точнее сказать позволял, т.к. теперь переходы с ПС стали хешироваться), точки входа/выхода, количество просмотров страниц, переходы с сайтов, с поисковых систем и т.д.
Так же хорошими счетчиками являются top100.rambler.ru и metrika.yandex.ru. В итоге, я предлагаю ставить на сайт четыре счетчика:
- liveinternet.ru
- top100.rambler.ru
- metrika.yandex.ru
- top.mail.ru
Также можно поставить к себе и Google Analitics (но я обычно его не ставлю).
Теперь расскажу о главном: как установить счетчик на сайт.
3. Установка счетчика на сайт
3.1. Счетчик от liveinternet.ru
Форма для добавления сайта в систему: http://www.liveinternet.ru/add.
Я думаю, что объяснять как заполнять форму при добавление сайта не стоит, поскольку здесь все очевидно. Единственное, что хочу сказать: в последнем пункте «участие в рейтингах» не забудьте выбрать категорию (если, конечно, Вы планируете участвовать в общем рейтинге). Далее Вы попадете на страницу, где Вас попросят проверить правильность введенных данных. Если Все правильно, то нажимаете на кнопку зарегистрировать.
Попав на следующую страницу нажимайте на «получить html-код счетчика». Вы попадете на страницу выбора счетчика:
Я люблю счетчики второго типа, где показывается число просмотров за 24 часа, число посетителей за 24 часа и число посетителей за сегодня. После выбора счетчика, кликайте по нему и попадете на страницу выбора цвета.
После этого внизу страницы нужно выбрать тип счетчика.
Я всегда выбираю самый первый пункт: «в виде одной картинки» (он стоит по умолчанию). Далее в самом низу страницы будет кнопка «получить html-код счетчика», нажимайте на неё и перед Вам откроется новая страница с кодом.
Код счетчика LiveInternet выглядеть примерно так:
Полученный код нужно вставить в том месте Вашей html-страницы, где Вы хотите, чтобы был счетчик. Советую ставить его в самом низу страницы, чтобы не тормозить загрузку страницы.
Также советую закрыть счетчики в тег , а к тегу a прибавить атрибут rel=»nofollow» , чтобы не передавать ссылочный вес.
3.2. Счетчик от top100.rambler.ru
Для начала нужно зарегистрироваться в рамблере: https://id.rambler.ru/account/external-registration. После этого авторизуйтесь и переходите на странице «добавить сайт».
Далее следуйте инструкциям. В общем смысл примерно тот же самый, что и в первом случае. Здесь придется заполнить немного больше полей, чем у лайвинтернета. В самом конце Вам будет предложено выбрать тип счетчика:
После этого получаете код счетчика и так же как в первом случае вставляете его в том месте на сайте, где хотите, чтобы он выводился.
Код будет выглядеть примерно так:
Рамблер стал очень капризным к модерации ресурсов. Сюда принимают только белые сайты. Если сайт серый, то его отклонят.
3.3. Счетчик от metrika.yandex.ru
Для добавления сайта в Яндекс Метрику Вы должны быть авторизированы на яндексе. После этого переходите на страницу http://metrika.yandex.ru/list/ и нажимайте вверху «добавить счетчик».
После этого необходимо будет заполнить соответствующие поля и аналогичным образом разместить код на сайте. Обычно счетчик от метрики я делаю невидимым на сайте.
После того как Вы добавите счетчики на сайт через пару деньков уже можете начинать анализировать статистику сайта.
3.4. Счетчик от top.mail.ru
Для добавления сайта в TOP Mail нужно зарегистрироваться в Mail.ru. После этого переходите на страницу https://top.mail.ru/add и вводите данные для добавления сайта.
У этого счетчика схожие параметры для просмотра счетчика с LI. Т.е. практически те же пункты. В этом плане, конечно, Яндекс Метрика куда интереснее.
Счетчик от мэйла хорош в первую очередь тем, что его рейтинг посещают множество пользователей. С этого рейтинга будут переходы на ваш сайт, если он будет иметь довольно большую посещаемость.
4. Как сделать счетчик посещений красивым
В качестве бонуса я расскажу о том, как сделать счетчик более красивым. Для этого Вам понадобится написать в своей таблице стилей CSS следующий код:
#cnt a img < opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=40); -khtml-opacity: 0.3; > #cnt a:hover img < opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100); -khtml-opacity: 1; >
А в месте, где нужно вставить коды счетчиков прописать следующие:
div id value">cnt"> Коды счетчиков div>
После этого у Вас будут счетчики как на этом сайте, т.е. они затемнены, а при наведение становятся яркими.