Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
可遇见的WEB
Search
time zhong
March 14, 2014
Technology
0
150
可遇见的WEB
time zhong
March 14, 2014
Tweet
Share
More Decks by time zhong
See All by time zhong
跨越不可能-让WebApp如Native般顺滑
timezhong
0
120
MAY I EAT WEB SPEECH
timezhong
0
110
一起移动吧-交互篇
timezhong
0
130
一起移动吧-基础篇
timezhong
1
65
有沟必火
timezhong
1
140
我的一天
timezhong
0
120
被解放的GPU
timezhong
1
150
网站字体渲染过程
timezhong
7
890
Other Decks in Technology
See All in Technology
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
540
Making your applications cross-environment - OSCG 2024 NA
salaboy
0
200
Introduction to Works of ML Engineer in LY Corporation
lycorp_recruit_jp
0
150
あなたの知らない Function.prototype.toString() の世界
mizdra
PRO
2
400
なぜ今 AI Agent なのか _近藤憲児
kenjikondobai
4
1.4k
LINEヤフーにおけるPrerender技術の導入とその効果
narirou
1
160
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
210
B2B SaaSから見た最近のC#/.NETの進化
sansantech
PRO
0
940
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
110
RubyのWebアプリケーションを50倍速くする方法 / How to Make a Ruby Web Application 50 Times Faster
hogelog
3
950
日経電子版のStoreKit2フルリニューアル
shimastripe
1
150
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
390
Featured
See All Featured
The Language of Interfaces
destraynor
154
24k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Rails Girls Zürich Keynote
gr2m
94
13k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Ruby is Unlike a Banana
tanoku
97
11k
Transcript
None
你所不是很满意的今天,是昨天的⼈人的奢望的明天。
集成 集成
VIEWPORT PERCENTAGE UNITS 1vw=1% of viewport width ! 1vh=1% of
viewport height ! ! 1vmin=min(1vw,1vh) ! 1vmax=max(1vw,1vh)
css: ! .layout-header{height:10vh;font-size:4vw;} .layout-body{height:80vh;} .layout-footer{height:10vh;} .col-aside{float:left;height:80vh;width:30vw;} .col-main{float:left;height:80vh;width:70vw;} html: ! <div
class="layout-header">header</div> <div class="layout-body clearfix"> <div class="col-aside"></div> <div class="col-main"></div> </div> <div class="layout-footer"></div> aside footer main DEMO
None
INSTRINSIC SIZING css: ! body{display:flex;-webkit-justify-content:center;-webkit-align-items:center;} ! .box{ width:-webkit-fit-content;/*fit-content,min-content,max-content,fill-available*/ height:-webkit-fit-content; }
html: ! <div class=“box”></div> DEMO
http://farm7.staticflickr.com/6182/6153481666_4a9bd95388_o.jpg http://www.flickr.com/photos/djericray/9688757269/sizes/h/in/photostream/ 开放
Battery API
! Battery API
! Battery API
MEDIA CAPTURE
MIUI 4.2.27
CSS FILTER PHOTOBOOTH DEMO
None
<input type="file" name="file" accept="image/*" capture> அᅶ ࿊౼གྷႵ֥ ౼ཨ
DEVICE APIS WORKING GROUP http://www.w3.org/2009/dap/
W3C的标准制定流程 ⼯工作草案 (Working Draft, WD) http://www.chinaw3c.org/digital-library.html 备选推荐标准 (Candidate Recommendation, CR)
提案推荐标准 (Proposed Recommendation, PR) 推荐标准 (Recommendation)
LIVE INPUT TO WEB AUDIO API AUTO TRANSLATE
CHROME STATUS
当然远不⽌止这些... calc() datalist data binding Geolocation API Page Visibility API
Client-side Download Screen Orientation API Access Native Hardware ! …
Thank You :)