from Hacker News

Pure CSS Website

by archiewood on 3/22/24, 6:34 PM with 94 comments

  • by archiewood on 3/22/24, 6:34 PM

    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

  • by yu3zhou4 on 3/22/24, 10:27 PM

    Nice work! It’s possible to get rid of even that single div - https://35bytes.maczan.pl/

  • by somishere on 3/22/24, 9:21 PM

    Pure CSS. Invalid HTML.

    Nice job tho. Now just need to make it in 3D.

  • by egypturnash on 3/23/24, 1:03 AM

    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)

  • by souvlakee on 3/22/24, 9:24 PM

    If you have browser extensions that make additional div, it looks weird: i.imgur.com/glCfzkj.png

  • by yerich on 3/23/24, 1:45 AM

    Using pure CSS to make a 3D "game engine": https://keithclark.co.uk/labs/css-fps/

  • by NiagaraThistle on 3/24/24, 7:29 PM

    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.

  • by jraph on 3/23/24, 2:16 PM

    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.

  • by userbinator on 3/23/24, 5:54 AM

    I knew it would be a demonstration of the CSS "generated content" feature.

  • by mmh0000 on 3/22/24, 10:58 PM

    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!

  • by superkuh on 3/23/24, 4:15 AM

    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

  • by chris_wot on 3/23/24, 2:53 AM

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

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

  • by Pesthuf on 3/22/24, 8:13 PM

    Never knew "content" was animatable. This might come in handy some time.

  • by dheera on 3/23/24, 4:08 AM

    CSS is Turing complete, so if you want to make anything you could

  • by johnisgood on 3/23/24, 12:37 PM

    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.

  • by tiborsaas on 3/23/24, 10:42 AM

    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.

  • by butz on 3/22/24, 9:17 PM

    What's the purpose of remote background image? Tracking?

  • by bawolff on 3/22/24, 9:38 PM

    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?

  • by amelius on 3/23/24, 3:11 PM

    Waiting for a compiler backend that targets CSS.

  • by cyberax on 3/23/24, 7:58 AM

    First single-page applications. Now single <div> applications.

    What next? Single letter applications?

  • by Alifatisk on 3/23/24, 2:20 PM

    "This website contains one div only"

    No, the link tag is there.

  • by tithos on 3/23/24, 1:20 AM

    You can add a bg to the body and and style to the HTML

  • by Julesman on 3/22/24, 10:10 PM

    A self-closing div is not valid HTML.

  • by phirschybar on 3/23/24, 3:17 PM

    I love this. but, why?

  • by kennedy on 3/23/24, 1:12 AM

    so clean

  • by ape4 on 3/22/24, 10:32 PM

    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." }
}

  • by lacoolj on 3/22/24, 8:53 PM

    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?

  • by pimlottc on 3/22/24, 9:02 PM

    And none of the text is selectable :(

  • by xyst on 3/22/24, 11:31 PM

    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,

  • by corywatilo on 3/22/24, 11:11 PM

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