Стили CSS как хранилище данных

Последнее обновление: 21.05.2021

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

Например, определим файл стилей, который назовем user.css со следующим содержимым:

.user {
	--name: "Tom";
	--age: "37";
	--email: "tom@gmail.com";
    --address: "Улица Вязов, д.21, кв. 14";
}

Здесь для класса user определены четыре переменных, которые хранят некоторые значения. В данном случае все значения представляют строки.

Теперь определим следующую html-страницу, на которой будет подключаться вышеопределенный файл стилей:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Метanit.com</title>
	<link rel="stylesheet" type="text/css" href="user.css"/>
	<style>
		.user-name:after { content: var(--name); }
		.user-age:after { content: var(--age); }
		.user-email:after { content: var(--email); }
		.user-address:after { content: var(--address); }
	</style>
</head>
<body>
<div class="user">
<h2 class="user-name">User </h2>
<p class="user-age">Age: </p>
<p class="user-email">Email: </p>
<p class="user-address">Address: </p>
</div>
</body>
</html>

Для вывода данных на страницу применяется элемент <div class="user">, в котором определены четыре html-элемента: один заголовок h2 и три параграфа. И для каждого элемента определен свой класс.

Чуть выше на странице в элементе <style> определяются стили для этих элементов, которые применяют переменные из подключаемого файла user.css. Все эти стили однотипны, они устанавливают текст элемента, который добавляется после уже имеющегося текстового содержимого. Например:

.user-name:after { content: var(--name); }

::after создает псевдоэлемент в конце html-элемента (в данном случае в конце элемента с классом user-name). И у этого псевдоэлемента в качестве содержимого устанавливается текст из переменной --name.

Стили для остальных элементов идентичны.

Таким образом, мы ожидаем, что значения, которые храняться в файле user.css, будут выводиться на веб-страницу. Кинем странице в браузер и увидем на ней данные из подключеннного файла css:

Переключение тем в CSS и HTML

Хранение текстовых данных и вывод их в текстовые блоки на веб-страницу, естественно, это только частный случай. В более широком смысле переменные CSS позволяют хранить некоторое состояние, которое применяется к html-странице.

НазадСодержание

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850