HTML5和css3新特性 === 前端常见浏览器兼容性问题解决方案

HTML5新增加了图像、位置、存储、多任务等功能。

新增元素：

1. canvas
2. 用于媒介回放的video和audio元素
3. 本地离线存储。localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除
4. 语意化更好的内容元素，比如 article footer header nav section
5. 位置API：Geolocation
6. 表单控件，calendar date time email url search
7. 新的技术：web worker(web worker是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行) web socket
8. 拖放API：drag、drop

移除的元素：

1. 纯表现的元素：basefont big center font s strike tt u
2. 性能较差元素：frame frameset noframes

兼容性问题:

1. 比如音频视频的兼容性,设定source标签来设置多个多媒体格式,适配不同的浏览器
2. 使用多重背景来适配,提高兼容性
3. 使用条件注释,比如:`<!--[if lt IE 9]><script> src="http://XXXhtml5.js"</script><![endif]-->`

区分：

1. DOCTYPE声明的方式是区分重要因素
2. 根据新增加的结构、功能来区分

.CSS3新特性：

1. 颜色：新增RGBA，HSLA模式
2. 文字阴影（text-shadow）
3. 边框： 圆角（border-radius）边框阴影： box-shadow
4. 盒子模型：box-sizing
5. 背景：background-size 设置背景图片的尺寸background-origin 设置背景图片的原点background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局
6. 渐变：linear-gradient、radial-gradient
7. 过渡：transition，可实现动画
8. 自定义动画
9. 在CSS3中唯一引入的伪元素 ：selection.
10. (43条消息) CSS3 ::selection 选择器_man_tutu的博客-CSDN博客https://blog.csdn.net/man_tutu/article/details/54965087?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165724358616782248547188%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=165724358616782248547188&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-54965087-null-null.142^v32^pc_rank_34,185^v2^control&utm_term=css3%20selection&spm=1018.2226.3001.4187
11. 媒体查询，多栏布局
12. border-image
13. 2D转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y)
14. 3D转换

14.新增选择器：属性选择器、伪类选择器、伪元素选择器。

(42条消息) HTML5和css3新特性 === 前端常见浏览器兼容性问题解决方案_殘血★戰狼王的博客-CSDN博客https://blog.csdn.net/WLIULIANBO/article/details/110671360?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165698825516780357231628%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=165698825516780357231628&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-110671360-null-null.142%5Ev30%5Econtrol,185%5Ev2%5Econtrol&utm_term=css3%E6%96%B0%E5%B1%9E%E6%80%A7%EF%BC%8C%E5%8A%A0%E6%B5%8F%E8%A7%88%E5%99%A8%E5%89%8D%E7%BC%80%E5%85%BC%E5%AE%B9%E6%97%A9%E6%9C%9F%E6%B5%8F%E8%A7%88%E5%99%A8&spm=1018.2226.3001.4187