amazeui学习笔记一(开始使用3)--兼容性列表compatibility
amazeui学习笔记一(开始使用3)--兼容性列表compatibility
一、总结
1、不要用ie做前端测试,不要碰ie,尽量用google 浏览器: 按照微软官方的说法,IE 开发者工具中的浏览器模式也不一定靠谱;
2、 amazeui的浏览器支持情况:amazeui对google浏览器的支持是最最最最好的:amaze ui也支持最新版的ie,特别老的版本6789支持不好
二、兼容性列表compatibility
Compatibility
目录
- 分级浏览器支持(GBS)
- 关于 IE 6/7
Amaze UI 面向现代浏览器开发,对 IE 8/9 等浏览器只提供有限的支持。
注意:
- 请不要使用
IETester
这种不靠谱的工具测试; - 按照微软官方的说法,IE 开发者工具中的浏览器模式也不一定靠谱;
- 微软官方提供了各种 IE 测试虚拟机。
分级浏览器支持(GBS)
GBS 是 YUI 团队提出的应对日益增长的浏览器兼容问题的思路,详情可以查看 YUI 相关页面。
Amaze UI GBS 描述
- A 级:最高支持级别,充分利用 H5 和 CSS3 等技术,提供最优的视觉和交互效果。
- B 级:有限支持,基本的样式和正常的交互,不考虑视觉、交互效果。
- C 级:核心支持,显示语义化的 HTML 标记渲染的内容,不考虑样式和行为。
- X 级:未知、零散的很少使用或已经停止开发的浏览器,可能不支持,也可能支持。
Amaze UI GBS
按照国际惯例,Amaze UI 提供对主流浏览器(系统)最近两个稳定版本的全面支持。结合国内实际情况,一些浏览器的支持缩减为最新正式版,IE 则对更老版本做了有限支持。
Amaze UI 对浏览器做了一个粗略分级,优先支持 A 级浏览器。
由于资源有限,无法列出所有的浏览器,使用 WebKit
的浏览器只要不乱修改内核,理论上应该都支持。
关于浏览器功能支持的更多细节请参考 Can I use(UC 浏览器的数据已经被收录,不知是喜是忧)。
OS/Browser | Ver | Windows | iOS(7.1.2+) | OS X (10.9+) | Android (4.1+) | WP(8+) |
---|---|---|---|---|---|---|
Chrome | L2 | A | A | A | A | N/A |
IE | 10+ | A | N/A | N/A | N/A | A- |
9 | B | N/A | N/A | N/A | N/A | |
8 | C+ | N/A | N/A | N/A | N/A | |
lte7 | C | N/A | N/A | N/A | N/A | |
Firefox | L2 | A | N/A | A | X | N/A |
Safari | L2 | X | A | A | N/A | N/A |
Opera | L1 | X | N/A | N/A | X | N/A |
Opera Coast | L1 | N/A | A | N/A | N/A | N/A |
Opera Mini | L1 | N/A | X | N/A | X | X |
Stock1 | L1 | N/A | N/A | N/A | X | N/A |
UC 浏览器 | L1 | X | A | N/A | A | A- |
360浏览器 | L1-极速 | A- | X | N/A | X | N/A |
L1-IE8 | C+ | N/A | N/A | X | N/A | |
搜狗浏览器 | L1-极速 | A- | N/A | N/A | N/A | N/A |
L1-IE8 | C+ | N/A | N/A | N/A | N/A | |
FF Mobile | L1 | N/A | N/A | N/A | X | N/A |
注释:
L
代表last
,L2
- 最新的两个稳定版本;L1
- 最新稳定版本。1
安卓系统自动浏览器,由于部分厂商对浏览器做了修改,列为 X 级。
参考链接:
- iOS Version Stats
IE 8/9
- IE 8/9 不支持
transition
,看不到任何动画效果; - IE 9 对 ES5 支持相对较好,引入完整的
amazeui.js
不会报错,IE 8 则不然; - Web 组件部分不提供 IE 8/9 官方支持。
有限支持 IE 8/9 的 JS 插件:
- 警告框(Alert);
- 按钮交互(Button);
- 折叠面板(Collpase);
- 下拉组件(Dropdown);
- 模态窗口(Modal);
- 弹出框(Popover);
- 图片轮播(Slider);
- 侧边栏(OffCanvas);
- 滚动侦测(ScrollSpyNav);
- 固定元素(Sticky);
- 选项卡(Tabs);
功能 | IE 8 | IE 9 |
---|---|---|
border-radius
|
NO | YES |
box-shadow
|
NO | YES |
transform
|
NO |
YES(-ms 前缀)
|
Flex Box
|
NO | |
transition
|
NO | |
placeholder
|
NO |
IE 8
需要支持 IE 8 的用户请使用条件注释引入amazeui.legacy.js
amazeui.ie8polyfill.min.js
。
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <!--<![endif]--> <!--[if lt IE 9]> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script> <script src="assets/js/amazeui.ie8polyfill.min.js"></script> <![endif]--> <script src="assets/js/amazeui.js"></script>
amazeui.ie8polyfill.js
中包含以下 polyfill:
- Console-polyfill
- es5-shim
- es5-sham
- EventListener Polyfill
- REM-unit-polyfill
- Respond.js
HTML5 新元素
以下任意引入一个即可,Amaze UI 官网引的是 Modernizr。
- Modernizr
- HTML5 Shiv
Media Query
- Respond.js
rem
- REM unit polyfill
box-sizing
IE 8 ignores
box-sizing: border-box
if min/max-width/height is used.
伪元素
IE 8 只支持 CSS 2.1 规范中的单冒号语法(:before
/:after
),不支持 CSS3 的双冒号语法(::before
/::after
)。
字体图标
参见 Bootstrap 中的 issue 及里面提供的解决方法。
关于 IE 6/7
Amaze UI 不会支持 IE 6~7。
Issue 列表
- CSS: Font ICON 在部分设备中不显示closed
- JS: Dropdown 部分浏览器中收回去的时候闪烁
转载于:https://www.cnblogs.com/Renyi-Fan/p/9001578.html
amazeui学习笔记一(开始使用3)--兼容性列表compatibility相关推荐
- amazeui学习笔记--css(常用组件4)--关闭按钮Close
amazeui学习笔记--css(常用组件4)--关闭按钮Close 一.总结 1.关闭按钮基本用法:关闭按钮样式,可以结合其他不同组件使用.对 <a> 或者 <button> ...
- amazeui学习笔记--css(HTML元素2)--代码Code
amazeui学习笔记--css(HTML元素2)--代码Code 一.总结 1.行内代码:code标签<code> 2.代码片段:pre标签<pre> 3.限制代码块高度:添 ...
- amazeui学习笔记--css(基本样式)--样式统一Normalize
amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...
- amazeui学习笔记--css(HTML元素4)--图片image
amazeui学习笔记--css(HTML元素4)--图片image 一.总结 1.响应式图片:随着页面宽度而变化 .am-img-responsive class. <img src=&quo ...
- amazeui学习笔记--css(布局相关3)--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
- amazeui学习笔记一(开始使用4)--Web App 相关
amazeui学习笔记一(开始使用4)--Web App 相关 一.总结 1.桌面图标(Touch icon)解决方案:终极方案:link标签的rel和href属性: <link rel=&qu ...
- amazeui学习笔记--css(基本样式3)--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
- amazeui学习笔记--css(常用组件1)--小徽章Badge
amazeui学习笔记--css(常用组件1)--小徽章Badge 一.总结 1.am-badge:添加am-badge来声明小徽章对象 <span class="am-badge a ...
- amazeui学习笔记二(进阶开发4)--JavaScript规范Rules
amazeui学习笔记二(进阶开发4)--JavaScript规范Rules 一.总结 1.注释规范总原则: As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性. ...
最新文章
- ML_SVM的菜鸟实现
- 使用Linq Xml 来读取一个目录下所有的文件并保存为Xml文档
- java 方法 示例_Java Collectionsfrequency()方法与示例
- 【Redis】Redis 使用 redisson 做分布式锁 复盘 maven 依赖 netty 冲突
- 406.根据身高重建队列(JavaScript)
- beyond——实验吧
- Aberrant DSP SketchCassette II Mac(磁带混音效果插件)
- elasticsearch 7.0.1 + kibana + elasticsearch-analysis-ik 7.0.0 安装和配置过程中问题备忘录...
- 大型网站架构系列:负载均衡详解
- 可以嵌入ppt的课堂点名器_利用Python实现课堂点名器!辅导员大大的夸赞了我!...
- 使用Mockito创建Mcok和Spy
- Android中的UID和AppId
- BeagleBone Black 从零到一 (2 MLO、U-Boot)
- TFT-LCD液晶显示器的工作原理
- matlab 投影法,梯度投影法 MATLAB程序可执行
- CTF MISC解题思路BUUCTF MISC1-8刷题
- 五种3DMAX使用版本区别比较(一)
- python怎么返回上一步操作_一步一步教你如何用python操作mysql
- create-react-app配置总结
- python二级考试题详解
热门文章
- 「非编软件」达芬奇非编软件升级为付费版的6个理由
- 上帝公式_感谢上帝的空白
- pythonxy官网下载_GitHub - leior/codeparkshare: Python初学者(零基础学习Python、Python入门)书籍、视频、资料、社区推荐...
- 假设检验——KS检验、t检验、卡方检验
- 英语思维导图大全 动词(九)
- 盘后股价应声下跌1.54% 电信业“亚马逊“Twilio路在何方?
- CSS 图片边框的处理
- 不懂就问,希望大能可以解答
- Android Audio代码分析(4): audiohalservice 启动
- EnterCriticalSection讲解