可编辑样式块

我们知道不同的 HTML 元素执行不同的功能。当我们能看到它们时，这一点很明显。但有些 HTML 元素在幕后运行，有时我们只是不认为它们与旨在可视化的元素有关。但是，让我们进行一个小旅行，将一些默认情况下不可视化的元素变得可视化，看看它会变得多么奇怪（也许还有用！）。

当你看到一些类似于下面的 HTML 代码时

<p>I'm going to display this text.</p>

这非常直观。就像，浏览器将显示该段落元素的文本。

但该段落存在于一个更大的 HTML 文档中，例如

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
</head>
<body>
  <p>I'm going to display this text.</p>
</body>
</html>

为什么“我的网站”不像段落那样显示？<title> 和 <p> 之间有什么区别？嗯，这就是任何代码的本质。不同的事物执行不同的功能。但在这种情况下，我们可以很容易地追踪为什么它没有显示。

如果我们在浏览器中打开此 HTML 文档并检查该 <title> 元素，它将向我们展示用户代理样式表将该元素设置为 display: none; 嗯，这很有道理！这正是我们在想要完全隐藏网站上的东西时使用的。

更重要的是，<title> 元素的父元素 <head> 也是 display: none;。

这就是它变得有趣的地方。

用户代理样式非常容易覆盖！来自我们 CSS 的任何值都将覆盖它。所以让我们试试这个

<style>
  head, title {
    display: block;
  }
</style>

哈哈，它就在那里！就像一个段落

我们对它的控制与其他任何元素一样多，这意味着我们可以对其应用完美的样式

这可能变得更加奇怪……看到那个也位于 <head> 中的 <style> 块，我们无法看到它，原因与我们无法看到 <title> 的原因相同，因为它也是 display: none;。我们也可以更改它以使其可见。

趁我们还在做这件事，我们可以让它看起来像我们在代码编辑器中的样子，通过让它尊重空白并使用等宽字体

head, title, style {
  display: block;
}
style {
  font-family: monospace;
  white-space: pre;
}

哈哈！这到底是怎么回事！

现在我们可以更进一步，变得更加奇怪。那个样式块？它可以变成可编辑的，因为由于 contenteditable 属性，这是任何 HTML 元素都可以做的事情。

<style contenteditable>
  ...
</style>

现在，那个可见的 <style> 块可以像 <textarea> 一样进行编辑，并且 CSS 会立即应用到文档。

绝对是 HTML 和 CSS 能够实现的最奇怪的事情之一。

你可能称之为 CSS Quine（“一个自引用程序，无需任何外部访问，就可以输出自己的源代码。”）。Alex Sexton 在 2013 年发布了一个示例，并将 Anne van Kesteren 和 Mathias Bynens 归功于先前的艺术。我曾看到 Lea Verou 在会议演讲中使用它进行实时编码！

© 2024 . All rights reserved.