Java, UX, HTML, CSS, WEB-design

Организуйте свой контент с помощью счетчиков CSS

Краткое описание по статье Организуйте свой контент с помощью счетчиков CSS

Название: Организуйте свой контент с помощью счетчиков CSS . Краткое описание: ⭐ Но, говоря о HTML, как мы должны его писать? Больш . Дата публикации: 15.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года


Но, говоря о HTML, как мы должны его писать? Большинство (все?) используют числа в качестве текста в заголовках, поскольку они были обычным содержанием.

Что ж, позвольте мне открыть вам секрет: они делают это неправильно.

Некоторое время назад я задавался вопросом об этом, не больше ли это работа с CSS? На самом деле да, это так. Мы должны хранить контент в HTML, а представление в CSS, и, поскольку нам могут понадобиться другие способы упорядочивания заголовков, все они связаны с представлением. Но как мы можем делать такие вещи? Один класс для каждого элемента? Это было бы ужасно!

Ваш дизайнерский набор инструментов
Неограниченное количество загрузок: более 500 000 веб-шаблонов, наборов иконок, тем и элементов дизайна



Затем нас спасает свойство счетчика CSS. Это довольно неизвестное свойство, которое позволяет нам выполнять простой подсчет с помощью CSS. Это будет лучше объяснено с нашими демонстрациями 😀

Итак, качаем!

Просмотрите демонстрацию или загрузите исходные файлы.

Итак, счетчик?

По сути, счетчик — это «переменная», которую мы можем создать с помощью CSS, но единственные две возможные операции, которые мы можем с ней выполнять, — это увеличение или сброс. Для таких операций мы можем использовать свойства CSS counter-reset или counter-increment.

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

body {
  counter-reset: first; /* our h1's counter is zero every time we have a body tag (hope only once) */
}
h1 {
  counter-increment: first; /* so, when we have one h1, our counter will increase one unit */
  counter-reset: second; /* and we will reset our h2's counter */
}
h1:before { /* wow, here we will append a pretty formated Step N - Item */
  content: "Step " counter(first) " - "; /* when you write counter(first) we will get its current value */
  font-size: 0.8em;
  font-weight: normal;
  font-style: italic;
  color: #bababa;
}
h2 {
  counter-increment: second; /* so our h2's counter goes up.. */
  counter-reset: third; /* and we reset the h3's */
}
h2:before {
  content: counter(first) "." counter(second) " - "; /* we will output H1NUMBER.H2NUMBER */
}
h3 {
  counter-increment: third; /* h3 goes up, up, up */
}
h3:before {
  content: counter(first) "." counter(second) "." counter(third) " - "; /* and we output H1.H2.H3 */
}

Как видите, его использование довольно простое. Наш недостаток в том, что мы полагаемся на свойство content: и после (или до) псевдоэлемента, поэтому старые браузеры этого не увидят. Но он должен нормально работать в IE8+ и других браузерах.

Несколько счетчиков

Еще одна замечательная вещь заключается в том, что у вас может быть «общий» счетчик, вам просто нужно разделить несколько счетчиков, чтобы увеличить их с помощью пробелов. Именно так:

body {
  counter-reset: general first;
}
h1 {
  counter-increment: general first;
  counter-reset: second;
}
h2 {
  counter-increment: general second;
  counter-reset: third;
}
h3 {
  counter-increment: general third;
}

Лучше упорядоченные списки

Используя почти тот же код, вы можете создавать более упорядоченные списки с контролем подэлементов. Таким образом, вместо 1 – ITEM вы можете иметь 2.5.3.1 – ITEM, когда у вас есть несколько вложенных OL. Это код, который я бы использовал:

ol {
	list-style: none;
	counter-reset: olfirst; /* our father OL must have olfirst item reseted */
	font-family: arial;
}
ol ol {
  counter-reset: olsecond; /* our sub OL's reset the olsecond, third must to be olthird and so on */
}
	ol li {
		counter-increment: olfirst; /* when we have a item that is children of first OL, it increases first counter*/
	}
	ol li ol li {
		counter-increment: olsecond; /* when the item is children of a OL that is children of another OL, so it is a sub OL */
	}
	ol li:before {
		content: counter(olfirst) " - "; /* let's output our pretty number */
	}
	ol li ol li:before {
		content: counter(olfirst) "." counter(olsecond) " - "; /* let's output our "sub-number" */
	}

Вы еще не голодны?

Это довольно сложный атрибут, поэтому вы должны попробовать его пару раз, пока не освоитесь. Но у нас есть несколько руководств по CSS в W3Schools. сброс счетчика, CSS приращение счетчика и до / после псевдоэлементы, которые могут вам очень помочь.

Итак, вам пора поговорить. Знаете ли вы об этом объекте? Что вы думаете об этом?

Этот пост может содержать партнерские ссылки. Смотрите нашу информацию о партнерских ссылках здесь.


Source: 1stwebdisigner

Заключение

Вы ознакомились с статьей — Организуйте свой контент с помощью счетчиков CSS

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»