Новые функции CSS иногда могут сделать разработку кода проще и эффективнее, чем то, что мы уже знаем. Эта эффективность может быть достигнута за счет меньшего количества кода или хаков или за счет улучшения читаемости благодаря новым функциям.
В этом духе давайте воссоздадим то, что находится под капотом гистограммы.
We begin by laying out a grid.
.chart {
display: grid;
grid-template-rows: repeat(100, 1fr);
/* etc. */
}Метрика диаграммы основана на процентах, например «некоторое число». из 100«Предположим, мы работаем с сеткой из 100 строк. Ее нужно подвергнуть стресс-тестированию, верно?
Далее добавляем столбцы в сетку grid-column И grid-row Свойство:
.chart-bar {
grid-column: sibling-index();
grid-row: span attr(data-value number);
/* etc. */
}Сразу хочу отметить несколько вещей. Первый это sibling-index() Праздник. Он довольно новый и на момент написания этой статьи имел неполную поддержку браузеров (ну да ладно, Firefox!), хотя в настоящее время он поддерживается в последних версиях Chrome и Safari (но, очевидно, не в iOS). второй attr() Праздник. Он у нас уже давно есть, но недавно он был обновлен и теперь принимает атрибуты данных. Итак, когда у нас есть один из них в нашей разметке, например data-value="32" — Это то, что функция может прочитать.
Это действительно все, что нам нужно для создания действительно красивой гистограммы на стандартном CSS! В следующей демонстрации представлены резервные варианты, поэтому, если ваш браузер не поддерживает эти новые функции, вы все равно сможете увидеть конечный результат:
Да, это было легко сделать, но лучше точно знать, как это сделать. Почему Оно работает. Итак, давайте разберемся.
Автоматическая настройка столбцов сетки
объявление о sibling-index() работать над grid-column Свойство Четко Размещает элементы списка в последовательных столбцах. Я говорю «явно», потому что мы сообщаем сетке, где разместить каждый элемент в зависимости от его местоположения. data-value Атрибут в разметке. это идет первым
Во втором столбце и т.д.
это сила sibling-index() — Сетка разумно генерирует для нас порядок без необходимости делать это вручную с помощью переменных CSS.
/* First bar: sibling-index() = 1 */
grid-column: sibling-index();
/* ...results in: */
grid-column: 1;
grid-column-start: 1; grid-column-end: auto;
/* Second bar: sibling-index() = 2 */
grid-column: sibling-index();
/* ...results in: */
grid-column: 2;
grid-column-start: 2; grid-column-end: auto;
/* etc. */Автоматическая настройка строк сетки
Это точно то же самое! Но в этом случае каждая полоса занимает определенное количество строк в зависимости от того, какой процент она представляет. Сетка получает эти значения data-value Атрибут в разметке фактически сообщает сетке, какой длины должен быть каждый столбец на диаграмме.
/* First bar: data-value="32" */
grid-row: span attr(data-value number);
/* ...results in: */
grid-row: span 32
/* Second bar: data-value="46" */
grid-row: span attr(data-value number);
/* ...results in: */
grid-row: span 46 attr() функция, если она снабжена тип данных параметр (значение параметра number В нашем случае) помещает значение, полученное attr() В этом конкретном типе. В нашем примере attr() Возвращает значение функции data-value Как
Давайте создадим разные диаграммы!
Поскольку мы уже знакомы с этим подходом, я подумал, что стоит пойти немного дальше и продемонстрировать, как мы можем применять одни и те же методы ко всем типам диаграмм, использующих только CSS.
Например, мы можем использовать grid-row Значения для регулировки вертикального направления полос:
Или мы можем вообще опустить полосу и использовать вместо нее маркеры:
Мы также можем поменять местами столбцы и строки для горизонтальной гистограммы:
подведение итогов
Очень увлекательно, не так ли? Просто посмотрите на все методы, которые мы использовали для распространения этого материала до тех пор. sibling-index() и продвинутый attr(): :
