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
620
CSS Future
聊聊CSS的几个新特性
w3cplus
November 29, 2016
Tweet
Share
More Decks by w3cplus
See All by w3cplus
手淘互动动效探索
w3cplus
0
220
Web Animation
w3cplus
5
480
CSS3带来的变化
w3cplus
0
1.4k
Web重构之道
w3cplus
1
2.8k
Sass带来的变革
w3cplus
2
590
Responsive小试牛刀
w3cplus
3
540
CSS预处器——Sass、LESS和Stylus实践
w3cplus
0
380
http协议与缓存简述
w3cplus
5
520
前端自动化工具探索
w3cplus
4
1k
Other Decks in Technology
See All in Technology
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
4
390
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
10
4.6k
How to achieve interoperable digital identity across Asian countries
fujie
0
140
スタートアップにおけるこれからの「データ整備」
shomaekawa
2
310
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
150
オープンソースでどこまでできる?フォーマル検証チャレンジ
msyksphinz
0
120
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
160
【Oracle Cloud ウェビナー】クラウド導入に「専用クラウド」という選択肢、Oracle AlloyとOCI Dedicated Region とは
oracle4engineer
PRO
3
120
OCI Network Firewall 概要
oracle4engineer
PRO
1
7.8k
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
150
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
130
Findy Team+のSOC2取得までの道のり
rvirus0817
0
490
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.8k
A better future with KSS
kneath
239
18k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Rails Girls Zürich Keynote
gr2m
95
14k
Being A Developer After 40
akosma
91
590k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Designing for humans not robots
tammielis
254
26k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Making Projects Easy
brettharned
119
6.4k
Writing Fast Ruby
sferik
629
62k
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