CSS Future - Speaker Deck

Slide 1

Slide 1 text

$44৽ಛੑ CZ!େയ

Slide 2

Slide 2 text

⭇䅀伪⑭䴏犃⹑职₮㿸宝

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Box Alignment Level 3 实现玁䤔⹥⁍䢤†个㱁块

Slide 8

Slide 8 text

实现ⷙ⢈⁍图䑧玁䤔⹥⁍ http://codepen.io/airen/full/PbpgZm | http://www.w3cplus.com/blog/tags/131.html

Slide 9

Slide 9 text

实现ⷙ⢈⁍图䑧玁䤔⹥⁍ http://codepen.io/airen/full/PbpgZm | http://www.w3cplus.com/blog/tags/131.html

Slide 10

Slide 10 text

Box Alignment Level 3 %55䣲⵰对⻬齐属㉇㗰↻₦个属㉇䝈来瑣⑖䣲⵰内⍣佀对⻬齐㟙ㄯ https://drafts.csswg.org/css-align/

Slide 11

Slide 11 text

Box Alignment Level 3 justify-content align-content justify-self align-self justify-items align-items https://drafts.csswg.org/css-align/

Slide 12

Slide 12 text

http://codepen.io/airen/full/VmpNrm/

Slide 13

Slide 13 text

http://codepen.io/airen/full/VmpNrm/

Slide 14

Slide 14 text

Box Alignment Level 3 %55䣲⵰对⻬齐属㉇ⁿⶺ义₦这₻属㉇⥈⎖ⶣ〣⹠⁍䢤↟䝈㟙㻵 https://drafts.csswg.org/css-align/

Slide 15

Slide 15 text

http://codepen.io/airen/full/qqrwYZ/

Slide 16

Slide 16 text

http://codepen.io/airen/full/qqrwYZ/

Slide 17

Slide 17 text

