处理CSS加载失败

Question

最近我一直在花费一些思考时间来处理如何最好地处理页面的资源故障。

当然，对于JavaScript文件，没有太多“聪明”的东西可以做。如果您是从CDN加载，我们可以做这样的事情（从HTML5的样板项目采取）：

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline --> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script>window.jQuery || document.write('<script src="local/jquery-1.6.1.min.js">\x3C/script>')</script> 

但是我还没有看到太多在案CSS失败。

如果你的页面是博客文章或类似的东西，那么最好的做法是确保你的标记是好的，这样未格式化的版本仍然是一个非常可读的文件。

但是，如果你不想退回山猫风格呢？可能有一个很好的理由;例如你的应用程序很复杂，并且非常依赖你的布局。在这种情况下，显示没有样式表的页面对于用户体验来说可能更糟糕，而不是根本不显示它。

因此，我想知道这样的解决方案是否可行 - 以及您是否有人使用它（或类似的东西）？

1. 在你的CSS文件#test { line-height: 1; }
2. 的末尾添加一个辅助类，在你页面的末尾

---

var el = document.createElement('div'); 
el.setAttribute('id', 'test'); 
document.body.appendChild(el); 

var o = (el.currentStyle) ? el.currentStyle['line-height'] : 

    (window.getComputedStyle) ? document.defaultView.getComputedStyle(el, null).getPropertyValue('line-height') : null; 
if (o !== '1px') { 
    document.body.innerHTML = '<p>Resources failed to load, a prettier message should go here</p>'; 
} 

看到这个JS Fiddle for it all together添加这个JavaScript。

问题是上述

1. 思考？
2. 你是否在使用类似的东西？
3. 你认为它是一个很好的模式（请注意，我只是提倡这种依赖于它们样式的Web应用程序）。

Answer 1

由于用户样式表或其他浏览器设置会覆盖您正在测试的规则，因此您的规则可能不会生效。 line-height似乎特别容易受此影响，再加上任何采用长度值的规则都会导致以不同的单位返回computedStyle的风险，从而导致字符串比较失败。 （更不用说在你的例子中的1/1px混淆。）

一般来说，我认为这需要更好地失败。如果您认为样式尚未加载，请尽一切办法在页面上添加警告，但不要将整个页面替换为错误，这对于至少可以尝试使用它的人来说完全没有用处。这种脆弱性对于可访问性是不利的。