小总结
关于safari 浏览器 input圆角的解决方案
去除iOS safari 浏览器的input的圆角问题
-webkit-appearance: none;
border 阴影
.shadow--2dp{
box-shadow:0 2px 2px 0 rgba(0,0,0,.14),
0 3px 1px -2px rgba(0,0,0,.2),
0 1px 5px 0 rgba(0,0,0,.12);
}
.shadow--2dp {
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)
}
.shadow--3dp {
box-shadow: 0 3px 4px 0 rgba(0,0,0,.14),0 3px 3px -2px rgba(0,0,0,.2),0 1px 8px 0 rgba(0,0,0,.12)
}
.shadow--4dp {
box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2)
}
.shadow--6dp {
box-shadow: 0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12),0 3px 5px -1px rgba(0,0,0,.2)
}
.shadow--8dp {
box-shadow: 0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2)
}
.shadow--16dp {
box-shadow: 0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.2)
}
.shadow--24dp {
box-shadow: 0 9px 46px 8px rgba(0,0,0,.14),0 11px 15px -7px rgba(0,0,0,.12),0 24px 38px 3px rgba(0,0,0,.2)
}
CSS3 AnimateEnd 事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#myD{
margin: 25px;
width: 550px;
height: 100px;
background: orange;
position: relative;
font-size: 20px;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
</style>
</head>
<body>
<p>使用addEventListener()方法给div元素添加"animationstart事件、animationiteration事件、animationend事件</p>
<div id="myD" onclick="myFc()">点击这里开始播放动画</div>
</body>
<script>
var x = document.getElementById("myD");
// 使用JavaScript播放动画
function myFc() {
x.style.WebkitAnimation = "mymove 4s 2"; // 用于Chrome、 Safari、 Opera浏览器
x.style.animation = "mymove 4s 2"; // 标准语法
}
// Chrome、 Safari、 Opera
x.addEventListener("webkitAnimationStart", myStartFunction);
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
x.addEventListener("webkitAnimationEnd", myEndFunction);
// 标准语法
x.addEventListener("animationstart", myStartFunction);
x.addEventListener("animationiteration", myRepeatFunction);
x.addEventListener("animationend", myEndFunction);
function myStartFunction() {
this.innerHTML = "触发了animationstart事件 - 开始播放动画";
this.style.backgroundColor = "pink";
}
function myRepeatFunction() {
this.innerHTML = "触发了animationiteration事件 -动画重复播放了！";
this.style.backgroundColor = "lightblue";
}
function myEndFunction() {
this.innerHTML = "触发了animationend event occured -动画播放完毕";
this.style.backgroundColor = "lightgray";
}
</script>
</html>
<script>
$(function(){
var isIE78910=/mise/i.test(navigator.userAgent.toLowerCase());
var isIE11=/trident/i.test(navigator.userAgent.toLowerCase());
var isIE=(isIE78910 || isIE11);
// alert(isIE);
// console.log(isIE);
if(isIE){
$(".three-d-box").hide();
}
})();
</script>
javascript动态改变css3的animation
肖恩桂桂 a year ago
当需要在animation下动态计算keyframe水平或垂直方向的位移则比transition要麻烦许多,而且有诸多坑等着我们去踩.
动态改变keyframe
通过javascript动态改变animation的keyframe比较麻烦，造成此问题的原因也是受限于CSSOM的API,特别是定义了多个帧的frame时，js基本无法去在运行时动态改变,只能通过重写cssRule来实现
function findKeyframesRule(animName) {
var rule;
var ss = document.styleSheets;
for (var i = 0; i < ss.length; ++i) {
for (var x = 0; x < ss[i].cssRules.length; ++x) {
rule = ss[i].cssRules[x];
if (rule.name == animName && (rule.type== CSSRule.KEYFRAMES_RULE || ss[i].cssRules[j].type == CSSRule.WEBKIT_KEYFRAMES_RULE )){
return rule;
}
}
}
}
//删除旧的动画添加新的
function change(selector,animName)
{
var keyframes = findKeyframesRule(animName);
// 删除已经存在的开始和结束帧
keyframes.deleteRule("0%");
keyframes.deleteRule("100%");
var clientWidth = document.documentElement.clientWidth/2 || document.body.clientWidth/2 //此处为举例
keyframes.insertRule("0% { -webkit-transform: translate("+clientWidth+"px); }");
keyframes.insertRule("100% { -webkit-transform: translate(-"+clientWidth/2+"px); }");//结束移动屏幕一半
// 重新指定动画名字使之生效
document.querySelector(selector).style.webkitAnimationName = animName;
}
此段代码对于未跨域link引入的css是可以生效,但是对于跨域的css在chrome下findKeyframesRule会取不到cssRule,ss[i].cssRules会始终为null,原以为link标签加上crossorigin属性,然后css的response响应的header加上Access-Control-Allow-Origin: *会能取到值,可是chrome下依旧取不到,无奈谷歌到chromium的390947#issue才知道原因,即使设置了header,chrome也可能不会让js动态操作跨域的css,无奈只能放弃此条道路
重新插入新样式,覆盖旧样式
css的规则是权重相同的情况下,后面的定义的会覆盖前面的,因此我们只能动态的插入相应的新cssRule达到覆盖的目的
function addStylesheetRules (rules) {
var styleEl = document.createElement('style'),
styleSheet;
document.head.appendChild(styleEl);
// 获取样式
styleSheet = styleEl.sheet;
// 插入样式
for(var i=0;i<rules.length;i++){
styleSheet.insertRule(rules[i], styleSheet.cssRules.length);//后面一个参数表示插入位置的索引
}
}
addStylesheetRules(["body { color: white }","@-webkit-keyframes animName {
100% {
-webkit-transform: translateX(-"+clientWidth/2"px);
}
}"])
rem 自适应方式
- 能用transtion过渡就不用animation
- js操作animation的keyframe确实不是很方便,而且可能遭遇跨域问题,因此尽量能不用不用
- 如需要动态设置keyframe,建议动态构造新的style来覆盖旧的
//根据屏幕大小及dpi调整缩放和大小
(function() {
var scale = 1.0;
var ratio = 1;
if (window.devicePixelRatio >= 2) {
scale *= 0.5;
ratio = 2;
}
var text = '';
document.write(text);
document.documentElement.style.fontSize = 50ratio + "px";
})();
Mobile web page
去除阴影
input, textarea, button, a,label{ -webkit-tap-highlight-color:rgba(0,0,0,0); }
以下是规范建议，均是日常在开发当中的的一些经验，仅供参考。
一.头部声明
1、其中width=device-width就是说把页面宽度设置成和屏幕宽度一样
<meta name="viewport" content="width=device-width,initial-scale=1.0">2、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用，这个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />3、meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
<meta content="yes” name=" apple-mobile-web-app-capable" />4、 meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式
<meta content="black" name=" apple-mobile-web-app-status-bar-style"/>5、meta标签表示：告诉设备忽略将页面中的数字识别为电话号码
<meta content="telephone=no" name="format-detection" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />forbid apple tools
网站开启对web app程序的支持
<meta content="yes" name="apple-mobile-web-app-capable" />控制状态栏显示样式
默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）
<meta content="black" name="apple-mobile-web-app-status-bar-style" />phone numer select
<meta name="format-detection" content="telephone=no" />添加到桌面时有圆角 http://iconogen.com/
<link rel="apple-touch-icon-precomposed" href="./build/img/icon.png" />不带高光显示
<link rel="apple-touch-startup-image" href="" />iPad (portrait) SPLASHSCREEN
<link href="src" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">3、当前移动主站上用到的声明：
魔方
二、字体设置
1、使用无衬线字体
body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; }iOS 4.0+ 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi。 需补充说明，华文黑体并不存在iOS的字体库中(http://support.apple.com/kb/HT5484?viewlocale=en_US)，%EF%BC%8C) 但系统会自动将华文黑体STHeiTi兼容命中系统默认中文字体黑体-简或黑体-繁
Heiti SC Light 黑体-简 细体 Heiti SC Medium 黑体-简 中黑 Heiti TC Light 黑体-繁 细体 Heiti TC Medium 黑体-繁 中黑原生Android下中文字体与英文字体都选择默认的无衬线字体
4.0 之前版本英文字体原生 Android 使用的是 Droid Sans，中文字体原生 Android 会命中 Droid Sans Fallback 4.0 之后中英文字体都会使用原生 Android 新的 Roboto 字体 其他第三方 Android 系统也一致选择默认的无衬线字体下面区分一下无衬线字体与衬线字体之间的区别
有衬线字体英文名为： serif 无衬线字体英文名为： sans-serif 在西方国家罗马字母阵营中，字体分为两大种类：Sans Serif和Serif； Serif的意思是，在字的笔画开始及结束的地方有额外的装饰，而且笔画的粗细会因直横的不同而有不同。相反的，Sans Serif则没有这些额外的装饰，笔画粗细大致差不多。
三、基础交互
设置全局的CSS样式，避免图中的长按弹出菜单与选中文本的行为
a, img { -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */ }# # html, body { -webkit-user-select: none; /* 禁止选中文本（如无文本选中需求，此为必选项） */ user-select: none; }
四、高性能Mobile Web开发
1、高性能CSS3动画
高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点： 流量、功耗与流畅度。 在PC时 代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情 况，设备耗电量的情况。 关于流畅度，主要体现在前端动画中，在现有的前端动画体系中，通常有两种模式：JS动画与CSS3动画。 JS动画是通 过JS动态改写样式实现动画能力的一种方案，在PC端兼容低端浏览器中不失为一种推荐方案。 而在移动端，我们选择 性能更优浏览器原生实现方案：CSS3动画。
然而，CSS3动画在移动多终端设备场景下，相比PC会面对更多的性能问题，主要体现在动画的卡顿与闪烁。目前对提 升移动端CSS3动画体验的主要方法有几点：
1.尽可能多的利用硬件能力，如使用3D变形来开启GPU加速
-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);2、如动画过程有闪烁（通常发生在动画开始的时候），可以尝试下面的Hack：
-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000;3、如下面一个元素通过translate3d右移500px的动画流畅度会明显优于使用left属性：
#ball-1 { transition: -webkit-transform .5s ease; -webkit-transform: translate3d(0, 0, 0); } #ball-1.slidein { -webkit-transform: translate3d(500px, 0, 0); } #ball-2 { transition: left .5s ease; left: 0; } #ball-2.slidein { left: 500px; }注：3D变形会消耗更多的内存与功耗，应确实有性能问题时才去使用它，兼在权衡
2、尽可能少的使用box-shadows与gradients
box-shadows与gradients往往都是页面的性能杀手，尤其是在一个元素同时都使用了它们，所以拥抱扁平化设计吧
3、尽可能的让动画元素不在文档流中，以减少重排
position: fixed; position: absolute;4、优化 DOM layout 性能
我们从实例开始描述这个主题： 这是两段能力上完全等同的代码，显式的差异正如我们所见，只有执行顺序的区别。但真是如此吗？下面是加了说明注释的代码版本，很好的阐述了其中的进一步差异：
// 触发两次 layout var newWidth = aDiv.offsetWidth + 10; // Read aDiv.style.width = newWidth + 'px'; // Write var newHeight = aDiv.offsetHeight + 10; // Read aDiv.style.height = newHeight + 'px'; // Write // 只触发一次 layout var newWidth = aDiv.offsetWidth + 10; // Read var newHeight = aDiv.offsetHeight + 10; // Read aDiv.style.width = newWidth + 'px'; // Write aDiv.style.height = newHeight + 'px'; // Write从注释中可找到规律，连续的读取offsetWidth/Height属性与连续的设置width/height属性，相比分别读取设置单 个属性可少触发一次layout。
从结论看似乎与执行队列有关，没错，这是浏览器的优化策略。所有可触发layout的操作都会被暂时放入 layout-queue 中，等到必须更新的时候，再计算整个队列中所有操作影响的结果，如此就可只进行一次的layout， 从而提升性能。
关键一，可触发layout的操作，哪些操作下会layout的更新（也称为reflow或者relayout）？
我们从浏览器的源码实现入手，以开源Webkit/Blink为例， 对layout的更新，Webkit 主要通过 Document::updateLayout 与 Document::updateLayoutIgnorePendingStylesheets 两个方法：
五、CSS动画属性性能
CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recomposite
Paint通常是其中最花费性能的，尽可能避免使用触发paint的CSS动画属性，这也是为什么我们推荐在CSS动画中使用webkit-transform: translateX(3em)的方案代替使用left: 3em，因为left会额外触发layout与paint，而webkit-transform只触发整个页面composite
div { -webkit-animation-duration: 5s; -webkit-animation-name: move; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; width: 200px; height: 200px; margin: 100px; background-color: #808080; position: absolute; } @-webkit-keyframes move{ from { left: 100px; } to { left: 200px; } }六、布局技巧
box-sizing
行内图片
背景图片
媒体查询
flex rem 的使用
七、移动端JS库的使用
SwipeJS Slide show DeviceJS device check ZeptoJS Min version jQuery iscroll scroll lib FastClick 解决zeptoJS tap 点透，提升click 点击http://www.wheattime.com/increase-your-sites-performance-with-hardware-accelerated-css.html
QA
transition 抖动
开启硬件加速
.cube {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
/* Other transform properties here */
}
