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
CSS Future
Search
w3cplus
November 29, 2016
Technology
2
600
CSS Future
聊聊CSS的几个新特性
w3cplus
November 29, 2016
Tweet
Share
More Decks by w3cplus
See All by w3cplus
手淘互动动效探索
w3cplus
0
200
Web Animation
w3cplus
5
470
CSS3带来的变化
w3cplus
0
1.4k
Web重构之道
w3cplus
1
2.7k
Sass带来的变革
w3cplus
2
560
Responsive小试牛刀
w3cplus
3
530
CSS预处器——Sass、LESS和Stylus实践
w3cplus
0
370
http协议与缓存简述
w3cplus
5
510
前端自动化工具探索
w3cplus
4
1k
Other Decks in Technology
See All in Technology
セキュリティSaaS企業が実践するCursor運用ルールと知見 / How a Security SaaS Company Runs Cursor: Rules & Insights
tetsuzawa
0
410
TechBull Membersの開発進捗どうですか!?
rvirus0817
0
200
CSSDay, Amsterdam
brucel
0
110
KMP導⼊において、マネジャーとして考えた事
sansantech
PRO
1
210
やさしいClaude Code入門
minorun365
PRO
32
24k
Javaアプリケーションの配布とパッケージング / Distribution and packaging of Java applications
hogelog
1
150
プラットフォームとしての Datadog / Datadog as Platforms
aoto
PRO
1
340
CSS polyfill とその未来
ken7253
0
140
LT:組込み屋さんのオシロが壊れた!
windy_pon
0
390
カンファレンスのつくりかた / The Conference Code: What Makes It All Work
tomzoh
8
930
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
8
65k
実践Kafka Streams 〜イベント駆動型アーキテクチャを添えて〜
joker1007
0
210
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
172
14k
Unsuck your backbone
ammeep
671
58k
Building Applications with DynamoDB
mza
95
6.4k
Balancing Empowerment & Direction
lara
1
84
Statistics for Hackers
jakevdp
799
220k
A Modern Web Designer's Workflow
chriscoyier
693
190k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
For a Future-Friendly Web
brad_frost
178
9.7k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Transcript
$44৽ಛੑ CZ!େയ
⭇䅀 伪⑭䴏犃⹑职₮㿸宝
None
None
None
None
Box Alignment Level 3 实现玁䤔⁍䢤†个㱁块
实现ⷙ⢈⁍图䑧玁䤔⁍ http://codepen.io/airen/full/PbpgZm | http://www.w3cplus.com/blog/tags/131.html
实现ⷙ⢈⁍图䑧玁䤔⁍ http://codepen.io/airen/full/PbpgZm | http://www.w3cplus.com/blog/tags/131.html
Box Alignment Level 3 %55䣲⵰对⻬齐属㉇㗰↻₦个属㉇䝈来瑣䣲⵰内⍣佀对⻬齐㟙ㄯ https://drafts.csswg.org/css-align/
Box Alignment Level 3 justify-content align-content justify-self align-self justify-items align-items
https://drafts.csswg.org/css-align/
http://codepen.io/airen/full/VmpNrm/
http://codepen.io/airen/full/VmpNrm/
Box Alignment Level 3 %55䣲⵰对⻬齐属㉇ⁿⶺ义₦这₻属㉇⥈⎖ⶣ〣⁍䢤↟䝈㟙㻵 https://drafts.csswg.org/css-align/
http://codepen.io/airen/full/qqrwYZ/
http://codepen.io/airen/full/qqrwYZ/
CSS Grid Layout ⶣ㡏传说⁍䢤IUⶣⁿ猒(NGZDQZ.C[QWV 单维 〣 犃ⶣ☏℅两个维テ〣犃实现两个维テ对⻬齐㟙ㄯ https://drafts.csswg.org/css-grid/ | http://www.w3cplus.com/blog/tags/356.html
CSS Grid Layout术语 共㩜ⷙ⢈ 共㩜项䤎 共㩜线 共㩜轨礼 单⍣㩜 共㩜区⧿ 共㩜间忽
http://www.w3cplus.com/blog/tags/356.html
ⶺ义†个简单䢤共㩜 http://codepen.io/airen/full/WopBGB/
http://codepen.io/airen/full/WopBGB/
(NGZDQZ.C[QWV〣 http://codepen.io/airen/full/oYZRwp/
http://codepen.io/airen/full/oYZRwp/
共㩜䢤⎖ⶣ↟䝈㟙㻵 http://codepen.io/airen/full/aBJrEw/
http://codepen.io/airen/full/aBJrEw/
共㩜䢤⎖ⶣ↟䝈㟙㻵 http://codepen.io/airen/full/yVMWKe/
http://codepen.io/airen/full/yVMWKe/
共㩜䢤⎖ⶣ↟䝈㟙㻵 http://codepen.io/airen/full/xRqNzX/
http://codepen.io/airen/full/xRqNzX/
CSS Shapes 㑳䩔9GD⁍䨉ㆂ䣲㱁⦫䢤桰刬‴将共⻚页设计㗰╧㟐 䢤泸テԋⶣ⍡许⍣佀设计㐰☬䢤ㆂ状犃ゖ‴䝈㤔吊 䍖䢤㟙ㄯ让㞧环绕着⍣佀牿㞧☏℅环绕着ↀ䢤㤒 线设计刬†ⶺ审㤩䤔硌边䝬犀 https://drafts.csswg.org/css-shapes | http://www.w3cplus.com/blog/tags/418.html
https://drafts.csswg.org/css-shapes | http://www.w3cplus.com/blog/tags/418.html
圆ㆂ䢤㤒线〣 http://codepen.io/airen/full/MbmvVL/
http://codepen.io/airen/full/MbmvVL/
圆ㆂ䢤㤒线〣 http://codepen.io/airen/full/xRdLvV/
http://codepen.io/airen/full/xRdLvV/
Shapes + Clip-path http://codepen.io/airen/full/dOWVae | http://www.w3cplus.com/blog/tags/431.html
http://codepen.io/airen/full/dOWVae | http://www.w3cplus.com/blog/tags/431.html
㤩条№䢤%55 @meida @supports @viewport https://www.w3.org/TR/css3-conditional/
CSS @supports 类⅜₮/QFGTPK\T䢤,5库犃"UWRRQTVU◨类⅜₮条№语 ★犃☏℅䝈来猥断浏览⢈牿ⷂ户䴏犀㡏♆㝏瑘%55䢤 属㉇规则ԋ https://www.w3.org/TR/css3-conditional/#at-supports | http://www.w3cplus.com/blog/tags/337.html
CSS @supports
CSS @supports http://codepen.io/airen/full/bwkRpX/
http://codepen.io/airen/full/bwkRpX/
CSS @supports http://codepen.io/airen/full/NbjwgN/
http://codepen.io/airen/full/NbjwgN/
%55吊ⶺ义属㉇ %55吊ⶺ义属㉇犃◨称为%55变揯 https://drafts.csswg.org/css-variables/
%55吊ⶺ义属㉇ %55吊ⶺ义属㉇犃◨称为%55变揯 https://drafts.csswg.org/css-variables/ | http://www.w3cplus.com/blog/tags/602.html
%55吊ⶺ义属㉇ https://drafts.csswg.org/css-variables/ | http://www.w3cplus.com/blog/tags/602.html
%55吊ⶺ义属㉇ ↟䝈ň ʼn吊ⶺ†个属㉇犃䍖☮礗过XCT ␝数⥈ %55规则⁍调䝈〒声㠮⮝䢤吊ⶺ义属㉇牿变揯犀 https://drafts.csswg.org/css-variables/ | http://www.w3cplus.com/blog/tags/602.html
%55吊ⶺ义属㉇ http://codepen.io/airen/full/NbjwEd/
http://codepen.io/airen/full/NbjwEd/
%55吊ⶺ义属㉇ %55吊ⶺ义属㉇じ⚬%55䢤ECNE ␝数†得↟䝈 https://drafts.csswg.org/css-variables/ | http://www.w3cplus.com/blog/tags/172.html
%55吊ⶺ义属㉇ http://codepen.io/airen/full/jMjvON/
http://codepen.io/airen/full/jMjvON/
⎖ⶣ%55㟐疣㉇
%55䀗☨㱁ㄯ background-blend-mode mix-blend-mode http://www.w3cplus.com/blog/tags/408.html
%55䀗☨㱁ㄯ http://codepen.io/airen/full/PbmEYG/
http://codepen.io/airen/full/PbmEYG/
%55滤镜 filter backdrop-filter https://www.w3.org/TR/filter-effects/ | http://www.w3cplus.com/blog/tags/119.html
http://codepen.io/airen/full/pJPWpY/
䀗☨㱁ㄯ滤镜结☨ http://codepen.io/airen/full/PbmENW/ | http://bennettfeely.com/image-effects/
http://codepen.io/airen/full/PbmENW/ | http://bennettfeely.com/image-effects/
CSS element() element() 可以直接⽤来克隆HTML中任何元素 https://www.w3.org/TR/css4-images/ | `http://www.w3cplus.com/css4/css-element-function.html
http://codepen.io/airen/full/RoVxgG/
http://codepen.io/airen/full/RoVxgG/
CSS box-reflect http://www.w3cplus.com/css3/css3-box-reflect.html
None
琎续
THANK YOU
None