说说CSS Hack 和向后兼容
人一旦习惯了某些东西就很难去改，以及各种各样的原因，新的浏览器越来越多，而老的总淘汰不了。增长总是快于消亡导致了浏览器兼容是成了谈不完的话题。说到浏览器兼容，CSS HACK自然而然地被我们想起。今天，我们通常都有一个团队或者将有一个团队的人在一个公司里面做相同的事，需要我们有统一的规范来进行Coding，以方便维护。而解决兼容的方法就是（必须是，因为这才最容易有问题的）其中一个最重要的、要解决的规范之一。 在解决兼容方法上，想定出一个统一的规范，个人认为应该以下面3点为基本原则： 权衡成本：在浏览器被淘汰后，如何快速清理掉无用代码 可维护：在资源成本和完美间平衡的向后兼容 可读：省力、易记 这里把成本放在了第一位，并不是说我们不愿意追求完美，而只是，太刻意追求完美有时候可能会阻碍我们前进；在成本后，应该是可维护和可读，这点对于团队的合作来说至关重要，而最终结果也是为了减少成本。 先把这三个原则存起来，来看看我们平时解决兼容的写法（后面会附详细的Hack方法列表）： 一、CSS 选择器 Hack /* Opera */ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {head~body .sofish{display:block;}} 这种写法的优缺点是： 优点：全面，各种HACK都有；清理无用代码里易认 缺点：选择器名称不易记；代码量多（要重复写选择器） 二、CSS 属性 Hack .sofish{ padding:10px; padding:9px\9 /* all ie */ padding:8px\0 /* ie8-9 */ *padding:5px /* ie6-7 */ +padding:7px /* ie7 */ -padding:6px /* ie6 */ } 这种写法的优缺点是： 优点：易记；代码少 缺点：不全面 三、IE 注释 IE only<!--[if IE]>IE only<![endif]--> <!--[if !IE]>NOT IE<![endif]-->NOT IE 这种写法的优缺点是： 优点：安全；向后兼容好；易维护 缺点：用不好会增加HTTP请求；用得好代码又多 四、浏览器探测：JS/后端程序判断 // 以jQuery为例，检测是否是IE6，是则加上class="ie6" if ($.browser.msie && $.bro
Published at 3 months ago