临沂外贸国际网站建设,青岛网站建设谁家好一些,国内哪家网站建设公司好,做网络写手 哪个网站比较好前言#xff1a;
由于IE6/IE7/IE8还有很大一部分用户#xff0c;为了让网站浏览者都能正常的访问HTML5网站#xff0c;解决方案就有下面两个#xff1a; 1. 为网站创建多套模板#xff0c;通过程序对User-Agent的判断给不同的浏览器用户显示不同的页面#xff0c;这样的…前言
由于IE6/IE7/IE8还有很大一部分用户为了让网站浏览者都能正常的访问HTML5网站解决方案就有下面两个 1. 为网站创建多套模板通过程序对User-Agent的判断给不同的浏览器用户显示不同的页面这样的维护成本比较高也失去响应式设计的意义。 2. 使用Javascript来使不支持HTML5的浏览器支持HTML标签。目前大多网站采用的这种方式Bootcss官方例子也是如此。 下面先概述回顾一下H5和Css3再尝试对一些为实现 Html5 和 Css3 兼容性的JS进行归纳。 一、html5回顾 1、H5介绍
HTML5 是最新的 HTML 标准。 是专门为承载丰富的 web 内容而设计的并且无需额外插件。
HTML5的设计目的是为了在移动设备上支持多媒体。
HTML5 拥有新的语义、图形以及多媒体元素。
HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
HTML5 是跨平台的被设计为在不同类型的硬件PC、平板、手机、电视机等等之上运行。 2、新特性
新的语义元素比如 header, footer, article, and section。
新的表单控件比如 calendar、date、time、email、url、search。
强大的图像支持借由 canvas 和 svg
强大的多媒体支持借由 video 和 audio
强大的新 API比如用本地存储取代 cookie。 3、注意事项
HTML5 中默认的字符编码是 UTF-8。
所有浏览器不论新旧都会自动把未识别元素当做行内元素来处理。
项目中尽量使用小写文件名大多数 web 服务器Apache、Unix对文件名的大小写敏感其他 web 服务器微软IIS对大小写不敏感。
HTML 文件名应该使用扩展名 .html而不是 .htmhtml中的内联视频尽量不要自动播放。 二、CSS3回顾 1、CSS3介绍
CSS3 是最新的 CSS 标准。
对CSS3已完全向后兼容所以你就不必改变现有的设计。浏览器将永远支持CSS2。
CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。较小的模块化较利于规范及时调整、更新和发布同时不同浏览器厂商可以有选择的支持一部分模块这样有利于CSS3的推广。但不同浏览器在不同时间支持不同特性这也让跨浏览器开发变得复杂 。 2、CSS3新特性 2.1、边框特性
CSS3对网页中的边框进行了一些改进主要包括支持圆角边框、多层边框、边框色彩与图片等。在CSS3中最常用的一个改进就是圆角边框通过CSS3的属性可以快速实现圆角定义同时还可以根据实际情况针对特定角进行圆角定义 。 2.2、多背景图
CSS3允许使用多个属性(比如background-image、background-repeat、background-size、background-position、background-origin和background-clip等)在一个元素上添加多层背景图片。该属性的应用大大改善了以往面对多层次设计需要多层布局的问题帮助Web前端开发者在不借助Photoshop的情况下实现对页面背景的设计简化了背景图片的维护成本 。 2.3、颜色与透明度
CSS3颜色模块的引入实现了制作Web效果时不再局限于RGB和十六进制两种模式。CSS3增加了HSL、HSLA、RGBA几种新的颜色模式。这几种颜色模式的提出在做开发的时候不仅可以设置元素的色彩还能根据需要轻松地设定rgba元素透明度 。 2.4、多列布局与弹性盒模型布局
flex box弹性盒子CSS3多列布局属性可以不使用多个div标签就能实现多列布局。CSS3中的多列布局模块描述了如何像报纸、杂志那样把一个简单的区块拆成多列并通过相应属性来实现列数、列宽、各列之间的空白间距。弹性盒模型布局方便了Web前端开发者根据复杂的前端分辨率进行弹性布局轻松地实现页面中的某一区块在水平、垂直方向对齐是进行响应式网站开发的一大利器 。 2.5、盒子的变形
在CSS2.1中想让某个元素变形必须要借助JavaScript写大量的代码实现在CSS3中加入了变形属性该属性在2D或3D空间里操作盒子的位置和形状来实现例如旋转、扭曲、缩放或者移位。变形属性的出现使Web前端中的元素展示不仅仅局限在二维空间Web前端开发者可以通过旋转、扭曲、缩放或者移位等操作实现元素在三维控件上的展示。通过变形元素web前端中的内容展示更加形象、真实 。 2.6、过渡与动画
CSS3的过渡(transition)属性通过设定某种元素在某段时间内的变化实现一些简单的动画效果让某些效果变得更加具有流线性与平滑性。CSS3的动画(animation)属性能够实现更复杂的样式变化以及一些交互效果而不需要使用任何flash或JavaScript脚本代码。过渡与动画的出现使CSS在Web前端开发中不再仅仅局限于简单的静态内容展示而是通过简单的方法使页面元素动了起来实现了元素从静到动的变化 。 2.7、Web字体
CSS3中引入了font-facefont-face是链接服务器字体的一种方式开发人员可以使用用户计算机之外的字体只需要将喜欢的字体下载后包含再网站中它会自动下载给需要的用户 。使用如下
style
font-face
{font-family: myFirstFont;src: url(sansation_light.woff);
}div
{font-family:myFirstFont;
}
/style 2.8、媒体查询
CSS3中引入媒体查询(mediaqueries)可为不同分辨率的设备定义不同的样式。比如在可视区域小于480像素时可能想让原来在右侧的网站侧栏显示在主内容的下边以往必须通过JavaScript判断用户浏览器的分辨率然后再通过JavaScript修改CSS。CSS3中只需要通过媒体查询就可实现上述操作 。 2.9、阴影
阴影主要分为两种:文本阴影(text-shadow)和盒子阴影(box-shadow)。文本阴影在CSS2中已经存在但没有得到广泛的运用(CSS2.1中删除了)。CSS3延续了这个特性并进行了新的定义该属性提供了一种新的跨浏览器解决方案使文本看起来更加醒目。CSS3中的盒子阴影的引入可轻易地为任何元素添加盒子阴影 3、CSS3兼容性和其它
浏览器厂商以前就一直在实施CSS3虽然它还未成为真正的标准但却提供了针对浏览器的前缀: Chrome(谷歌浏览器):-webkit- Safari(苹果浏览器):-webkit- Firefox(火狐浏览器):-moz- lE(IE浏览器):-ms- Opera(欧鹏浏览器):-0- 例如CSS3渐变样式在Firefox和Safari中是不同的。Firefox使用-moz-linear-gradient而Safari使用-webkit-gradient这两种语法都使用了厂商类型的前缀。
需要注意的是在使用有厂商前缀的样式时也应该使用无前缀的。这样可以保证当浏览器移除了前缀使用标准CSS3规范时样式仍然有效。 三、实现 Html5 和 Css3 兼容性的JS进行归纳如下 1、html5shiv.js
解决ie9以下浏览器对html5新增标签的不识别并导致CSS不起作用的问题。 使用
!--[if lt IE 9]
script typetext/javascript srchttp://www.ijquery.cn/js/html5shiv.js/script
![endif]--
GitHub下载 https://github.com/aFarkas/html5shiv/releases 2、respond.js:
Respond.js 是一个快速、轻量的 polyfill用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性实现响应式网页设计Responsive Web Design。
使用
!--[if lt IE 9]script src//cdn.bootcss.com/respond.js/1.4.2/respond.js/script![endif]—
注意事项
1.1、由于浏览器的安全规则问题Respond.js 不能通过 file:// 协议打开本地HTML文件所用的协议访问的页面上发挥正常的功能。如果需要测试IE8下面的Respond.js 响应式特性必须用http服务器例如apache、nginx托管HTML页面才可以。
1.2、Respond.js 不支持通过 import 引入的CSS文件。例如Drupal 一般被配置为通过 import 引入CSS文件Respond.js对其将无法起到作用。
1.3、IE8不能完全支持box-sizing: border-box;与min-width、max-width、min-height或max-height一同使用。由于此原因从Bootstrap v3.0.1版本开始我们不再为.container使用max-width。
1.4、另一种让ie8及以下支持css3媒体查询的css3-mediaqueries.js 像上面引入也可但是会出现闪屏 不是特别推荐使用 上面是最常用的 GitHub下载https://github.com/scottjehl/Respond 3、background-size-polyfill.htc :
使用该文件能够让 IE7、IE8 支持 background-size 属性。其原理是创建一个 img 元素插入到容器中并重新计算宽度、高度、left、top 等值模拟 background-size 的效果。
使用如下
.selector { background-size: cover; behavior: url(/backgroundsize.min.htc); -ms-behavior: url(/backgroundsize.min.htc);
} 也可以通过滤镜filter实现如下
body {background: url() no-repeat center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src, sizingMethodscale);-ms-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src, sizingMethodscale);
}但是使用滤镜filter实现IE8下的background-size 属性效果时 局限性如下
引用图片不能透明的否则会出现双层图片的效果
不能指定任意大小background百分比可用cover
用于单张图片不能使用图片精灵等拼图
要引用绝对路径图片 GitHub下载https://github.com/louisremi/background-size-polyfill/blob/gh-pages/backgroundsize.min.htc 4、Normalize.css
不同浏览器的默认样式存在差异可以使用 Normalize.css 抹平这些差异。当然也可以使用 reset.css 使用normalize.css有下几个优点 保护有用的浏览器默认样式而不是完全去掉它们一般化的样式为大部分HTML元素提供修复浏览器自身的bug并保证各浏览器的一致性优化CSS可用性用一些小技巧解释代码用注释和详细的文档来下载链接https://pan.baidu.com/s/1Yrv743iwuRZ7XmzZYknFxg 提取码hevm 5、ie-css3.htc:
是一个可以让IE低版本如IE6/7/8浏览器支持部份CSS3属性的htc文件比如盒阴影box-shadow、圆角属性border-radius、文字阴影属性text-shadow 。
实现原理VML是The Vector Markup Language(矢量可标记语言)的缩写。VML用于将图形数据矢量化的标记语言。这是一种基于 XML 语法的语言由 AutoDesk 、 Macromedia 和 Microsoft 和 HP 公司向 W3C 提出的方案。VML相当于IE里面的画笔能实现你所想要的图形而且结合脚本可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的。可以理解为VML是IE浏览器的御用画笔专门给IE作画用的。于是呢IE私生子htc加上IE私有画笔VML就可以实现一些IE专有的图形与表现了正好可以就此实现一些IE不支持的CSS3效果。
使用步骤样式中增加 behavior: url(项目绝对路径ie-css3.htc);类似background-size-polyfill.htc的使用 注意事项 当前元素一定要有定位属性position:relative或position:absolute。 z-index值一定要比周围元素的要高
http协议访问
原生IE浏览器访问兼容模式显示可能没效果。
支持样式 border-radius 只设置一个角落的圆角属性时无效
box-shadow 只支持#(000黑色阴影
text-shadow IE下样式表现与Firefox/Safari/Chrome存在差异。 GitHub下载https://github.com/lc133/ie-css3.htc 5、pie.htc :
用CSS的behavior行为可以调用此文件然后让IE6\7\8也能实现一些常见的CSS3效果如圆角(border-radius)盒阴影(box-shadow)背景渐变(gradient)多图片背景(multiple background images)、透明度(rgba)。 使用如下实现线性渐变
.demo{height: 100px ;width:200px;background:linear-gradient(90deg,#00FFFF,#0000FF);-pie-background:linear-gradient(0,#00FFFF,#0000FF);behavior: url(static_resources/PIE.htc);
}实现原理上类似ie-css.htcIE下这些CSS3效果实现是借助于VML由VML绘制圆角或是投影效果的容器元素然后这个容器元素作为目标元素的后兄弟节点插入如果目标元素position:absolute 或是 position:relative则这个css3-container元素将会设置与之一样的z-index值在DOM tree中同级的元素总是后面的覆盖前面的所以这样就会覆盖。解决方式是设置目标元素position:relative或是设置祖先元素position:relative并赋予一个z-index值不可为-1 注意事项
border-image(IE6/7/8只会以stretch的形式进行填充即使border-image-repeat属性是repeat和round)
使用绝对路径
PIE不支持border-top-left-radius表示左上圆角的缩写方式
在服务器上提供 htc文件的MIME 配置类型 官方下载http://css3pie.com/ 6、cssSandpaper库
cssSandpaper是一个CSS3的JavaScript库使用特定的CSS书写规则可以让页面元素支持CSS3的一些特性例如旋转拉伸盒阴影渐变等效果包括IE浏览器。由于cssSandpaper实现IE下的CSS3效果全部都是使用的filter滤镜实现的所以其中就有不少局限性例如IE中没有支持圆角的滤镜所有cssSandpaper无法实现圆角效果同样的原因IE浏览器下box-shadow没有模糊过渡不支持径向渐变等。然而还是可以实现不少炫酷的效果的。
一旦调用了cssSandpaper CSS3 JavaScript库文件后实现CSS3效果的调用也比较特别需要使用特定的前缀样式写法而且很重要的是cssSandpaper支持JavaScript也就是说可以通过js设置动态改变各个浏览器包括IECSS3表现这往往可以用来实现一些精湛的UI表现。
下载及使用参考https://www.zhangxinxu.com/wordpress/2010/05/csssandpaper-%E5%85%BC%E5%AE%B9ie%E7%9A%84css3-javascript%E5%BA%93/ 参考网址
https://blog.csdn.net/enweitech/article/details/80802677
https://www.zhangxinxu.com/wordpress/2010/05/csssandpaper-%E5%85%BC%E5%AE%B9ie%E7%9A%84css3-javascript%E5%BA%93/
