在没有 HTML 的情况下使用 CSS | CSS-Tricks

几天前，Chris 在推特上写道

如果我们可以堆叠伪元素（例如 ::after::after），我们可以构建一个没有 HTML（除了 .）的完整网站。很可能我们不能这样做。

针对这一点，我创建了这个快速演示（在 **Firefox** 或 **Opera** 中查看），说明从技术上讲，你根本不需要任何 HTML 就可以使用 CSS。

由于这个演示显然在推特用户中引起了困惑，我决定写一篇文章来解释它。基本上，这个神奇的演示只是结合了两个大多数人似乎不知道的巧妙小技巧。

一些 HTML 元素是隐含的

在 HTML 中，不需要打开和关闭 <html>、<head> 和 <body> 标签。以下文档是完全有效的并且符合标准

<!DOCTYPE html>
<title>Example</title>

为了简洁起见，这个代码示例使用了 HTML5 DOCTYPE，但不要让它让你困惑 - 如果你切换到 HTML 4.01 DOCTYPE，该文档仍然会验证。显然，XHTML 有一个更严格的语法，不允许省略可选的打开和/或关闭标签。但现在已经是 2011 年了，谁还在使用 XHTML 呢？

当浏览器呈现我们的示例文档时，它会注意到、和元素在源代码中丢失了，并且 - 等一下 - 自动生成它们。你可以通过打开演示页面并使用 Firebug、Web Inspector 或 Opera Dragonfly 检查生成的源代码来确认这一点。

由于这些元素是隐含的，因此它们也可以通过 CSS 进行样式化，无论它们是否出现在源代码中。考虑以下示例

<!DOCTYPE html>
<title>Example</title>
<style>
  html {
    background: red;
  }
  body {
    background: blue;
    margin: 0 auto;
    width: 30em;
  }
</style>

即使 HTML 源代码中没有提到 <html> 和 <body> 元素，我们仍然可以对其进行样式化，因为浏览器会自动生成它们。

基本上，这是我使用的第一个技巧；我只是更进一步。我没有费心指定 DOCTYPE，更不用说 <title> 了，并且根本没有使用任何 HTML。 **永远不要在真正的网站上这样做。** 由于缺少 DOCTYPE，文档将在怪癖模式而不是标准模式下呈现。不用说，该文档也不会验证。

即使使用完全为空的 HTML 文档，浏览器仍然会自动生成隐含的 HTML 元素。

有趣的旁注：也可以该链接： HTTP 标头。

RFC 5988 定义了 Link HTTP 标头，它允许你通过 HTTP 标头发送 <link> 元素，而不是将它们包含在 HTML 中。举个例子，你可以使用以下 HTTP 标头提供一个文档

Link: <some-document.html>;rel=prefetch

…这将与在 HTML 中放置以下内容具有相同的效果

<link href="some-document.html" rel="prefetch">

类似地，RFC 5988 使得使用 HTTP 标头以外的其他方式在 HTML 文档中包含样式表成为可能

Link: <magic.css>;rel=stylesheet

相当于…

<link href="magic.css" rel="stylesheet">

用法

因此，如果你想在家玩这个，你可以将你的演示页面设置为 PHP，并在页面顶部设置标题

<?php header('Link: <demo.css>;rel=stylesheet'); ?>

在这个演示中，内容是使用 CSS 中的伪元素插入到页面中的

html { 
   background: #666; 
   padding: 1em; 
}
body { 
   border: 5px dashed #eee; 
   color: #fff; 
   font: 3em/1.5 sans-serif;
   padding: 1em; 
   width: 30em; 
   margin: 0 auto; 
}
body::after { 
   content: 'O HAI! Have a look at my source code :)'; /* This needs to be on the ::after (and not just on `body`) for it to work in Firefox 3.6.x. */ 
}

好吧，这就是理论。在实践中，并没有很多浏览器实现 Link 标头。在撰写本文时，只有 Opera 和 Firefox 支持这个小宝石。

如果你有兴趣查看此功能的浏览器支持随着时间的推移如何改进，你可以订阅有关 WebKit （Chromium 对 CSS 和一般变体有单独的错误票证）和 Internet Explorer 的错误报告。

