CSS文件大小有限制吗？

Question

我正在使用ASP.NET MVC开发网站。CSS文件已经增长到88KB，有超过5,000行。我最近注意到在结尾添加的样式不会出现在浏览器中。CSS文件或行数是否有任何大小限制？ 编辑：抱歉我忘了提到这个问题发生在Windows 7上，无论是FireFox还是IE8都有此问题。

- dotcoder

---

你确定这是浏览器问题吗？尝试使用wget下载你的CSS文件，看看它是否完整。如果不完整，问题可能出在服务器上。链接：http://gnuwin32.sourceforge.net/packages/wget.htm - Piskvor left the building

我打赌你的样式表不太具有层叠性。 - Josh Stodola

我终于找到了问题并解决了它。感谢所有的帮助和支持。 - dotcoder

Answer 1

据说Internet Explorer在每个文件中有4096个CSS规则的限制。对通过样式表应用的规则也有一个addRule函数的限制： 参考文献

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

- Unicron

---

虽然这在IE4中是正确的，但在IE8中仍然适用吗？ - Piskvor left the building

@Piskvor 根据这篇博客文章，至少在IE 7中似乎是这种情况：http://joshua.perina.com/africa/gambia/fajara/post/internet-explorer-css-file-size-limit 还有一些有趣的评论。不过我找不到任何官方的信息。 - Unicron

提出了一个相关编程问题，让我们看看是否有熟悉此方面的人认为它有足够的趣味性来回答：https://dev59.com/aHA75IYBdhLWcg3wlqOh - Piskvor left the building

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

@Piskvor 在IE9中似乎仍然存在这个问题 - Martin Smith

Answer 2

如果你的CSS文件大小存在问题，那么我认为是时候重新考虑你的样式策略了。CSS中的C代表层叠。当CSS文件变得过于庞大时，往往是由于未适当重用样式以及对层叠行为使用不当所致。

我并不是轻易这么说的。我曾在一些大型复杂的零售网站上工作，目前也在处理非常复杂的金融交易应用程序。每当我遇到超过几百个样式的网站时，我们通过减少CSS的复杂性，实现了设计的大幅改进、复杂度的降低和可维护性的提高。

开始优化CSS的一个地方是在Google上搜索"CSS reset"。有多种不同的实现方式，但它们通常都遵循覆盖每个浏览器布局差异和删除任意边框、外边距和内边距等的主题。从一个空白状态开始，如果可以的话，然后您可以继续构建您的样式，注意充分利用级联和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;}  

只是稍微小一点，但是如果你能这样做很多次，你就可以产生影响。

此外，请验证你的css。这将有助于发现代码中的错误。

- Daniel Dyson

---

我不明白为什么这是被接受的答案。问题是：“CSS文件或文件数量是否有大小限制？”而这个回答是“重新思考你的策略。”这是无关紧要的回答。 - Will Lanni

我同意@WillLanni的观点，这并没有回答问题。 - Mahn

@Mahn 我并不在意。到目前为止已经有13个人发现它很有用。我在这里的目标是回答别人的问题，同时防止人们做一些明显愚蠢的事情。C代表层叠。它使CSS变得强大。这意味着你永远不必达到一个理论上的极限，而这个极限甚至没有人应该知道或关心。 - Daniel Dyson

我刚刚重新阅读了SO的“回答”FAQ，它确实指出“不要那样做”的答案是可行的。@mahn，即使丹尼尔的回答并没有完全回答原始问题（例如处理IE8），但它实际上是可以接受的。我会在这里正式撤回我的评论。http://stackoverflow.com/help/how-to-answer - Will Lanni

谢谢@Will。去掉踩也是好的，但不是必须的。 - Daniel Dyson

Answer 3

你的CSS规则在CSS验证器中的检测结果如何？

将样式表中最后的“无效”规则复制并粘贴到开头：现在有些规则是否起作用了？

好的文本编辑器（如PSPad、Notepad++、Scite）可以发现明显的拼写错误，例如" ; /* */等。这些错误的范围相对较小，如分号;或未关闭的注释很容易看出来。我遇到的不太明显的错误是没有关闭括号：

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

直到下面CSS规则中距离这里50行的)才生效！

- FelipeAls

