CSS HACK 解决兼容的写法

ying131418

ying131418

2016-02-20 00:25

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

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

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

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

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

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

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

先把这三个原则存起来,来看看我们平时解决兼容的写法(后面会附详细的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:9px9; /* all ie */
         padding:8px; /* ie8-9 */
         *padding:5px; /* ie6-7 */
        +padding:7px; /* ie7 */
         _padding:6px; /* ie6 */
}

这种写法的优缺点是:

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

展开更多 50%)
分享

猜你喜欢

CSS HACK 解决兼容的写法

Web开发
CSS HACK 解决兼容的写法

不同浏览器的CSS Hack写法

Web开发
不同浏览器的CSS Hack写法

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

区别不同浏览器CSS hack写法

Web开发
区别不同浏览器CSS hack写法

网页制作:不同浏览器CSS Hack写法

Web开发
网页制作:不同浏览器CSS Hack写法

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

网页制作:不同浏览器的CSS Hack写法

Web开发
网页制作:不同浏览器的CSS Hack写法

解决IE6、IE7、Firefox兼容最简单的CSS Hack

Web开发
解决IE6、IE7、Firefox兼容最简单的CSS Hack

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

页面重构中的模块化思维:理解好样式的作用域

页面重构中的模块化思维:理解好样式的作用域

-我相信你爱的永远的是我,因为承诺在那.

-我相信你爱的永远的是我,因为承诺在那.
下拉加载更多内容 ↓