小總結

時間  2019-11-24
標籤 總結 简体版
原文   原文鏈接

關於safari 瀏覽器 input圓角的解決方案

去除iOS safari 瀏覽器的input的圓角問題javascript

-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 agocss

當須要在animation下動態計算keyframe水平或垂直方向的位移則比transition要麻煩許多,並且有諸多坑等着咱們去踩.html

動態改變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,無奈只能放棄此條道路java

從新插入新樣式,覆蓋舊樣式

css的規則是權重相同的狀況下,後面的定義的會覆蓋前面的,所以咱們只能動態的插入相應的新cssRule達到覆蓋的目的css3

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 自適應方式web

  • 能用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); }chrome

如下是規範建議，均是平常在開發當中的的一些經驗，僅供參考。跨域

一.頭部聲明

一、其中width=device-width就是說把頁面寬度設置成和屏幕寬度同樣瀏覽器

<meta name="viewport" content="width=device-width,initial-scale=1.0">

二、首先咱們來看看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" />

三、meta標籤是iphone設備中的safari私有meta標籤，它表示：容許全屏模式瀏覽；

<meta content="yes」 name=" apple-mobile-web-app-capable" />

四、 meta標籤也是iphone的私有標籤，它指定的iphone中safari頂端的狀態條的樣式

<meta content="black" name=" apple-mobile-web-app-status-bar-style"/>

五、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">

三、當前移動主站上用到的聲明：

<!DOCTYPE html> 魔方

2、字體設置

一、使用無襯線字體

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則沒有這些額外的裝飾，筆畫粗細大體差很少。

3、基礎交互

設置全局的CSS樣式，避免圖中的長按彈出菜單與選中文本的行爲

a, img {
-webkit-touch-callout: none; /* 禁止長按連接與圖片彈出菜單 */
}#  #
html, body {
-webkit-user-select: none;   /* 禁止選中文本（如無文本選中需求，此爲必選項） */
user-select: none;
}

4、高性能Mobile Web開發

一、高性能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);

二、如動畫過程有閃爍（一般發生在動畫開始的時候），能夠嘗試下面的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;

三、以下面一個元素經過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變形會消耗更多的內存與功耗，應確實有性能問題時纔去使用它，兼在權衡

二、儘量少的使用box-shadows與gradients

box-shadows與gradients每每都是頁面的性能殺手，尤爲是在一個元素同時都使用了它們，因此擁抱扁平化設計吧

三、儘量的讓動畫元素不在文檔流中，以減小重排

position: fixed;
position: absolute;

四、優化 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 兩個方法：

5、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;
}
}

6、佈局技巧

box-sizing

行內圖片

背景圖片

媒體查詢

flex rem 的使用

7、移動端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 */ 
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程