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
610
CSS Future
聊聊CSS的几个新特性
w3cplus
November 29, 2016
Tweet
Share
More Decks by w3cplus
See All by w3cplus
手淘互动动效探索
w3cplus
0
210
Web Animation
w3cplus
5
480
CSS3带来的变化
w3cplus
0
1.4k
Web重构之道
w3cplus
1
2.8k
Sass带来的变革
w3cplus
2
580
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
Obsidian応用活用術
onikun94
1
450
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
17
7.8k
生成AIでセキュリティ運用を効率化する話
sakaitakeshi
0
490
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
200
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
620
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
7
3.4k
2025年夏 コーディングエージェントを統べる者
nwiizo
0
140
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
140
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
8
2.7k
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
210
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
300
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
210
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Context Engineering - Making Every Token Count
addyosmani
1
26
Gamification - CAS2011
davidbonilla
81
5.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Faster Mobile Websites
deanohume
309
31k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
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