I built this website to see what was possible with only one div, and a stylesheet.<p>No JS, No other HTML, just CSS.<p>Source: <a href="https://github.com/archiewood/pure-css-site">https://github.com/archiewood/pure-css-site</a>
Nice work! It’s possible to get rid of even that single div - <a href="https://35bytes.maczan.pl/" rel="nofollow">https://35bytes.maczan.pl/</a>
Previous work in this field:<p><a href="https://mathiasbynens.be/demo/css-without-html" rel="nofollow">https://mathiasbynens.be/demo/css-without-html</a> - <i>completely</i> empty html, doesn't seem to work on Mac Safari any more, does work on Firefox for me. See <a href="https://css-tricks.com/using-css-without-html/" rel="nofollow">https://css-tricks.com/using-css-without-html/</a> if you want to know how it works.<p><a href="https://web.archive.org/web/20160420232319/cj-johnson.github.io/Single-Tag_Website/" rel="nofollow">https://web.archive.org/web/20160420232319/cj-johnson.github...</a> (original copy defunct) - kinda broken now, the source is just a single <link> (if you ignore all the stuff the Wayback Machine adds)
Using pure CSS to make a 3D "game engine": <a href="https://keithclark.co.uk/labs/css-fps/" rel="nofollow">https://keithclark.co.uk/labs/css-fps/</a>
Do developers really build basic websites / pages WITHOUT pure CSS when it's an option?<p>I know there are times when you need to do something CSS can't (and shouldn't do of course. But I mean when the 'thing' is design/style only, aren't we all already using only CSS for those things? Or am I just so old I still practice the separation of concerns and no one else is.<p>Also, while kudos to the OP for doing this, this is exactly a time when using CSS to do this is incorrect and using vanilla Javascript IS the right decision, as this is a behavior and not a style issue.<p>NB4: Yes I do code sloppy when time dictates, but I still seperate my HTML, CSS, and JS as the norm, not the exception.
Interesting and well done!<p>I have an extension that adds a div to the page, Grammalecte, its breaks this website a bit. A div:first-child, or an id would fix it.<p>A reminder that extensions can affect HTML content and you need to target your elements in CSS in a robust way.
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.<p>I love it!
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.<p><pre><code> Link: <//website.css>; REL=stylesheet</code></pre>
Might be fun to replace the div tags with a custom tag.<p><a href="https://html.spec.whatwg.org/multipage/custom-elements.html" rel="nofollow">https://html.spec.whatwg.org/multipage/custom-elements.html</a>
I like those! What I would like to see is the source code of CAPTCHAs (that generates the CSS) used by onion websites like Dread. There are CSS-only modals, too.
You could have saved that background image and use a CSS gradient ;)<p>edit: nevermind, that's a dead URL. But anyways, it's an extra http request you don't need.
That is pretty cool.<p>I wonder if you could do this with no <div> using just the <link> tag.<p>Or do browsers add an implicit body tag if you don't put one that you can style?
well it's not hard to believe given that it doesn't seem to have anything but that one paragraph of text and then the animated sentence at the top<p>am I not seeing something else?
lighthouse performance scores are perfect. accessibility fails. best practice category is 90+ (very minor issues). PWA is not applicable.<p><a href="https://lighthouse-metrics.com/lighthouse/checks/38f2276c-bc58-4e14-b7b0-9da9f5a3f90b" rel="nofollow">https://lighthouse-metrics.com/lighthouse/checks/38f2276c-bc...</a><p>lol,