免责声明

如前所述，这些技术是有趣的技巧，了解它们的存在绝对是件好事。但是，在实践中使用它们不是一个好主意。没有 HTML 的“黑客”各种邪恶，并且没有一个 Web 开发人员会认真考虑在真正的网站上使用它。

Link HTTP 标头更有趣。它无法真正使用的原因仅仅是缺少浏览器支持。也许有一天…

感谢 Anne van Kesteren 在 2005 年教我了解 Link 标头 :)

Chris Johnson

# 2010 年 12 月 14 日

我将用这种方式构建我的整个网站！

jk.

lol 这篇文章很有趣！

Border

评论永久链接# 2010 年 12 月 15 日

为什么不呢？
如果这种创建网站的方式支持所有定位和格式化功能，我会考虑用它制作一些小型网站。

问题是，你只能设置 html、head 和 body 的样式。没有其他元素会自动生成。

St0iK

# 2010 年 12 月 14 日

这真是太棒了！

非常感谢分享

Lea Verou

# 2010 年 12 月 14 日

我们可以堆叠伪元素，但目前还没有任何浏览器支持它 :( http://www.w3.org/TR/css3-content/#inserting0

Mathias Bynens

评论永久链接# 2010 年 12 月 14 日

你说得对，我有点忽略了 Chris 最初的问题。幸运的是，像你这样的其他人愿意回答那个可怜的人 ;)
Lea Verou

评论永久链接# 2010 年 12 月 14 日

啊，Necolas 抢先一步了 :)
Nicolas Gallagher

评论永久链接# 2010 年 12 月 14 日

从技术上讲，我们不能这样做，但有一个提案允许这样做

Frederik

# 2010 年 12 月 14 日

不错！虽然我不会使用它，但这仍然很有趣！

Andrea

# 2010 年 12 月 14 日

你真是个天才 ;) 太棒了。

Tomasz Kowalczyk

# 2010 年 12 月 14 日

太棒了！如果我们可以堆叠这些伪类，我会第一个创建 PHP 库，它将允许我们创建这样的结构！ ;]

immysl

# 2010 年 12 月 14 日

必须学习一些新东西，例如，可以对 title 标签进行样式化。在尝试其他部分之前，我将先尝试一下。 ;)

Daneil

# 2010 年 12 月 14 日

我认为这是 before/after 的一个不错的用例

http://matthamm.com/box-shadow-curl.html

干杯。

Mathias Bynens

评论永久链接# 2010 年 12 月 14 日

以下是相同效果的略微不同的版本： http://jsfiddle.net/simurai/FrspS/

Martin

# 2010 年 12 月 14 日

不错，Mathias！

我认为，如果所有浏览器都实现了这一点，在标头中链接样式将很有用。
但是我发现，FFX 在 HTML 下载完成后才开始下载 css。这对性能不利。

Mathias Bynens

评论永久链接# 2010 年 12 月 14 日

是的，如果 Link 标头在浏览器中得到更好的支持，那就太好了。这将允许做很多很酷的事情，例如，在非 HTML 文档（比如图像或纯文本文件）上进行自动发现 - 想象一下！

有趣的是，Firefox 只有在 HTML 下载完成后才开始下载 CSS。你愿意提交一个 bug 吗？

请注意，Firefox 对 Link 的实现并不完整；根据我的测试，它似乎只适用于 rel=prefetch 和 rel=stylesheet。像 rel=alternate（用于提要）这样的东西还没有触发提要自动发现：https://bugzilla.mozilla.org/show_bug.cgi?id=498117 （这在 Opera 中运行良好。）

Greg Babula

# 2010 年 12 月 14 日

很酷，很有趣

Joshua Bryant

# 2010 年 12 月 14 日

LINK 标头的潜在应用是否可以实质上链接条件样式表？在其中，你可以指定仅针对 FF 和 Opera 的样式。

也许不像针对 IE 的条件样式表那样有用，但仍然是一个有趣的概念。

Mathias Bynens

评论永久链接# 2010 年 12 月 14 日

请永远不要这样做。

