css文件大小有限制吗？

Posted 2023-03-06

【中文标题】css文件大小有限制吗？

【英文标题】：is there any limit on css file size?

【发布时间】：2011-03-13 19:37:01

【问题描述】：

我正在使用 ASP.NET MVC 开发网站。 CSS 文件已经增长到 88KB 并且有 5,000 多行。我最近注意到浏览器中没有最后添加的样式。 CSS文件或行数是否有大小限制？

编辑： 抱歉，我忘了提到这个问题在 Windows 7 中的 FireFox 和 IE8 中都发生了。

【问题讨论】：

您确定这是浏览器问题吗？尝试下载您的 CSS 文件，例如用wget 看看是否完整。如果没有，问题可能出在服务器上。链接：gnuwin32.sourceforge.net/packages/wget.htm

我敢打赌你的样式表不是很层叠

我终于找到了问题并修复了它。感谢所有的帮助和支持。

【参考方案1】：

不，没有限制。可能文件正在被缓存，这就是您没有看到修改的原因。尝试清除浏览器缓存或 Ctrl+F5。

【讨论】：

即使按照你说的刷新了，也加载不好。这发生在我们的 Windows 7 中。

Unicron 发布的 IE（包括 IE 8）对 CSS 有几个限制（尽管文件大小不是其中之一），在这种情况下，每个文件的 4096 条规则限制可能是问题的原因。 blogs.telerik.com/blogs/posts/10-05-03/…

@Ju9OR 假设 css 没有被缩小，并且遵循正常的缩进和行距，5000 行，即使它们是最小的规则，你可以写大约 1600 条规则。还是我弄错了？

这个答案是错误的。有几个限制：每个样式表最多 4095 个选择器。可以将 31 个样式表链接到一个文件中。 IE 将读取的最大 kb 大小为 288kb。之后的任何内容都不会被读取。

