the same page looks like Figure 3 in Internet Explorer (IE) 7.
Figure 3. IE 7 ignores the column-count and box-shadow properties.
In IE 9, the same page displays the drop shadow on the image, but the text is laid out in the same way as
Figure 3.
How far you go in trying to compensate for the missing features depends on the requirements of your
design brief. Trying to get the page to look exactly the same in all browsers would involve a lot of work,
but you can make some simple improvements, such as wrapping the text around the image, aligning the
image with the left margin of the text, and adding a subtle border to the image's bottom and right edges to
give it a more three-dimensional look.
Detecting support for CSS3 features
Modernizr uses JavaScript to detect which features a browser supports, but rather than using JavaScript to
load different style sheets dynamically, it uses the remarkably simple technique of adding classes to the
page's
<html> tag. It's then up to you as the designer to use the CSS cascade to serve the appropriate
styles to target elements. For example, if the
box-shadow property is supported, Modernizr adds the
boxshadow class. If it's not supported, it adds the no-boxshadow class instead.
Since browsers ignore CSS properties that they don't recognize, you can safely use the
box-shadow property
in your basic style rules, but add a separate descendant selector
for older browsers like this:
.no-boxshadow img { /* styles for browsers that don't support box-shadow */ }
Only browsers that don't support box-shadow will have the no-boxshadow class, so no other browsers will
apply this style rule.
Let's add Modernizr to the sample page and inspect the classes it adds to the <html> tag.
剩余12页未读，继续阅读
AfricaABC
- 粉丝: 0
- 资源: 1
我的内容管理
展开
最新资源
- 李兴华Java基础教程：从入门到精通
- U盘与硬盘启动安装教程：从菜鸟到专家
- C++面试宝典：动态内存管理与继承解析
- C++ STL源码深度解析：专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手：数据管理与企业增值的战略
- Eclipse IDE基础教程：从入门到精通
- Shell脚本专家宝典：全面学习与资源指南
- Tomcat安装指南：附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华：必备术语集锦
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
