【荐】说说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 注释
<!--[if IE]>IE only<![endif]-->
<!--[if !IE]>NOT IE<![endif]-->
这种写法的优缺点是:
- 优点:安全;向后兼容好;易维护
- 缺点:用不好会增加HTTP请求;用得好代码又多
四、浏览器探测:JS/后端程序判断
// 以jQuery为例,检测是否是IE6,是则加上class="ie6" if ($.browser.msie && $.browser.version = 6 ){$('div').addClass('ie6'); }
这种写法的优缺点是:
- 优点:全面;易维护;可读性高
- 缺点:占资源;代码量大(要重写选择器)
上面4种是我们最常用的方法。现在,让我们抽出心里存着的那3个原则,看看如何选择。要时间思考一下么?这里简单地说一下我的选择:
- 尽量使用单独HACK这样维护起来成本比较低,改动不会影响其他的浏览器,而一旦有浏览器淘汰,只要搜索关键字,就可以批量去掉这些代码。比如,ie6的单独hack:
_padding:6px;;
- 向后兼容的目标:1年你想现在的网站兼容IE10么,谁不想,但这可预见性太低了,也可以说,成本太高了。暂时没必要。不过,IE9可能要发布了,所以,选择像
padding:8px\0;
这样的IE8+的hack,在删掉其他代码不影响向后兼容上,会更好;并且,如果IE10出来,一旦支持这个hack,而又没有这个bug,可能删掉只影响2个浏览器,也会更方便; - 尽可能省资源你要是不考虑页面加载速度,不考虑服务器承受能力的话,那在向后兼容和淘汰的处理上可以做得很完美(从代码上),但这从某种程度上,不如不做。
五、个人推荐写法
其实可以纠结的还真多,这里结合A-Grade浏览器的种类和HACK的种类,写两种个人认为比较合理的HACK和向后兼容相兼顾的写法,仅供大家参考的。
经济实惠型写法:注重单独的HACK。 IE的HACK比较多,选择省力易记的属性HACK;其他浏览器HACK少,选择块状的选择器HACK(推荐)
.sofish{padding:10px;padding:9px\9; /* all ie */padding:8px\0; /* ie8-9 目前应用于IE8的单独hack,情况比较少 */*padding:5px; /* ie6-7 */+padding:7px; /* ie7 */_padding:6px; /* ie6 */
}
/* webkit and opera */
@media all and (min-width: 0px){ .sofish{padding:11px;} }
/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} }
/* opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} }
/* firefox * /
@-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */
html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */
准完美主义写法:配合IE注释,一律采用选择器HACK(选择性推荐)
HTML: 添加body class
<!--[if IE6]><body class="ie6"><![endif]-->
<!--[if IE7]><body class="ie7"><![endif]-->
<!--[if IE8]><body class="ie8"><![endif]-->
<!--[if IE9]><body class="ie9"><![endif]-->
<!--[if !IE]><body class="non-ie"><![endif]-->
然后,从第二种方式我们也可以发现。把IE注释用在body class上,而不是添加单独的<link />
或者@import
会是更好的选择。虽然分文件也是一种不错的选择,但了为页面加载速度,HTTP请求一个都不能浪费。
至于利用JS或者后端程序来判断,除非你有足够的资源,除非你解决不了(90%不会发生),不然,并不推荐用。附上一个表(via),可以参考参考:
六:全面的IE6+ / Firefox / Webkit / Opera CSS HACK列表:
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red } 或 *html #uno { color: red }
/* IE7 */
*+html #dieciocho {color: red } 或 *:first-child+html #dos { color: red } /* IE7, FF, Saf, Opera */
html>body #tres { color: red } /* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red } /* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red } /* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {#diez { color: red }
} /* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {#veintiseis { color: red }
} /* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red } /* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red } /* Everything but IE6-8 */
:root *> #quince { color: red } /* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red } /* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
其他的就不多说了。不过,还是要提醒一下: 注释也是很重要的。虽然是HACK了,但现实中情况有时候比想象中的复杂得多,给代码一个注释,好过千言万语。
最后,还是那句,希望看到你更好的方法!
【荐】说说CSS Hack 和向后兼容相关推荐
- CSS Hack 和向后兼容
人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了.增长总是快于消亡导致了浏览器兼容是成了谈不完的话题.说到浏览器兼容,CSS HACK自然而然地被我们想起.今天 ...
- css hack *html,css hack 大全 各个浏览器的css
各个浏览器的css hack区别属性: IE6: _zoom:1; IE6/7: *zoom:1; IE6/7/8/9 :\9 各个浏览器的css hack区别规则 IE6: *html{} IE7: ...
- 各种css hack - 兼容性探测
CSS HACK:浏览器兼容的一些写法 人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了.增长总是快于消亡导致了浏览器兼容是成了谈不完的话题.说到浏览器兼容,C ...
- 【总结】IE6,IE7,IE8,Firefox兼容的css hack 补充!
IE6,IE7,IE8,Firefox兼容的css hack 补充: .color{ background-color: #CC00FF; /*所有浏览器都会显示为紫色*/ background-co ...
- CSS hack浏览器兼容一览表
CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧.这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助. 屏蔽IE浏览 ...
- html网页改兼容模型,浏览器兼容、CSS hack、normalize.css及盒模型基础知识问答
一.问题(一).如何调试 IE 浏览器 1.对于IE7及以下版本可采用IETester(不能测脚本,模拟出来的IE6平台与真实的IE6还是有差异的,结果不完全可靠).Expression Web Su ...
- 常见浏览器兼容问题、盒模型2种模式以及css hack知识讲解
什么是浏览器兼容问题?所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们 ...
- CSS 兼容浏览器的方法 CSS Hack
开发人员基本都知道,CSS的开发本身并不难,但是,当在不同的浏览器下测试代码时,困难就出现了.浏览器的 bug 和不一致的显示方式,是大多数CSS开发人员面临的主要难题,你的设计在一种浏览器上看起来很 ...
- css hack *html,HTML_CSS Hack整理,CSS Hack是在标准CSS没办法兼容 - phpStudy
CSS Hack整理 CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法,在各浏览器厂商解析CSS没有达成一致前,我们只能用这样的方法来完成这样的任务. 我进行前端开发的时候 ...
最新文章
- Python 源码函数格式带有*和/说明
- 简单配置nginx反向代理,实现跨域请求
- Groovy学习专栏
- linux 权限管理 lvm,Linux系统中RAID及LVM管理
- C语言 memset()函数(内存初始化函数)
- mysql编辑前200行_巧妙使用SQL Server编辑前200行功能
- LeetCode 889. Construct Binary Tree from Preorder and Postorder Traversal
- 运维:使用awk命令获取文本的某一行,某一列
- Android 通过软引用实现图片缓存,防止内存溢出
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_14-webpack研究-webpack-dev-server...
- python输入输出格式_Python基础-用户的输入及格式化输出 | 【韩涛博客】
- win10没有android驱动安装,win10系统安装adb驱动的详细步骤
- 中年,就是1个人演1部西游记
- 精度LiDAR-Monocular Visual Odometry
- 一个Node程序猿上海的一周
- ibms智能化系统集成服务器,智能化集成管理系统(IBMS)
- PyTorch的自动求导机制详细解析,PyTorch的核心魔法
- 关于纯净的win7旗舰版安装后无无线网驱动问题
- 什么是SAS硬盘,服务器硬盘sas和sata有什么区别
- TLS 地面三维激光扫描仪
热门文章
- 推荐13个CSS3快速开发工具
- hdu5251最小矩形覆盖
- github报错“remote: Support for password authentication was removed on August 13, 2021. Please use a p”
- 【Groovy】json 序列化 ( 类对象转为 json 字符串 | 使用 JsonBuilder 进行转换 | 使用 JsonOutput 进行转换 | 将 json 字符串格式化输出 )
- 【错误记录】安装 Visual Studio 2013 中文语言包报错 ( 需要 Microsoft Visual Studio Test Agent , 但此计算机上并为安装它 )
- 【Windows 逆向】使用 CE 工具挖掘关键数据内存真实地址 ( 完整流程演示 | 查找临时内存地址 | 查找真实指针地址 )
- 【错误记录】NDK 报错 java.lang.UnsatisfiedLinkError 的一种处理方案 ( 主应用与依赖库 Module 的 CPU 架构配置不匹配导致 )
- 【Android 异步操作】手写 Handler ( Handler 发送与处理消息 | Handler 初始化 | 完整 Handler 代码 )
- 【Android 高性能音频】Oboe 开发流程 ( 创建并设置 AudioStreamCallback 对象 | 打开 Oboe 音频流 | 日志封装 logging_macros.h )
- 【计算机网络】网络安全 : 计算机网络安全威胁 ( 四种网络攻击类型 | 主动攻击与被动攻击 | 分布式拒绝服务攻击 DDos | 恶意程序 | 计算机网络安全目标)