CSS variables have ~96% coverage at this moment: https://caniuse.com/css-variables. If you are not using Internet Explorer, you should very likely be able to render a page using var.
The trouble with caniuse is that it only covers the "mainstream".
It does not cover more exotic things like browser in RiscOS or Amiga or text-only browsers etc. These are often consumers of text-only sites, deliberably or not. Small market share though I admit, but probably larger market share for text-only sites Vs other "normal" sites.
I think covering the "mainstream" is the point of the site. Don't get me wrong, I really do enjoy fast loading text based websites, but if web devs had to worry about those browsers, then CSS (and web technology in general) could never develop past its infancy. Whether that's a good thing or bad thing is up to you.
Essentially, instead of hijacking the Browser's history with some Javascript router api, you simple use the inbuilt url fragment to "load" a new page by using CSS to hide/show content based on that #fragment.
What I like about it is that the urls are "honest" -- you're not navigating to a new page (there isn't one, just like there isn't one when you do the same w/ a Jamstack App) -- and the urls show this.
I tried briefly with VoiceOver, and I'm afraid it needs some work. Feel free to open an issue or suggest how to improve it: https://github.com/cadars/john-doe
It'll treated as one big long page with helpers to jump to each section. It'd be better if each section had it's own role (probably "contentinfo") and aria-label attribute. It'll probably work better than a lot of other 'modern' approaches even as it is now though.
There aren't any individual pages. It's one page styled to look like several pages. It is not several pages bundled together. Google are going what you should expect.
It is! And I had the same conclusion when it came to highlight the active section… it's not worth repeating the markup. Maybe something with `:focus-within` could work?
Cool trick! If you search for random phrases in the pages that aren't the front page, Google has indexed them as well even though they're hidden by default by the CSS. I'd be cautious for SEO reasons as it's non-standard though.
> Firefox supports pure css masonry grid behind a flag.
That has less support than Bieber at a black metal festival though.
Here's[1] the columns (or flexbox) way of doing it. Note that images will be a bit strangely ordered (as you would read columns). That's not solvable without JS (AFAIK). That's why W3C/CSSWG is looking at possible solutions[2] that resulted in the Firefox experiment you're referencing.
It's worth noting when doing this it registers each anchor in the browser history. If you want to avoid this, checkbox hacking with the :checked selector is an option.
I am tired of that too, but you can use the checkbox hack to implement features such as tabbed content for which storing user selections in the browser's history would probably result in unintuitive UX.
1. I know HN hates JS, and there are times I do too, but how is celebrating JS-free anything but fundamentalism? A little JS won't hurt performance.
2. Gitlab offers a full IDE that you could use to edit your files. The post talks about the neocities and github editors only, both of which suck compared to the gitlab IDE.
1. Agree. But I made this with absolute beginners in mind. Starting with only HTML and CSS seemed way enough already.
2. See 1. Neocities is probably one of the easiest ways to publish something online for a neophyte, either with their editor or file uploader. (but they have a CLI too!)
1. Do you accept that "doesn't require JavaScript" is a net positive, however small? If so, "doesn't use JavaScript" is just a guarantee of that - still a net benefit even if it's not the 'one true way'.
> Those browser's vulnerability to those attacks are entirely based on the fact that they execute JavaScript. Thus, if your browser doesn't execute JS, it's immune.[0]
> ...
> That is the complete explanation… JavaScript. Executing arbitrary code from strangers on the Internet is what makes browsers less secure.[1]
For me I just like seeing hacks to create systems with less code and complexity than web-packing heaps of npm lib's together... I guess put more simply:
The best code, is the code you don't have to write...
