CSS HACK 解决兼容的写法

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

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

【 tulaoshi.com - Web开发 】

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

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

在解决兼容方法上,想定出一个统一的规范,个人认为应该以下面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;}}

这种写法的优缺点是:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)优点:全面,各种HACK都有;清理无用代码里易认 缺点:选择器名称不易记;代码量多(要重复写选择器)

二、CSS 属性 Hack

  .sofish{
         padding:10px;
         padding:9px9; /* all ie */
         padding:8px; /* ie8-9 */
         *padding:5px; /* ie6-7 */
        +padding:7px; /* ie7 */
         _padding:6px; /* ie6 */
}

这种写法的优缺点是:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)优点:易记,代码少 缺点:不全面

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

延伸阅读
标签: Web开发
写完第七课,因为时间问题没有继续写第八课有关浏览器兼容方面的文章,以为大家可以自己掌握这方面的知识,不过发现有很多同学找了很多资料,很多文章去研究,费时费力的,效果也不好,今天是星期六,我呢就再给大家补写这篇教程,带领大家用最短的时间掌握CSS Hack! 说到浏览器兼容性问题,就必须说CSS Hack!提到Hack大家肯定会想到电脑...
标签: Web开发
现在用脚本控制 html 元素样式的方法真的很多很多。 对单个元素可以直接 element.style.display=......修改一个样式,也可以 element.className=...修改它的多个样式。 对于多个元素修改样式可以用脚本直接 import  css文件。 目前项目中有这么一个需求。 要求改变某 div下所有子孙结点的样式...
标签: 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开发
原文:http://andymao.com/andy/post/76.html 屏蔽IE浏览器(也就是IE下不显示) *:lang(zh) select {font:12px  !important;} /*FF的专用*/ select:empty {font:12px  !important;} /*safari可见*/ 这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。 仅IE7识别 *+html  {…} 当面临需...
标签: Web开发
这是从互联网上整理来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助。

经验教程

839

收藏

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