当然，您提议的方案在*今天*是可行的，但是一旦 WebKit 和/或 IE 决定实现 Link 头部，他们最终也会获取您仅供 Firefox/Opera 使用的样式表。所以，这可不是未来证明的代码 :)

另外，您是否曾经觉得需要一个专门针对 Firefox/Opera 的样式表？

Erkan Yilmaz

# 2010 年 12 月 14 日

这是否意味着 HTML 的终结？

Steven Schrab

评论永久链接# 2010 年 12 月 14 日

HTML0

Girish

# 2010 年 12 月 14 日

什么？

Steven Schrab

# 2010 年 12 月 14 日

“但是现在已经快 2011 年了，还有谁在用 XHTML 呢？”

哈哈！我喜欢！

traq

评论永久链接# 2010 年 12 月 14 日

如果可以就好了…

Ryan Litts

# 2010 年 12 月 14 日

这很酷。你能把它作为 Flash 对象的回退方案来使用吗？这些 Flash 对象无法在 iPad 等代理中加载。

Floris

评论永久链接# 2010 年 12 月 14 日

哈哈 Flash。

cancel bubble

# 2010 年 12 月 14 日

很酷的技巧，但是生成内容的一个缺点是，很难调试它可能遇到的或造成的错误，因为它不是 DOM 的一部分。

Chris Coyier

评论永久链接# 2010 年 12 月 17 日

这只是调试工具变得更好的问题。Web Inspector 现在可以显示和修改伪元素。

Mihovil

# 2010 年 12 月 14 日

哈哈，当我第一次看到你的文章标题时，我心想：“什么？！怎么做？！不可能？！”—有趣而有趣的文章！:D

P.S. 我喜欢 CSS-Tricks 的新设计，它让我很想留在这里，阅读我看到的一切。:O

Youssef

# 2010 年 12 月 14 日

在 web 的幕后发生了很多事情，而这只是其中之一。
好技巧。

FinkAboutIt

# 2010 年 12 月 14 日

令人印象深刻。简单地说，令人印象深刻！

Jason Gross

# 2010 年 12 月 14 日

虽然这篇文章的目的是以某种可能的方式来理解，而不是建议一种设计方法，但它对于试验 CSS 的控制能力非常有帮助。结果可能会很令人惊讶。

我实际上遇到过这样的情况，一个页面需要新的样式或设计，但我无法访问 HTML，因为它是由绑定到全局服务器并为多个站点提供动力的 XSL 和 XML 动态生成的。由于这些限制，使用 CSS 对元素进行高级控制和选择实际上成为一个非常有用的工具。

Cat Lady

# 2010 年 12 月 14 日

哈哈！有趣…谢谢！这让我很想玩…

DoDiyez

# 2010 年 12 月 14 日

太棒了…

Rob

# 2010 年 12 月 14 日

现在是 2011 年。每个人都*应该*使用 XHTML。

Ramesh Vishwakarma

# 2010 年 12 月 14 日

如果这种技术对其他浏览器没有用，那怎么办？

marines

# 2010 年 12 月 14 日

正如鲍勃所说，现在每个人都应该使用 XHTML。我不知道你从哪里得到不推荐 XHTML 的想法。亲爱的作者，你还在用 HTML 4.01 写代码吗？

toufik

评论永久链接# 2010 年 12 月 14 日

这是 HTML5 的黄金时代。我们应该拥抱它。

顺便说一句，这是 CSS 的不当使用吗？
就像你在这篇文章中所说的一样。

谢谢。
seutje

评论永久链接# 2010 年 12 月 15 日

XHTML 剥夺了你的自由！
Roy Tomeij

评论永久链接# 2010 年 12 月 15 日

你知道在 XHTML 之后，我们的世界里出现了一些新事物，对吧？
marines

评论永久链接# 2010 年 12 月 15 日

@Toufik，HTML5 仍然处于草案阶段，在它没有得到浏览器的支持之前，不值得使用。目前，HTML5 只是一句响亮的口号。

@Seutje，如果你所说的自由是指标签汤，我很高兴 XHTML 剥夺了它。
seutje

评论永久链接# 2010 年 12 月 15 日

