前端学习 -- Html&Css -- 条件Hack 和属性Hack
条件Hack
语法:
<!--[if <keywords>? IE <version>?]>
HTML代码块
<![endif]-->
<keywords>
if条件共包含6种选择方式:是否、大于、大于或等于、小于、小于或等于、非指定版本
- 是否:
- 指定是否IE或IE某个版本。关键字:空
- 大于:
- 选择大于指定版本的IE版本。关键字:gt(greater than)
- 大于或等于:
- 选择大于或等于指定版本的IE版本。关键字:gte(greater than or equal)
- 小于:
- 选择小于指定版本的IE版本。关键字:lt(less than)
- 小于或等于:
- 选择小于或等于指定版本的IE版本。关键字:lte(less than or equal)
- 非指定版本:
- 选择除指定版本外的所有IE版本。关键字:!
<version>
目前的常用IE版本为6.0及以上,推荐酌情忽略低版本,把精力花在为使用高级浏览器的用户提供更好的体验上
用于选择IE浏览器及IE的不同版本
- if条件Hack是HTML级别的(包含但不仅是CSS的Hack,可以选择任何HTML代码块)
<!--[if IE]>
<p>你在非IE中将看不到我的身影</p>
<![endif]-->
示例demo:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>if条件Hack_CSS参考手册_web前端开发参考手册系列</title>
<style>
h1{margin:10px 0;font-size:16px;}
span{display:none;}
.not-ie{display:inline;}
</style>
<!--[if IE]>
<style>
.ie{display:inline;}
.not-ie{display:none;}
</style>
<![endif]--> <!--[if IE 5]>
<style>
.ie5{display:inline;}
</style>
<![endif]--> <!--[if IE 6]>
<style>
.ie6{display:inline;}
</style>
<![endif]--> <!--[if IE 7]>
<style>
.ie7{display:inline;}
</style>
<![endif]--> <!--[if IE 8]>
<style>
.ie8{display:inline;}
</style>
<![endif]--> <!--[if IE 9]>
<style>
.ie9{display:inline;}
</style>
<![endif]-->
</head>
<body>
<div>
您正在使用
<span class="not-ie">非IE</span>
<span class="ie">IE</span>
<span class="ie5">5</span>
<span class="ie6">6</span>
<span class="ie7">7</span>
<span class="ie8">8</span>
<span class="ie9">9</span>
浏览器
</div>
</body>
</html>
CSS 属性 HACK
语法:
selector{<hack>?property:value<hack>?;}
_:
- 选择IE6及以下。连接线(中划线)(-)亦可使用,为了避免与某些带中划线的属性混淆,所以使用下划线(_)更为合适。
- *:
- 选择IE7及以下。诸如:(+)与(#)之类的均可使用,不过业界对(*)的认知度更高
- \9:
- 选择IE6+
- \0:
- 选择IE8+和Opera
- [;property:value;];:
- 选择webkit核心浏览器(Chrome,Safari)。IE7及以下也能识别。中括号内外的3个分号必须保留,第一个分号前可以是任意规则或任意多个规则
- [;color:#f00;]; 与 [color:#f00;color:#f00;]; 与 [margin:0;padding:0;color:#f00;]; 是等价的。生效的始终是中括号内的最后一条规则,所以通常选用第一种写法最为简洁。
选择不同的浏览器及版本
- 尽可能减少对CSS Hack的使用。Hack有风险,使用需谨慎
- 通常如未作特别说明,本文档所有的代码和示例的默认运行环境都为标准模式。
一些CSS Hack由于浏览器存在交叉认识,所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。
示例:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title></title>
<style>
h1{margin:10px 0;font-size:16px;}
.test{
color:#c30; /* For Firefox */
[;color:#ddd;]; /* For webkit(Chrome and Safari) */
color:#090\0; /* For Opera */
color:#00f\9; /* For IE8+ */
*color:#f00; /* For IE7 */
_color:#ff0; /* For IE6 */
}
</style>
</head>
<body>
<div class="test">在不同浏览器下看看我的颜色吧</div>
</body>
</html>
前端学习 -- Html&Css -- 条件Hack 和属性Hack的更多相关文章
- 前端学习:CSS的学习总结(图解)
前端学习:CSS的学习总结(图解) CSS代码笔记 CSS简介 css的引入方式和书写规范 CSS选择器 CSS属性 CSS盒子模型 CSS的定位
- 前端学习 之 CSS(二)
五:继承性和层叠性 css有两大特性,即继承性和层叠性. 1. 继承性 面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css就是在设 ...
- web前端学习笔记(CSS盒子的浮动)
在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同. CSS中有一个float属性 ...
- 2016.01.22 前端学习 HTML/CSS
学习HTML/CSS http://edu.51cto.com/course/course_id-3116.html 明日实践
- 前端学习 之 CSS(三)
九:浮动 浮动是css里面布局最多的一个属性,也是很重要的一个属性. float:表示浮动的意思. 属性值: none: 表示不浮动,默认 left: 表示左浮动 right:表示右浮动 例: htm ...
- 前端学习之CSS
CSS介绍 CSS(Cascading Style Sheet, 层叠样式表)定义如何显示HTML元素, 给HTML设置样式, 让它更加美观. 当浏览器读到一个样式表, 它就会按照这个样式表来对文档进 ...
- 前端学习笔记——CSS选择器
学习css选择器之前我们先了解下css规则: CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 1.id选 ...
- 前端学习 之 CSS(一)
一:什么是 CSS? ·CSS 指层叠样式表 (Cascading Style Sheets) ·样式定义如何显示 HTML 元素 ·样式通常存储在样式表中 ·把样式添加到 HTML 4.0 中,是为 ...
- 前端学习笔记 - Css初级篇
有话先说:我是一只菜鸟,一只都是,从前是现在也是. CSS中的会计元素与行内元素 块级元素特性:占据一整行,总是重起一行并且后面的元素也必须另起一行显示.内联元素特性:和其他内联元素显示在同一行. 可 ...
随机推荐
- Linux umask
新建一个文件或目录,它的默认权限是什么?如果要修改一个用户创建的文件和目录的默认权限该如何做?本文将介绍相关的内容.说明:本文的演示环境为 ubuntu 16.04. 文件的默认权限 为了查看用户创建 ...
- 行业干货-如何逆向解决QT程序汉化中乱码问题
前言 “一款QT开发的国外软件,大概率是没有做中文支持的,所以你汉化中,不论怎么设置编码都一定是乱码.面对这个问题,你去互联网上找答案,答案却大多是复制粘贴的开发中解决乱码的文章,可是我们是要逆向中解 ...
- PAT甲级题解-1066. Root of AVL Tree (25)-AVL树模板题
博主欢迎转载,但请给出本文链接,我尊重你,你尊重我,谢谢~http://www.cnblogs.com/chenxiwenruo/p/6803291.html特别不喜欢那些随便转载别人的原创文章又不给 ...
- javaScript常用API合集
节点 1.1 节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Com ...
- 个人作业Week2-代码复审(修改明确了要求)
代码复审 零,说在前面的话 大家完成了个人项目之后,都写了很多代码. 这些代码可能: 大括号换行/不换行 使用tab缩进/使用空格缩进 变量名函数名的定义很好/不好 每个函数都有详细的注释解释函数的功 ...
- 期末总结:LINUX内核分析与设计期末总结
朱国庆原创作品转载请注明出处<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一,心得体会 关于网上听课这 ...
- tftp服务、串口工具minicom
linux下安装tftp服务 参考这位仁兄的经验 确实百度上很多关于配置tftp服务的方法,但是这篇文章的介绍真的是很精简,对于一个刚接触纯linux环境的小白来说是很舒服的一件事. 首先是安装tft ...
- Mac+Docker环境下xdebug的配置
由于容器化的需要,前几天我本地也换成了docker环境.就研究了一下docker环境下phpstorm和xdebug的配置. http://www.mmfei.com/?p=453 这个博客给出了一个 ...
- 自定义组件的 v-model
Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Bool ...
- Linux 文件系统概览
本文导航 -定义07% -文件系统的基本功能12% -目录结构26% -Linux 统一目录结构50% -文件系统类型74% -挂载81% -结论90% -下个月92% 本文旨在高屋建瓴地来讨论 ...