Answer 4

您的问题是：

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

对于IE9及以下版本，答案是有限制的，具体取决于您所说的“行数”和“大小限制”。

1. 大小：IE9及以下版本可以读取的样式表最大尺寸为288kb。超过这个标记的任何样式都不会被读取。 阅读Joshua Perina的这篇文章可了解更多信息。。
2. 我不知道样式表中行数的最大限制，但选择器的最大数量是有限制的。IE9及以下版本在每个样式表的4095个选择器处停止读取（甚至可能不加载文件，该信息似乎尚未确定）。（下面链接的文章）
3. 如果您说的“行数”是指每个文件中可以添加多少行@import链接样式表，则可以导入31个最大样式表。每个样式表可以拥有31个最大@imported样式表（请参见下面链接的文章）。
4. @import嵌套支持最多4级。

这篇MSDN文章详细介绍了开发IE时如何确定最大选择器和链接样式表的限制。

- Will Lanni

---

关于第二点，很好地区分了规则数和选择器数。这可以通过简单的JSFiddle实验进行验证。关于第一点，我还没有被文件大小限制所说服。在你提供的Joshua的文章中，文件大小可能是一个误导 - 在他的情况下，选择器的数量仍然可能是问题。最后，为了完整起见，可能值得添加第四点，提到（正如另一篇文章指出的那样），@import嵌套的深度似乎有4级的限制。 - Jason Frank

对于＃4，你的意思是四个级别深，对吧（如MSDN文章所述）？ - Jason Frank

啊，我编辑错了。是的，谢谢你指出来了，而且我在引用文章。 - Will Lanni

Answer 5

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

- Darin Dimitrov

---

即使按照你说的刷新了，它仍然无法正常加载。这个问题发生在我们的Windows 7上。 - dotcoder

正如Unicron发布的那样，IE（包括IE 8）在CSS方面有几个限制（虽然文件大小不是其中之一），在这种情况下，每个文件4096条规则的限制可能是问题的原因。http://blogs.telerik.com/blogs/posts/10-05-03/internet_explorer_css_limits.aspx - Tor-Erik

假设CSS未被压缩且遵循正常的缩进和行间距，即使有5000行，即使是最小的规则，您也可以编写大约1600个规则。或者我错了吗？ - anon355079

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

@Dimitrov 我认为这个答案是错误的。我在使用IE9时遇到了一些问题，似乎只有一半的CSS被渲染出来。通过压缩CSS，我解决了大部分问题。在我的情况下，这证实了旧版IE（IE < 10）浏览器确实存在CSS限制。 - Matt Jensen

@Dimitrov 很抱歉我必须证实这个答案是错误的。请参考http://blesscss.com了解IE的限制和提出的解决方案。不确定谁会对我的评论进行负投票，但这对本次对话没有建设性作用。 - Matt Jensen

Answer 6

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

像Firefox Firebug这样的工具对于查看压缩文件大小非常有用。我相信IE也有HTTP头查看工具。

因此，为了证明我的观点，88K是磁盘上的文件大小，而如果使用压缩，则需要考虑响应中的文件大小。

- Christopher Altman

Answer 7

如果你在文件底部看不到添加的内容，请尝试找出中断点并查找愚蠢的错误和疏忽。CSS会悄无声息地失败，但在失败之前仍然会正常工作。

这可能是你担心的原因。

- Malabar Front

Answer 8

在某些浏览器中可能存在（我没有听说过，但这是有可能的），但对于 CSS 文件来说，88 KB 绝对是可以接受的。

- Paul D. Waite

Answer 9

理论上，没有限制。

实际上，大多数常规浏览器（FF、Chrome、Opera、Safari）都可以处理任何你想要的内容。然而，一些旧的和/或移动浏览器（例如Access NetFront，许多手机都预装了它）在处理较大的页面（约100KB及以上）时会遇到问题，并抛出各种错误。

简而言之：除非你想支持所有奇怪的浏览器，否则没有限制。

- Piskvor left the building

Answer 10

当然，浏览器能够处理的内容是有限制的，但它肯定比88千字节或5000行要多得多。一个合理的猜测是大约1兆字节或65535行……在达到极限之前，您很可能会遇到性能问题。

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

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

- Guffa