Using a solid border for the cursor instead of having it in the text content is a nice touch; because it's separated out you could probably use another animation to get it blinking, too.
Yep, that was my thought, but there might be complications I haven't thought of. This is me guessing without having tried anything.
> couldn't get it to render in a way I was happy with
I might be repeating something you already noticed, but cursors only blink after you stop typing, so if you weren't delaying the effect until after the typing was done that might have contributed.
Yeah, that was exactly my thought too, but then I've been doing web dev for 20 years so obviously it wouldn't come as much of a surprise to me that this is possible.
I guess not all people are in the same boat though, and I suppose it is quite cool how much can be done with CSS these days! (not that you would necessarily want to).
You shouldn't actually build your entire website in CSS -- it's going to be inaccessible no matter what because CSS isn't really for content.
But it's cool to see what's possible, mostly because learning how to overcome these challenges to use a tool in a way it shouldn't be used often requires you to learn more about how the tool works. That the tool is ill-suited is the point.
Of course, not that there isn't value in you pointing out that CSS content isn't accessible :) -- I have seen developers get tripped up by that in production settings particularly when building things like hover labels, so a reminder is always appreciated.
Recent Firefox doesn't, but good old Opera 9 lets you select the text just fine. (On the other hand, no animation nor background, but maybe that's a reasonable tradeoff.)
Indeed, the fact that HTML5 specified the exact way to turn any stream of bytes into a DOM means that "error" cases are really just academic/theoretical.
@keyframes typewriter {
00.0% { content: "A" }
00.4% { content: "A " }
00.8% { content: "A W" }
01.2% { content: "A We" }
01.6% { content: "A Web" }
02.0% { content: "A Webs" }
02.4% { content: "A Websi" }
02.8% { content: "A Websit" }
03.2% { content: "A Website" }
13.2% { content: "A Website," }
13.6% { content: "A Website, " }
14.0% { content: "A Website, i" }
14.4% { content: "A Website, in" }
14.8% { content: "A Website, in " }
15.2% { content: "A Website, in P" }
15.6% { content: "A Website, in Pu" }
16.0% { content: "A Website, in Pur" }
16.4% { content: "A Website, in Pure" }
16.8% { content: "A Website, in Pure " }
17.2% { content: "A Website, in Pure C" }
17.6% { content: "A Website, in Pure CS" }
18.0% { content: "A Website, in Pure CSS" }
22.2% { content: "A Website, in Pure CSS." }
}
div::after {
font-family: var(--secondary-font);
font-size: 1em;
user-select: all;
content:
" \A \
This website contains one <div> only. \A \
No JavaScript. \A \
The rest is pure CSS. \A \
\A \
The <div> is animated with CSS keyframes, \A \
styled with CSS variables, \A \
styled with CSS transitions, \A \
styled with CSS pseudo-elements, \A \
styled with CSS pseudo-classes. \A \
But that's it. \A \
";
}
That's impressive. I expected, "Sure, it works, but the CSS is going to be a nightmare." Instead, the CSS is pretty, straightforward and easy to understand.
Many browser like Firefox support the HTTP header (not HTML header) field for defining external style sheets. You could make a 0 byte HTML page by using this feature in the HTTP response header.
For reasons that are probably out of scope for CSS, I would really like to be able to do more with the CSS content property.
It's one broad class of problem really: many frameworks make changing the HTML they generate difficult or impossible. Inevitably you end up needing to inject a button or a hyperlinked image or something in a particular position, and you have to resort to Javascript to do something that isn't interactive and isn't a program, which feels like the wrong tool.
You could argue that both Javascript and CSS are the wrong tool for this use case, but CSS would be the more convenient wrong tool.
102 comments
[ 2.9 ms ] story [ 187 ms ] threadNo JS, No other HTML, just CSS.
Source: https://github.com/archiewood/pure-css-site
the css is js generated but doesn't need to be
https://thedusting.zone/
https://pure-css-site.netlify.app/index.css
<html> and <body> accept pseudo-elements. Why add such bloat?!
Using a solid border for the cursor instead of having it in the text content is a nice touch; because it's separated out you could probably use another animation to get it blinking, too.
would you use another keyframe or did you have something else in mind
> couldn't get it to render in a way I was happy with
I might be repeating something you already noticed, but cursors only blink after you stop typing, so if you weren't delaying the effect until after the typing was done that might have contributed.
am I not seeing something else?
I guess not all people are in the same boat though, and I suppose it is quite cool how much can be done with CSS these days! (not that you would necessarily want to).
But it's cool to see what's possible, mostly because learning how to overcome these challenges to use a tool in a way it shouldn't be used often requires you to learn more about how the tool works. That the tool is ill-suited is the point.
Of course, not that there isn't value in you pointing out that CSS content isn't accessible :) -- I have seen developers get tripped up by that in production settings particularly when building things like hover labels, so a reminder is always appreciated.
Browser bug? Seems like it's debatable although the spec leans in the direction of generated content being selectable: https://stackoverflow.com/questions/24385171/is-it-possible-...
Nice job tho. Now just need to make it in 3D.
Comparatively HTML5 is very lenient in its spec. Browsers are even more lenient in their implementation.
Do you have any examples of undefined or linient rules?
I'm a big fan of optional closing tags that HTML5 has. Can do stuff like:
Almost as easy as markdown. Couldn't get this working with XML.>Anyone with the link is able to see the paste and also delete it.
Maybe it's not the best option for sharing in a place like this.
I wonder if you could do this with no <div> using just the <link> tag.
Or do browsers add an implicit body tag if you don't put one that you can style?
You could even remove the link tag and use the link header in the http response instead https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Li...
div::after { font-family: var(--secondary-font); font-size: 1em; user-select: all; content: " \A \ This website contains one <div> only. \A \ No JavaScript. \A \ The rest is pure CSS. \A \ \A \ The <div> is animated with CSS keyframes, \A \ styled with CSS variables, \A \ styled with CSS transitions, \A \ styled with CSS pseudo-elements, \A \ styled with CSS pseudo-classes. \A \ But that's it. \A \ "; }
I love it!
https://lighthouse-metrics.com/lighthouse/checks/38f2276c-bc...
lol,
https://mathiasbynens.be/demo/css-without-html - completely empty html, doesn't seem to work on Mac Safari any more, does work on Firefox for me. See https://css-tricks.com/using-css-without-html/ if you want to know how it works.
https://web.archive.org/web/20160420232319/cj-johnson.github... (original copy defunct) - kinda broken now, the source is just a single <link> (if you ignore all the stuff the Wayback Machine adds)
https://html.spec.whatwg.org/multipage/custom-elements.html
It's one broad class of problem really: many frameworks make changing the HTML they generate difficult or impossible. Inevitably you end up needing to inject a button or a hyperlinked image or something in a particular position, and you have to resort to Javascript to do something that isn't interactive and isn't a program, which feels like the wrong tool.
You could argue that both Javascript and CSS are the wrong tool for this use case, but CSS would be the more convenient wrong tool.
What next? Single letter applications?
Conveniently abbreviates to SPA.