Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Future

w3cplus
November 29, 2016

CSS Future

聊聊CSS的几个新特性

w3cplus

November 29, 2016
Tweet

More Decks by w3cplus

Other Decks in Technology

Transcript

  1. $44৽ಛੑ
    CZ!େയ

    View Slide

  2. ⭇䅀
    伪⑭䴏犃⹑职₮㿸宝

    View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  39. CSS @supports

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  53. ⎖ⶣ%55㟐疣㉇

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  57. %55滤镜
    filter
    backdrop-filter
    https://www.w3.org/TR/filter-effects/ | http://www.w3cplus.com/blog/tags/119.html

    View Slide

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

    View Slide

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

    View Slide

  60. http://codepen.io/airen/full/PbmENW/ | http://bennettfeely.com/image-effects/

    View Slide

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

    View Slide

  62. http://codepen.io/airen/full/RoVxgG/

    View Slide

  63. http://codepen.io/airen/full/RoVxgG/

    View Slide

  64. CSS box-reflect
    http://www.w3cplus.com/css3/css3-box-reflect.html

    View Slide

  65. View Slide

  66. 琎续

    View Slide

  67. THANK YOU

    View Slide

  68. View Slide