CSS Grid Layout ⶣ‭㡏传说⁍䢤IUⶣⁿ‭猒(NGZDQZ.C[QWV 单维〣⹠犃ⶣ☏℅两个维テ〣⹠犃实现两个维テ对⻬齐㟙ㄯ https://drafts.csswg.org/css-grid/ | http://www.w3cplus.com/blog/tags/356.html

Slide 18

Slide 18 text

CSS Grid Layout术语共㩜ⷙ⢈ 共㩜项䤎共㩜线共㩜轨礼单⍣㩜共㩜区⧿ 共㩜间忽 http://www.w3cplus.com/blog/tags/356.html

Slide 19

Slide 19 text

ⶺ义†个简单䢤共㩜 http://codepen.io/airen/full/WopBGB/

Slide 20

Slide 20 text

http://codepen.io/airen/full/WopBGB/

Slide 21

Slide 21 text

(NGZDQZ.C[QWV〣⹠ http://codepen.io/airen/full/oYZRwp/

Slide 22

Slide 22 text

http://codepen.io/airen/full/oYZRwp/

Slide 23

Slide 23 text

共㩜䢤⎖ⶣ↟䝈㟙㻵 http://codepen.io/airen/full/aBJrEw/

Slide 24

Slide 24 text

http://codepen.io/airen/full/aBJrEw/

Slide 25

Slide 25 text

共㩜䢤⎖ⶣ↟䝈㟙㻵 http://codepen.io/airen/full/yVMWKe/

Slide 26

Slide 26 text

http://codepen.io/airen/full/yVMWKe/

Slide 27

Slide 27 text

共㩜䢤⎖ⶣ↟䝈㟙㻵 http://codepen.io/airen/full/xRqNzX/

Slide 28

Slide 28 text

http://codepen.io/airen/full/xRqNzX/

Slide 29

Slide 29 text

CSS Shapes 㑳䩔9GD⁍䨉ㆂ䣲㱁⦫䢤桰⑖刬‴将共⻚页设计㗰╧⑐㟐䢤泸テԋⶣ⍡许⍣佀设计㐰‭☬䢤ㆂ状犃ゖ‴䝈㤔吊䍖䢤㟙ㄯ让㞧⵷环绕着⍣佀牿㞧⵷☏℅环绕着ↀ䢤㤒线设计刬‭†ⶺ审㤩䤔硌边䝬犀 https://drafts.csswg.org/css-shapes | http://www.w3cplus.com/blog/tags/418.html

Slide 30

Slide 30 text

https://drafts.csswg.org/css-shapes | http://www.w3cplus.com/blog/tags/418.html

Slide 31

Slide 31 text

圆ㆂ䢤㤒线〣⹠ http://codepen.io/airen/full/MbmvVL/

Slide 32

Slide 32 text

http://codepen.io/airen/full/MbmvVL/

Slide 33

Slide 33 text

圆ㆂ䢤㤒线〣⹠ http://codepen.io/airen/full/xRdLvV/

Slide 34

Slide 34 text

http://codepen.io/airen/full/xRdLvV/

Slide 35

Slide 35 text

Shapes + Clip-path http://codepen.io/airen/full/dOWVae | http://www.w3cplus.com/blog/tags/431.html

Slide 36

Slide 36 text

http://codepen.io/airen/full/dOWVae | http://www.w3cplus.com/blog/tags/431.html

Slide 37

Slide 37 text

㤩条№䢤%55 @meida @supports @viewport https://www.w3.org/TR/css3-conditional/

Slide 38

Slide 38 text

CSS @supports 类⅜₮/QFGTPK\T䢤,5库犃"UWRRQTVU◨类⅜₮条№语 ★犃☏℅䝈来猥断浏览⢈牿ⷂ户䴏犀㡏♆㝏瑘%55䢤属㉇规则ԋ https://www.w3.org/TR/css3-conditional/#at-supports | http://www.w3cplus.com/blog/tags/337.html

Slide 39

Slide 39 text

CSS @supports

Slide 40

Slide 40 text

CSS @supports http://codepen.io/airen/full/bwkRpX/

Slide 41

Slide 41 text

http://codepen.io/airen/full/bwkRpX/

Slide 42

Slide 42 text

CSS @supports http://codepen.io/airen/full/NbjwgN/

Slide 43

Slide 43 text

http://codepen.io/airen/full/NbjwgN/

Slide 44

Slide 44 text

%55吊ⶺ义属㉇ %55吊ⶺ义属㉇犃◨称⁫为%55变揯 https://drafts.csswg.org/css-variables/

Slide 45

Slide 45 text

%55吊ⶺ义属㉇ %55吊ⶺ义属㉇犃◨称⁫为%55变揯 https://drafts.csswg.org/css-variables/ | http://www.w3cplus.com/blog/tags/602.html

Slide 46

Slide 46 text

%55吊ⶺ义属㉇ https://drafts.csswg.org/css-variables/ | http://www.w3cplus.com/blog/tags/602.html

Slide 47

Slide 47 text

%55吊ⶺ义属㉇ ↟䝈ňŉ吊ⶺ†个属㉇犃䍖☮礗过XCT ␝数⥈ %55规则⁍调䝈〒声㠮⮝䢤吊ⶺ义属㉇牿变揯犀 https://drafts.csswg.org/css-variables/ | http://www.w3cplus.com/blog/tags/602.html

Slide 48

Slide 48 text

%55吊ⶺ义属㉇ http://codepen.io/airen/full/NbjwEd/

Slide 49

Slide 49 text

http://codepen.io/airen/full/NbjwEd/

Slide 50

Slide 50 text

%55吊ⶺ义属㉇ %55吊ⶺ义属㉇じ⚬%55䢤ECNE ␝数†得↟䝈 https://drafts.csswg.org/css-variables/ | http://www.w3cplus.com/blog/tags/172.html

Slide 51

Slide 51 text

%55吊ⶺ义属㉇ http://codepen.io/airen/full/jMjvON/

Slide 52

Slide 52 text

http://codepen.io/airen/full/jMjvON/

Slide 53

Slide 53 text

⎖ⶣ%55㟐疣㉇

Slide 54

Slide 54 text

%55䀗☨㱁ㄯ background-blend-mode mix-blend-mode http://www.w3cplus.com/blog/tags/408.html

Slide 55

Slide 55 text

%55䀗☨㱁ㄯ http://codepen.io/airen/full/PbmEYG/

Slide 56

Slide 56 text

http://codepen.io/airen/full/PbmEYG/

Slide 57

Slide 57 text

%55滤镜 filter backdrop-filter https://www.w3.org/TR/ﬁlter-eﬀects/ | http://www.w3cplus.com/blog/tags/119.html

Slide 58

Slide 58 text

http://codepen.io/airen/full/pJPWpY/

Slide 59

Slide 59 text

䀗☨㱁ㄯ‮滤镜结☨ http://codepen.io/airen/full/PbmENW/ | http://bennettfeely.com/image-eﬀects/

Slide 60

Slide 60 text

http://codepen.io/airen/full/PbmENW/ | http://bennettfeely.com/image-eﬀects/

Slide 61

Slide 61 text

CSS element() element() 可以直接⽤来克隆HTML中任何元素 https://www.w3.org/TR/css4-images/ | `http://www.w3cplus.com/css4/css-element-function.html