在@charset utf-8 之前添加了额外的空间

Question

我有一段代码将 CSS 文件插入到我的网页中：

<style> <?php echo file_get_contents($pos. "css/style-fold.css") ?> </style>

当我运行它时，我在文件中添加了一个额外的空间：

<style>**EXTRASPACEHERE**@charset utf-8;.clear,.clearfix:after.........

现在我无法通过 W3 验证 HTML。

因此，我尝试删除空格：任何删除空格的组合都没有运气。

Answer 1

当然，您确实有一个响亮而清晰的空白区域：

<style> <?php echo file_get_contents($pos. "css/style-fold.css") ?> </style>
       ^

但这可能不是 W3 Validator 所抱怨的。 根据MDN （强调我的）：

@charset CSS at-rule 指定样式表中使用的字符编码。 它必须是样式表中的第一个元素，并且前面不能有任何字符； 由于它不是嵌套语句，因此不能在条件组规则中使用。 如果定义了多个@charset at-rules，则只使用第一个，并且不能在 HTML 元素的样式属性内或在 HTML 页面的字符集相关的<style>元素内使用。

仔细想想，这绝对是有道理的：您不能更改文件中间的文本编码！

您有两种选择：

• 完全删除@charset 。

• 不要将样式表注入 HTML 并链接它们：

   <link rel="stylesheet" type="text/css" href="<?php echo $pos?>css/style-fold.css">

  这样做的另一个好处是不必在每次页面加载时下载整个 CSS 代码。 （只要 HTTP 标头不禁用缓存。）