CSS Future

聊聊CSS的几个新特性

Transcript

1. $44৽ಛੑ CZ
   !େയ 
2. ⭇䅀 伪⑭䴏犃⹑职₮㿸宝
7. Box Alignment Level 3 实现玁䤔⹥⁍䢤†个㱁块
8. 实现ⷙ⢈⁍图䑧玁䤔⹥⁍ http://codepen.io/airen/full/PbpgZm | http://www.w3cplus.com/blog/tags/131.html
9. 实现ⷙ⢈⁍图䑧玁䤔⹥⁍ http://codepen.io/airen/full/PbpgZm | http://www.w3cplus.com/blog/tags/131.html
10. Box Alignment Level 3 %55䣲⵰对⻬齐属㉇㗰↻₦个属㉇䝈来瑣⑖䣲⵰内⍣佀对⻬齐㟙ㄯ https://drafts.csswg.org/css-align/
11. Box Alignment Level 3 justify-content align-content justify-self align-self justify-items align-items https://drafts.csswg.org/css-align/
12. http://codepen.io/airen/full/VmpNrm/
13. http://codepen.io/airen/full/VmpNrm/
14. Box Alignment Level 3 %55䣲⵰对⻬齐属㉇ⁿⶺ义₦这₻属㉇⥈⎖ⶣ〣⹠⁍䢤↟䝈㟙㻵 https://drafts.csswg.org/css-align/
15. http://codepen.io/airen/full/qqrwYZ/
16. http://codepen.io/airen/full/qqrwYZ/
17. CSS Grid Layout ⶣ‭㡏传说⁍䢤IUⶣⁿ‭猒(NGZDQZ.C[QWV 单维 〣⹠ 犃ⶣ☏℅两个维テ〣⹠犃实现两个维テ对⻬齐㟙ㄯ https://drafts.csswg.org/css-grid/ | http://www.w3cplus.com/blog/tags/356.html
18. CSS Grid Layout术语 共㩜ⷙ⢈
    共㩜项䤎
    共㩜线
    共㩜轨礼
    单⍣㩜
    共㩜区⧿
    共㩜间忽 http://www.w3cplus.com/blog/tags/356.html
19. ⶺ义†个简单䢤共㩜 http://codepen.io/airen/full/WopBGB/
20. http://codepen.io/airen/full/WopBGB/
21. (NGZDQZ.C[QWV〣⹠ http://codepen.io/airen/full/oYZRwp/
22. http://codepen.io/airen/full/oYZRwp/
23. 共㩜䢤⎖ⶣ↟䝈㟙㻵 http://codepen.io/airen/full/aBJrEw/
24. http://codepen.io/airen/full/aBJrEw/
25. 共㩜䢤⎖ⶣ↟䝈㟙㻵 http://codepen.io/airen/full/yVMWKe/
26. http://codepen.io/airen/full/yVMWKe/
27. 共㩜䢤⎖ⶣ↟䝈㟙㻵 http://codepen.io/airen/full/xRqNzX/
28. http://codepen.io/airen/full/xRqNzX/
29. CSS Shapes 㑳䩔9GD⁍䨉ㆂ䣲㱁⦫䢤桰⑖刬‴将共⻚页设计㗰╧⑐㟐 䢤泸テԋⶣ⍡许⍣佀设计㐰‭☬䢤ㆂ状犃ゖ‴䝈㤔吊 䍖䢤㟙ㄯ让㞧⵷环绕着⍣佀牿㞧⵷☏℅环绕着ↀ䢤㤒 线设计刬‭†ⶺ审㤩䤔硌边䝬犀 https://drafts.csswg.org/css-shapes | http://www.w3cplus.com/blog/tags/418.html
30. https://drafts.csswg.org/css-shapes | http://www.w3cplus.com/blog/tags/418.html
31. 圆ㆂ䢤㤒线〣⹠ http://codepen.io/airen/full/MbmvVL/
32. http://codepen.io/airen/full/MbmvVL/
33. 圆ㆂ䢤㤒线〣⹠ http://codepen.io/airen/full/xRdLvV/
34. http://codepen.io/airen/full/xRdLvV/
35. Shapes + Clip-path http://codepen.io/airen/full/dOWVae | http://www.w3cplus.com/blog/tags/431.html
36. http://codepen.io/airen/full/dOWVae | http://www.w3cplus.com/blog/tags/431.html
37. 㤩条№䢤%55 @meida @supports @viewport https://www.w3.org/TR/css3-conditional/
38. CSS @supports 类⅜₮/QFGTPK\T䢤,5库犃"UWRRQTVU◨类⅜₮条№语 ★犃☏℅䝈来猥断浏览⢈牿ⷂ户䴏犀㡏♆㝏瑘%55䢤 属㉇规则ԋ https://www.w3.org/TR/css3-conditional/#at-supports | http://www.w3cplus.com/blog/tags/337.html
39. CSS @supports
40. CSS @supports http://codepen.io/airen/full/bwkRpX/
41. http://codepen.io/airen/full/bwkRpX/
42. CSS @supports http://codepen.io/airen/full/NbjwgN/
43. http://codepen.io/airen/full/NbjwgN/
44. %55吊ⶺ义属㉇ %55吊ⶺ义属㉇犃◨称为%55变揯 https://drafts.csswg.org/css-variables/
45. %55吊ⶺ义属㉇ %55吊ⶺ义属㉇犃◨称为%55变揯 https://drafts.csswg.org/css-variables/ | http://www.w3cplus.com/blog/tags/602.html
46. %55吊ⶺ义属㉇ https://drafts.csswg.org/css-variables/ | http://www.w3cplus.com/blog/tags/602.html
47. %55吊ⶺ义属㉇ ↟䝈ň ʼn吊ⶺ†个属㉇犃䍖☮礗过XCT ␝数⥈ %55规则⁍调䝈〒声㠮⮝䢤吊ⶺ义属㉇牿变揯犀 https://drafts.csswg.org/css-variables/ | http://www.w3cplus.com/blog/tags/602.html
48. %55吊ⶺ义属㉇ http://codepen.io/airen/full/NbjwEd/
49. http://codepen.io/airen/full/NbjwEd/
50. %55吊ⶺ义属㉇ %55吊ⶺ义属㉇じ⚬%55䢤ECNE ␝数†得↟䝈 https://drafts.csswg.org/css-variables/ | http://www.w3cplus.com/blog/tags/172.html
51. %55吊ⶺ义属㉇ http://codepen.io/airen/full/jMjvON/
52. http://codepen.io/airen/full/jMjvON/
53. ⎖ⶣ%55㟐疣㉇
54. %55䀗☨㱁ㄯ background-blend-mode mix-blend-mode http://www.w3cplus.com/blog/tags/408.html
55. %55䀗☨㱁ㄯ http://codepen.io/airen/full/PbmEYG/
56. http://codepen.io/airen/full/PbmEYG/
57. %55滤镜 filter backdrop-filter https://www.w3.org/TR/filter-effects/ | http://www.w3cplus.com/blog/tags/119.html
58. http://codepen.io/airen/full/pJPWpY/
59. 䀗☨㱁ㄯ‮滤镜结☨ http://codepen.io/airen/full/PbmENW/ | http://bennettfeely.com/image-effects/
60. http://codepen.io/airen/full/PbmENW/ | http://bennettfeely.com/image-effects/
61. CSS element() element() 可以直接⽤来克隆HTML中任何元素 https://www.w3.org/TR/css4-images/ | `http://www.w3cplus.com/css4/css-element-function.html
62. http://codepen.io/airen/full/RoVxgG/
63. http://codepen.io/airen/full/RoVxgG/
64. CSS box-reflect http://www.w3cplus.com/css3/css3-box-reflect.html
66. 琎续
67. THANK YOU