New CSS options can typically make it simpler and extra environment friendly to code designs we already knew easy methods to create. This effectivity may stem from decreased code or hacks, or improved readability because of the new options.
In that spirit, let’s revamp what’s below the hood of a bar chart.
<ul class="chart" tabindex="0" position="record" aria-labelledby="chart-title">
<li class="chart-bar" data-value="32" tabindex="0" position="img" aria-label="32 share">32%</li>
<!-- and many others. -->
</ul>We start by laying out a grid.
.chart {
show: grid;
grid-template-rows: repeat(100, 1fr);
/* and many others. */
}The chart metric is predicated on share, as in “some quantity out of 100.” Let’s say we’re working with a grid containing 100 rows. That should stress take a look at it, proper?
Subsequent, we add the bars to the grid with the grid-column and grid-row properties:
.chart-bar {
grid-column: sibling-index();
grid-row: span attr(data-value quantity);
/* and many others. */
}Proper off the bat, I wish to observe a few issues. First is that sibling-index() operate. It’s model new and has incomplete browser assist as of this writing (come on, Firefox!), although it’s presently supported within the newest Chrome and Safari (however not on iOS apparently). Second is that attr() operate. We’ve had it for some time, nevertheless it was lately upgraded and now accepts data-attributes. So when we now have a kind of in our markup — like data-value="32" — that’s one thing the operate can learn.
With these in place, that’s actually all we have to create a fairly darn good bar chart in vanilla CSS! The next demo has fallbacks in place so that you could nonetheless see the ultimate end in case your browser hasn’t adopted these new options:
Sure, that was straightforward to do, nevertheless it’s finest to know precisely why it really works. So, let’s break that down.
Mechanically Establishing Grid Columns
Declaring the sibling-index() operate on the grid-column property explicitly locations the record objects in consecutive columns. I say “express” as a result of we’re telling the grid precisely the place to put every merchandise by its data-value attribute within the markup. It goes first <li> in first column, second <li> in second column, and so forth.
That’s the facility of sibling-index() — the grid intelligently generates the order for us with out having to do it manually via CSS variables.
/* First bar: sibling-index() = 1 */
grid-column: sibling-index();
/* ...ends in: */
grid-column: 1;
grid-column-start: 1; grid-column-end: auto;
/* Second bar: sibling-index() = 2 */
grid-column: sibling-index();
/* ...ends in: */
grid-column: 2;
grid-column-start: 2; grid-column-end: auto;
/* and many others. */Mechanically Establishing Grid Rows
It’s just about the identical factor! However on this case, every bar occupies a sure variety of rows based mostly on the share it represents. The grid will get these values from the data-value attribute within the markup, successfully telling the grid how tall every bar within the chart ought to be.
/* First bar: data-value="32" */
grid-row: span attr(data-value quantity);
/* ...ends in: */
grid-row: span 32
/* Second bar: data-value="46" */
grid-row: span attr(data-value quantity);
/* ...ends in: */
grid-row: span 46The attr() operate, when supplied with a information kind parameter (the parameter worth quantity in our case), casts the worth retrieved by attr() into that particular kind. In our instance, the attr() operate returns the worth of data-value as a <quantity> kind, which is then used to find out the variety of rows to span for every bar.
Let’s Make Completely different Charts!
Since we now have the nuts and bolts down on this strategy, I figured I’d push issues a bit and display how we are able to apply the identical methods for every kind of CSS-only charts.
For instance, we are able to use grid-row values to regulate the vertical path of the bars:
Or we are able to skip bars altogether and use markers as an alternative:
We are able to additionally swap the columns and rows for horizontal bar charts:
Wrapping up
Fairly thrilling, proper? Simply take a look at all of the methods we used to tug these things off earlier than the times of sibling-index() and an upgraded attr():