@marines: 我可以把这看作是一个严肃的论据，但你的个人页面把我的 IE 放到了 quirks 模式，让我认为你并不真正重视 web 开发。
尝试正确地关闭你的标签，引用你的属性，以及其他所有这类东西，你知道的…就像 XHTML 所要求的那样。
再说一次，这种混乱也不符合 HTML5。
别担心，我不会挑剔你尾随逗号的 js 错误 ♥
marines

评论永久链接# 2010 年 12 月 15 日

这是几年前写的，实际上不是我的代码，但你说得对。;)
Brian Bickerton

评论永久链接# 2010 年 12 月 15 日

我也有同样的想法。
是的，HTML5 很棒。我对此感到兴奋。我们应该尝试并练习它。我们不应该依赖于一个还没有在所有浏览器中完全实现的草案。让旧版 IE 不出现问题已经够难的了，至少我们知道它的限制。对于 HTML5，你的用户可能支持什么，这是一个未知数。

XHTML 是对标准的严格遵守。这是一件好事。
Jason Gross

评论永久链接# 2010 年 12 月 15 日

HTML5 处于草案阶段，因为 web 设计师需要更好的选择，因为浏览器需要跟上我们已经使用的方法。我们需要在适当的领域使用 HTML5（即不会破坏功能），因为使用我们手头可用的最新和最强大的工具，才能推动浏览器的开发和新规范的更快发展。如果我们都等到它发布并得到所有浏览器的支持，那么我们就会减缓 web 的改进，并阻碍我们自己。
traq

评论永久链接# 2010 年 12 月 15 日

对于所有赞美 XHTML 的神奇之处的人：你们中有多少人用正确的 mime 类型提供页面？

我相信你们中有些人意识到了这一点，但我也相信你们中许多人没有意识到：XHTML 不仅仅是使用小写字母、自闭合标签和冗长的 doctype 的问题。web 上的大多数“xhtml”格式不佳或无效，实际上被浏览器渲染为过度错误修正的 html。
seutje

评论永久链接# 2010 年 12 月 17 日

@brian: 我希望你没有使用 CSS2.1，因为它在任何单个浏览器中都没有完全实现，以及其他所有那些内容。

另外，你应该阅读一下http://hixie.ch/advocacy/xhtml
Mathias Bynens

评论永久链接# 2010 年 12 月 17 日

XHTML 是对标准的严格遵守。这是一件好事。

这怎么能成为支持 XHTML 的论据呢？你也可以对 HTML 4.01 说同样的话。
Yuhong Bao

评论永久链接# 2010 年 12 月 27 日

令人沮丧的是，如果不是因为 IE，我们现在本可以将真正的 XHTML 作为 application/xhtml+xml 提供。我在 Reddit 上有一篇关于它的文章。

IE 如何损害 XHTML 的采用
作者 u/yuhong 发布在 web_design

vara

# 2010 年 12 月 15 日

真的很棒！

Webstandard-Blog

# 2010 年 12 月 15 日

不错，但它与语义结构化内容无关。

Chris Coyier

评论永久链接# 2010 年 12 月 17 日

什么？

Serprise

# 2010 年 12 月 15 日

哈哈，真是个好主意。=)

Jose Gonzalez

# 2010 年 12 月 15 日

如果这是我们在实验，想象一下 W3C 的大师们想出了什么。

Alan

# 2010 年 12 月 15 日

出色的文章，配有绝佳的示例。

Crimlo

# 2010 年 12 月 15 日

我很久以前就做过这件事，可惜我没有博客

FlowerMountain

# 2010 年 12 月 16 日

太酷了！

还有什么我们可以为了好玩而删除的？

traq

评论永久链接# 2010 年 12 月 16 日

你可以通过将所有内容提供为 PDF 来完全消除对样式表的需要，以及浏览器生成的标记。

oguzagel

# 2010 年 12 月 16 日

不错！

真的很棒！

cMURKonAfool

# 2010 年 12 月 16 日

这太棒了。如果有人问我，我可能会说这是可能的，但从来不知道你可以通过 CSS 发布内容。每天你都会学到关于 CSS 的新东西 ;-)

Hiren Khambhayta

