CSS HACK 解决兼容的写法

2016-02-20 00:25 11 1 收藏

在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享CSS HACK 解决兼容的写法,希望可以对大家能有小小的帮助。

【 tulaoshi.com - Web开发 】

人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了。增长总是快于消亡导致了浏览器兼容是成了谈不完的话题。说到浏览器兼容,CSS HACK自然而然地被我们想起。今天,我们通常都有一个团队或者将有一个团队的人在一个公司里面做相同的事,需要我们有统一的规范来进行Coding,以方便维护。而解决兼容的方法就是(必须是,因为这才最容易有问题的)其中一个最重要的、要解决的规范之一。

在解决兼容方法上,想定出一个统一的规范,个人认为应该以下面3点为基本原则:

权衡成本:在浏览器被淘汰后,如何快速清理掉无用代码 可维护:在资源成本和完美间平衡的向后兼容 可读:省力、易记

这里把成本放在了第一位,并不是说我们不愿意追求完美,而只是,太刻意追求完美有时候可能会阻碍我们前进;在成本后,应该是可维护和可读,这点对于团队的合作来说至关重要,而最终结果也是为了减少成本。

先把这三个原则存起来,来看看我们平时解决兼容的写法(后面会附详细的Hack方法列表):

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

一、CSS 选择器 Hack

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

 /* 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:9px9; /* all ie */
         padding:8px; /* ie8-9 */
         *padding:5px; /* ie6-7 */
        +padding:7px; /* ie7 */
         _padding:6px; /* ie6 */
}

这种写法的优缺点是:

优点:易记,代码少 缺点:不全面

来源:http://www.tulaoshi.com/n/20160220/1631819.html

延伸阅读
标签: Web开发
CSS hack浏览器兼容一览表 《CSS hack浏览器兼容一览表》在很多的网站都是以一个图片的形式出现,所以许多读者不能理解它的实现的用法,例如:p\roperty:value; ,这句到底是什么意思,其实只要你去了原文地址看它的代码例子就一目了然了,下面举了几个实例,供参考。 voice-family:\}\"; voice-family:inherit; property:value; S...
标签: Web开发
写完第七课,因为时间问题没有继续写第八课有关浏览器兼容方面的文章,以为大家可以自己掌握这方面的知识,不过发现有很多同学找了很多资料,很多文章去研究,费时费力的,效果也不好,今天是星期六,我呢就再给大家补写这篇教程,带领大家用最短的时间掌握CSS Hack! 说到浏览器兼容性问题,就必须说CSS Hack!提到Hack大家肯定会想到电脑...
标签: Web开发
比较常用的是只对IE进行hack,常见的写法有以下几种: 1. IE条件注释 !-- [ if IE]link href="ie.css" rel="stylesheet" type="text/css" /![endif]-- 还可只对某一IE版本或以下版本hack 2. html/body标签中写class hook 比如使用jQuery Browser Plugin后通过firefox浏览页面html被附加上这样的class html ...
标签: Web开发
这是从互联网上整理来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助。
标签: Web开发
!DOCTYPE html是HTML5的声明,主流的游览器中只有IE8及以下版本不支持,这样IE会进入Quirks模式。但之后的声明可以强制指定IE的呈现模式,所以!DOCTYPE html声明对IE就无影响。 HTML5并没有XHTML那么严格,对于一般的xhtml页面,基本都不通完全通过W3C验证标准,而改为HTML5声明后基本都能过。 复制代码代码如下: !DOCTYPE html !–[...

经验教程

115

收藏

51
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部