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

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=stylesheet

Might be fun to replace the div tags with a custom tag.

https://html.spec.whatwg.org/multipage/custom-elements.html

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,

Alternate title: "How to scare an engineer in three words"