# 2010 年 12 月 16 日

不错的技巧。很有信息量。

Mike

# 2010 年 12 月 16 日

非常有趣的文章 - 我可能不会像这样编码任何客户网站，但我可能会在我的一个测试网站上玩一玩。感谢你的见解。

Gurvinder

# 2010 年 12 月 17 日

嗨，Chris

我喜欢你的作品和文章，但这个话题对任何人都没有用。你不应该把不能用的东西放在新手面前，因为他们可能会被像这样的文章搞糊涂。

我告诉你这一点是因为我推荐的一名新员工去你的网站学习新技巧，结果他被这篇文章搞糊涂了。

这是我们的社区，我们应该负起全部责任，引导程序员走正确的方向，包括新手。

Chris Coyier

评论永久链接# 2010 年 12 月 17 日

Mathias 在文章中包含了一个名为“免责声明”的完整部分。请阅读它。
Gurvinder

评论永久链接# 2010 年 12 月 17 日

Chris

坦诚地说，一个人读过多少次免责声明。

无论如何，我再次重申，我喜欢你的作品，但仍然觉得这篇文章可能会误导新加入的人。
traq

评论永久链接# 2010 年 12 月 19 日

坦诚地说，有人不读免责声明，有多少次是作者的错？

如果你要让员工来这里学习，那很好。但是，如果你担心这种事情，也许你应该为他们选择特定的文章。或者得到一个 *真正的* 培训计划。

sarmenhb

# 2010 年 12 月 17 日

哈哈，这很有趣。我没想到会看到这个。如果它真的能用，那将是棒极了。但如果它真的能用，谷歌会如何在网站上索引关键词？哈哈，如果它真的能用，可能对 SEO 不好。

elvin

# 2010 年 12 月 17 日

这很有趣！不过 Chris 是对的：不要在真实网站上使用它……更不用说 SEO 和其他东西了 :)

sarmenhb

# 2010 年 12 月 17 日

Gurvinder，如果 Chris 从未发布过这篇文章，我就永远不会知道它存在。也许有人可以把这个想法变成一个可行的想法。有 HTML、CSS 和 JavaScript 展示对其他人学习如何制作东西很有帮助。但对于想要 100% 安全的网站，如果字段数据实际上是隐藏的，想象一下，如果所有 HTML 字段都通过源代码隐藏，可以实现多少安全保障。

Gurvinder

评论永久链接# 2010 年 12 月 17 日

我同意它的安全性方面，并期待实现它，但这也已知的事实是，它尚未在所有浏览器中实现，正如我之前提到的，它 *不会* 帮助年轻的/新程序员。
Mathias Bynens

评论永久链接# 2010 年 12 月 18 日

这种技术怎么能提高安全性？所有内容仍然以未加密的形式通过网络发送。这与安全性无关。

DeepThinker

# 2010 年 12 月 19 日

HTML5 中有哪些方面？

Brainstorm

# 2010 年 12 月 21 日

很棒的文章！用这种方式构建一个完整的网站会很有趣。

Steve

# 2010 年 12 月 22 日

棒极了 - 新技巧真棒！我喜欢它 :-)

Jarod Billingslea

# 2010 年 12 月 22 日

哈哈，唯一的问题是这只能在一页上。

JayB

# 2010 年 12 月 24 日

Chris，你又干了一件很棒的事！
- 期待另一个屏幕录像！

WecodeYoursite

# 2010 年 12 月 27 日

我有点害怕实现它。因为如果谷歌看到这样的网站，它会怎么做？它会排名吗？如果不是，我就不喜欢它……但到目前为止，这是一个真正的冒险……

hoangloi

# 2010 年 12 月 30 日

这真的太棒了！！！！但当谷歌看不到网站内容时，如何找到这个网站？
我认为这将是一场真正的革命

gabriela

# 2011 年 1 月 11 日

不错！感谢分享！

Kev

# 2011 年 1 月 19 日

是否可以使用 :after 伪元素插入类似这样的 HTML

<a href='domain.com' rel="nofollow">这是一个由 CSS 生成的链接</a>

keshav

# 2011 年 1 月 22 日

Jhakkaas！

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