TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Pure CSS Website

245 点作者 archiewood大约 1 年前

30 条评论

archiewood大约 1 年前
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:&#x2F;&#x2F;github.com&#x2F;archiewood&#x2F;pure-css-site">https:&#x2F;&#x2F;github.com&#x2F;archiewood&#x2F;pure-css-site</a>
评论 #39794248 未加载
评论 #39795137 未加载
评论 #39794822 未加载
评论 #39794258 未加载
评论 #39798426 未加载
评论 #39796139 未加载
评论 #39796297 未加载
评论 #39795333 未加载
评论 #39795619 未加载
评论 #39795766 未加载
评论 #39794905 未加载
评论 #39797005 未加载
yu3zhou4大约 1 年前
Nice work! It’s possible to get rid of even that single div - <a href="https:&#x2F;&#x2F;35bytes.maczan.pl&#x2F;" rel="nofollow">https:&#x2F;&#x2F;35bytes.maczan.pl&#x2F;</a>
评论 #39796048 未加载
评论 #39797943 未加载
somishere大约 1 年前
Pure CSS. Invalid HTML.<p>Nice job tho. Now just need to make it in 3D.
评论 #39796011 未加载
评论 #39797153 未加载
egypturnash大约 1 年前
Previous work in this field:<p><a href="https:&#x2F;&#x2F;mathiasbynens.be&#x2F;demo&#x2F;css-without-html" rel="nofollow">https:&#x2F;&#x2F;mathiasbynens.be&#x2F;demo&#x2F;css-without-html</a> - <i>completely</i> empty html, doesn&#x27;t seem to work on Mac Safari any more, does work on Firefox for me. See <a href="https:&#x2F;&#x2F;css-tricks.com&#x2F;using-css-without-html&#x2F;" rel="nofollow">https:&#x2F;&#x2F;css-tricks.com&#x2F;using-css-without-html&#x2F;</a> if you want to know how it works.<p><a href="https:&#x2F;&#x2F;web.archive.org&#x2F;web&#x2F;20160420232319&#x2F;cj-johnson.github.io&#x2F;Single-Tag_Website&#x2F;" rel="nofollow">https:&#x2F;&#x2F;web.archive.org&#x2F;web&#x2F;20160420232319&#x2F;cj-johnson.github...</a> (original copy defunct) - kinda broken now, the source is just a single &lt;link&gt; (if you ignore all the stuff the Wayback Machine adds)
评论 #39796627 未加载
souvlakee大约 1 年前
If you have browser extensions that make additional div, it looks weird: i.imgur.com&#x2F;glCfzkj.png
评论 #39795331 未加载
评论 #39795033 未加载
yerich大约 1 年前
Using pure CSS to make a 3D &quot;game engine&quot;: <a href="https:&#x2F;&#x2F;keithclark.co.uk&#x2F;labs&#x2F;css-fps&#x2F;" rel="nofollow">https:&#x2F;&#x2F;keithclark.co.uk&#x2F;labs&#x2F;css-fps&#x2F;</a>
评论 #39797526 未加载
评论 #39796746 未加载
NiagaraThistle大约 1 年前
Do developers really build basic websites &#x2F; pages WITHOUT pure CSS when it&#x27;s an option?<p>I know there are times when you need to do something CSS can&#x27;t (and shouldn&#x27;t do of course. But I mean when the &#x27;thing&#x27; is design&#x2F;style only, aren&#x27;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.
评论 #39811832 未加载
jraph大约 1 年前
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.
userbinator大约 1 年前
I knew it would be a demonstration of the CSS &quot;generated content&quot; feature.
评论 #39797823 未加载
mmh0000大约 1 年前
That&#x27;s impressive. I expected, &quot;Sure, it works, but the CSS is going to be a nightmare.&quot; Instead, the CSS is pretty, straightforward and easy to understand.<p>I love it!
评论 #39797157 未加载
superkuh大约 1 年前
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: &lt;&#x2F;&#x2F;website.css&gt;; REL=stylesheet</code></pre>
chris_wot大约 1 年前
Might be fun to replace the div tags with a custom tag.<p><a href="https:&#x2F;&#x2F;html.spec.whatwg.org&#x2F;multipage&#x2F;custom-elements.html" rel="nofollow">https:&#x2F;&#x2F;html.spec.whatwg.org&#x2F;multipage&#x2F;custom-elements.html</a>
评论 #39797037 未加载
Pesthuf大约 1 年前
Never knew &quot;content&quot; was animatable. This might come in handy some time.
dheera大约 1 年前
CSS is Turing complete, so if you want to make anything you could
评论 #39808529 未加载
johnisgood大约 1 年前
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.
tiborsaas大约 1 年前
You could have saved that background image and use a CSS gradient ;)<p>edit: nevermind, that&#x27;s a dead URL. But anyways, it&#x27;s an extra http request you don&#x27;t need.
butz大约 1 年前
What&#x27;s the purpose of remote background image? Tracking?
bawolff大约 1 年前
That is pretty cool.<p>I wonder if you could do this with no &lt;div&gt; using just the &lt;link&gt; tag.<p>Or do browsers add an implicit body tag if you don&#x27;t put one that you can style?
amelius大约 1 年前
Waiting for a compiler backend that targets CSS.
cyberax大约 1 年前
First single-page applications. Now single &lt;div&gt; applications.<p>What next? Single letter applications?
评论 #39798959 未加载
Alifatisk大约 1 年前
&quot;This website contains one div only&quot;<p>No, the link tag is there.
tithos大约 1 年前
You can add a bg to the body and and style to the HTML
Julesman大约 1 年前
A self-closing div is not valid HTML.
phirschybar大约 1 年前
I love this. but, why?
kennedy大约 1 年前
so clean
ape4大约 1 年前
Did you see this in the css<p><pre><code> @keyframes typewriter { 00.0% { content: &quot;A&quot; } 00.4% { content: &quot;A &quot; } 00.8% { content: &quot;A W&quot; } 01.2% { content: &quot;A We&quot; } 01.6% { content: &quot;A Web&quot; } 02.0% { content: &quot;A Webs&quot; } 02.4% { content: &quot;A Websi&quot; } 02.8% { content: &quot;A Websit&quot; } 03.2% { content: &quot;A Website&quot; } 13.2% { content: &quot;A Website,&quot; } 13.6% { content: &quot;A Website, &quot; } 14.0% { content: &quot;A Website, i&quot; } 14.4% { content: &quot;A Website, in&quot; } 14.8% { content: &quot;A Website, in &quot; } 15.2% { content: &quot;A Website, in P&quot; } 15.6% { content: &quot;A Website, in Pu&quot; } 16.0% { content: &quot;A Website, in Pur&quot; } 16.4% { content: &quot;A Website, in Pure&quot; } 16.8% { content: &quot;A Website, in Pure &quot; } 17.2% { content: &quot;A Website, in Pure C&quot; } 17.6% { content: &quot;A Website, in Pure CS&quot; } 18.0% { content: &quot;A Website, in Pure CSS&quot; } 22.2% { content: &quot;A Website, in Pure CSS.&quot; } }</code></pre>
评论 #39795880 未加载
评论 #39796884 未加载
评论 #39795946 未加载
评论 #39795976 未加载
lacoolj大约 1 年前
well it&#x27;s not hard to believe given that it doesn&#x27;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?
评论 #39795089 未加载
评论 #39795163 未加载
评论 #39796132 未加载
评论 #39794787 未加载
pimlottc大约 1 年前
And none of the text is selectable :(
评论 #39796090 未加载
评论 #39794861 未加载
评论 #39797769 未加载
评论 #39796361 未加载
评论 #39795481 未加载
xyst大约 1 年前
lighthouse performance scores are perfect. accessibility fails. best practice category is 90+ (very minor issues). PWA is not applicable.<p><a href="https:&#x2F;&#x2F;lighthouse-metrics.com&#x2F;lighthouse&#x2F;checks&#x2F;38f2276c-bc58-4e14-b7b0-9da9f5a3f90b" rel="nofollow">https:&#x2F;&#x2F;lighthouse-metrics.com&#x2F;lighthouse&#x2F;checks&#x2F;38f2276c-bc...</a><p>lol,
评论 #39795972 未加载
corywatilo大约 1 年前
Alternate title: &quot;How to scare an engineer in three words&quot;