设计与产品eev.ee编辑精选
旧 CSS,新 CSS
Old CSS, New CSS
2020 — 2024,它一次次回到首页
黑点是上首页(≥ 50 分)的那次投稿,空心点是没冲上去的投稿,点越大分数越高。
导读
这篇长文回顾了 CSS 从 90 年代末到今天的演变史:从 <font> 标签、表格布局、IE 兼容地狱,到 XHTML 严格化,再到 Flexbox 和 Grid 让布局变得真正好用。作者以亲历者视角把 CSS 特性放回它们要解决的历史问题中,解释了为什么 CSS 长成今天这个样子。
为什么经久不衰:它把零散的 CSS 知识放进历史脉络里,让人理解特性背后的设计动机,多年反复登上首页说明这种视角历久弥新。
HN 评论精选
历史语境让 CSS 特性变得可理解,比技巧式学习有效得多
我觉得从这类文章学到的 CSS 知识比从书里学到的多得多,因为它把 CSS 特性放回它们要解决的问题的语境中,历史背景帮助很大。我以前学 CSS 基本上就是一堆零散技巧的堆砌。还有没有更多这样的文章?我能读一整天。
faitswulff查看英文原文
I feel like I learn a lot more about CSS from articles like these as opposed to books because it puts CSS features into context with the problems they were meant to solve. The historical context helps a lot, too. The way that I've tried to learn CSS in the past was essentially a random collection of tricks. Are there any more articles like this? I'd read them all day.
现代 CSS 已好到可以直接替代设计工具
如今的 CSS 已经好到我直接用 CSS 设计网站,然后把成品展示给客户。用 Grid 和 Flex 可以在客户想挪动内容时快速重排,工作流快了很多。前期唯一的工具就是纸笔勾画想法,之后全靠 HTML + CSS。
thdrdt查看英文原文
CSS today is so good that I now design websites in CSS and just present a website to the client. If you use grids and flex you can rearrange content very quick if the customer wants to move it. My workflow is now much faster. Great for the client, great for me. The only design tool I use in the beginning is a pen and peace of paper to get some ideas of where I want to go. But after that it's all HTML + CSS.
XHTML 的严格性在 epub 静态文档场景中反而是优势
XHTML 其实还在一个重要地方活着:epub 电子书格式。我起初也讨厌它——一个小错误就使整个文档失效,命名空间也麻烦。但后来我反而欣赏它:它强制你写正确的 XML,标签没有歧义,文档人类可读且机器易解析,还有 XPath 可用。对 epub 这种一次性编写的静态文档来说,XHTML 其实更合适。
acabal查看英文原文
Wow, that took me back. Small nitpick, XHTML does live on in one important place: epub, which is the most commonly used file type for ebooks. I do a lot of epub work at Standard Ebooks, and at first I hated XHTML for the exact reason the article describes: A single tiny error makes the entire document invalid and it can be hard to spot it and recover. Also, namespaces were (and still are) a massive pain for little to no gain. But over time I've come to really appreciate XHTML, again for that exact same reason. It forces you to write correct XML, and there is no possible ambiguity or multiple ways of representing a tag like there is in HTML5. `<br/>` will always be `<br/>`, not maybe `<br>` or `<br/>` or even `<br></br>`. An XHTML document from someone else will be both human-readable (after pretty-printing) and easily machine parseable. You also get xpath, which is a way of selecting elements akin to CSS but even more powerful. Ultimately XHMTL is better suited to epub's use case, which is static documents that are written once and not dynamically generated by templating languages or libraries. Too bad there was some talk of epub switching to HTML5, though it's unlikely future revisions of epub will ever see wide adoption.
Tailwind 的内联样式风格与早期 HTML 有惊人的历史回响
如果这篇文章最后以某个流行 CSS 框架的一句俏皮话收尾,从早期的 <H1><FONT COLOR=red> 到 Tailwind 的 <h1 class="text-red-500">,那就绕了个完整的圈子。我完全认可 Web 标准的成就,但对很多应用来说'更糟也够用',Tailwind 是通往网页设计早期直白风格的一座桥。
warpech查看英文原文
I wouldn't be surprised if this ended with a smirky one-liner presented in a popular CSS framework, making a full circle from (early HTML): <H1><FONT COLOR=red>...</FONT></H1> to (Tailwind CSS) <h1 class="text-red-500">...</h1> I totally acknowledge the accomplishments that the Web standards and their implementations have made since the early days. On the other hand, while I am no Tailwind proponent, for many applications "worse is good" and Tailwind is a bridge to the straightforward beginnings of the web design.
历次讨论
同类还值得读
贝塞尔曲线入门
A Primer on Bézier Curves
Pomax 编写的贝塞尔曲线在线教程,从基础概念一路讲到曲线求交、投影、曲率等进阶内容,并配有可交互的示例和配套的 bezier.js 库。
设计与产品上首页 7 次 · 2014–2022pomax.github.io编辑精选WebGL 水面模拟
WebGL Water
Evan Wallace 制作的 WebGL Water 演示:在浏览器里实时渲染一片水面,展示折射、反射和焦散等 GPU 图形效果。
设计与产品上首页 6 次 · 2011–2025madebyevan.com设计建议:永远不要使用黑色
Design Tip: Never Use Black
设计随笔提出“永远不要用纯黑”的建议,主张在界面和绘画中改用深灰或带色相的暗色,并借阴影与色彩关系来论证。
设计与产品上首页 5 次 · 2012–2021ianstormtaylor.com用于思考不可想象之物的媒介
Media for Thinking the Unthinkable
Bret Victor 的这个页面围绕《Media for Thinking the Unthinkable》展开,探讨我们用来思考和表达复杂问题的媒介,以及以文字/符号为主的传…
设计与产品上首页 5 次 · 2013–2020worrydream.com编辑精选页面重量很重要
Page Weight Matters
博文讲 YouTube 工程师 Chris Zacharias 的一次页面瘦身实验:团队做了一个更轻量的页面版本,起初从整体平均加载时间看反而更慢;按地理区域分层后才发现,轻量版…
设计与产品上首页 4 次 · 2012–2022blog.chriszacharias.com