一、开篇小问题

题目:实现类似下图的宽度自适应效果,IE9+,FireFox,Chrome,Opera等使用CSS3实现,IE6~8浏览器使用图片实现。

计时思考……

二、思考中

————- 假设这是大家全神贯注思考的18分钟 ————————

……思考结束

三、问题引导

针对不同浏览器实现类似的效果,我们可能都会想到CSS hack这个东西,让不同的浏览器下引用不同的CSS属性或是不同的CSS属性值。

于是要实现上图所示的效果,我们可能会将CSS代码分成两块,一块针对IE6~8,另外一块针对IE9+和其他浏览器。于是我们可能会看到类似下面的代码:

/*IE6 IE7 IE8*/
.rad,.rad_in{background:url(/study/image/rad_bg.png) no-repeat;}
.rad{background-position:right -300px;} /*IE9+以及其他现代浏览器*/
:root .rad, :root: .rad_in{background:none;}
:root .rad{border:1px solid #ccc; border-radius:6px; box-shadow:0 0 4px rgba(0,0,0,.2);}
:root .rad_in{border:1px solid #fff; border-radius:6px; box-shadow:inset 0 0 20px rgba(0,0,0,.1);}

确实,上面的代码可以让我们达到我们多希望的效果。但是,实际上,我们可以直接拿某些CSS3属性当CSS hack使用,可以实现同样的效果。

四、CSS3属性作为CSS hack

上述效果中,有浏览器冲突的CSS属性一个是border,另外一个就是background。由于IE6~8并不认识border-radius以及box-shadow,所以这两个属性纯属围观群众,不需要做处理。

所以上面的代码等同于:

/*IE6 IE7 IE8*/
.rad,.rad_in{background:url(/study/image/rad_bg.png) no-repeat;}
.rad{background-position:right -300px; border-radius:6px; box-shadow:0 0 4px rgba(0,0,0,.2);}
.rad_in{border-radius:6px; box-shadow:inset 0 0 20px rgba(0,0,0,.1);} /*IE9+以及其他现代浏览器*/
:root .rad, :root: .rad_in{background:none;}
:root .rad{border:1px solid #ccc;}
:root .rad_in{border:1px solid #fff;}

于是,CSS hack部分能够就是独眼龙看告示——一目了然了!

however,我们没有必要使用:root这个hack属性来针对现代浏览器和老一辈的IE浏览器分别写CSS样式,我们可以直接使用CSS3作为hack,区分不同的浏览器。

我们先直接看下CSS3 作为CSS hack下的代码:

.rad,.rad_in{background:url(/study/image/rad_bg.png) no-repeat; background:rgba(0,0,0,0);}
.rad{border:1px solid rgba(204, 204, 204, 1); border-radius:6px; box-shadow:0 0 4px rgba(0,0,0,.2); background-position:right -300px;}
.rad_in{border:1px solid rgba(255, 255, 255, 1); border-radius:6px; box-shadow:inset 0 0 20px rgba(0,0,0,.1);}

RGBA颜色属于CSS3中的东西,IE6~8浏览器并不认识它。于是,我们把border的颜色表示用RGBA颜色,IE6~8浏览器就直接不认识这里的border属性,也就不会显示什么边框颜色了。同理,background属性也是使用RGBA颜色值,表示完全透明背景,直接在支持CSS3 RGBA浏览器下重置了前面的background,同时IE6~8浏览器下前面的图片background属性值因为不认识后面的background,所以,没有被重置,依旧坚挺地图片显示。

于是,虽然没有明显的CSS hack印记,我们还是实现了各个浏览器下大致类似的效果,其中的利器就是CSS3属性本身。

您可以狠狠地点击这里:巧用CSS3属性作为CSS hack实例页面

下图为IE7浏览器下的效果截图:

四、末了闲话

本demo又拿张含韵小姐年轻时候的照片做例子了。大家不要要锁误会,我跟她没有一腿的,是很纯洁的。因为其照片正好是我实例的美女图片系列中的第一个,所以才频繁亮相。就像我们背英语单词,单词书上第一页的单词显然被背诵的次数要多是一样的道理。

That’s all, thanks!

原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=1867

(本篇完)

小tip:巧用CSS3属性作为CSS hack——张鑫旭的更多相关文章

  1. css笔记 - 张鑫旭css课程笔记之 float 篇

    https://www.imooc.com/t/197450float float的设计初衷/原本作用-是为了实现文字环绕效果如,一个图片和一段文字垂直放置,给图片加上浮动,文字就环绕图片展示了. 浮 ...

  2. 可缺省的CSS布局——张鑫旭

    一.技术不难.意识很难 有些东西的东西的实现,难的不是原料.技术:而是想不到,或者说意识不到. 例如下面这个简单而又神奇的魔术: 是吧.搞通了,才发现,哦~原来这么回事,很简单的嘛,我也可以实现的!其 ...

  3. HTML5 number类型文本框step属性的验证机制——张鑫旭

    我在下一盘很大的棋,本文只是其中的一个棋子. 需要提前知道的: 目前而言,对step雄起的浏览器为IE10+, Chrome以及Opera浏览器. 需要预先知道number类型input的一些基本知识 ...

  4. [转] CSS3混合模式mix-blend-mode/background-blend-mode简介 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4819 一.关于混合模 ...

  5. css笔记 - 张鑫旭css课程笔记之 vertical-align 篇

    支持负值的属性: margin letter-spacing word-spacing vertical-align 元素vertical-align垂直对齐的位置与前后元素都没有关系元素vertic ...

  6. css笔记 - 张鑫旭css课程笔记之 z-index 篇

    一.z-index语法.支持的属性值等 z-index: 在支持z-index的元素上, z-index规定了元素(包括子元素)的垂直z方向的层级顺序, z-index可以决定哪个元素覆盖在哪个元素上 ...

  7. css笔记 - 张鑫旭css课程笔记之 margin 篇

    margin - 人若犯我,我必犯人! [margin地址](https://www.imooc.com/learn/680) 一.margin与容器尺寸的关系 relative可定位,但是不改变容器 ...

  8. css笔记 - 张鑫旭css课程笔记之 line-height 篇

    一.line-height line-height: 指两行文字基线之间的距离. 行高200px表示两行文字基线之间的距离是200px: 二.基线:baseline 字母x下边缘的位置 基线是任意线定 ...

  9. css笔记 - 张鑫旭css课程笔记之 overflow 篇

    overflow基本属性值 visible(默认值):超出依然显示 hidden :超出隐藏 scroll :超出,滚动显示.子元素不超出也会有滚动条的那条轨道. auto:如果超出,滚动显示.如果不 ...

随机推荐

  1. ng的点滴记录

    1,directive http://damoqiongqiu.iteye.com/blog/1917971/ 2,constructor  https://segmentfault.com/q/10 ...

  2. php批量导出pdf文件的脚本(html-PDf)

    背景:突然有大量的文件需要导出成PDF文件,写一个批量导出pdf的脚本,同时文件的命名也需要有一定的规则 导出方式:向服务器中上传csv文件,csv文件中包含文件的地址和相对应的文件命名. 如下格式: ...

  3. centos7在分区上建立文件系统和挂载

    在上一篇博客中,我们只说了硬盘的分区,既然进行分区,那么我们就要知道如何使用这些分区,就是接下来的建立文件系统和挂载. mkfs(make filesystem)格式化,建立文件系统 可以看到各种文件 ...

  4. 4. Neural Network

    1. 神经网络 首先引入一些便于稍后讨论的新标记: $L$:代表神经网络层数$S_l$:代表第$l$层处理单元的个数$K$:代表多分类中类别种数 2. 前向传播(forward propagation ...

  5. 钉钉h5项目实战|仿钉钉聊天|h5移动端钉钉案例

    最近一直着手开发h5仿钉钉项目,使用到了h5+css3+zepto+wcPop2等技术进行开发,实现了消息.表情.动图发送,仿QQ多人拼合图像,可以选择本地图片,并可以图片.视频预览,仿微信发红包及打 ...

  6. 【Azure】Publish Error of "%(TargetOSFamily.Identity)" that evaluates to "" instead of a number

    在向Azure部署程序的时候,出现如下错误: A numeric comparison was attempted on "%(TargetOSFamily.Identity)" ...

  7. Spring Security构建Rest服务-0702-短信验证码登录

    先来看下 Spring Security密码登录大概流程,模拟这个流程,开发短信登录流程 1,密码登录请求发送给过滤器 UsernamePasswordAuthenticationFilter 2,过 ...

  8. Win下Eclipse提交Hadoop程序出错:org.apache.hadoop.security.AccessControlException: Permission denied: user=D

    描述:在Windows下使用Eclipse进行Hadoop的程序编写,然后Run on hadoop 后,出现如下错误: 11/10/28 16:05:53 INFO mapred.JobClient ...

  9. 【数组】Next Permutation

    题目: Implement next permutation, which rearranges numbers into the lexicographically next greater per ...

  10. js便签笔记(1)——说说HTMLCollection、NodeList以及NamedNodeMap

    介绍 在js的dom操作中,除了常用的document.html**Element之外,还有三个集合对象,即HTMLCollection.NodeList以及NamedNodeMap.试看以下操作: ...