webkit - JavaShuo

webkit

HTML, 從HTML文檔的開始到結束排列:php

<!– iOS 2.0+: tell iOS not to apply any glare effects to the icon –>web

<!– iOS 4.2+ icons for different resolutions –>api

<input autocorrect=」off」 autocomplete=」off」 autocapitalize=」off」> 取消自動完成, 自動大寫單詞字母(適用於Mobile上)

<input type=」text」 x-webkit-speech /> 語音輸入

<input type=」file」 accept = 「image/*; capture=camera」 /> 文件上傳, 從相機捕獲媒體, 下同

<a href=」sms:18005555555,18005555556″]]> 發送短信給多我的的連接

<a href=」sms:18005555555?body=Text%20goes%20here」]]> 發送短信附帶內容的連接

<a href=」tel:18005555555″]]>Call us at 1-800-555-5555</a]]> 撥打電話的連接

CSS:

-webkit-tap-highlight-color: transparent; Mobile上點擊連接高亮的時候設置顏色爲透明

-webkit-user-select: none; 設置爲沒法選擇文本

-webkit-touch-callout: none; 長按時不觸發系統的菜單, 可用在圖片上加這個屬性禁止下載圖片

:-webkit-full-screen canvas {} 全屏模式時的樣式(for Desktop)

div p :matches(em, b, strong) {} 使用mathes來匹配多個選擇器

@media only screen and (max-width: 480px) {} 指定Mobile設備或者小屏幕桌面屏幕

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 300dpi) { 指定高分辨率屏幕設備

header { background-image: url(header-highres.png); }

}

@media (-webkit-max-device-pixel-ratio: 1.5),(max-resolution: 299dpi) { 指定低分辨率屏幕設備

header { background-image: url(header-lowres.png); }

}

background-repeat: space; background-repeat: round; 這兩種CSS3的背景屬性值得研究

width: calc(100%-40px); 計算寬度

text-decoration: #FF8800 wavy ine-through; 波浪型連接

text-rendering: optimizeLegibility; 用這個屬性以後會收緊字符間的距離

font-variant-ligatures: common-ligatures; 設置CSS連字

transform: rotate(90); 旋轉90度

transform-origin: center center; transform-origin能夠改變變換的位置

-webkit-appearance: none; -webkit-appearance能夠改變按鈕或者其它控件看起來相似本地的控件

美化表單校驗時的提示樣式

 
      1 
      ::-webkit-validation-bubble {} 
     
      2 
        
      3 
      ::-webkit-validation-bubble-message {} 
     
      4 
        
      5 
      ::-webkit-validation-bubble-arrow {} 
     
      6 
        
      7 
      ::-webkit-validation-bubble-arrow-clipper {}

當提示出現時相似於下面的結構

 
      1 
      <div -webkit-validation-bubble> 
     
      2 
        
      3 
      <div -webkit-validation-bubble-arrow></div> 
     
      4 
        
      5 
      <div -webkit-validation-bubble-arrow-clipper></div> 
     
      6 
        
      7 
      <div -webkit-validation-bubble-message>Error Message</div> 
     
      8 
        
      9 
      </div>

自定義webkit瀏覽器的滾動條, 見Google Reader等在Chrome/Safari下的效果, 下面是一個實例, 這個滾動條的樣式代碼以下:

     
      01 
      Customized WebKit Scrollbar /* Let´s get this party started */ 
     
      02 
        
      03 
      ::-webkit-scrollbar { 
     
      04 
        
      05 
      width: 12px; 
     
      06 
        
      07 
      } 
     
      08 
        
      09 
      /* Track */ 
     
      10 
        
      11 
      ::-webkit-scrollbar-track { 
     
      12 
        
      13 
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
     
      14 
        
      15 
      -webkit-border-radius: 10px; 
     
      16 
        
      17 
      border-radius: 10px; 
     
      18 
        
      19 
      } 
     
      20 
        
      21 
      /* Handle */ 
     
      22 
        
      23 
      ::-webkit-scrollbar-thumb { 
     
      24 
        
      25 
      -webkit-border-radius: 10px; 
     
      26 
        
      27 
      border-radius: 10px; 
     
      28 
        
      29 
      background: rgba(255,0,0,0.8); 
     
      30 
        
      31 
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
     
      32 
        
      33 
      } 
     
      34 
        
      35 
      ::-webkit-scrollbar-thumb:window-inactive { 
     
      36 
        
      37 
      background: rgba(255,0,0,0.4); 
     
      38 
        
      39 
      }

-webkit-background-composite: plus-darker; -webkit-background-composite用來設置一個元素的背景或顏色的組合樣式

-webkit-text-stroke: 1px rgba(0,0,0,0.5); -webkit-text-stroke能夠用來給文字添加描邊

-webkit-mask-image: url(/path/to/mask.png); 定義一個圖片用來遮罩元素

-webkit-box-reflect: below 5px; 定義了一個元素的反射

:local-link {font-weight: normal;} local-link能夠定義相對地址的連接樣式

Javascript:

window.scrollTo(0,0); 隱藏地址欄

window.matchMedia(); 匹配媒體

navigator.connection; 決定手機是否運行在WiFi/3G等網絡

window.devicePixelRatio; 決定屏幕分辨率(iPhone 4值爲2, 而Nexus One值爲1.5)

window.navigator.onLine; 取得網絡鏈接狀態

window.navigator.standalone; 決定iPhone是否處於全屏狀態

touch事件 (iOS, Android 2.2+): touchstart, touchmove, touchend, touchcancel

gesture事件 (Apple only, iOS 2+): gesturestart, gesturechange, gesturend give access to predefined gestures (rotation, scale, position)

 
      01 
      window.addEventListener("orientationchange",function(e){ 
     
      02 
        
      03 
      //window.orientation(0 is portrait, 90 and -90 are landscape) 
     
      04 
        
      05 
      }, false); 
     
      06 
        
      07 
      window.addEventListener("deviceorientation",function(e){ 
     
      08 
        
      09 
      //e.alpha 
     
      10 
        
      11 
      //e.beta 
     
      12 
        
      13 
      //e.gamma 
     
      14 
        
      15 
      }, false); 
     
      16 
        
      17 
      window.addEventListener("devicemotion", function(e){ 
     
      18 
        
      19 
      //e.accelerationIncludingGravity.x 
     
      20 
        
      21 
      //e.accelerationIncludingGravity.y 
     
      22 
        
      23 
      //e.accelerationIncludingGravity.z 
     
      24 
        
      25 
      }, false);

requestAnimationFrame() 新的動畫函數

element.webkitRequestFullScreen() 調用全屏函數