• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5 CSS3新的WEB标准和浏览器支持

HTML5 CSS3新的WEB标准和浏览器支持

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含HTML5,CSS3等相关知识,佚名 希望在学习及工作中可以帮助到您
由于是源自笔记,对每个条目我只会列出称呼和语法特征,暂时没时间写详细的解释和可执行的示例,但是会给出相关的文档地址,除了列出已经支持该特性的浏览器,也会为不支持的浏览器提供替代/过渡的实现。好罢这篇本来是我私下做的笔记,我特别喜欢在Evernote上做备忘的笔记,虽然上次看到漏屋老师的文章里说我现在的年龄才刚刚进入记忆力的巅峰期……但是我的自信心仍然屡受打击!比如跟别人讨论The Dark Knight里小丑在医院对检察官说了什么让他变成双面人,我一句对白都想不起来,还有big bang theory s2里penny玩age of conan时的人物名字是”Queen Penelope”,我看的时候印象很深,一个月后就连奥德赛都想不起来了。留份笔记总觉得心里踏实些……啊又跑题了

本文整理了一些最重要(或者说人气比较高罢)的新标准,虽然它们多数还只是w3c的草案,离Recommendation级别还早,却已经成为新一轮浏览器大战中备受追捧的明星,开发者社区里也涌现出大量相关的demo和API封装,有些已经进入生产环境(比如google在iphone上实现的gmail离线应用),其实我觉得如今的web领域里,从厂商私有技术转换成委员会标准再转换成通用技术产生杀手级应用的周期已经显著的加速了,是因为现在web application的需求太高了么…… UPDATE:刚才在solidot发软文的时候我突然想明白怎么表述这个问题:其实现在很多浏览器厂商同时也是基于浏览器的应用开发者和web标准的制定者,就好像修筑舞台的工程师同时也是舞台上的演员和舞蹈动作的导演一样,所以google, mozilla, apple们都在不遗余力的实现那些有利于开发web应用的技术标准,即时它们还是W3C Working Draft,相比之下IE team就比较缺乏动力,果然计划经济缺乏活力亚XD……

由于是源自笔记,对每个条目我只会列出称呼和语法特征,暂时没时间写详细的解释和可执行的示例,但是会给出相关的文档地址,除了列出已经支持该特性的浏览器,也会为不支持的浏览器提供替代/过渡的实现。

===================废话结束的分割线=======================

CSS3 Media queries

对整个外链css文件和部分css代码使用的媒体类型侦测,人气高的原因显然是因为移动设备……

  1. <link media=“all and (orientation:portrait)” src="screen.css" type="text/css">
  1. @media all and (min-color: 4) { ... }

w3c标准:http://www.w3.org/TR/css3-mediaqueries/
MDC文档:https://developer.mozilla.org/En/CSS/Media_queries
Opera文档:http://www.opera.com/docs/specs/css/

支持:Firefox 3.5+, Safari 3+, Opera 7+

CSS3 2D Transforms

css变形,有人用这个实现伪3d效果以及旋转效果的jquery插件

  1. -moz-transform: rotate(-45deg) skew(15deg, 15deg);
  1. sprite.style['-webkit-transform'] = 'rotate(' + v + 'rad)';

w3c标准:http://www.w3.org/TR/css3-2d-transforms/
MDC文档:https://developer.mozilla.org/En/CSS/CSS_transform_functions
webkit博客的介绍: http://webkit.org/blog/130/css-transforms/

支持:Firefox 3.5+, Safari 3.1+
替代/过渡:IE5.5+ Matrix Filter http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx

CSS3 Transitions and CSS Animations

备受期待的css动画,webkit团队提出的草案,transition实现简单的属性渐变,animation定义更复杂的动画效果

  1. transition-property: width;
  2. transition-duration: 1s;
  3.  
  4. animation-name: 'diagonal-slide';
  5. animation-duration: 5s;
  6. animation-iteration-count: 10;
  7. @keyframes 'diagonal-slide' {}

w3c标准:http://www.w3.org/TR/css3-transitions/
w3c标准:http://www.w3.org/TR/css3-animations/
webkit博客的介绍:http://webkit.org/blog/138/css-animation/
约翰同学的介绍:http://ejohn.org/blog/css-animations-and-javascript/

支持:Safari 3.1+

CSS3 Downloadable fonts

能在网页里嵌入任意字体是设计师的梦想……不过这里支持的也仅限truetype和opentype

  1. @font-face {}

w3c标准:http://www.w3.org/TR/css3-fonts/#font-resources
MSDN文档:http://msdn.microsoft.com/en-us/library/ms530303(VS.85).aspx
MDC文档:https://developer.mozilla.or

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03HTML5游戏框架cnGameJS开发实录-基本图形模块篇
  • 2018-12-03详细介绍HTML5 12个设计小技巧(图文)
  • 2017-08-06HTML5 新事件 小结
  • 2018-12-03HTML5游戏框架cnGameJS开发实录-实现动画原理
  • 2017-08-06HTML5标签使用方法详解
  • 2018-12-03浅谈HTML5的未来发展
  • 2018-12-03微信如何实现向浏览器注入JS API,并且调用方式就像浏览器原生API一样?
  • 2018-12-03HTML5的classList属性操作CSS类的使用详解
  • 2018-12-03HTML5 会不会代替 Flash 作为 Web game 的开发语言?
  • 2018-12-03html5中canvas图表实现柱状图的示例

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • H5实现桌面通知以及提示功能的实例
    • HTML5实战与剖析之是否从主屏幕图标进入的网站
    • 将你怎样将 HTML5 性能发挥到极致
    • cookie的具体使用方法
    • Html5 Canvas初探学习笔记(6) -变换
    • 为什么视频网站在桌面端依然采用Flash而不是HTML5?
    • HTML5+lufylegend实现游戏中的卷轴
    • HTML5 创建canvas元素示例代码_html5教程技巧
    • HTML5仿手机微信聊天界面_html5教程技巧
    • Websocket 协议解析

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有