Nice work! It’s possible to get rid of even that single div - https://35bytes.maczan.pl/
Pure CSS. Invalid HTML.
Nice job tho. Now just need to make it in 3D.
Previous work in this field:
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)
If you have browser extensions that make additional div, it looks weird: i.imgur.com/glCfzkj.png
Using pure CSS to make a 3D "game engine": https://keithclark.co.uk/labs/css-fps/
Do developers really build basic websites / pages WITHOUT pure CSS when it's an option?
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.
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.
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!
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.
A reminder that extensions can affect HTML content and you need to target your elements in CSS in a robust way.
I knew it would be a demonstration of the CSS "generated content" feature.
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.
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.
Link: <//website.css>; REL=stylesheetMight be fun to replace the div tags with a custom tag.
Never knew "content" was animatable. This might come in handy some time.
CSS is Turing complete, so if you want to make anything you could
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 ;)
edit: nevermind, that's a dead URL. But anyways, it's an extra http request you don't need.
What's the purpose of remote background image? Tracking?
That is pretty cool.
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?
Waiting for a compiler backend that targets CSS.
First single-page applications. Now single <div> applications.
What next? Single letter applications?
"This website contains one div only"
No, the link tag is there.
You can add a bg to the body and and style to the HTML
A self-closing div is not valid HTML.
I love this. but, why?
so clean
Did you see this in the css
@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." }
}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
am I not seeing something else?
And none of the text is selectable :(
lighthouse performance scores are perfect. accessibility fails. best practice category is 90+ (very minor issues). PWA is not applicable.
https://lighthouse-metrics.com/lighthouse/checks/38f2276c-bc...
lol,
[flagged]
[flagged]
Alternate title: "How to scare an engineer in three words"
I built this website to see what was possible with only one div, and a stylesheet.
No JS, No other HTML, just CSS.
Source: https://github.com/archiewood/pure-css-site