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
610
CSS Future
聊聊CSS的几个新特性
w3cplus
November 29, 2016
Tweet
Share
More Decks by w3cplus
See All by w3cplus
手淘互动动效探索
w3cplus
0
210
Web Animation
w3cplus
5
470
CSS3带来的变化
w3cplus
0
1.4k
Web重构之道
w3cplus
1
2.7k
Sass带来的变革
w3cplus
2
560
Responsive小试牛刀
w3cplus
3
540
CSS预处器——Sass、LESS和Stylus实践
w3cplus
0
370
http协议与缓存简述
w3cplus
5
510
前端自动化工具探索
w3cplus
4
1k
Other Decks in Technology
See All in Technology
Observability infrastructure behind the trillion-messages scale Kafka platform
lycorptech_jp
PRO
0
130
ハノーバーメッセ2025座談会.pdf
iotcomjpadmin
0
150
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
100
ObsidianをMCP連携させてみる
ttnyt8701
2
140
In Praise of "Normal" Engineers (LDX3)
charity
3
1.2k
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
210
Snowflake Summit 2025 データエンジニアリング関連新機能紹介 / Snowflake Summit 2025 What's New about Data Engineering
tiltmax3
0
240
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
0
140
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
2
340
20250623 Findy Lunch LT Brown
3150
0
780
AI技術トレンド勉強会 #1MCPの基礎と実務での応用
nisei_k
1
240
[TechNight #90-1] 本当に使える?ZDMの新機能を実践検証してみた
oracle4engineer
PRO
3
140
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Language of Interfaces
destraynor
158
25k
GraphQLとの向き合い方2022年版
quramy
46
14k
Producing Creativity
orderedlist
PRO
346
40k
The Pragmatic Product Professional
lauravandoore
35
6.7k
We Have a Design System, Now What?
morganepeng
52
7.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Being A Developer After 40
akosma
90
590k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
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