[HN Gopher] Pure CSS Website
___________________________________________________________________
Pure CSS Website
Author : archiewood
Score : 218 points
Date : 2024-03-22 18:34 UTC (1 days ago)
(HTM) web link (pure-css-site.netlify.app)
(TXT) w3m dump (pure-css-site.netlify.app)
| archiewood wrote:
| 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
| azangru wrote:
| After examples showcased at https://a.singlediv.com/, I would
| not be surprised by anything...
| prng2021 wrote:
| Jesus this is insane
| somishere wrote:
| Epic. Tho where are the next level hover states?!
| throwaway14356 wrote:
| http://go-here.nl/omg-tables.html
|
| the css is js generated but doesn't need to be
| somishere wrote:
| :D
| dieselgate wrote:
| That was pretty far out on mobile
| brailsafe wrote:
| That's not fair, they clearly have illustration skills ;)
| kennedy wrote:
| wow these are beautiful
| doublerabbit wrote:
| I see multiple <divs> in the source of that site. That's not
| a single div.
| azangru wrote:
| Each image on that page is created with just a single div.
| doublerabbit wrote:
| Maybe each image; but still not a single div.
| gigglesupstairs wrote:
| Wow. Thanks for sharing.
| jdorfman wrote:
| Her work is mind blowing. The dusting zone is my new
| favorite game
|
| https://thedusting.zone/
| moritzwarhier wrote:
| Aaah that one was great, thank you for reminding!
| nkozyra wrote:
| This is a 404, btw. Private repo?
| archiewood wrote:
| oops well i just saw this took off and have made it public -
| thanks
| pimlottc wrote:
| Might as well just link the hosted CSS file:
|
| https://pure-css-site.netlify.app/index.css
| danslinky wrote:
| I can't see the repo, Archie
| cantSpellSober wrote:
| > one div
|
| <html> and <body> accept pseudo-elements. Why add such bloat?!
| dspillett wrote:
| That link currently 404s, and doesn't seem to be listed when
| manually navigating up to the user repository list.
| oldsecondhand wrote:
| Link is broken for me (404).
| duxup wrote:
| I am both horrified and impressed.
| danShumway wrote:
| Nice! I love seeing stuff like this on HN.
|
| 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.
| archiewood wrote:
| i was kind of messing around with this blinking idea but
| couldn't get it to render in a way I was happy with
|
| would you use another keyframe or did you have something else
| in mind
| beretguy wrote:
| I'm getting 404. Is it because I'm not logged in?
| archiewood wrote:
| repo was private, now public!
| chris_wot wrote:
| Getting a 404
| afiori wrote:
| Cool, is the div necessary? Could you style the <link>?
| Pesthuf wrote:
| Never knew "content" was animatable. This might come in handy
| some time.
| lacoolj wrote:
| 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?
| lebean wrote:
| I had a similar thought. I thought "wow, believable!" but not
| to be flippant, the initial wow was genuine.
| kypro wrote:
| 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).
| treflop wrote:
| You could embed JS into CSS in 1999 in IE5 so CSS has always
| been a lot of "you can do a lot of weird things."
| tengbretson wrote:
| The ease of dropping in a "useState" and high-ish performance
| js engines has made high-level CSS wizardry a bit of a lost
| art.
| pimlottc wrote:
| And none of the text is selectable :(
| c-hendricks wrote:
| Ah so it's more like a pure css mobile app.
| danShumway wrote:
| 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.
| codetrotter wrote:
| Noticed the same. Would be interested to know what the page is
| like for people who use screen readers. Does the whole page
| seem blank for them?
| userbinator wrote:
| 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.)
|
| 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-...
| butz wrote:
| What's the purpose of remote background image? Tracking?
| somishere wrote:
| Pure CSS. Invalid HTML.
|
| Nice job tho. Now just need to make it in 3D.
| assimpleaspossi wrote:
| I wasn't going to mention the invalid HTML. Thank you for doing
| it.
| xp84 wrote:
| I thought we all agreed to ignore validity a while back when
| XHTML gave way to HTML5.
| pests wrote:
| How is XHTML any more valid than HTML 5?
| tredre3 wrote:
| XHTML had to be valid XML, that was the entire shtick.
|
| Comparatively HTML5 is very lenient in its spec. Browsers
| are even more lenient in their implementation.
| userbinator wrote:
| 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.
| archiewood wrote:
| I cheated for brevity :S
| souvlakee wrote:
| If you have browser extensions that make additional div, it looks
| weird: i.imgur.com/glCfzkj.png
| souvlakee wrote:
| Code: https://paste.mozilla.org/BVWPuyrH
| Alifatisk wrote:
| First time seeing https://paste.mozilla.org, very cool
| psnehanshu wrote:
| Consider adding https:// at the start of the URL to make it
| clickable.
| bawolff wrote:
| 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?
| Julesman wrote:
| A self-closing div is not valid HTML.
| yu3zhou4 wrote:
| Nice work! It's possible to get rid of even that single div -
| https://35bytes.maczan.pl/
| Alifatisk wrote:
| Yeah I was about to mention that there was no need for the div,
| the body selector should be enough.
|
| 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...
| xp84 wrote:
| Thanks loads, I always love a day when I learned something
| neat, and you've made that happen today!!
| jkrubin wrote:
| awesome. the single div was a performance bottleneck for me.
| ape4 wrote:
| 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." } }
| zichy wrote:
| Yes, I opened the CSS file and there it was.
| xyst wrote:
| just hardcoded things :)
| asciii wrote:
| Before it starts to look a bit ugly
|
| 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 \ "; }
| mmh0000 wrote:
| 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!
| archiewood wrote:
| Thanks - I do honestly think the keyframes are a bit of a
| nightmare, but they also kind of make the site
| corywatilo wrote:
| Alternate title: "How to scare an engineer in three words"
| xyst wrote:
| 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,
| egypturnash wrote:
| 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)
| kennedy wrote:
| so clean
| tithos wrote:
| You can add a bg to the body and and style to the HTML
| yerich wrote:
| Using pure CSS to make a 3D "game engine":
| https://keithclark.co.uk/labs/css-fps/
| archiewood wrote:
| This is by far the most impressive link in the comments.
| chris_wot wrote:
| Might be fun to replace the div tags with a custom tag.
|
| https://html.spec.whatwg.org/multipage/custom-elements.html
| vlw wrote:
| It's pure CSS so a custom tag will not add any styling a <div>
| couldn't
| dheera wrote:
| CSS is Turing complete, so if you want to make anything you could
| superkuh wrote:
| 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
| userbinator wrote:
| I knew it would be a demonstration of the CSS "generated content"
| feature.
| safety1st wrote:
| 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.
| cyberax wrote:
| First single-page applications. Now single <div> applications.
|
| What next? Single letter applications?
| calebpeterson wrote:
| Single Pixel Applications.
|
| Conveniently abbreviates to SPA.
| tiborsaas wrote:
| 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.
| johnisgood wrote:
| 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.
| jraph wrote:
| 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.
| Alifatisk wrote:
| "This website contains one div only"
|
| No, the link tag is there.
| amelius wrote:
| Waiting for a compiler backend that targets CSS.
| phirschybar wrote:
| I love this. but, why?
___________________________________________________________________
(page generated 2024-03-23 23:02 UTC)