diff options
| -rw-r--r-- | content/posts/weekly/50.md | 39 |
1 files changed, 39 insertions, 0 deletions
diff --git a/content/posts/weekly/50.md b/content/posts/weekly/50.md index 51369454..42bfaba0 100644 --- a/content/posts/weekly/50.md +++ b/content/posts/weekly/50.md @@ -37,5 +37,44 @@ endnotes: 由于模型只有在输出之后才有可能意识到海马 Emoji 不存在，所以几乎所有的模型在一开始都会非常肯定地表示海马 Emoji 存在。作者猜测这是模型的强化学习（reinforcement learning）导致的。 +### 得体的网站所需的最少 CSS + +> [!note] 📜 +> [The least amount of CSS for a decent looking site](https://thecascade.dev/article/least-amount-of-css/) + +作者考虑了为了保证网站可读性和最低美观程度所需要的最少的修改，只要网页大部分都是纯 HTML，就不需要考虑响应式问题。最终的结果是这样： + +```css +html { + color-scheme: light dark; +} + +body { + font-family: system-ui; + font-size: 1.25rem; + line-height: 1.5; +} + +img, +svg, +video { + max-width: 100%; + display: block; +} + +main { + max-width: min(70ch, 100% - 4rem); + margin-inline: auto; +} +``` + +其中，`html` 选择器下的 `color-scheme` 用于使用浏览器自带的夜间模式，这里指定的是网站可以渲染的色彩模式（浅色和深色）。如果这个属性包含 `dark`，那么在用户的系统模式为深色时，网站就会自动被渲染为黑底白字，不需要额外编写深色模式代码。 + +除此之外，作者还解决了必要的字体排印（行距、字体大小等）、图片移除、行宽等问题，解决方案都足够优雅。 + +#### 我的观点 + +其实我觉得图片溢出的问题不应该由开发者编写额外的 CSS 来解决，这个东西应该由浏览器默认样式或者 HTML 的渲染机制自动解决。我不清楚这是历史遗留问题，还是刻意或者必要的设计。 + ## ⁂ · 星群 |