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

CSS Future

E2a4044058c9d32770da590571e956b8?s=47 w3cplus
November 29, 2016
Technology
2
470

CSS Future

聊聊CSS的几个新特性

E2a4044058c9d32770da590571e956b8?s=128

w3cplus

November 29, 2016
Tweet

More Decks by w3cplus

See All by w3cplus
手淘互动动效探索
E2a4044058c9d32770da590571e956b8?s=48 w3cplus
0
120
Web Animation
E2a4044058c9d32770da590571e956b8?s=48 w3cplus
5
400
CSS3带来的变化
E2a4044058c9d32770da590571e956b8?s=48 w3cplus
0
1.3k
Web重构之道
E2a4044058c9d32770da590571e956b8?s=48 w3cplus
1
2.5k
Sass带来的变革
E2a4044058c9d32770da590571e956b8?s=48 w3cplus
2
440
Responsive小试牛刀
E2a4044058c9d32770da590571e956b8?s=48 w3cplus
3
470
CSS预处器——Sass、LESS和Stylus实践
E2a4044058c9d32770da590571e956b8?s=48 w3cplus
0
310
http协议与缓存简述
E2a4044058c9d32770da590571e956b8?s=48 w3cplus
5
460
前端自动化工具探索
E2a4044058c9d32770da590571e956b8?s=48 w3cplus
4
770

Other Decks in Technology

See All in Technology
Server-side Kotlin in LINE Messaging API
A3966f193f4bef226a0d3e3c1f728d7f?s=48 line_developers
PRO
0
170
BFFとmicroservicesアーキテクチャ
8feecda0ab340ae974eea7f1d86b85ff?s=48 hirac1220
0
110
開発者のための GitHub Organization の安全な運用と 継続的なモニタリング
9b565bcc5e776225de62be25cc30f97f?s=48 flatt_security
3
3.9k
キャッチアップ Android 13 / Catch up Android 13
D2bcabeeb1ddff142fb8988b412cb4d3?s=48 yanzm
2
1.2k
LINEのData Platform室が実践する大規模分散環境のCapacity Planning
A3966f193f4bef226a0d3e3c1f728d7f?s=48 line_developers
PRO
0
770
LINEポイントクラブにおける PerlからKotlinへの移行を振り返る / The migration from Perl to Kotlin at LINE Point Club
A3966f193f4bef226a0d3e3c1f728d7f?s=48 line_developers
PRO
0
170
testing journey / テストが嫌いでIT業界を離れるはずだったのに〜テスト嫌いが現場で品質改善を実施するまでの物語〜
055e63a40190884fdc17b918c6f6aa7e?s=48 aki_moon
1
430
我々はなぜテストをするのか？
A64ac825509279a770c13c6fc517f11a?s=48 kawaguti
PRO
0
590
【初心者向け】ググらずに！？ ターミナル上で Pythonオブジェクトを調べよう
9c156659cc0b28cafff09624eca5ffd0?s=48 yumihiki
0
110
Kubernetesの上に作る、統一されたマイクロサービス運用体験
5292dd0924f5e440a4b7ff40b165a0b4?s=48 tkuchiki
1
1.3k
OSS ことはじめ
Eabad423977cfc6873b8f5df62b848a6?s=48 hsbt
3
590
動的ルーティング・ゲートウェイ (DRG) 概要
0d29d155ce5c5a93ed46363626da3ea7?s=48 ocise
0
110

Featured

See All Featured
Unsuck your backbone
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
659
55k
Build your cross-platform service in a week with App Engine
5f83ef806155b403c3393160ce51f955?s=48 jlugia
219
17k
Stop Working from a Prison Cell
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
261
17k
Three Pipe Problems
11c84dff30266b907714802088852677?s=48 jasonvnalue
89
8.6k
ReactJS: Keep Simple. Everything can be a component!
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
655
120k
Gamification - CAS2011
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
75
3.9k
Raft: Consensus for Rubyists
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
126
5.4k
Keith and Marios Guide to Fast Websites
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
404
21k
Faster Mobile Websites
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
28k
Helping Users Find Their Own Way: Creating Modern Search Experiences
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
7
1k
Debugging Ruby Performance
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
65
10k
Building Flexible Design Systems
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
310
33k

Transcript

  1. $44৽ಛੑ CZ!େയ 

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

  3. None
  4. None
  5. None
  6. None

  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

  65. None

  66. 琎续

  67. THANK YOU

  68. None