1. 技术文章
  2. 小总结

小总结

由 坚强是说给别人听的谎言 提交于 2020-01-08 03:15:40

关于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 = 50*ratio + "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、当前移动主站上用到的声明：

<!DOCTYPE html> 魔方

二、字体设置

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 */ 
}
标签
transform
box-shadow
meta
webkit
meta标签
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!