这是一个真正的裸体、野蛮的 HTML 昆汀。

这是一个来自 secretGeek.net 的有趣页面。您通常不会将“有趣”与野蛮的极简主义联系在一起，但让它在这个页面上起作用的 CSS 技巧绝对是如此。

HTML 实际上以标签形式显示在页面上。因此，从某种意义上说，HTML 既是页面标记，又是内容。设计非常简陋（或“裸露”），以至于代码泄露了！非常酷。

页面解释了这个技巧，但我会在这里重新解释一下。

所有内容都是通过 * { display:block; } 成为块级元素。
…除了锚点、代码、强调和粗体，它们仍然通过 a,code,em,strong {display:inline} 保持内联。
使用 ::before 和 ::after 将 HTML 标签显示为内容（例如 p::before { content: '<p>'}）。

页面以从 Josh Li 的 “几乎所有地方看起来都很棒的 58 字节 CSS” 中摘录的一段不错的代码片段结束。

html {
  max-width: 70ch;
  padding: 2ch;
  margin: auto;
  color: #333;
  font-size: 1.2em;
}

直接链接 →

secretGeek

# 2020 年 11 月 4 日

感谢 Css-Tricks，我很荣幸能被您推荐。

请注意，您的解释中存在一个明显的错误：在 “{ display:block }” 之前缺少一个星号。

…这非常重要，因为它正是主要的 CSS 技巧！

Geoff Graham

评论永久链接# 2020 年 11 月 4 日

哦，是的！感谢指出这一点。:)

Denai

# 2020 年 11 月 4 日

我在他的网站上看到了 959 B 的 CSS。

Geoff Graham

评论永久链接# 2020 年 11 月 5 日

您期望更多还是更少？这篇文章中的技术都是关于使用 CSS 来获得昆汀效果。

Cinnfhaelidh

# 2020 年 11 月 5 日

这很酷！

我未能愉快地滚动过去那 28 行“令人反感的重复行”，决定看看是否可以用更少的行来完成。

*::before {content:'<'var(--name)'>'}
*::after  {content:'</'var(--name)'>'}
* {--name:initial}
html {--name:'html'}
head {--name:'head'}
title {--name:'title'}
body {--name:'body'}
h1 {--name:'h1'}
h2 {--name:'h2'}
p {--name:'p'}
pre {--name:'pre'}
code {--name:'code'}
a {--name:'a'}
aside {--name:'aside'}
blockquote {--name:'blockquote'}
em {--name:'em'}
strong {--name:'strong'}

对 17 行感到非常满意。

此评论线程已关闭。如果您有重要的信息要分享，请联系我们。