CSS-Only Components for Pure CSS | Hacker News Reader

CSS-Only Components for Pure CSS

github.com

42 pointsmacco9 comments

We actually removed our CSS tabs recently because apparently modern screen readers had more issues with them than JavaScript tabs surprisingly enough.

Not really that surprising, since there is no way to apply the correct aria-selected and aria-expanded attributes using just CSS. (You can apply the correct ARIA roles in the HTML though, just not save the change of state.)

It's a shame there is not a native HTML tab construction, since you really shouldn't need JS to make tabs. Using the radio buttons to set active state is a clever hack, but it's not what they were intended for.

Ref: WAI-ARIA section on tabs: https://www.w3.org/TR/wai-aria-1.1/#tab

Been checking out some of these Github posts today on HN (there have been several) and then spinning up dashboards for them at Chart.ly.

https://chart.ly/github-dashboard/joe-crick/pure-css-compone...

Interesting that this project has a negative streak of 440 days (440 days since a commit has been made). So not a super fresh project.

Also interesting that it made it to the front page of HN! Nice work!

I like Pure CSS, it's one of the few CSS frameworks that makes it easy to pick and choose only the parts you need. Bravo!

I think calling something "css-only" and having it break because you didn't add a radio input element in the markup is a little misleading. The dynamic functionality hinges on the behavior of these html elements. And if having required html elements is ok, why not just lose the hacky markup and include a required javascript file to get the desired behavior in a more traditional and standard way?

Their CSS is 3.8K while Bootstrap (4.1.1) is 21K. Both being minified and gzipped.

Would that result in significantly faster page speeds if you switch from Bootstrap?

No, unless you count milliseconds as significant. You might as well remove one image in your content or save with a better image compression.

IMO an image is much less important than CSS, since most of the time without the CSS framework loading the page is not usable. Also progressive JPEGs make a big difference for the effect of loading time if you have a large splash image or background image.

Reply on news.ycombinator.com