@fwkui/x-css 1.0.2 → 1.0.4

package/DICTIONARY.md

@@ -0,0 +1,599 @@
+# DICTIONARY.md — Từ điển viết tắt XCSS
+
+Tài liệu này giúp bạn **liên tưởng nhanh** từ `class` → **thuộc tính CSS** → **giá trị**.
+
+## Cú pháp class
+
+- Dạng cơ bản: `[prefix:][layer][prop][value][@selector]`
+
+- `prefix`: `xs:` `sm:` `md:` `lg:` `xl:` `2xl:` `sma:` `mda:` `lga:` `xla:`
+
+- `layer`: số ngay sau prefix (vd `sm:2...` → layer 2)
+
+- `@selector`: selector phụ (vd `@:hover`, `@::before`)
+
+- `&`: ghép nhiều cặp `prop+value` trong 1 class (vd `p10px&bgc#fff`)
+
+
+## Quy tắc giá trị (value)
+
+- `p10px` → `padding:10px`
+
+- `p!10px` → thêm `!important`
+
+- `w--size` → `width:var(--size)`
+
+- `bg{linear-gradient(...)}` → dùng giá trị thô trong `{...}`
+
+- Một số shorthand đặc biệt: `mx/my/px/py/bdx/bdy` tự bung thành 2 thuộc tính.
+
+
+## Value ext mặc định
+
+| Key | Mở rộng thành |
+| --- | --- |
+| `n` | `none` |
+| `nm` | `normal` |
+| `a` | `auto` |
+| `i` | `inherit` |
+| `in` | `initial` |
+| `is` | `inline-start` |
+| `ie` | `inline-end` |
+| `tr` | `transparent` |
+| `c` | `center` |
+| `cl` | `collapse` |
+| `l` | `left` |
+| `r` | `right` |
+| `h` | `hidden` |
+| `v` | `visible` |
+| `s` | `start` |
+| `e` | `end` |
+| `t` | `top` |
+| `b` | `bottom` |
+| `bs` | `block-start` |
+| `be` | `block-end` |
+
+
+## Tra cứu theo nhóm
+
+- [Typography & Text](#typography-text)
+- [Color](#color)
+- [Background & Backdrop](#background-backdrop)
+- [Spacing (Margin/Padding/Gap)](#spacing-margin-padding-gap)
+- [Sizing](#sizing)
+- [Layout & Interaction](#layout-interaction)
+- [Flex/Align/Justify](#flex-align-justify)
+- [Grid](#grid)
+- [Border & Outline](#border-outline)
+- [Effects](#effects)
+- [Transform](#transform)
+- [Transition](#transition)
+- [Animation](#animation)
+- [Webkit](#webkit)
+- [Khác](#khac)
+
+
+<a id="typography-text"></a>
+
+## Typography & Text
+
+| Key | Thuộc tính CSS | Giá trị viết tắt (nếu có) |
+| --- | --- | --- |
+| `dir` | `direction` | Giá trị CSS thô (raw) |
+| `ff` | `font-family` | `a` → `ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`<br>`s` → `ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif`<br>`m` → `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace` |
+| `fn` | `font` | Giá trị CSS thô (raw) |
+| `fnf` | `font-family` | Giá trị CSS thô (raw) |
+| `fnfs` | `font-feature-settings` | Giá trị CSS thô (raw) |
+| `fnk` | `font-kerning` | Giá trị CSS thô (raw) |
+| `fnlo` | `font-language-override` | Giá trị CSS thô (raw) |
+| `fnos` | `font-optical-sizing` | Giá trị CSS thô (raw) |
+| `fnp` | `font-palette` | Giá trị CSS thô (raw) |
+| `fns` | `font-size` | Giá trị CSS thô (raw) |
+| `fnsa` | `font-size-adjust` | Giá trị CSS thô (raw) |
+| `fnsp` | `font-synthesis-position` | Giá trị CSS thô (raw) |
+| `fnss` | `font-synthesis-style` | Giá trị CSS thô (raw) |
+| `fnssc` | `font-synthesis-small-caps` | Giá trị CSS thô (raw) |
+| `fnstr` | `font-stretch` | Giá trị CSS thô (raw) |
+| `fnsty` | `font-style` | Giá trị CSS thô (raw) |
+| `fnsw` | `font-synthesis-weight` | Giá trị CSS thô (raw) |
+| `fnsyn` | `font-synthesis` | Giá trị CSS thô (raw) |
+| `fnv` | `font-variant` | Giá trị CSS thô (raw) |
+| `fnva` | `font-variant-alternates` | Giá trị CSS thô (raw) |
+| `fnvc` | `font-variant-caps` | Giá trị CSS thô (raw) |
+| `fnve` | `font-variant-emoji` | Giá trị CSS thô (raw) |
+| `fnvea` | `font-variant-east-asian` | Giá trị CSS thô (raw) |
+| `fnvl` | `font-variant-ligatures` | Giá trị CSS thô (raw) |
+| `fnvn` | `font-variant-numeric` | Giá trị CSS thô (raw) |
+| `fnvp` | `font-variant-position` | Giá trị CSS thô (raw) |
+| `fnvs` | `font-variation-settings` | Giá trị CSS thô (raw) |
+| `fnw` | `font-weight` | Giá trị CSS thô (raw) |
+| `fw` | `font-weight` | Giá trị CSS thô (raw) |
+| `hyp` | `hyphens` | `m` → `manual` |
+| `lh` | `line-height` | Giá trị CSS thô (raw) |
+| `lts` | `letter-spacing` | `n` → `normal` |
+| `oflw` | `overflow-wrap` | `c` → `clip`<br>`s` → `scroll` |
+| `ta` | `text-align` | `s` → `start`<br>`e` → `end`<br>`l` → `left`<br>`r` → `right`<br>`c` → `center`<br>`j` → `justify`<br>`mp` → `match-parent`<br>`mc` → `-moz-center`<br>`wc` → `-webkit-center` |
+| `tal` | `text-align-last` | `s` → `start`<br>`e` → `end`<br>`l` → `left`<br>`r` → `right`<br>`c` → `center`<br>`j` → `justify` |
+| `tcu` | `text-combine-upright` | Giá trị CSS thô (raw) |
+| `td` | `text-decoration` | `u` → `underline` |
+| `tdc` | `text-decoration-color` | Giá trị CSS thô (raw) |
+| `tdl` | `text-decoration-line` | `u` → `underline`<br>`o` → `overline`<br>`lt` → `line-through`<br>`b` → `blink` |
+| `tds` | `text-decoration-style` | `db` → `double`<br>`dt` → `dotted`<br>`ds` → `dashed`<br>`w` → `wavy` |
+| `tdsi` | `text-decoration-skip-ink` | Giá trị CSS thô (raw) |
+| `tdt` | `text-decoration-thickness` | `ff` → `from-font` |
+| `tec` | `text-emphasis-color` | Giá trị CSS thô (raw) |
+| `tep` | `text-emphasis-position` | `or` → `over right`<br>`ol` → `over left`<br>`ur` → `under right`<br>`ul` → `under left`<br>`lo` → `left over`<br>`ru` → `right under`<br>`lu` → `left under` |
+| `teph` | `text-emphasis` | Giá trị CSS thô (raw) |
+| `tes` | `text-emphasis-style` | Giá trị CSS thô (raw) |
+| `ti` | `text-indent` | Giá trị CSS thô (raw) |
+| `tj` | `text-justify` | `iw` → `inter-word`<br>`ic` → `inter-character`<br>`d` → `distribute` |
+| `tol` | `text-overflow` | `c` → `clip`<br>`e` → `ellipsis` |
+| `tor` | `text-orientation` | `m` → `mixed`<br>`u` → `upright`<br>`sr` → `sideways-right`<br>`sl` → `sideways-left`<br>`s` → `sideways`<br>`ugo` → `use-glyph-orientation` |
+| `trd` | `text-rendering` | `op` → `optimizeSpeed`<br>`ol` → `optimizeLegibility`<br>`g` → `geometricPrecision` |
+| `tsh` | `text-shadow` | Giá trị CSS thô (raw) |
+| `ttr` | `text-transform` | `c` → `capitalize`<br>`u` → `uppercase`<br>`l` → `lowercase`<br>`fw` → `full-width`<br>`fsk` → `full-size-kana` |
+| `tuo` | `text-underline-offset` | Giá trị CSS thô (raw) |
+| `tup` | `text-underline-position` | `u` → `under`<br>`l` → `left`<br>`r` → `right`<br>`ul` → `under left`<br>`ru` → `right under` |
+| `tw` | `text-wrap` | `w` → `wrap`<br>`n` → `nowrap`<br>`b` → `balance`<br>`p` → `pretty` |
+| `unib` | `unicode-bidi` | Giá trị CSS thô (raw) |
+| `wrb` | `word-break` | Giá trị CSS thô (raw) |
+| `wrs` | `word-spacing` | Giá trị CSS thô (raw) |
+| `wrtm` | `writing-mode` | Giá trị CSS thô (raw) |
+| `ws` | `white-space` | Giá trị CSS thô (raw) |
+
+
+<a id="color"></a>
+
+## Color
+
+| Key | Thuộc tính CSS | Giá trị viết tắt (nếu có) |
+| --- | --- | --- |
+| `acc` | `accent-color` | `u` → `unset` |
+| `c` | `color` | `i` → `inherit`<br>`t` → `transparent` |
+| `colrc` | `column-rule-color` | Giá trị CSS thô (raw) |
+| `crtc` | `caret-color` | Giá trị CSS thô (raw) |
+| `opc` | `opacity` | Giá trị CSS thô (raw) |
+| `sbc` | `scrollbar-color` | Giá trị CSS thô (raw) |
+
+
+<a id="background-backdrop"></a>
+
+## Background & Backdrop
+
+| Key | Thuộc tính CSS | Giá trị viết tắt (nếu có) |
+| --- | --- | --- |
+| `bg` | `background` | Giá trị CSS thô (raw) |
+| `bga` | `background-attachment` | `s` → `scroll`<br>`f` → `fixed`<br>`l` → `local` |
+| `bgbm` | `background-blend-mode` | `n` → `normal`<br>`m` → `multiply`<br>`s` → `screen`<br>`o` → `overlay`<br>`d` → `darken`<br>`l` → `lighten`<br>`cd` → `color-dodge`<br>`i` → `color-burn`<br>`hl` → `hard-light`<br>`sl` → `soft-light`<br>`di` → `difference`<br>`e` → `exclusion`<br>`h` → `hue`<br>`sa` → `saturation`<br>`c` → `color`<br>`lu` → `luminosity` |
+| `bgc` | `background-color` | `t` → `transparent`<br>`c` → `currentcolor` |
+| `bgcl` | `background-clip` | `bb` → `border-box`<br>`pb` → `padding-box`<br>`cb` → `content-box`<br>`t` → `text` |
+| `bgi` | `background-image` | Giá trị CSS thô (raw) |
+| `bgo` | `background-origin` | `bb` → `border-box`<br>`pb` → `padding-box`<br>`cb` → `content-box` |
+| `bgp` | `background-position` | `t` → `top`<br>`b` → `bottom`<br>`l` → `left`<br>`r` → `right`<br>`c` → `center`<br>`lt` → `left top`<br>`ct` → `center top`<br>`rt` → `right top`<br>`lc` → `left center`<br>`cc` → `center center`<br>`rc` → `right center`<br>`lb` → `left bottom`<br>`cb` → `center bottom`<br>`rb` → `right bottom` |
+| `bgpx` | `background-position-x` | `l` → `left`<br>`r` → `right`<br>`c` → `center` |
+| `bgpy` | `background-position-y` | `t` → `top`<br>`b` → `bottom`<br>`c` → `center` |
+| `bgr` | `background-repeat` | `r` → `repeat`<br>`x` → `repeat-x`<br>`y` → `repeat-y`<br>`s` → `space`<br>`rn` → `round`<br>`n` → `no-repeat`<br>`rs` → ` repeat space`<br>`rr` → `repeat repeat`<br>`nr` → `no-repeat round` |
+| `bgs` | `background-size` | `c` → `contain` |
+| `bkdf` | `backdrop-filter` | Giá trị CSS thô (raw) |
+
+
+<a id="spacing-margin-padding-gap"></a>
+
+## Spacing (Margin/Padding/Gap)
+
+| Key | Thuộc tính CSS | Giá trị viết tắt (nếu có) |
+| --- | --- | --- |
+| `colg` | `column-gap` | Giá trị CSS thô (raw) |
+| `gap` | `gap` | Giá trị CSS thô (raw) |
+| `m` | `margin` | Giá trị CSS thô (raw) |
+| `mb` | `margin-bottom` | Giá trị CSS thô (raw) |
+| `mbe` | `margin-block-end` | Giá trị CSS thô (raw) |
+| `mblk` | `margin-block` | Giá trị CSS thô (raw) |
+| `mbsta` | `margin-block-start` | Giá trị CSS thô (raw) |
+| `mie` | `margin-inline-end` | Giá trị CSS thô (raw) |
+| `min` | `margin-inline` | Giá trị CSS thô (raw) |
+| `mista` | `margin-inline-start` | Giá trị CSS thô (raw) |
+| `ml` | `margin-left` | Giá trị CSS thô (raw) |
+| `mr` | `margin-right` | Giá trị CSS thô (raw) |
+| `mt` | `margin-top` | Giá trị CSS thô (raw) |
+| `p` | `padding` | Giá trị CSS thô (raw) |
+| `pb` | `padding-bottom` | Giá trị CSS thô (raw) |
+| `pbe` | `padding-block-end` | Giá trị CSS thô (raw) |
+| `pblk` | `padding-block` | Giá trị CSS thô (raw) |
+| `pbs` | `padding-block-start` | Giá trị CSS thô (raw) |
+| `pi` | `padding-inline` | `s` → `start`<br>`c` → `center`<br>`e` → `end`<br>`b` → `baseline`<br>`st` → `stretch` |
+| `pie` | `padding-inline-end` | Giá trị CSS thô (raw) |
+| `pis` | `padding-inline-start` | Giá trị CSS thô (raw) |
+| `pl` | `padding-left` | Giá trị CSS thô (raw) |
+| `pr` | `padding-right` | Giá trị CSS thô (raw) |
+| `pt` | `padding-top` | Giá trị CSS thô (raw) |
+| `rgap` | `row-gap` | Giá trị CSS thô (raw) |
+
+
+<a id="sizing"></a>
+
+## Sizing
+
+| Key | Thuộc tính CSS | Giá trị viết tắt (nếu có) |
+| --- | --- | --- |
+| `ar` | `aspect-ratio` | `s` → `1 / 1`<br>`v` → `16 / 9` |
+| `blks` | `block-size` | Giá trị CSS thô (raw) |
+| `h` | `height` | `mic` → `min-content`<br>`mac` → `max-content`<br>`fc` → `fit-content` |
+| `ins` | `inline-size` | Giá trị CSS thô (raw) |
+| `mbs` | `max-block-size` | Giá trị CSS thô (raw) |
+| `mh` | `max-height` | Giá trị CSS thô (raw) |
+| `mibs` | `min-block-size` | Giá trị CSS thô (raw) |
+| `mih` | `min-height` | `f` → `100%`<br>`mic` → `min-content`<br>`mac` → `max-content`<br>`fc` → `fit-content` |
+| `mis` | `max-inline-size` | Giá trị CSS thô (raw) |
+| `misz` | `min-inline-size` | Giá trị CSS thô (raw) |
+| `miw` | `min-width` | `f` → `100%`<br>`mic` → `min-content`<br>`mac` → `max-content`<br>`fc` → `fit-content` |
+| `mw` | `max-width` | Giá trị CSS thô (raw) |
+| `mxw` | `max-width` | Giá trị CSS thô (raw) |
+| `w` | `width` | `mic` → `min-content`<br>`mac` → `max-content`<br>`fc` → `fit-content`<br>`f` → `100%` |
+
+
+<a id="layout-interaction"></a>
+
+## Layout & Interaction
+
+| Key | Thuộc tính CSS | Giá trị viết tắt (nếu có) |
+| --- | --- | --- |
+| `b` | `bottom` | Giá trị CSS thô (raw) |
+| `clr` | `clear` | Giá trị CSS thô (raw) |
+| `cnt` | `contain` | Giá trị CSS thô (raw) |
+| `cr` | `cursor` | `p` → `pointer`<br>`d` → `default`<br>`cm` → `context-menu`<br>`h` → `help`<br>`pg` → `progress`<br>`w` → `wait`<br>`c` → `cell`<br>`t` → `text`<br>`vt` → `vertical-text`<br>`al` → `alias`<br>`cp` → `copy`<br>`mo` → `move`<br>`nd` → `no-drop`<br>`na` → `not-allowed`<br>`gr` → `grab`<br>`gb` → `grabbing`<br>`as` → `all-scroll`<br>`colr` → `col-resize`<br>`rr` → `row-resize`<br>`nr` → `n-resize`<br>`er` → `e-resize`<br>`sr` → `s-resize`<br>`wr` → `w-resize`<br>`ner` → `ne-resize`<br>`ser` → `se-resize`<br>`swr` → `sw-resize`<br>`ewr` → `ew-resize`<br>`nsr` → `ns-resize`<br>`nesw` → `nesw-resize`<br>`nwse` → `nwse-resize`<br>`zi` → `zoom-in`<br>`zo` → `zoom-out` |
+| `d` | `display` | `b` → `block`<br>`ib` → `inline-block`<br>`i` → `inline`<br>`f` → `flex`<br>`if` → `inline-flex`<br>`t` → `table`<br>`it` → `inline-table`<br>`tcp` → `table-caption`<br>`tcell` → `table-cell`<br>`tcol` → `table-column`<br>`tcolg` → `table-column-group`<br>`tfg` → `table-footer-group`<br>`thg` → `table-header-group`<br>`trg` → `table-row-group`<br>`tr` → `table-row`<br>`fr` → `flow-root`<br>`g` → `grid`<br>`ig` → `inline-grid`<br>`c` → `contents`<br>`li` → `list-item` |
+| `fl` | `float` | `is` → `inline-start`<br>`ie` → `inline-end`<br>`r` → `right`<br>`l` → `left` |
+| `i` | `inset` | Giá trị CSS thô (raw) |
+| `ibe` | `inset-block-end` | Giá trị CSS thô (raw) |
+| `iblk` | `inset-block` | Giá trị CSS thô (raw) |
+| `ibsta` | `inset-block-start` | Giá trị CSS thô (raw) |
+| `ii` | `inset-inline` | Giá trị CSS thô (raw) |
+| `iie` | `inset-inline-end` | Giá trị CSS thô (raw) |
+| `iis` | `inset-inline-start` | Giá trị CSS thô (raw) |
+| `is` | `isolation` | `i` → `isolate` |
+| `l` | `left` | Giá trị CSS thô (raw) |
+| `of` | `object-fit` | `c` → `contain`<br>`cv` → `cover`<br>`f` → `fill`<br>`sd` → `scale-down` |
+| `ofl` | `overflow` | Giá trị CSS thô (raw) |
+| `oflx` | `overflow-x` | `c` → `clip`<br>`s` → `scroll` |
+| `ofly` | `overflow-y` | `c` → `clip`<br>`s` → `scroll` |
+| `op` | `object-position` | `b` → `bottom`<br>`c` → `center`<br>`l` → `left`<br>`r` → `right`<br>`t` → `top`<br>`lb` → `left bottom`<br>`lt` → `left top`<br>`rb` → `right bottom`<br>`rt` → `right top` |
+| `pe` | `pointer-events` | Giá trị CSS thô (raw) |
+| `pos` | `position` | `s` → `static`<br>`f` → `fixed`<br>`a` → `absolute`<br>`r` → `relative`<br>`st` → `sticky` |
+| `r` | `right` | Giá trị CSS thô (raw) |
+| `rsz` | `resize` | `b` → `both`<br>`h` → `horizontal`<br>`v` → `vertical` |
+| `t` | `top` | Giá trị CSS thô (raw) |
+| `toa` | `touch-action` | `p` → `pan-x`<br>`py` → `pan-y`<br>`pm` → `pan-x pan-y`<br>`pi` → `pinch-zoom` |
+| `us` | `user-select` | `t` → `text`<br>`all` → `all`<br>`c` → `contain` |
+| `v` | `visibility` | `c` → `collapse` |
+| `z` | `z-index` | Giá trị CSS thô (raw) |
+
+
+<a id="flex-align-justify"></a>
+
+## Flex/Align/Justify
+
+| Key | Thuộc tính CSS | Giá trị viết tắt (nếu có) |
+| --- | --- | --- |
+| `ac` | `align-content` | `s` → `start`<br>`e` → `end`<br>`fs` → `flex-start`<br>`fe` → `flex-end`<br>`n` → `normal`<br>`b` → `baseline`<br>`fb` → `first baseline`<br>`lb` → `last baseline`<br>`sp` → `space-between`<br>`sa` → `space-around`<br>`se` → `space-evenly`<br>`st` → `stretch`<br>`sc` → `safe center`<br>`uc` → `unsafe center` |
+| `ai` | `align-items` | `n` → `normal`<br>`c` → `center`<br>`s` → `start`<br>`e` → `end`<br>`fs` → `flex-start`<br>`fe` → `flex-end`<br>`ss` → `self-start`<br>`se` → `self-end`<br>`b` → `baseline`<br>`fb` → `first baseline`<br>`lb` → `last baseline`<br>`sc` → `safe center`<br>`uc` → `unsafe center` |
+| `as` | `align-self` | `n` → `normal`<br>`c` → `center`<br>`s` → `start`<br>`e` → `end`<br>`ss` → `self-start`<br>`se` → `self-end`<br>`fs` → `flex-start`<br>`fe` → `flex-end`<br>`b` → `baseline`<br>`fb` → `first baseline`<br>`lb` → `last baseline`<br>`st` → `stretch`<br>`sc` → `safe center`<br>`uc` → `unsafe center` |
+| `fx` | `flex` | `i` → `0 1 auto`<br>`a` → `1 1 auto` |
+| `fxb` | `flex-basis` | Giá trị CSS thô (raw) |
+| `fxd` | `flex-direction` | `r` → `row`<br>`rr` → `row-reverse`<br>`c` → `column`<br>`cr` → `column-reverse` |
+| `fxf` | `flex-flow` | Giá trị CSS thô (raw) |
+| `fxg` | `flex-grow` | Giá trị CSS thô (raw) |
+| `fxs` | `flex-shrink` | Giá trị CSS thô (raw) |
+| `fxw` | `flex-wrap` | `w` → `wrap`<br>`wr` → `wrap-reverse`<br>`n` → `nowrap` |
+| `jc` | `justify-content` | `c` → `center`<br>`s` → `start`<br>`e` → `end`<br>`fs` → `flex-start`<br>`fe` → `flex-end`<br>`l` → `left`<br>`r` → `right`<br>`n` → `normal`<br>`sp` → `space-between`<br>`sa` → `space-around`<br>`se` → `space-evenly`<br>`st` → `stretch`<br>`sc` → `safe center`<br>`uc` → `unsafe center` |
+| `ji` | `justify-items` | `n` → `normal`<br>`st` → `stretch`<br>`c` → `center`<br>`s` → `start`<br>`e` → `end`<br>`fs` → `flex-start`<br>`fe` → `flex-end`<br>`ss` → `self-start`<br>`se` → `self-end`<br>`l` → `left`<br>`r` → `right`<br>`b` → `baseline`<br>`fb` → `first baseline`<br>`lb` → `last baseline`<br>`lr` → `legacy right`<br>`ll` → `legacy left`<br>`lc` → `legacy center`<br>`sc` → `safe center`<br>`uc` → `unsafe center` |
+| `js` | `justify-self` | `n` → `normal`<br>`st` → `stretch`<br>`c` → `center`<br>`s` → `start`<br>`e` → `end`<br>`fs` → `flex-start`<br>`fe` → `flex-end`<br>`ss` → `self-start`<br>`se` → `self-end`<br>`l` → `left`<br>`r` → `right`<br>`b` → `baseline`<br>`sc` → `safe center`<br>`uc` → `unsafe center` |
+| `ord` | `order` | Giá trị CSS thô (raw) |
+| `plc` | `place-content` | Giá trị CSS thô (raw) |
+| `pli` | `place-items` | Giá trị CSS thô (raw) |
+| `pls` | `place-self` | Giá trị CSS thô (raw) |
+
+
+<a id="grid"></a>
+
+## Grid
+
+| Key | Thuộc tính CSS | Giá trị viết tắt (nếu có) |
+| --- | --- | --- |
+| `g` | `grid` | Giá trị CSS thô (raw) |
+| `ga` | `grid-area` | Giá trị CSS thô (raw) |
+| `gac` | `grid-auto-columns` | `mic` → `min-content`<br>`mac` → `max-content`<br>`mm` → `minmax(0, 1fr)` |
+| `gaf` | `grid-auto-flow` | `r` → `row`<br>`c` → `column`<br>`d` → `dense`<br>`rd` → `row dense`<br>`cd` → `column dense` |
+| `gar` | `grid-auto-rows` | `mic` → `min-content`<br>`mac` → `max-content`<br>`mm` → `minmax(0, 1fr)` |
+| `gc` | `grid-column` | `f` → `1 / -1` |
+| `gce` | `grid-column-end` | Giá trị CSS thô (raw) |
+| `gcs` | `grid-column-start` | Giá trị CSS thô (raw) |
+| `gr` | `grid-row` | `f` → `1 / -1` |
+| `gre` | `grid-row-end` | Giá trị CSS thô (raw) |
+| `grs` | `grid-row-start` | Giá trị CSS thô (raw) |
+| `gt` | `grid-template` | Giá trị CSS thô (raw) |
+| `gta` | `grid-template-areas` | Giá trị CSS thô (raw) |
+| `gtc` | `grid-template-columns` | `s` → `subgrid` |
+| `gtr` | `grid-template-rows` | `s` → `subgrid` |
+
+
+<a id="border-outline"></a>
+
+## Border & Outline
+
+| Key | Thuộc tính CSS | Giá trị viết tắt (nếu có) |
+| --- | --- | --- |
+| `bd` | `border` | `d` → `dotted`<br>`ds` → `dashed`<br>`db` → `double`<br>`g` → `groove`<br>`r` → `ridge`<br>`i` → `inset`<br>`o` → `outset` |
+| `bda` | `border-radius` | Giá trị CSS thô (raw) |
+| `bdb` | `border-bottom` | Giá trị CSS thô (raw) |
+| `bdbc` | `border-bottom-color` | Giá trị CSS thô (raw) |
+| `bdblc` | `border-block-color` | Giá trị CSS thô (raw) |
+| `bdble` | `border-block-end` | Giá trị CSS thô (raw) |
+| `bdblec` | `border-block-end-color` | Giá trị CSS thô (raw) |
+| `bdbles` | `border-block-end-style` | `d` → `dotted`<br>`ds` → `dashed`<br>`db` → `double`<br>`g` → `groove`<br>`r` → `ridge`<br>`i` → `inset`<br>`o` → `outset` |
+| `bdblew` | `border-block-end-width` | Giá trị CSS thô (raw) |
+| `bdblk` | `border-block` | Giá trị CSS thô (raw) |
+| `bdblr` | `border-bottom-left-radius` | Giá trị CSS thô (raw) |
+| `bdbls` | `border-block-start` | Giá trị CSS thô (raw) |
+| `bdblsc` | `border-block-start-color` | Giá trị CSS thô (raw) |
+| `bdblss` | `border-block-start-style` | `d` → `dotted`<br>`ds` → `dashed`<br>`db` → `double`<br>`g` → `groove`<br>`r` → `ridge`<br>`i` → `inset`<br>`o` → `outset` |
+| `bdblst` | `border-block-style` | `d` → `dotted`<br>`ds` → `dashed`<br>`db` → `double`<br>`g` → `groove`<br>`r` → `ridge`<br>`i` → `inset`<br>`o` → `outset` |
+| `bdblsw` | `border-block-start-width` | Giá trị CSS thô (raw) |
+| `bdblwi` | `border-block-width` | Giá trị CSS thô (raw) |
+| `bdbrr` | `border-bottom-right-radius` | Giá trị CSS thô (raw) |
+| `bdbst` | `border-bottom-style` | `d` → `dotted`<br>`ds` → `dashed`<br>`db` → `double`<br>`g` → `groove`<br>`r` → `ridge`<br>`i` → `inset`<br>`o` → `outset` |
+| `bdbw` | `border-bottom-width` | `t` → `thin`<br>`m` → `medium`<br>`th` → `thick` |
+| `bdc` | `border-color` | Giá trị CSS thô (raw) |
+| `bdcl` | `border-collapse` | `s` → `separate`<br>`c` → `collapse` |
+| `bdeer` | `border-end-end-radius` | Giá trị CSS thô (raw) |
+| `bdesr` | `border-end-start-radius` | Giá trị CSS thô (raw) |
+| `bdi` | `border-inline` | Giá trị CSS thô (raw) |
+| `bdic` | `border-inline-color` | Giá trị CSS thô (raw) |
+| `bdie` | `border-inline-end` | Giá trị CSS thô (raw) |
+| `bdiec` | `border-inline-end-color` | Giá trị CSS thô (raw) |
+| `bdies` | `border-inline-end-style` | Giá trị CSS thô (raw) |
+| `bdiew` | `border-inline-end-width` | Giá trị CSS thô (raw) |
+| `bdimg` | `border-image` | Giá trị CSS thô (raw) |
+| `bdinw` | `border-inline-width` | Giá trị CSS thô (raw) |
+| `bdio` | `border-image-outset` | Giá trị CSS thô (raw) |
+| `bdir` | `border-image-repeat` | `st` → `stretch`<br>`r` → `repeat`<br>`rn` → `round`<br>`s` → `space` |
+| `bdis` | `border-image-slice` | Giá trị CSS thô (raw) |
+| `bdisc` | `border-inline-start-color` | Giá trị CSS thô (raw) |
+| `bdisrc` | `border-image-source` | Giá trị CSS thô (raw) |
+| `bdiss` | `border-inline-start-style` | Giá trị CSS thô (raw) |
+| `bdista` | `border-inline-start` | Giá trị CSS thô (raw) |
+| `bdistl` | `border-inline-style` | Giá trị CSS thô (raw) |
+| `bdisw` | `border-inline-start-width` | Giá trị CSS thô (raw) |
+| `bdiw` | `border-image-width` | Giá trị CSS thô (raw) |
+| `bdl` | `border-left` | Giá trị CSS thô (raw) |
+| `bdlc` | `border-left-color` | Giá trị CSS thô (raw) |
+| `bdls` | `border-left-style` | Giá trị CSS thô (raw) |
+| `bdlw` | `border-left-width` | `t` → `thin`<br>`m` → `medium`<br>`th` → `thick` |
+| `bdr` | `border-right` | Giá trị CSS thô (raw) |
+| `bdra` | `border-radius` | Giá trị CSS thô (raw) |
+| `bdrc` | `border-right-color` | Giá trị CSS thô (raw) |
+| `bdrs` | `border-right-style` | `dt` → `dotted`<br>`ds` → `dashed`<br>`s` → `solid`<br>`db` → `double`<br>`g` → `groove`<br>`r` → `ridge`<br>`in` → `inset`<br>`out` → `outset` |
+| `bdrw` | `border-right-width` | `t` → `thin`<br>`m` → `medium`<br>`th` → `thick` |
+| `bds` | `border-style` | `dt` → `dotted`<br>`ds` → `dashed`<br>`s` → `solid`<br>`db` → `double`<br>`g` → `groove`<br>`r` → `ridge`<br>`in` → `inset`<br>`out` → `outset` |
+| `bdser` | `border-start-end-radius` | Giá trị CSS thô (raw) |
+| `bdsp` | `border-spacing` | Giá trị CSS thô (raw) |
+| `bdssr` | `border-start-start-radius` | Giá trị CSS thô (raw) |
+| `bdt` | `border-top` | Giá trị CSS thô (raw) |
+| `bdtc` | `border-top-color` | Giá trị CSS thô (raw) |
+| `bdtlr` | `border-top-left-radius` | Giá trị CSS thô (raw) |
+| `bdtrr` | `border-top-right-radius` | Giá trị CSS thô (raw) |
+| `bdts` | `border-top-style` | `dt` → `dotted`<br>`ds` → `dashed`<br>`s` → `solid`<br>`db` → `double`<br>`g` → `groove`<br>`r` → `ridge`<br>`in` → `inset`<br>`out` → `outset` |
+| `bdtw` | `border-top-width` | `t` → `thin`<br>`m` → `medium`<br>`th` → `thick` |
+| `bdw` | `border-width` | `t` → `thin`<br>`m` → `medium`<br>`th` → `thick` |
+| `olc` | `outline-color` | `i` → `inherit`<br>`c` → `currentColor`<br>`t` → `transparent` |
+| `oli` | `outline` | Giá trị CSS thô (raw) |
+| `olo` | `outline-offset` | Giá trị CSS thô (raw) |
+| `ols` | `outline-style` | `dt` → `dotted`<br>`ds` → `dashed`<br>`s` → `solid`<br>`db` → `double`<br>`g` → `groove`<br>`r` → `ridge`<br>`in` → `inset`<br>`out` → `outset` |
+| `olw` | `outline-width` | `t` → `thin`<br>`m` → `medium`<br>`th` → `thick` |
+
+
+<a id="effects"></a>
+
+## Effects
+
+| Key | Thuộc tính CSS | Giá trị viết tắt (nếu có) |
+| --- | --- | --- |
+| `bxsh` | `box-shadow` | Giá trị CSS thô (raw) |
+| `bxshd` | `box-shadow` | Giá trị CSS thô (raw) |
+| `clpp` | `clip-path` | Giá trị CSS thô (raw) |
+| `flt` | `filter` | Giá trị CSS thô (raw) |
+| `mbd` | `mix-blend-mode` | `n` → `normal`<br>`m` → `multiply`<br>`s` → `screen`<br>`o` → `overlay`<br>`d` → `darken`<br>`l` → `lighten`<br>`cd` → `color-dodge`<br>`i` → `color-burn`<br>`hl` → `hard-light`<br>`sl` → `soft-light`<br>`di` → `difference`<br>`e` → `exclusion`<br>`h` → `hue`<br>`sa` → `saturation`<br>`c` → `color`<br>`lu` → `luminosity` |
+
+
+<a id="transform"></a>
+
+## Transform
+
+| Key | Thuộc tính CSS | Giá trị viết tắt (nếu có) |
+| --- | --- | --- |
+| `tra` | `transform` | Giá trị CSS thô (raw) |
+| `trab` | `transform-box` | Giá trị CSS thô (raw) |
+| `trao` | `transform-origin` | Giá trị CSS thô (raw) |
+| `tras` | `transform-style` | Giá trị CSS thô (raw) |
+
+
+<a id="transition"></a>
+
+## Transition
+
+| Key | Thuộc tính CSS | Giá trị viết tắt (nếu có) |
+| --- | --- | --- |
+| `tran` | `transition` | Giá trị CSS thô (raw) |
+| `tranb` | `transition-behavior` | Giá trị CSS thô (raw) |
+| `trand` | `transition-delay` | Giá trị CSS thô (raw) |
+| `trandur` | `transition-duration` | Giá trị CSS thô (raw) |
+| `tranp` | `transition-property` | Giá trị CSS thô (raw) |
+| `trantf` | `transition-timing-function` | Giá trị CSS thô (raw) |
+
+
+<a id="animation"></a>
+
+## Animation
+
+| Key | Thuộc tính CSS | Giá trị viết tắt (nếu có) |
+| --- | --- | --- |
+| `ani` | `animation` | Giá trị CSS thô (raw) |
+| `anic` | `animation-composition` | `r` → `replace`<br>`a` → `add`<br>`ac` → `accumulate`<br>`ra` → `replace, add`<br>`aac` → `add, accumulate`<br>`raac` → `replace, add, accumulate` |
+| `anide` | `animation-delay` | Giá trị CSS thô (raw) |
+| `anidi` | `animation-direction` | `r` → `reverse`<br>`a` → `alternate`<br>`ar` → `alternate-reverse`<br>`nr` → `normal, reverse`<br>`arn` → `alternate, reverse, normal` |
+| `anidu` | `animation-duration` | Giá trị CSS thô (raw) |
+| `anifm` | `animation-fill-mode` | `f` → `forwards`<br>`b` → `backwards`<br>`nb` → `none, backwards`<br>`fbn` → `both, forwards, none` |
+| `aniic` | `animation-iteration-count` | Giá trị CSS thô (raw) |
+| `anin` | `animation-name` | `s` → `slide` |
+| `anips` | `animation-play-state` | `p` → `paused`<br>`r` → `running` |
+| `anitf` | `animation-timing-function` | `ei` → `ease-in`<br>`eo` → `ease-out`<br>`eio` → `ease-in-out`<br>`l` → `linear`<br>`ss` → `step-start`<br>`se` → `step-end` |
+
+
+<a id="webkit"></a>
+
+## Webkit
+
+| Key | Thuộc tính CSS | Giá trị viết tắt (nếu có) |
+| --- | --- | --- |
+| `wlc` | `-webkit-line-clamp` | Giá trị CSS thô (raw) |
+| `wtfc` | `-webkit-text-fill-color` | Giá trị CSS thô (raw) |
+| `wts` | `-webkit-text-stroke` | Giá trị CSS thô (raw) |
+| `wtsc` | `-webkit-text-stroke-color` | Giá trị CSS thô (raw) |
+| `wtsw` | `-webkit-text-stroke-width` | `m` → `medium`<br>`t` → `thick` |
+
+
+<a id="khac"></a>
+
+## Khác
+
+| Key | Thuộc tính CSS | Giá trị viết tắt (nếu có) |
+| --- | --- | --- |
+| `a` | `all` | Giá trị CSS thô (raw) |
+| `ap` | `appearance` | `mb` → `menulist-button`<br>`tf` → `textfield`<br>`b` → `button`<br>`c` → `checkbox` |
+| `bdbr` | `box-decoration-break` | `c` → `clone`<br>`s` → `slice` |
+| `bkfv` | `backface-visibility` | Giá trị CSS thô (raw) |
+| `brka` | `break-after` | Giá trị CSS thô (raw) |
+| `brkb` | `break-before` | Giá trị CSS thô (raw) |
+| `brki` | `break-inside` | Giá trị CSS thô (raw) |
+| `bxsz` | `box-sizing` | Giá trị CSS thô (raw) |
+| `caps` | `caption-side` | Giá trị CSS thô (raw) |
+| `cip` | `color-interpolation` | Giá trị CSS thô (raw) |
+| `ciw` | `contain-intrinsic-width` | Giá trị CSS thô (raw) |
+| `cntibs` | `contain-intrinsic-block-size` | Giá trị CSS thô (raw) |
+| `cntih` | `contain-intrinsic-height` | Giá trị CSS thô (raw) |
+| `cntiis` | `contain-intrinsic-inline-size` | Giá trị CSS thô (raw) |
+| `cntis` | `contain-intrinsic-size` | Giá trị CSS thô (raw) |
+| `cntri` | `counter-increment` | Giá trị CSS thô (raw) |
+| `cntrr` | `counter-reset` | Giá trị CSS thô (raw) |
+| `cntrs` | `counter-set` | Giá trị CSS thô (raw) |
+| `col` | `columns` | Giá trị CSS thô (raw) |
+| `colc` | `column-count` | Giá trị CSS thô (raw) |
+| `colf` | `column-fill` | Giá trị CSS thô (raw) |
+| `colr` | `column-rule` | Giá trị CSS thô (raw) |
+| `colrs` | `column-rule-style` | Giá trị CSS thô (raw) |
+| `colrw` | `column-rule-width` | Giá trị CSS thô (raw) |
+| `cols` | `column-span` | Giá trị CSS thô (raw) |
+| `colw` | `column-width` | Giá trị CSS thô (raw) |
+| `csch` | `color-scheme` | Giá trị CSS thô (raw) |
+| `ctr` | `container` | Giá trị CSS thô (raw) |
+| `ctrn` | `container-name` | Giá trị CSS thô (raw) |
+| `ctrt` | `container-type` | Giá trị CSS thô (raw) |
+| `ctt` | `content` | Giá trị CSS thô (raw) |
+| `empc` | `empty-cells` | Giá trị CSS thô (raw) |
+| `fca` | `forced-color-adjust` | Giá trị CSS thô (raw) |
+| `hc` | `hyphenate-character` | Giá trị CSS thô (raw) |
+| `hlc` | `hyphenate-limit-chars` | Giá trị CSS thô (raw) |
+| `hp` | `hanging-punctuation` | Giá trị CSS thô (raw) |
+| `imgo` | `image-orientation` | Giá trị CSS thô (raw) |
+| `imgr` | `image-rendering` | Giá trị CSS thô (raw) |
+| `lbrk` | `line-break` | Giá trị CSS thô (raw) |
+| `lisp` | `list-style-position` | `i` → `inside`<br>`o` → `outside` |
+| `ls` | `list-style` | `i` → `inside`<br>`di` → `disc`<br>`c` → `circle`<br>`s` → `square`<br>`de` → `decimal`<br>`g` → `georgian`<br>`tci` → `trad-chinese-informal`<br>`k` → `kannada` |
+| `lsi` | `list-style-image` | Giá trị CSS thô (raw) |
+| `lst` | `list-style-type` | `di` → `disc`<br>`c` → `circle`<br>`s` → `square`<br>`de` → `decimal`<br>`g` → `georgian`<br>`tci` → `trad-chinese-informal`<br>`k` → `kannada` |
+| `msk` | `mask` | Giá trị CSS thô (raw) |
+| `mskb` | `mask-border` | Giá trị CSS thô (raw) |
+| `mskbm` | `mask-border-mode` | Giá trị CSS thô (raw) |
+| `mskbo` | `mask-border-outset` | Giá trị CSS thô (raw) |
+| `mskbr` | `mask-border-repeat` | Giá trị CSS thô (raw) |
+| `mskbs` | `mask-border-slice` | Giá trị CSS thô (raw) |
+| `mskbsrc` | `mask-border-source` | Giá trị CSS thô (raw) |
+| `mskbw` | `mask-border-width` | Giá trị CSS thô (raw) |
+| `mskc` | `mask-clip` | Giá trị CSS thô (raw) |
+| `mskcp` | `mask-composite` | Giá trị CSS thô (raw) |
+| `mski` | `mask-image` | Giá trị CSS thô (raw) |
+| `mskm` | `mask-mode` | Giá trị CSS thô (raw) |
+| `msko` | `mask-origin` | Giá trị CSS thô (raw) |
+| `mskp` | `mask-position` | Giá trị CSS thô (raw) |
+| `mskr` | `mask-repeat` | Giá trị CSS thô (raw) |
+| `msks` | `mask-size` | Giá trị CSS thô (raw) |
+| `mskt` | `mask-type` | Giá trị CSS thô (raw) |
+| `mtd` | `math-depth` | Giá trị CSS thô (raw) |
+| `mts` | `math-style` | Giá trị CSS thô (raw) |
+| `ofa` | `offset-anchor` | Giá trị CSS thô (raw) |
+| `ofd` | `offset-distance` | Giá trị CSS thô (raw) |
+| `ofla` | `overflow-anchor` | Giá trị CSS thô (raw) |
+| `oflb` | `overflow-block` | Giá trị CSS thô (raw) |
+| `oflcm` | `overflow-clip-margin` | Giá trị CSS thô (raw) |
+| `ofli` | `overflow-inline` | Giá trị CSS thô (raw) |
+| `ofp` | `offset-path` | Giá trị CSS thô (raw) |
+| `ofpo` | `offset-position` | Giá trị CSS thô (raw) |
+| `ofr` | `offset-rotate` | Giá trị CSS thô (raw) |
+| `ofs` | `offset` | Giá trị CSS thô (raw) |
+| `orp` | `orphans` | Giá trị CSS thô (raw) |
+| `orsby` | `overscroll-behavior-y` | `c` → `contain` |
+| `osrbb` | `overscroll-behavior-block` | `c` → `contain` |
+| `osrbh` | `overscroll-behavior` | `c` → `contain` |
+| `osrbi` | `overscroll-behavior-inline` | `c` → `contain` |
+| `osrbx` | `overscroll-behavior-x` | `c` → `contain` |
+| `pg` | `page` | Giá trị CSS thô (raw) |
+| `pgba` | `page-break-after` | Giá trị CSS thô (raw) |
+| `pgbb` | `page-break-before` | Giá trị CSS thô (raw) |
+| `pgbi` | `page-break-inside` | Giá trị CSS thô (raw) |
+| `prca` | `print-color-adjust` | Giá trị CSS thô (raw) |
+| `pso` | `perspective-origin` | Giá trị CSS thô (raw) |
+| `psp` | `perspective` | Giá trị CSS thô (raw) |
+| `pto` | `paint-order` | Giá trị CSS thô (raw) |
+| `qts` | `quotes` | Giá trị CSS thô (raw) |
+| `rbp` | `ruby-position` | Giá trị CSS thô (raw) |
+| `rot` | `rotate` | Giá trị CSS thô (raw) |
+| `s` | `scale` | Giá trị CSS thô (raw) |
+| `sbg` | `scrollbar-gutter` | Giá trị CSS thô (raw) |
+| `sbw` | `scrollbar-width` | Giá trị CSS thô (raw) |
+| `scrb` | `scroll-behavior` | Giá trị CSS thô (raw) |
+| `scrm` | `scroll-margin` | Giá trị CSS thô (raw) |
+| `scrmb` | `scroll-margin-bottom` | Giá trị CSS thô (raw) |
+| `scrmbe` | `scroll-margin-block-end` | Giá trị CSS thô (raw) |
+| `scrmblk` | `scroll-margin-block` | Giá trị CSS thô (raw) |
+| `scrmbs` | `scroll-margin-block-start` | Giá trị CSS thô (raw) |
+| `scrmi` | `scroll-margin-inline` | Giá trị CSS thô (raw) |
+| `scrmie` | `scroll-margin-inline-end` | Giá trị CSS thô (raw) |
+| `scrmis` | `scroll-margin-inline-start` | Giá trị CSS thô (raw) |
+| `scrml` | `scroll-margin-left` | Giá trị CSS thô (raw) |
+| `scrmr` | `scroll-margin-right` | Giá trị CSS thô (raw) |
+| `scrmt` | `scroll-margin-top` | Giá trị CSS thô (raw) |
+| `scrp` | `scroll-padding` | Giá trị CSS thô (raw) |
+| `scrpb` | `scroll-padding-bottom` | Giá trị CSS thô (raw) |
+| `scrpblk` | `scroll-padding-block` | Giá trị CSS thô (raw) |
+| `scrpbs` | `scroll-padding-block-start` | Giá trị CSS thô (raw) |
+| `scrpi` | `scroll-padding-inline` | Giá trị CSS thô (raw) |
+| `scrpie` | `scroll-padding-inline-end` | Giá trị CSS thô (raw) |
+| `scrpis` | `scroll-padding-inline-start` | Giá trị CSS thô (raw) |
+| `scrpl` | `scroll-padding-left` | Giá trị CSS thô (raw) |
+| `scrpr` | `scroll-padding-right` | Giá trị CSS thô (raw) |
+| `scrpt` | `scroll-padding-top` | Giá trị CSS thô (raw) |
+| `scrsa` | `scroll-snap-align` | Giá trị CSS thô (raw) |
+| `scrss` | `scroll-snap-stop` | Giá trị CSS thô (raw) |
+| `scrst` | `scroll-snap-type` | Giá trị CSS thô (raw) |
+| `shit` | `shape-image-threshold` | Giá trị CSS thô (raw) |
+| `shm` | `shape-margin` | Giá trị CSS thô (raw) |
+| `sho` | `shape-outside` | Giá trị CSS thô (raw) |
+| `srcpbe` | `scroll-padding-block-end` | Giá trị CSS thô (raw) |
+| `tbl` | `table-layout` | Giá trị CSS thô (raw) |
+| `tbs` | `tab-size` | Giá trị CSS thô (raw) |
+| `trl` | `translate` | Giá trị CSS thô (raw) |
+| `va` | `vertical-align` | `bl` → `baseline`<br>`t` → `top`<br>`m` → `middle`<br>`b` → `bottom`<br>`tt` → `text-top`<br>`tb` → `text-bottom`<br>`sb` → `sub`<br>`sp` → `super` |
+| `wc` | `will-change` | `sp` → `scroll-position`<br>`c` → `contents`<br>`t` → `transform` |
+| `wd` | `widows` | Giá trị CSS thô (raw) |
+| `wsc` | `white-space-collapse` | Giá trị CSS thô (raw) |
+| `zo` | `zoom` | Giá trị CSS thô (raw) |