@Dimitrov 我相信这个答案是错误的。我遇到了 IE9 的问题，好像有一半的 CSS 被渲染了。我通过缩小 CSS 解决了大部分问题。就我而言，这证实了旧 IE (IE

【参考方案2】：

在某些浏览器中可能有（我没听说过，但有可能），但 88 KB 对于 CSS 文件来说绝对没问题。

【参考方案3】：

理论上没有限制。

实际上，大多数普通浏览器（FF、Chrome、Opera、Safari）都可以处理您向它们扔的任何东西。然而，一些较旧的和/或移动浏览器（Access NetFront，其中之一 - 与许多手机捆绑在一起）遇到较大页面（大约 100KB 及以上）的问题并引发各种错误。

TL;DR：不，除非你试图支持各种奇怪的浏览器。

【参考方案4】：

Internet Explorer has 据说每个文件有 4096 个 CSS rules 的限制。 addRule 函数有一个限制，似乎也适用于通过样式表应用的规则：Reference

此外，它对您可以在单个文档中嵌入的样式表的数量有限制。我认为是 20。

【讨论】：

虽然在 IE4 中就是这种情况，但它在例如 IE4 中是否仍然相关？ IE8？

@Piskvor 根据这篇博文，至少在 IE 7 中似乎是这样：joshua.perina.com/africa/gambia/fajara/post/… 还有有趣的 cmets。但是，找不到任何官方信息。

提出了一个问题，让我们看看有没有知识渊博的人认为它足够有趣来回答：***.com/questions/3211991/…

单个页面中可以链接到的样式表的数量限制为 31（尽管 MSDN 在这里说是 30：support.microsoft.com/kb/262161）此限制也适用于内联样式。

@Piskvor Seems to still be the case in IE9

【参考方案5】：

浏览器可以处理的内容当然是有限制的，但肯定远远超过 88 KB 或 5000 行。有根据的猜测可能是 1 兆字节或 65535 行……您很可能在达到限制之前很久就遇到性能问题。

您看不到更改的原因可能是缓存。您可以使用 Ctrl+F5 在您自己的浏览器中清除页面的缓存（如 Darin 所述。）

我们在发布新版本的 CSS 文件时重命名它，以确保所有访问者都获得最新版本。

【参考方案6】：

大多数普通浏览器没有限制（正如大多数答案中所指出的那样）。另一个非常重要的考虑因素。如果您压缩响应，在 Apache 中我会使用 gzip 或 deflate，文件大小会显着减小。由于 CSS 非常重复，例如，在您的 5000 行中，您使用单词“color”800 次，压缩只会将单词“color”的一个实例发送到浏览器，其中 799 次引用压缩字典中的单词.因此，您的文件在磁盘上可能是 88K，但在网络上可能是 9K。

FireFoxes Firebug 等工具可用于查看压缩文件的大小。我确信 IE 有一个 http 标头查看工具。

所以为了说明我的意思，88K 是磁盘上的文件大小，而如果使用压缩，则需要在响应中考虑文件大小。

【参考方案7】：

如果您没有看到反映在文件底部的添加内容，请查看您是否可以发现它中断的地方并查找愚蠢的错误和错误。 CSS 会默默地失败，但在失败之前仍然会很高兴地工作。

这可能是您担心的原因。

【参考方案8】：

我认为，如果您对 css 文件的大小有疑问，那么是时候重新考虑您的样式策略了。 CSS 中的 C 代表级联。当 CSS 文件变得太大时，通常是因为样式没有在适当的地方被重用，并且由于对级联行为的使用不当。

我不是随便说的。我曾在一些大型、复杂的零售网站上工作过，目前正在处理非常复杂的金融交易应用程序。每当我访问拥有数百种样式的网站时，我们通过降低 css 复杂性在设计、降低复杂性和可维护性方面取得了很大的改进。

一个起点是在 css reset 上进行 Google 搜索。有多种不同的实现，但它们通常遵循覆盖每个浏览器的布局差异并删除任意边框、边距和填充等的主题。如果你愿意的话，从一个干净的石板开始。然后你可以继续从那里建立你的样式，小心利用级联和css链接

链式是指在一个元素上拥有多个类。例如：

<div class="box right small"></div>  

box 可能有一些通用样式，您可能希望将其应用于许多块元素，例如 div、h1...h6、p、ul、li、table、blockquote、pre、form。 small 是不言自明的 right 可能只是向右对齐，但右侧填充为 4px。任何。关键是每个元素可以有多个类，并从可重用的构建块构建样式 - 单个样式设置的分组。否则称为类。

在一个非常简单的层面上，寻找组合样式的机会：

所以：

h1 font-family: tahoma, color:#333333; font-size:1.4em;  
h2 font-family: tahoma, color:#333333; font-size:1.2em;  
h3 font-family: tahoma, color:#333333; font-size:1.0em;  

变成

h1, h2, h3 font-family: tahoma, color: #333  
h1 font-size:1.4em;  
h2 font-size:1.2em;  
h3 font-size:1.0em;  

只是，稍微小一点，但做这种事情很多次，你可以有所作为。

另外，Validate your css。这将帮助您发现代码中的错误。

【讨论】：

我发现我错过了图片网址的结尾单引号。我感谢大家的帮助。我会尝试让 CSS 真正层叠。

我不明白为什么这是公认的答案。问题是，“CSS 文件或文件数量是否有大小限制？”这个答案是“重新考虑你的策略”。非追随者。

我同意@WillLanni，这不能回答问题。

@Mahn 我不在乎。到目前为止，已有 13 人发现它很有用。我在这里的目标是回答某人的问题，同时也防止人们做一些愚蠢的事情。 C代表级联。它使 CSS 变得强大。这意味着您不必达到任何人都不应该意识到或关心的理论极限。

我刚刚在 SO 'answer' FAQ 上刷新了自己，它确实声明“不要那样做”的答案是可行的。 @mahn Daniel 写的内容实际上是可以接受的，即使它不能完全回答最初的问题（例如处理 IE8）。我将在这里正式编辑我的评论。 ***.com/help/how-to-answer

【参考方案9】：

CSS validator 对您的 CSS 规则有何看法？

在样式表的开头剪切并粘贴最后一个“无效”规则：其中一些现在有效吗？

使用 PSPad、Notepad++、Scite:" ; /* */ 等优秀的文本编辑器可以看到明显的拼写错误。它们的范围非常有限，例如;，或者很容易被视为未关闭的评论。我遇到的不太明显的是没有关闭括号：

background: green url(img/dummy_gradient.png left top no-repeat;

没有在我的 CSS 规则下面 50 行中的下一个 ) 之前工作！

【参考方案10】：

您是否验证了您的 CSS？一些浏览器会在语法错误（或某些语法错误）之前包含样式，然后有效地为您截断文件，从而导致这种行为。

我也会投票支持重构你的 CSS，你可能可以少用一点。 . .

【参考方案11】：

你的问题是：

CSS 文件或行数是否有大小限制？

对于 IE9 及更低版本，答案是是，具体取决于您所说的“线条”和“大小限制”。

大小：IE9 及更低版本将读取的最大样式表大小为 288kb。该标记之后的任何样式都不会被读取。 Read this article by Joshua Perina for a little more info on this。 据我所知，样式表中的行数没有上限。选择器的数量有一个最大值。 IE9 和更低版本在每个样式表有 4095 个选择器时停止读取（甚至可能不加载文件，该信息似乎悬而未决）。 （请参阅下面的链接文章） 如果“行”是指每个文件可以添加多少行 @import 链接样式表，则最多可以导入 31 个样式表。每个样式表最多可以有 31 个 @imported 样式表。 （请参阅下面的链接文章） @import 嵌套最多支持 4 层深度。

This article on MSDN talks a little more about the max selector and linked style sheets, and how they came to those numbers when developing IE.

【讨论】：

关于 #2，rules 与 selectors 的数量之间有很好的区别。这可以通过简单的JSFiddle experiments 进行验证。关于#1，我还不相信这个文件大小限制。在您提供的 Joshua 的文章中，文件大小可能是一个红鲱鱼 - 选择器的数量仍然可能是他的问题。最后，为了完整起见，可能值得添加#4，提到（正如另一篇文章指出的那样），@import 嵌套似乎有 4 层深度的限制。

对于 #4，您的意思是 4 级深右（如 MSDN 文章声明的那样）？

啊。我编辑错了。是的。感谢您的关注，是的，我引用了这篇文章。