针对webkit的HTML, CSS跟Javascript

针对webkit的HTML, CSS和Javascript

前面有 一篇文章 介绍了HTML5的一些新特性以及技巧, 现再来总结一些更多的针对webkit的HTML, CSS和Javascript方面的特性. HTML, 从HTML文档的开始到结束排列: XML/HTML Code 复制内容到剪贴板 met…

?

前面有一篇文章介绍了HTML5的一些新特性以及技巧, 现再来总结一些更多的针对webkit的HTML, CSS和Javascript方面的特性.

HTML, 从HTML文档的开始到结束排列:

XML/HTML Code复制内容到剪贴板

1. <meta?name=”viewport”?content=”width=device-width,?initial-scale=1.0″/>???
2. <!--让内容的宽度自适应为设备的宽度,?在做Mobile?Web时必须加的一条??-->??
3. <meta?name=”format-detection”?content=”telephone=no”]]>???
4. <!--禁用手机号码链接(for?iPhone)??-->??
5. <link?rel=”apple-touch-icon”?href=”icon.png”/>???
6. <!--设置你网页的图标,?尺寸为57X57?px??-->??
7. <!–?iOS?2.0+:?tell?iOS?not?to?apply?any?glare?effects?to?the?icon?–>????
8. <link?rel=”apple-touch-icon-precomposed”?href=”icon.png”/>????
9. <!–?iOS?4.2+?icons?for?different?resolutions?–>????
10. <link?rel=”apple-touch-icon”?sizes=”72×72″?href=”touch-icon-ipad.png”?/>????
11. <link?rel=”apple-touch-icon”?sizes=”114×114″?href=”touch-icon-iphone4.png”?/>????
12. <link?rel=”apple-touch-startup-image”?href=”startup.png”>???
13. <!--全屏启动时候的启动画面图像,?尺寸320X460?px??-->??
14. <meta?name=”apple-mobile-web-app-capable”?content=”yes”?/>???
15. <!--是否允许全屏显示,?只有在桌面启动时可用?-->???
16. <meta?name=”apple-mobile-web-app-status-bar-style”?content=”black”?/>???
17. <!--控制全屏时顶部状态栏的外观,?默认白色??-->??
18. <input?autocorrect=”off”?autocomplete=”off”?autocapitalize=”off”>????
19. <!--取消自动完成,?自动大写单词字母(适用于Mobile上)??-->??
20. <input?type=”text”?x-webkit-speech?/>???
21. <!--语音输入??-->??
22. <input?type=”file”?accept?=?“image/*;?capture=camera”?/>???
23. <!--文件上传,?从相机捕获媒体,?下同?-->???
24. <input?type=”file”?accept?=?“video/*;?capture=camcorder”?/>????
25. <input?type=”file”?accept?=?“audio/*;?capture=microphone”?/>????
26. <a?href=”sms:18005555555,18005555556″]]>???
27. <!--发送短信给多个人的链接?-->??
28. <a?href=”sms:18005555555?body=Text%20goes%20here”]]>???
29. <!--发送短信附带内容的链接?-->??
30. <a?href=”tel:18005555555″]]>Call?us?at?1-800-555-5555</a]]>???
31. <!--拨打电话的链接?-->???

CSS:

CSS Code复制内容到剪贴板

1. -webkit-tap-highlight-color:?transparent;???
2. /*Mobile上点击链接高亮的时候设置颜色为透明*/??
3. ??
4. -webkit-user-select:?none;???
5. /*设置为无法选择文本*/??
6. ??
7. -webkit-touch-callout:?none;???
8. /*长按时不触发系统的菜单,?可用在图片上加这个属性禁止下载图片*/??
9. ??
10. :-webkit-full-screen?canvas?{}???
11. /*全屏模式时的样式(for?Desktop)*/??
12. ??
13. div?p?:matches(em,?b,?strong)?{}???
14. /*使用mathes来匹配多个选择器*/??
15. ??
16. @media?only?screen?and?(max-width:?480px)?{}???
17. /*指定Mobile设备或者小屏幕桌面屏幕*/??
18. ??
19. @media?(-webkit-min-device-pixel-ratio:?2),?(min-resolution:?300dpi)?{?}??
20. /*指定高分辨率屏幕设备*/??
21. header?{?background-image:?url(header-highres.png);?}??
22. }??
23. ??
24. @media?(-webkit-max-device-pixel-ratio:?1.5),(max-resolution:?299dpi)?{?/*指定低分辨率屏幕设备*/}??
25. ??
26. header?{?background-image:?url(header-lowres.png);?}??
27. }??
28. ??
29. background-repeat:??space;?background-repeat:?round;???
30. /*这两种CSS3的背景属性值得研究*/??
31. ??
32. width:?calc(100%-40px);???
33. /*计算宽度*/??
34. ??
35. text-decoration:?#FF8800??wavy?ine-through;???
36. /*波浪型链接*/??
37. ??
38. text-rendering:?optimizeLegibility;???
39. /*用这个属性之后会收紧字符间的距离*/??
40. ??
41. font-variant-ligatures:??common-ligatures;???
42. /*设置CSS连字*/??
43. ??
44. transform:??rotate(90);???
45. /*旋转90度*/??
46. ??
47. transform-origin:?center?center;?transform-origin??
48. /*可以改变变换的位置*/??
49. ??
50. -webkit-appearance:?none;?-webkit-appearance??
51. /*可以改变按钮或者其它控件看起来类似本地的控件*/??

