HTML5和css3新特性
css3新特性
1、选择器
2、背景和边框
3、文本效果
4、2D/3D 转换 — 变形(transform)、过渡(transtion)、动画(animation)
1. 选择器
常规选择器:
:last-child /* 选择元素最后一个孩子 */
:first-child /* 选择元素第一个孩子 */
:nth-child(1) /* 按照第几个孩子给它设置样式 */
:nth-child(even) /* 按照偶数 */
:nth-child(odd) /* 按照奇数 */
:disabled /* 选择每个禁用的dom元素 */
:checked /* 选择每个被选中的dom元素 */
:not(selector) /* 选择非 selector 元素的每个元素 */
::selection /* 选择被用户选取的元素部分 */
伪类和伪元素:
根本区别在于它们是否创造了新的元素(抽象)
伪类:用于向某些选择器添加特殊的效果(没有创建新元素)
:last-child /* 选择元素最后一个孩子 */
:first-child /* 选择元素第一个孩子 */
:nth-child(1) /* 按照第几个孩子给它设置样式 */
a:link {
color: #FF0000} /* 未访问的链接 */
a:visited {
color: #00FF00} /* 已访问的链接 */
a:hover {
color: #FF00FF} /* 鼠标移动到链接上 */
a:active {
color: #0000FF} /* 选定的链接 */
伪元素:创建了 html 中不存在的元素,用于将特殊的效果添加到某些选择器
::before {
} /* 选择器在被选元素的前面插入内容和定义css,
使用 content 属性来指定要插入的内容。 */
::after {
} /* 选择器在被选元素的后面插入内容和定义css,
使用 content 属性来指定要插入的内容。 */
:first-letter /* 选择该元素内容的首字母 */
:first-line /* 选择该元素内容的首行 */
::selection /* 选择被用户选取的元素部分 */
2. 背景和边框
背景:
background-size:规定背景图片的尺寸(cover:填充;100% 100%:拉伸)
background-origin:规定背景图片的定位区域 对于 background-origin 属性,有如下属性 背景图片可以放置于
content-box、padding-box 或 border-box 区域
边框:
border-radius:圆角
box-shadow / text-shadow:阴影
border-image:边框图片
3. 文本效果
属性 | 描述 |
---|---|
text-shadow | 向文本添加阴影 |
text-justify | 规定当 text-align 设置为 “justify” 时所使用的对齐方法 |
text-emphasis | 向元素的文本应用重点标记以及重点标记的前景色 |
text-outline | 规定文本的轮廓 |
text-overflow | 规定当文本溢出包含元素时发生的事情 |
text-wrap | 规定文本的换行规则 |
word-break | 规定非中日韩文本的换行规则 |
word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行 |
text-decoration | 文本修饰符:overline、line-through、underline 分别是上划线、中划线、下划线 |
变形transform
变形有rotate旋转、scale缩放、translate位移、skew倾斜
过渡transition
过渡transition是一个复合属性,可以同时定义transition-property、transition-duration、transition-timing-function、transition-delay子属性值
一般写在一起:
div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
动画animation
动画的使用,首先通过@(-webkit-)keyframes 定义动画名称及动画的行为,再通过animation属性设置动画特征相关值进行调用
.myClass {
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-o-animation-name: fadeIn;
-ms-animation-name: fadeIn;
animation-name: fadeIn; /* 不带前缀的放到最后 */
}
/* 复杂属性 keyframes */
@-webkit-keyframes fadeIn {
0% {
opacity: 0; } 100% {
opacity: 0; }
}
@-moz-keyframes fadeIn {
0% {
opacity: 0; } 100% {
opacity: 0; }
}
@-o-keyframes fadeIn {
0% {
opacity: 0; } 100% {
opacity: 0; }
}
@-ms-keyframes fadeIn {
0% {
opacity: 0; } 100% {
opacity: 0; }
}
/* 不带前缀的放到最后 */
@keyframes fadeIn {
0% {
opacity: 0; } 100% {
opacity: 0; }
}
这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-、-moz-、-ms-、-o-)
H5 新特性
1. h5新增特性:
语义化标签:header、footer、section、nav、aside、article
增强型表单:input 的多个 type
新增表单属性:placehoder、required、min 和 max
音频视频:audio、video
canvas 画布
地理定位
拖拽
本地存储:
localStorage 没有时间限制的数据存储;
sessionStorage, session 的数据存储,当用户关闭浏览器窗口后,数据会被删除
新事件:onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
WebSocket:建立持久通信协议
2. 语义化标签
标签 | 描述 |
---|---|
header | 定义了文档的头部区域 |
footer | 定义了文档的尾部区域 |
nav | 定义文档的导航 |
section | 定义文档中的节(section、区段) |
article | 定义页面独立的内容区域 |
aside | 定义页面的侧边栏内容 |
dialog | 定义对话框,比如提示框 |
3. 表单类型增强
HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证
input 的 type | 描述 |
---|---|
color | |
date | 从一个日期选择器选择一个日期 |
datetime 选择一个日期(UTC 时间) | |
包含 e-mail 地址的输入域 | |
month | 选择一个月份 |
number | 数值的输入域 |
range | 一定范围内数字值的输入域 |
search | 用于搜索域 |
tel | 定义输入电话号码字段 |
time | 选择一个时间 |
url | URL 地址的输入域 |
week选择周和年
4. html5 新增的表单属性
表单属性 | 描述 |
---|---|
placehoder | 简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示,在用户输入后消失 |
required | 是一个 boolean 属性。要求填写的输入域不能为空 |
pattern | 描述了一个正则表达式用于验证 input 元素的值 |
min 和 max | 设置元素最小值与最大值 |
step | 为输入域规定合法的数字间隔 |
height 和 width | 用于 image 类型的 input 标签的图像高度和宽度 |
autofocus | 是一个 boolean 属性。规定在页面加载时,域自动地获得焦点 |
multiple | 是一个 boolean 属性。规定 input 元素中可选择多个值 |
5. html5 新事件
事件 | 描述 |
---|---|
onresize | 当调整窗口大小时触发 |
ondrag | 当拖动元素时触发 |
onscroll | 当滚动元素滚动元素的滚动条时触发 |
onmousewheel | 当转动鼠标滚轮时触发 |
onerror | 当错误发生时触发 |
onplay | 当媒介数据将要开始播放时触发 |
onpause | 当媒介数据暂停时触发 |
前端常见浏览器兼容性问题解决方案
前言:
不同浏览器的内核不尽相同,所以各个浏览器对网页的解析存在一定的差异。
浏览器内核主要分为两种,一是渲染引擎,另一个是js 引擎
所以浏览器兼容性问题一般指:css兼容、js兼容
浏览器 | 内核(渲染引擎) |
---|---|
Chrome谷歌 | 之前Webkit,已改Blink内核 |
FireFox火狐 | Gecko |
Safari苹果 | Webkit |
IE | Trident |
Opera欧朋 | 现已改用Google Chrome的Blink内核 |
1. 不同浏览器的标签默认的margin和padding不同
问题症状: 随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。
碰到频率: 100%
解决方案:
CSS里 *{margin:0;padding:0;}
但是性能不好
一般我们会引入reset.css样式重置;
备注: 这个是最常见的也是最易解决的一个浏览器兼容性问题,所有的CSS文件开头都会用样式重置各个标签的内外补丁是0。
2. css3新属性,加浏览器前缀兼容早期浏览器
-moz-
/* 火狐浏览器 /
-webkit-
/ Safari,谷歌浏览器等使用Webkit引擎的浏览器 /
-o-
/ Opera浏览器(早期) /
-ms-
/ IE */`
哪些css3属性需要加:
定义关键帧动画 @keyframes
css3中的变形(transform)、过渡(transtion)、动画(animation)
border-radius 圆角
box-shadow 盒子阴影
flex 弹性布局
....
使用:
.myClass {
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-o-animation-name: fadeIn;
-ms-animation-name: fadeIn;
animation-name: fadeIn; /* 不带前缀的放到最后 */
}
/* 复杂属性 keyframes */
@-webkit-keyframes fadeIn {
0% {
opacity: 0; } 100% {
opacity: 0; }
}
@-moz-keyframes fadeIn {
0% {
opacity: 0; } 100% {
opacity: 0; }
}
@-o-keyframes fadeIn {
0% {
opacity: 0; } 100% {
opacity: 0; }
}
@-ms-keyframes fadeIn {
0% {
opacity: 0; } 100% {
opacity: 0; }
}
/* 不带前缀的放到最后 */
@keyframes fadeIn {
0% {
opacity: 0; } 100% {
opacity: 0; }
}
3. 块属性标签float后,又有横行的margin情况下,IE 浏览器margin加倍的问题
问题症状: 常见症状是IE6中后面的一块被顶到下一行
解决方案: 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;
<divid=”imfloat”>
相应的css为
# imfloat{
float:left;
margin:5px;//IE下理解为10px
display:inline;//IE下再理解为5px}
备注: 我们最常用的就是div+CSS布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。
4. 设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度
问题症状: 设置div高度小于10px,IE6、7和遨游里div的高度,超出自己设置的10px.
碰到频率: 60%
解决方案:
给超出高度的标签设置overflow:hidden;
或者设置行高line-height 小于你设置的高度。
备注: 这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度
。即使你的标签是空
的,这个标签的高度还是会达到默认的行高
。
5. 行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug
问题症状: IE6里的间距比超过设置的间距
碰到几率: 20%
解决方案: 在display:block;
后面加入display:inline;display:table;
备注: 行内属性标签,为了设置宽高,我们需要设置display:block;(除了input/img标签比较特殊)。在用float布局并有横向的margin后,在IE6下,他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe
6. IE浏览器div最小宽度和高度的问题
问题症状: IE浏览器div最小宽度和高度不生效
IE不认得min-
这个定义,但实际上它把正常的width
和height
当作有min
的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width
和min-height
的话,IE下面根本等于没有设置宽度和高度。
比如要设置背景图片,这个最小宽度是比较重要的。要解决这个问题,可以这样:
#box{
width: 80px;
height: 35px;
}
html>body #box{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}
7. 超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序L-V-H-A
Code:
<style type="text/css">
a:link {
}
a:visited {
}
a:hover {
}
a:active {
}
</style>
8. 图片默认有间距
问题症状: 几个img标签放在一起的时候,有些浏览器会有默认的间距,通配符清除间距也不起作用。
碰到几率: 20%
解决方案: 使用float属性为img布局(所有图片左浮)
备注: 因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。
9. css hack解决浏览器兼容性
不同浏览器,识别不同的样式,csshack本身就是处理浏览器兼容的。
下面是css hack写法:
background-color:yellow0; 0 是留给ie8的
+background-color:pink; + ie7定了;
_background-color:orange; _专门留给神奇的ie6;
二、js兼容
1. 事件绑定
IE:dom.attachEvent();
标准浏览器: dom.addEventListener(‘click',function(event){},false);
标准浏览器采用事件捕获的方式对应IE的事件冒泡机制(即标准由最外元素至最内元素或者IE由最内元素到最外元素)最后标准方亦觉得IE这方面的比较合理,所以便将事件冒泡纳入了标准,这也是addEventListener第三个参数的由来,而且事件冒泡作为了默认值第三值默认false,表示事件冒泡方式。
如果浏览器不支持addEventListener()
方法, 你可以使用 attachEvent()
方法替代。
以下实例演示了跨浏览器的解决方法:
var x = document.getElementById("myBtn");
if (x.addEventListener) {
//所有主流浏览器,ie9+
x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
// IE 8 及更早 IE 版本
x.attachEvent("onclick", myFunction);
}
2. event事件对象问题
document.onclick=function(ev){
//谷歌火狐的写法,IE9以上支持,往下不支持;
var e=ev;
console.log(e);
}
document.onclick=function(){
//谷歌和IE支持,火狐不支持;
var e=event;
console.log(e);
}
document.onclick=function(ev){
//兼容写法;
var e=ev||window.event;
var mouseX=e.clientX;//鼠标X轴的坐标
var mouseY=e.clientY;//鼠标Y轴的坐标
}
2. event.srcElement(事件源对象)问题
IE:event
对象有srcElement
属性,但是没有target
属性;
Firefox: event
对象有target
属性,但是没有srcElement
属性。
解决方法:
srcObj = event.srcElement?event.srcElement:event.target;
3. 获取元素的非行间样式值:
IE: dom.currentStyle[‘width’] 获取元素高度
标准浏览器:window.getComputedStyle(obj, null)['width'];
跨浏览器兼容解决方法:
// 获取元素属性值的兼容写法
function getStyle(obj,attr){
if(obj.currentStyle){
//兼容IE
obj.currentStyle[attr];
return obj.currentStyle[attr];
}else{
//非IE,
return window.getComputedStyle(obj, null)[attr];
}
}
4. 阻止事件冒泡传播:
//js阻止事件传播,这里使用click事件为例
document.onclick=function(e){
var e=e||window.event;
if (e.stopPropagation) {
e.stopPropagation();//W3C标准
}else{
e.cancelBubble=true;//IE....
}
}
5. 阻止事件默认行为:
//js阻止默认事件 一般阻止a链接href,form表单submit提交
document.onclick=function(e){
var e=e||window.event;
if (e.preventDefault) {
e.preventDefault();//W3C标准
}else{
e.returnValue='false';//IE..
}
}
6. ajax兼容问题
IE: ActiveXObject
其他: xmlHttpReuest
在IE6以前不是用XMLHttpRequest创建的,所以我们要兼容ie6以前的浏览器要判断他有没有XMLHttpRequest()
跨浏览器兼容解决方法:
<script>
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
//1.创建ajax对象
//只支持非IE6浏览器
var oAjax = null;
if(window.XMLHttpRequest){
oAjax = new XMLHttpRequest();
//alert(new XMLHttpRequest());
}else{
//只支持IE6浏览器
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
/*2.连接服务器,这里加个时间参数,每次访问地址都不一样,
浏览器就不用浏览器里的缓冲了,但但服务器那端是不解析这个时间的*/
oAjax.open("get","a.txt?t=" + new Date().getTime(),true);
//3.发送
oAjax.send(null);
//4.接受信息
oAjax.onreadystatechange = function(){
/*浏览器与服务器之间的交互,进行到哪一步了,
当等于4的时候,代表读取完成了*/
if(oAjax.readyState==4){
//状态码,只有等于200,代表接受完成,并且成功了
if(oAjax.status==200){
alert("成功" + oAjax.responseText);
}else{
alert("失败");
}
}
};
};
};
</script>