CSS
https://gyazo.com/6a9e608aabfb068ecc93e94122f300ba
Cascading Style Sheets
描述HTML或XML等文件外觀的樣式表語言
定義文件裡的結構元素如何呈現在螢幕、語音閱讀或各種媒介上
Can I use... Support tables for HTML5, CSS3, etc
https://cssstats.com/
Learn CSS
CSS 專家密技
CSS 黑魔法小技巧
Lopan.jp
Variable fonts
便利屬性
SVG vector-effect: non-scaling-stroke
縮放 SVG 圖片時維持 stroke 粗細不變
justify-content: space-evenly
display: contents
隱藏容器,並提昇底下的子元素
display: flow-root
解除子元素的 float
::marker pseudo-element
:any-link selector
等同 :link 與 :visited
list argument of :not()
all, unset, revert, initial
all: 設定所有屬性,例如指定為 initial
all: initial;
initial: 設為預設值
font-weight: initial;
unset: 若有繼承則設為繼承值,無則設為預設值
font-weight: unset;
revert: 設為使用者終端的設定值
font-weight: revert;
@support
env()
表格
屬性: minlength, capture inputmode, form
minlength: 指定傳送內容的最小長度
capture: 於手機上改為啟動鏡頭
inputmode: 更改手機上的輸入鍵盤
form: 將 form tag 外的元素視為 form 的一部分
caret-color: 輸入錨線的顏色
:read-only
:in-range, :out-of-range
:focus-within
:default
::placeholder
其他
will-change
font-display
Subresource Integrity
ping屬性
scroll()
scroll() - CSS: Cascading Style Sheets | MDN
Scroll-driven AnimationsでCSSでの実装が大きく変わる! スクロールをトリガーにしたアニメーションを実装する方法 | コリス
スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張 -Scroll-Driven Animations Debugger | コリス