美化表单校验时的提示样式

CSS Code复制内容到剪贴板

1. -webkit-validation-bubble?{}??
2. -webkit-validation-bubble-message?{}??
3. -webkit-validation-bubble-arrow?{}??
4. -webkit-validation-bubble-arrow-clipper?{}??

??

当提示出现时类似于下面的结构

XML/HTML Code复制内容到剪贴板

1. <div?-webkit-validation-bubble>??
   
2. <div?-webkit-validation-bubble-arrow></div>???
3. <div?-webkit-validation-bubble-arrow-clipper></div>??
   
4. <div?-webkit-validation-bubble-message>Error?Message</div>???
5. </div>??

自定义webkit浏览器的滚动条, 见Google Reader等在Chrome/Safari下的效果, 下面是一个实例, 这个滚动条的样式代码如下

CSS Code复制内容到剪贴板

1. Customized?WebKit?Scrollbar?/*?Let′s?get?this?party?started?*/????
2. ::-webkit-scrollbar?{????
3. width:?12px;????
4. }????
5. /*?Track?*/????
6. ::-webkit-scrollbar-track?{????
7. -webkit-box-shadow:?inset?0?0?6px?rgba(0,0,0,0.3);????
8. -webkit-border-radius:?10px;????
9. border-radius:?10px;????
10. }????
11. ?????
12. /*?Handle?*/????
13. ::-webkit-scrollbar-thumb?{????
14. -webkit-border-radius:?10px;????
15. border-radius:?10px;????
16. background:?rgba(255,0,0,0.8);????
17. -webkit-box-shadow:?inset?0?0?6px?rgba(0,0,0,0.5);????
18. }????
19. ::-webkit-scrollbar-thumb:window-inactive?{????
20. background:?rgba(255,0,0,0.4);????
21. }????
22. -webkit-background-composite:?plus-darker;?-webkit-background-composite??
23. /*用来设置一个元素的背景或颜色的组合样式*/??
24. ??
25. -webkit-text-stroke:??1px?rgba(0,0,0,0.5);?-webkit-text-stroke??
26. /*可以用来给文字添加描边*/??
27. ??
28. -webkit-mask-image:??url(/path/to/mask.png);???
29. /*定义一个图片用来遮罩元素*/??
30. ??
31. -webkit-box-reflect:??below?5px;???
32. /*定义了一个元素的反射*/??
33. ??
34. :local-link?{font-weight:?normal;}????
35. /*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)

JavaScript Code复制内容到剪贴板

1. window.addEventListener("orientationchange",?function(e){??
   
2. //window.orientation(0?is?portrait,?90?and?-90?are?landscape)??
   
3. },?false);??
4. ???
5. window.addEventListener("deviceorientation",?function(e){??
   
6. //e.alpha??
   
7. //e.beta??
   
8. //e.gamma??
   
9. },?false);??
   
10. window.addEventListener("devicemotion",?function(e){??
    
11. //e.accelerationIncludingGravity.x???
12. //e.accelerationIncludingGravity.y??
    
13. //e.accelerationIncludingGravity.z???
14. },?false);??

requestAnimationFrame() 新的动画函数

element.webkitRequestFullScreen() 调用全屏函数

查看更多 下一篇