@fwkui/x-css 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +1170 -1062
  2. package/package.json +1 -2
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Hướng dẫn sử dụng x-css
2
2
 
3
- `x-css` là một thư viện JavaScript nhỏ gọn và hiệu quả để xây dựng giao diện người dùng phản ứng (reactive user interfaces). Thư viện này cung cấp các công cụ để quản lý trạng thái (state management) và thao tác với DOM một cách tự động và hiệu quả.
3
+ `x-css` là một thư viện CSS-JavaScript nhỏ gọn và hiệu quả để xây dựng giao diện người dùng phản ứng (reactive user interfaces). Thư viện này cung cấp các công cụ để quản lý trạng thái (state management) và thao tác với DOM một cách tự động và hiệu quả.
4
4
 
5
5
  ## Cài đặt
6
6
 
@@ -8,17 +8,17 @@
8
8
 
9
9
  ```html
10
10
  <script type="module">
11
- import $ from "/index.js";
11
+ import $ from "https://unpkg.com/@fwkui/x-css@1.0.2/index.js";
12
12
  $.cssObserve(document);
13
13
  </script>
14
14
  ```
15
+
15
16
  # Hướng dẫn sử dụng xCSS
16
17
 
17
18
  xCSS là một hệ thống CSS-in-JS cho phép bạn viết CSS ngắn gọn và hiệu quả thông qua các class name đặc biệt. Sau khi học, bạn sẽ:
18
19
 
19
- * Đọc/viết class theo công thức và hiểu nó biến thành CSS như thế nào
20
- * Kiểm soát **media query**, **@layer**, **!important**, **selector** giả (pseudo) và tổ hợp nhiều thuộc tính trong **một class**
21
-
20
+ - Đọc/viết class theo công thức và hiểu nó biến thành CSS như thế nào
21
+ - Kiểm soát **media query**, **@layer**, **!important**, **selector** giả (pseudo) và tổ hợp nhiều thuộc tính trong **một class**
22
22
 
23
23
  > **Lưu ý**: Danh sách viết tắt thuộc tính và giá trị sẽ có ở **phần sau**.
24
24
 
@@ -31,6 +31,7 @@ xCSS là một hệ thống CSS-in-JS cho phép bạn viết CSS ngắn gọn v
31
31
  **Lưu ý quan trọng**: `<property><value>` là **bắt buộc** - phải có cả thuộc tính CSS và giá trị CSS.
32
32
 
33
33
  **Ví dụ cú pháp đúng:**
34
+
34
35
  - `cRed` - Màu đỏ (layer 0)
35
36
  - `5cRed` - Màu đỏ ở layer 5
36
37
  - `md:cRed` - Màu đỏ trên màn hình trung bình
@@ -60,7 +61,7 @@ xCSS là một hệ thống CSS-in-JS cho phép bạn viết CSS ngắn gọn v
60
61
  #### 3. Property (Thuộc tính) - **BẮT BUỘC**
61
62
 
62
63
  - Viết thường, có thể là tên đầy đủ hoặc viết tắt
63
- - Không có dấu `-` trừ trường hợp có thuộc tính có dấu trừ thường bắt đầu `-w`
64
+ - Không có dấu `-` trừ trường hợp có thuộc tính có dấu trừ thường bắt đầu `-w`
64
65
  - Ví dụ: `w` (width), `h` (height), `c` (color), `bg` (background)
65
66
 
66
67
  #### 4. Value (Giá trị) - **BẮT BUỘC**
@@ -135,7 +136,7 @@ xCSS là một hệ thống CSS-in-JS cho phép bạn viết CSS ngắn gọn v
135
136
  <div class="cRed@:hover">Đỏ khi hover</div>
136
137
 
137
138
  <!-- Focus effect -->
138
- <input class="bdw2px@:focus" placeholder="Border khi focus">
139
+ <input class="bdw2px@:focus" placeholder="Border khi focus" />
139
140
 
140
141
  <!-- Child selector -->
141
142
  <div class="cBlue@>a">Màu xanh cho thẻ con a</div>
@@ -216,12 +217,12 @@ Ví dụ: `5cBlue` vs `9cRed` → `9cRed` thắng. Nhưng `5cBlue!` (viết `c!B
216
217
 
217
218
  ## Lỗi phổ biến & cách tránh
218
219
 
219
- * **Dùng chữ hoa ở đầu thuộc tính** → sai. Thuộc tính (**property**) phải là **chữ thường** hoặc `--var`
220
- * **Thiếu property hoặc value** → sai. Cả hai đều **bắt buộc** phải có
221
- * **Nhầm dấu `-` và `!`**: `w-!10px` là lỗi. Hãy dùng `w!10px`
222
- * **Quên `;` trong giá trị có khoảng trắng**: `ff{Courier New}` → nên viết `ff{Courier;New}`
223
- * **Selector có khoảng trắng** phải dùng `;` và sẽ được đổi lại khi xuất
224
- * **Không có bảng viết tắt** → trình biên dịch không biết dịch `ta` thành `text-align`
220
+ - **Dùng chữ hoa ở đầu thuộc tính** → sai. Thuộc tính (**property**) phải là **chữ thường** hoặc `--var`
221
+ - **Thiếu property hoặc value** → sai. Cả hai đều **bắt buộc** phải có
222
+ - **Nhầm dấu `-` và `!`**: `w-!10px` là lỗi. Hãy dùng `w!10px`
223
+ - **Quên `;` trong giá trị có khoảng trắng**: `ff{Courier New}` → nên viết `ff{Courier;New}`
224
+ - **Selector có khoảng trắng** phải dùng `;` và sẽ được đổi lại khi xuất
225
+ - **Không có bảng viết tắt** → trình biên dịch không biết dịch `ta` thành `text-align`
225
226
 
226
227
  ## Lưu ý
227
228
 
@@ -238,10 +239,12 @@ Ví dụ: `5cBlue` vs `9cRed` → `9cRed` thắng. Nhưng `5cBlue!` (viết `c!B
238
239
  ### 🎯 **Nguyên tắc đặt tên class**
239
240
 
240
241
  #### ✅ **Nên làm:**
242
+
241
243
  - **Ngắn gọn, dễ đọc**: `cRed`, `w100px`, `p16px`
242
244
  - **Sử dụng viết tắt chuẩn**: `dF` thay vì `displayFlex` (d: display, F: Flex)
243
245
 
244
246
  #### ❌ **Tránh:**
247
+
245
248
  - **Tên quá dài**: `wCalc(100%;-;20px;-;30px;-;10px)` → nên dùng CSS variable
246
249
  - **Giá trị phức tạp**: `bxsh{0;4px;8px;12px;rgba(0,0,0,0.1);inset}` → nên định nghĩa qua biến
247
250
  - **Thuộc tính lặp lại**: `cRed`, `cBlue`, `cGreen` → nên dùng color palette
@@ -249,10 +252,11 @@ Ví dụ: `5cBlue` vs `9cRed` → `9cRed` thắng. Nhưng `5cBlue!` (viết `c!B
249
252
  ### 🎨 **Quản lý giá trị phức tạp**
250
253
 
251
254
  #### **Sử dụng CSS Variables cho giá trị dài:**
255
+
252
256
  ```css
253
257
  :root {
254
- --shadow-card: 0 4px 8px rgba(0,0,0,0.1);
255
- --shadow-hover: 0 8px 16px rgba(0,0,0,0.15);
258
+ --shadow-card: 0 4px 8px rgba(0, 0, 0, 0.1);
259
+ --shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.15);
256
260
  --border-radius: 8px;
257
261
  --spacing-sm: 8px;
258
262
  --spacing-md: 16px;
@@ -263,85 +267,98 @@ Ví dụ: `5cBlue` vs `9cRed` → `9cRed` thắng. Nhưng `5cBlue!` (viết `c!B
263
267
  ```html
264
268
  <!-- Thay vì viết dài -->
265
269
  <div class="bxsh{0;4px;8px;rgba(0,0,0,0.1)} bdra8px p16px">
266
-
267
- <!-- Nên dùng biến -->
268
- <div class="bxsh--shadow-card bdra--border-radius p--spacing-md">
270
+ <!-- Nên dùng biến -->
271
+ <div class="bxsh--shadow-card bdra--border-radius p--spacing-md"></div>
272
+ </div>
269
273
  ```
270
274
 
271
275
  #### **Tạo component classes cho pattern thường dùng:**
276
+
272
277
  ```html
273
278
  <!-- Thay vì lặp lại nhiều lần -->
274
279
  <div class="dF&aiC&jcSp&p16px&bgcWhite&bxsh{0;2px;4px;rgba(0,0,0,0.1)}">
275
-
276
- <!-- Nên tạo component class -->
277
- <div class="card">
280
+ <!-- Nên tạo component class -->
281
+ <div class="card"></div>
282
+ </div>
278
283
  ```
279
284
 
280
285
  ### 📱 **Responsive Design Best Practices**
281
286
 
282
287
  #### **Sử dụng mobile-first approach:**
288
+
283
289
  ```html
284
290
  <!-- Base styles cho mobile -->
285
291
  <div class="w100% p8px">
286
-
287
- <!-- Override cho desktop -->
288
- <div class="md:w50% md:p16px lg:w33% lg:p24px">
292
+ <!-- Override cho desktop -->
293
+ <div class="md:w50% md:p16px lg:w33% lg:p24px"></div>
294
+ </div>
289
295
  ```
290
296
 
291
297
  #### **Nhóm breakpoints logic:**
298
+
292
299
  ```html
293
300
  <!-- Layout chính -->
294
301
  <div class="dB md:dF">
295
-
296
- <!-- Spacing responsive -->
297
- <div class="p8px md:p16px lg:p24px">
298
-
299
- <!-- Typography responsive -->
300
- <div class="fns14px md:fns16px lg:fns18px">
302
+ <!-- Spacing responsive -->
303
+ <div class="p8px md:p16px lg:p24px">
304
+ <!-- Typography responsive -->
305
+ <div class="fns14px md:fns16px lg:fns18px"></div>
306
+ </div>
307
+ </div>
301
308
  ```
302
309
 
303
310
  ### 🎭 **Layer Management**
304
311
 
305
312
  #### **Tổ chức layers theo hierarchy:**
313
+
306
314
  ```html
307
315
  <!-- Base styles (0) -->
308
316
  <div class="cBlack fns16px">
309
-
310
- <!-- Component styles (1-5) -->
311
- <div class="2btnPrimary">
312
-
313
- <!-- Utility styles (6-10) -->
314
- <div class="8m16px">
315
-
316
- <!-- Override styles (11-19) -->
317
- <div class="15cRed">
317
+ <!-- Component styles (1-5) -->
318
+ <div class="2btnPrimary">
319
+ <!-- Utility styles (6-10) -->
320
+ <div class="8m16px">
321
+ <!-- Override styles (11-19) -->
322
+ <div class="15cRed"></div>
323
+ </div>
324
+ </div>
325
+ </div>
318
326
  ```
319
327
 
320
328
  ### 🔧 **Performance Tips**
321
329
 
322
330
  #### **Tránh over-engineering:**
331
+
323
332
  ```html
324
333
  <!-- Đơn giản và hiệu quả -->
325
334
  <div class="dF&aiC&p16px">
326
-
327
- <!-- Thay vì phức tạp không cần thiết -->
328
- <div class="dF&aiC&jcC&p16px&m0&b0&bgcT">
335
+ <!-- Thay vì phức tạp không cần thiết -->
336
+ <div class="dF&aiC&jcC&p16px&m0&b0&bgcT"></div>
337
+ </div>
329
338
  ```
330
339
 
331
340
  #### **Sử dụng shorthand khi có thể:**
341
+
332
342
  ```html
333
343
  <!-- Margin shorthand -->
334
- <div class="m16px"> <!-- margin: 16px -->
335
- <div class="mt8px&mb8px"> <!-- margin-top: 8px; margin-bottom: 8px -->
336
-
337
- <!-- Padding shorthand -->
338
- <div class="p16px"> <!-- padding: 16px -->
339
- <div class="px16px&py8px"> <!-- padding: 8px 16px -->
344
+ <div class="m16px">
345
+ <!-- margin: 16px -->
346
+ <div class="mt8px&mb8px">
347
+ <!-- margin-top: 8px; margin-bottom: 8px -->
348
+
349
+ <!-- Padding shorthand -->
350
+ <div class="p16px">
351
+ <!-- padding: 16px -->
352
+ <div class="px16px&py8px"><!-- padding: 8px 16px --></div>
353
+ </div>
354
+ </div>
355
+ </div>
340
356
  ```
341
357
 
342
358
  ### 🎨 **Design System Integration**
343
359
 
344
360
  #### **Tạo design tokens:**
361
+
345
362
  ```css
346
363
  :root {
347
364
  /* Colors */
@@ -369,19 +386,23 @@ Ví dụ: `5cBlue` vs `9cRed` → `9cRed` thắng. Nhưng `5cBlue!` (viết `c!B
369
386
  ```
370
387
 
371
388
  #### **Sử dụng semantic naming:**
389
+
372
390
  ```html
373
391
  <!-- Thay vì màu cụ thể -->
374
392
  <div class="cBlue">
375
-
376
- <!-- Nên dùng semantic -->
377
- <div class="cPrimary">
378
- <div class="cSuccess">
379
- <div class="cError">
393
+ <!-- Nên dùng semantic -->
394
+ <div class="cPrimary">
395
+ <div class="cSuccess">
396
+ <div class="cError"></div>
397
+ </div>
398
+ </div>
399
+ </div>
380
400
  ```
381
401
 
382
402
  ### 🚀 **Maintenance Tips**
383
403
 
384
404
  #### **Documentation cho team:**
405
+
385
406
  ```html
386
407
  <!-- Component: Button Primary -->
387
408
  <!-- Usage: <button class="btnPrimary">Click me</button> -->
@@ -390,21 +411,28 @@ Ví dụ: `5cBlue` vs `9cRed` → `9cRed` thắng. Nhưng `5cBlue!` (viết `c!B
390
411
  ```
391
412
 
392
413
  #### **Consistent naming convention:**
414
+
393
415
  ```html
394
416
  <!-- Layout -->
395
417
  <div class="container">
396
- <div class="row">
397
- <div class="col">
398
-
399
- <!-- Components -->
400
- <div class="card">
401
- <div class="btn">
402
- <div class="input">
403
-
404
- <!-- Utilities -->
405
- <div class="textCenter">
406
- <div class="mAuto">
407
- <div class="dNone">
418
+ <div class="row">
419
+ <div class="col">
420
+ <!-- Components -->
421
+ <div class="card">
422
+ <div class="btn">
423
+ <div class="input">
424
+ <!-- Utilities -->
425
+ <div class="textCenter">
426
+ <div class="mAuto">
427
+ <div class="dNone"></div>
428
+ </div>
429
+ </div>
430
+ </div>
431
+ </div>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ </div>
408
436
  ```
409
437
 
410
438
  ### 💡 **Pro Tips**
@@ -421,7 +449,9 @@ Ví dụ: `5cBlue` vs `9cRed` → `9cRed` thắng. Nhưng `5cBlue!` (viết `c!B
421
449
  **HTML**
422
450
 
423
451
  ```html
424
- <div class="md:7 dF&aiC&jcSp p16px bgc--panel bxsh{0;2px;8px;rgba(0,0,0,.1)} c--fg@>a;:hover">
452
+ <div
453
+ class="md:7 dF&aiC&jcSp p16px bgc--panel bxsh{0;2px;8px;rgba(0,0,0,.1)} c--fg@>a;:hover"
454
+ >
425
455
  <a class="cBlue wClamp(120px;240px;100%)">Link</a>
426
456
  <button class="w!120px h40px bdra8px cWhite bgc#0070f3">Nút</button>
427
457
  </div>
@@ -430,19 +460,42 @@ Ví dụ: `5cBlue` vs `9cRed` → `9cRed` thắng. Nhưng `5cBlue!` (viết `c!B
430
460
  **CSS (phát sinh ý tưởng)**
431
461
 
432
462
  ```css
433
- @media (min-width: 768px){
434
- @layer l7{
435
- .md\:7\.dF\&aiC\&jcSp\:where(*){ display:flex; align-items:center; justify-content:space-between; padding:16px; background-color: var(--panel); box-shadow:0 2px 8px rgba(0,0,0,.1) }
436
- .md\:7\.c\-\-fg\@\>a\;\:hover > a:hover{ color: var(--fg) }
437
- .md\:7\.wClamp\(120px\;240px\;100\%\){ width: clamp(120px,240px,100%) }
463
+ @media (min-width: 768px) {
464
+ @layer l7 {
465
+ .md\:7\.dF\&aiC\&jcSp\:where(*) {
466
+ display: flex;
467
+ align-items: center;
468
+ justify-content: space-between;
469
+ padding: 16px;
470
+ background-color: var(--panel);
471
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
472
+ }
473
+ .md\:7\.c\-\-fg\@\>a\;\:hover > a:hover {
474
+ color: var(--fg);
475
+ }
476
+ .md\:7\.wClamp\(120px\;240px\;100\%\) {
477
+ width: clamp(120px, 240px, 100%);
478
+ }
438
479
  }
439
480
  }
440
- .cBlue{ color: blue }
441
- .w\!120px{ width: 120px !important }
442
- .h40px{ height: 40px }
443
- .bdra8px{ border-radius: 8px }
444
- .cWhite{ color: #fff }
445
- .bgc\#0070f3{ background-color: #0070f3 }
481
+ .cBlue {
482
+ color: blue;
483
+ }
484
+ .w\!120px {
485
+ width: 120px !important;
486
+ }
487
+ .h40px {
488
+ height: 40px;
489
+ }
490
+ .bdra8px {
491
+ border-radius: 8px;
492
+ }
493
+ .cWhite {
494
+ color: #fff;
495
+ }
496
+ .bgc\#0070f3 {
497
+ background-color: #0070f3;
498
+ }
446
499
  ```
447
500
 
448
501
  ## Bảng tra cứu nhanh
@@ -450,29 +503,29 @@ Ví dụ: `5cBlue` vs `9cRed` → `9cRed` thắng. Nhưng `5cBlue!` (viết `c!B
450
503
  ### Media Query
451
504
 
452
505
  | Ký hiệu | Kích thước màn hình |
453
- | --------- | ------------------------ |
454
- | `xs:` | ≤ 575px |
455
- | `sm:` | ≥ 576px |
456
- | `md:` | ≥ 768px |
457
- | `lg:` | ≥ 992px |
458
- | `xl:` | ≥ 1200px |
459
- | `2xl:` | ≥ 1400px |
506
+ | ------- | ------------------- |
507
+ | `xs:` | ≤ 575px |
508
+ | `sm:` | ≥ 576px |
509
+ | `md:` | ≥ 768px |
510
+ | `lg:` | ≥ 992px |
511
+ | `xl:` | ≥ 1200px |
512
+ | `2xl:` | ≥ 1400px |
460
513
 
461
514
  ### Layer
462
515
 
463
- | Ký hiệu | Mô tả |
464
- | ---------- | ----------------------------------------------------- |
465
- | `0` | Layer mặc định (ưu tiên thấp) |
466
- | `1-19` | Layer tùy chỉnh (số càng cao ưu tiên càng cao) |
516
+ | Ký hiệu | Mô tả |
517
+ | ------- | ---------------------------------------------- |
518
+ | `0` | Layer mặc định (ưu tiên thấp) |
519
+ | `1-19` | Layer tùy chỉnh (số càng cao ưu tiên càng cao) |
467
520
 
468
521
  ### Giá trị đặc biệt
469
522
 
470
- | Ký hiệu | Ý nghĩa |
471
- | --------- | --------------------- |
472
- | `!` | !important |
473
- | `--` | CSS Variable |
523
+ | Ký hiệu | Ý nghĩa |
524
+ | ------- | ----------------- |
525
+ | `!` | !important |
526
+ | `--` | CSS Variable |
474
527
  | `{}` | Giá trị tùy chỉnh |
475
- | `;` | Thay thế dấu cách |
528
+ | `;` | Thay thế dấu cách |
476
529
 
477
530
  ## Câu hỏi thường gặp (FAQ)
478
531
 
@@ -507,494 +560,526 @@ Ví dụ: `5cBlue` vs `9cRed` → `9cRed` thắng. Nhưng `5cBlue!` (viết `c!B
507
560
  ## 1. Layout & Display
508
561
 
509
562
  ### Display
510
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
511
- |----------|------------|------------------|
512
- | `d` | `display` | `b:block`, `ib:inline-block`, `i:inline`, `f:flex`, `if:inline-flex`, `t:table`, `it:inline-table`, `tcp:table-caption`, `tcell:table-cell`, `tcol:table-column`, `tcolg:table-column-group`, `tfg:table-footer-group`, `thg:table-header-group`, `trg:table-row-group`, `tr:table-row`, `fr:flow-root`, `g:grid`, `ig:inline-grid`, `c:contents`, `li:list-item` |
563
+
564
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
565
+ | -------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
566
+ | `d` | `display` | `b:block`, `ib:inline-block`, `i:inline`, `f:flex`, `if:inline-flex`, `t:table`, `it:inline-table`, `tcp:table-caption`, `tcell:table-cell`, `tcol:table-column`, `tcolg:table-column-group`, `tfg:table-footer-group`, `thg:table-header-group`, `trg:table-row-group`, `tr:table-row`, `fr:flow-root`, `g:grid`, `ig:inline-grid`, `c:contents`, `li:list-item` |
513
567
 
514
568
  ### Position
515
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
516
- |----------|------------|------------------|
517
- | `pos` | `position` | `s:static`, `f:fixed`, `a:absolute`, `r:relative`, `st:sticky` |
569
+
570
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
571
+ | -------- | ---------- | -------------------------------------------------------------- |
572
+ | `pos` | `position` | `s:static`, `f:fixed`, `a:absolute`, `r:relative`, `st:sticky` |
518
573
 
519
574
  ### Sizing
520
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
521
- |----------|------------|------------------|
522
- | `w` | `width` | `mic:min-content`, `mac:max-content`, `fc:fit-content`, `f:100%` |
523
- | `h` | `height` | `mic:min-content`, `mac:max-content`, `fc:fit-content` |
524
- | `mw` | `max-width` | - |
525
- | `mxw` | `max-width` | - |
526
- | `mh` | `max-height` | - |
527
- | `miw` | `min-width` | `f:100%`, `mic:min-content`, `mac:max-content`, `fc:fit-content` |
528
- | `mih` | `min-height` | `f:100%`, `mic:min-content`, `mac:max-content`, `fc:fit-content` |
529
- | `blks` | `block-size` | - |
530
- | `ins` | `inline-size` | - |
531
- | `mbs` | `max-block-size` | - |
532
- | `mis` | `max-inline-size` | - |
533
- | `mibs` | `min-block-size` | - |
534
- | `misz` | `min-inline-size` | - |
575
+
576
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
577
+ | -------- | ----------------- | ---------------------------------------------------------------- |
578
+ | `w` | `width` | `mic:min-content`, `mac:max-content`, `fc:fit-content`, `f:100%` |
579
+ | `h` | `height` | `mic:min-content`, `mac:max-content`, `fc:fit-content` |
580
+ | `mw` | `max-width` | - |
581
+ | `mxw` | `max-width` | - |
582
+ | `mh` | `max-height` | - |
583
+ | `miw` | `min-width` | `f:100%`, `mic:min-content`, `mac:max-content`, `fc:fit-content` |
584
+ | `mih` | `min-height` | `f:100%`, `mic:min-content`, `mac:max-content`, `fc:fit-content` |
585
+ | `blks` | `block-size` | - |
586
+ | `ins` | `inline-size` | - |
587
+ | `mbs` | `max-block-size` | - |
588
+ | `mis` | `max-inline-size` | - |
589
+ | `mibs` | `min-block-size` | - |
590
+ | `misz` | `min-inline-size` | - |
535
591
 
536
592
  ### Positioning
537
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
538
- |----------|------------|------------------|
539
- | `t` | `top` | - |
540
- | `r` | `right` | - |
541
- | `b` | `bottom` | - |
542
- | `l` | `left` | - |
543
- | `i` | `inset` | - |
544
- | `iblk` | `inset-block` | - |
545
- | `ibe` | `inset-block-end` | - |
546
- | `ibsta` | `inset-block-start` | - |
547
- | `ii` | `inset-inline` | - |
548
- | `iie` | `inset-inline-end` | - |
549
- | `iis` | `inset-inline-start` | - |
593
+
594
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
595
+ | -------- | -------------------- | ---------------- |
596
+ | `t` | `top` | - |
597
+ | `r` | `right` | - |
598
+ | `b` | `bottom` | - |
599
+ | `l` | `left` | - |
600
+ | `i` | `inset` | - |
601
+ | `iblk` | `inset-block` | - |
602
+ | `ibe` | `inset-block-end` | - |
603
+ | `ibsta` | `inset-block-start` | - |
604
+ | `ii` | `inset-inline` | - |
605
+ | `iie` | `inset-inline-end` | - |
606
+ | `iis` | `inset-inline-start` | - |
550
607
 
551
608
  ---
552
609
 
553
610
  ## 2. Spacing
554
611
 
555
612
  ### Margin
556
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
557
- |----------|------------|------------------|
558
- | `m` | `margin` | - |
559
- | `mt` | `margin-top` | - |
560
- | `mr` | `margin-right` | - |
561
- | `mb` | `margin-bottom` | - |
562
- | `ml` | `margin-left` | - |
563
- | `mblk` | `margin-block` | - |
564
- | `mbe` | `margin-block-end` | - |
565
- | `mbsta` | `margin-block-start` | - |
566
- | `min` | `margin-inline` | - |
567
- | `mie` | `margin-inline-end` | - |
568
- | `mista` | `margin-inline-start` | - |
613
+
614
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
615
+ | -------- | --------------------- | ---------------- |
616
+ | `m` | `margin` | - |
617
+ | `mt` | `margin-top` | - |
618
+ | `mr` | `margin-right` | - |
619
+ | `mb` | `margin-bottom` | - |
620
+ | `ml` | `margin-left` | - |
621
+ | `mblk` | `margin-block` | - |
622
+ | `mbe` | `margin-block-end` | - |
623
+ | `mbsta` | `margin-block-start` | - |
624
+ | `min` | `margin-inline` | - |
625
+ | `mie` | `margin-inline-end` | - |
626
+ | `mista` | `margin-inline-start` | - |
569
627
 
570
628
  ### Padding
571
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
572
- |----------|------------|------------------|
573
- | `p` | `padding` | - |
574
- | `pt` | `padding-top` | - |
575
- | `pr` | `padding-right` | - |
576
- | `pb` | `padding-bottom` | - |
577
- | `pl` | `padding-left` | - |
578
- | `pblk` | `padding-block` | - |
579
- | `pbe` | `padding-block-end` | - |
580
- | `pbs` | `padding-block-start` | - |
581
- | `pi` | `padding-inline` | `s:start`, `c:center`, `e:end`, `b:baseline`, `st:stretch` |
582
- | `pie` | `padding-inline-end` | - |
583
- | `pis` | `padding-inline-start` | - |
629
+
630
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
631
+ | -------- | ---------------------- | ---------------------------------------------------------- |
632
+ | `p` | `padding` | - |
633
+ | `pt` | `padding-top` | - |
634
+ | `pr` | `padding-right` | - |
635
+ | `pb` | `padding-bottom` | - |
636
+ | `pl` | `padding-left` | - |
637
+ | `pblk` | `padding-block` | - |
638
+ | `pbe` | `padding-block-end` | - |
639
+ | `pbs` | `padding-block-start` | - |
640
+ | `pi` | `padding-inline` | `s:start`, `c:center`, `e:end`, `b:baseline`, `st:stretch` |
641
+ | `pie` | `padding-inline-end` | - |
642
+ | `pis` | `padding-inline-start` | - |
584
643
 
585
644
  ---
586
645
 
587
646
  ## 3. Colors & Background
588
647
 
589
648
  ### Color
590
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
591
- |----------|------------|------------------|
592
- | `c` | `color` | `i:inherit`, `t:transparent` |
649
+
650
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
651
+ | -------- | ---------- | ---------------------------- |
652
+ | `c` | `color` | `i:inherit`, `t:transparent` |
593
653
 
594
654
  ### Background
595
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
596
- |----------|------------|------------------|
597
- | `bg` | `background` | - |
598
- | `bgc` | `background-color` | `t:transparent`, `c:currentcolor` |
599
- | `bgi` | `background-image` | - |
600
- | `bgp` | `background-position` | `t:top`, `b:bottom`, `l:left`, `r:right`, `c:center`, `lt:left top`, `ct:center top`, `rt:right top`, `lc:left center`, `cc:center center`, `rc:right center`, `lb:left bottom`, `cb:center bottom`, `rb:right bottom` |
601
- | `bgpx` | `background-position-x` | `l:left`, `r:right`, `c:center` |
602
- | `bgpy` | `background-position-y` | `t:top`, `b:bottom`, `c:center` |
603
- | `bgr` | `background-repeat` | `r:repeat`, `x:repeat-x`, `y:repeat-y`, `s:space`, `rn:round`, `n:no-repeat`, `rs: repeat space`, `rr:repeat repeat`, `nr:no-repeat round` |
604
- | `bgs` | `background-size` | `c:contain` |
605
- | `bga` | `background-attachment` | `s:scroll`, `f:fixed`, `l:local` |
606
- | `bgbm` | `background-blend-mode` | `n:normal`, `m:multiply`, `s:screen`, `o:overlay`, `d:darken`, `l:lighten`, `cd:color-dodge`, `i:color-burn`, `hl:hard-light`, `sl:soft-light`, `di:difference`, `e:exclusion`, `h:hue`, `sa:saturation`, `c:color`, `lu:luminosity` |
607
- | `bgcl` | `background-clip` | `bb:border-box`, `pb:padding-box`, `cb:content-box`, `t:text` |
608
- | `bgo` | `background-origin` | `bb:border-box`, `pb:padding-box`, `cb:content-box` |
655
+
656
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
657
+ | -------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
658
+ | `bg` | `background` | - |
659
+ | `bgc` | `background-color` | `t:transparent`, `c:currentcolor` |
660
+ | `bgi` | `background-image` | - |
661
+ | `bgp` | `background-position` | `t:top`, `b:bottom`, `l:left`, `r:right`, `c:center`, `lt:left top`, `ct:center top`, `rt:right top`, `lc:left center`, `cc:center center`, `rc:right center`, `lb:left bottom`, `cb:center bottom`, `rb:right bottom` |
662
+ | `bgpx` | `background-position-x` | `l:left`, `r:right`, `c:center` |
663
+ | `bgpy` | `background-position-y` | `t:top`, `b:bottom`, `c:center` |
664
+ | `bgr` | `background-repeat` | `r:repeat`, `x:repeat-x`, `y:repeat-y`, `s:space`, `rn:round`, `n:no-repeat`, `rs: repeat space`, `rr:repeat repeat`, `nr:no-repeat round` |
665
+ | `bgs` | `background-size` | `c:contain` |
666
+ | `bga` | `background-attachment` | `s:scroll`, `f:fixed`, `l:local` |
667
+ | `bgbm` | `background-blend-mode` | `n:normal`, `m:multiply`, `s:screen`, `o:overlay`, `d:darken`, `l:lighten`, `cd:color-dodge`, `i:color-burn`, `hl:hard-light`, `sl:soft-light`, `di:difference`, `e:exclusion`, `h:hue`, `sa:saturation`, `c:color`, `lu:luminosity` |
668
+ | `bgcl` | `background-clip` | `bb:border-box`, `pb:padding-box`, `cb:content-box`, `t:text` |
669
+ | `bgo` | `background-origin` | `bb:border-box`, `pb:padding-box`, `cb:content-box` |
609
670
 
610
671
  ---
611
672
 
612
673
  ## 4. Border
613
674
 
614
675
  ### Border General
615
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
616
- |----------|------------|------------------|
617
- | `bd` | `border` | `d:dotted`, `ds:dashed`, `db:double`, `g:groove`, `r:ridge`, `i:inset`, `o:outset` |
618
- | `bds` | `border-style` | `dt:dotted`, `ds:dashed`, `s:solid`, `db:double`, `g:groove`, `r:ridge`, `in:inset`, `out:outset` |
619
- | `bdc` | `border-color` | - |
620
- | `bdw` | `border-width` | `t:thin`, `m:medium`, `th:thick` |
676
+
677
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
678
+ | -------- | -------------- | ------------------------------------------------------------------------------------------------- |
679
+ | `bd` | `border` | `d:dotted`, `ds:dashed`, `db:double`, `g:groove`, `r:ridge`, `i:inset`, `o:outset` |
680
+ | `bds` | `border-style` | `dt:dotted`, `ds:dashed`, `s:solid`, `db:double`, `g:groove`, `r:ridge`, `in:inset`, `out:outset` |
681
+ | `bdc` | `border-color` | - |
682
+ | `bdw` | `border-width` | `t:thin`, `m:medium`, `th:thick` |
621
683
 
622
684
  ### Border Sides
623
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
624
- |----------|------------|------------------|
625
- | `bdt` | `border-top` | - |
626
- | `bdr` | `border-right` | - |
627
- | `bdb` | `border-bottom` | - |
628
- | `bdl` | `border-left` | - |
685
+
686
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
687
+ | -------- | --------------- | ---------------- |
688
+ | `bdt` | `border-top` | - |
689
+ | `bdr` | `border-right` | - |
690
+ | `bdb` | `border-bottom` | - |
691
+ | `bdl` | `border-left` | - |
629
692
 
630
693
  ### Border Radius
631
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
632
- |----------|------------|------------------|
633
- | `bda` | `border-radius` | - |
634
- | `bdra` | `border-radius` | - |
635
- | `bdtlr` | `border-top-left-radius` | - |
636
- | `bdtrr` | `border-top-right-radius` | - |
637
- | `bdblr` | `border-bottom-left-radius` | - |
638
- | `bdbrr` | `border-bottom-right-radius` | - |
639
- | `bdeer` | `border-end-end-radius` | - |
640
- | `bdesr` | `border-end-start-radius` | - |
641
- | `bdser` | `border-start-end-radius` | - |
642
- | `bdssr` | `border-start-start-radius` | - |
694
+
695
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
696
+ | -------- | ---------------------------- | ---------------- |
697
+ | `bda` | `border-radius` | - |
698
+ | `bdra` | `border-radius` | - |
699
+ | `bdtlr` | `border-top-left-radius` | - |
700
+ | `bdtrr` | `border-top-right-radius` | - |
701
+ | `bdblr` | `border-bottom-left-radius` | - |
702
+ | `bdbrr` | `border-bottom-right-radius` | - |
703
+ | `bdeer` | `border-end-end-radius` | - |
704
+ | `bdesr` | `border-end-start-radius` | - |
705
+ | `bdser` | `border-start-end-radius` | - |
706
+ | `bdssr` | `border-start-start-radius` | - |
643
707
 
644
708
  ### Border Block/Inline
645
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
646
- |----------|------------|------------------|
647
- | `bdblk` | `border-block` | - |
648
- | `bdblc` | `border-block-color` | - |
649
- | `bdble` | `border-block-end` | - |
650
- | `bdbls` | `border-block-start` | - |
651
- | `bdblst` | `border-block-style` | `d:dotted`, `ds:dashed`, `db:double`, `g:groove`, `r:ridge`, `i:inset`, `o:outset` |
652
- | `bdblwi` | `border-block-width` | - |
653
- | `bdi` | `border-inline` | - |
654
- | `bdic` | `border-inline-color` | - |
655
- | `bdie` | `border-inline-end` | - |
656
- | `bdista` | `border-inline-start` | - |
657
- | `bdistl` | `border-inline-style` | - |
658
- | `bdinw` | `border-inline-width` | - |
709
+
710
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
711
+ | -------- | --------------------- | ---------------------------------------------------------------------------------- |
712
+ | `bdblk` | `border-block` | - |
713
+ | `bdblc` | `border-block-color` | - |
714
+ | `bdble` | `border-block-end` | - |
715
+ | `bdbls` | `border-block-start` | - |
716
+ | `bdblst` | `border-block-style` | `d:dotted`, `ds:dashed`, `db:double`, `g:groove`, `r:ridge`, `i:inset`, `o:outset` |
717
+ | `bdblwi` | `border-block-width` | - |
718
+ | `bdi` | `border-inline` | - |
719
+ | `bdic` | `border-inline-color` | - |
720
+ | `bdie` | `border-inline-end` | - |
721
+ | `bdista` | `border-inline-start` | - |
722
+ | `bdistl` | `border-inline-style` | - |
723
+ | `bdinw` | `border-inline-width` | - |
659
724
 
660
725
  ---
661
726
 
662
727
  ## 5. Typography
663
728
 
664
729
  ### Font
665
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
666
- |----------|------------|------------------|
667
- | `fn` | `font` | - |
668
- | `ff` | `font-family` | `a:ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`, `s:ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif`, `m:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace` |
669
- | `fnf` | `font-family` | - |
670
- | `fns` | `font-size` | - |
671
- | `fw` | `font-weight` | - |
672
- | `fnw` | `font-weight` | - |
673
- | `fnsty` | `font-style` | - |
674
- | `fnstr` | `font-stretch` | - |
675
- | `fnfs` | `font-feature-settings` | - |
676
- | `fnk` | `font-kerning` | - |
677
- | `fnlo` | `font-language-override` | - |
678
- | `fnos` | `font-optical-sizing` | - |
679
- | `fnp` | `font-palette` | - |
680
- | `fnsa` | `font-size-adjust` | - |
681
- | `fnsyn` | `font-synthesis` | - |
682
- | `fnsp` | `font-synthesis-position` | - |
683
- | `fnssc` | `font-synthesis-small-caps` | - |
684
- | `fnss` | `font-synthesis-style` | - |
685
- | `fnsw` | `font-synthesis-weight` | - |
686
- | `fnv` | `font-variant` | - |
687
- | `fnva` | `font-variant-alternates` | - |
688
- | `fnvc` | `font-variant-caps` | - |
689
- | `fnvea` | `font-variant-east-asian` | - |
690
- | `fnve` | `font-variant-emoji` | - |
691
- | `fnvl` | `font-variant-ligatures` | - |
692
- | `fnvn` | `font-variant-numeric` | - |
693
- | `fnvp` | `font-variant-position` | - |
694
- | `fnvs` | `font-variation-settings` | - |
730
+
731
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
732
+ | -------- | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
733
+ | `fn` | `font` | - |
734
+ | `ff` | `font-family` | `a:ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`, `s:ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif`, `m:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace` |
735
+ | `fnf` | `font-family` | - |
736
+ | `fns` | `font-size` | - |
737
+ | `fw` | `font-weight` | - |
738
+ | `fnw` | `font-weight` | - |
739
+ | `fnsty` | `font-style` | - |
740
+ | `fnstr` | `font-stretch` | - |
741
+ | `fnfs` | `font-feature-settings` | - |
742
+ | `fnk` | `font-kerning` | - |
743
+ | `fnlo` | `font-language-override` | - |
744
+ | `fnos` | `font-optical-sizing` | - |
745
+ | `fnp` | `font-palette` | - |
746
+ | `fnsa` | `font-size-adjust` | - |
747
+ | `fnsyn` | `font-synthesis` | - |
748
+ | `fnsp` | `font-synthesis-position` | - |
749
+ | `fnssc` | `font-synthesis-small-caps` | - |
750
+ | `fnss` | `font-synthesis-style` | - |
751
+ | `fnsw` | `font-synthesis-weight` | - |
752
+ | `fnv` | `font-variant` | - |
753
+ | `fnva` | `font-variant-alternates` | - |
754
+ | `fnvc` | `font-variant-caps` | - |
755
+ | `fnvea` | `font-variant-east-asian` | - |
756
+ | `fnve` | `font-variant-emoji` | - |
757
+ | `fnvl` | `font-variant-ligatures` | - |
758
+ | `fnvn` | `font-variant-numeric` | - |
759
+ | `fnvp` | `font-variant-position` | - |
760
+ | `fnvs` | `font-variation-settings` | - |
695
761
 
696
762
  ### Text
697
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
698
- |----------|------------|------------------|
699
- | `ta` | `text-align` | `s:start`, `e:end`, `l:left`, `r:right`, `c:center`, `j:justify`, `mp:match-parent`, `mc:-moz-center`, `wc:-webkit-center` |
700
- | `tal` | `text-align-last` | `s:start`, `e:end`, `l:left`, `r:right`, `c:center`, `j:justify` |
701
- | `td` | `text-decoration` | `u:underline` |
702
- | `tdc` | `text-decoration-color` | - |
703
- | `tdl` | `text-decoration-line` | `u:underline`, `o:overline`, `lt:line-through`, `b:blink` |
704
- | `tds` | `text-decoration-style` | `db:double`, `dt:dotted`, `ds:dashed`, `w:wavy` |
705
- | `tdt` | `text-decoration-thickness` | `ff:from-font` |
706
- | `tdsi` | `text-decoration-skip-ink` | - |
707
- | `teph` | `text-emphasis` | - |
708
- | `tec` | `text-emphasis-color` | - |
709
- | `tep` | `text-emphasis-position` | `or:over right`, `ol:over left`, `ur:under right`, `ul:under left`, `lo:left over`, `ru:right under`, `lu:left under` |
710
- | `tes` | `text-emphasis-style` | - |
711
- | `ti` | `text-indent` | - |
712
- | `tj` | `text-justify` | `iw:inter-word`, `ic:inter-character`, `d:distribute` |
713
- | `tor` | `text-orientation` | `m:mixed`, `u:upright`, `sr:sideways-right`, `sl:sideways-left`, `s:sideways`, `ugo:use-glyph-orientation` |
714
- | `tol` | `text-overflow` | `c:clip`, `e:ellipsis` |
715
- | `trd` | `text-rendering` | `op:optimizeSpeed`, `ol:optimizeLegibility`, `g:geometricPrecision` |
716
- | `tsh` | `text-shadow` | - |
717
- | `ttr` | `text-transform` | `c:capitalize`, `u:uppercase`, `l:lowercase`, `fw:full-width`, `fsk:full-size-kana` |
718
- | `tuo` | `text-underline-offset` | - |
719
- | `tup` | `text-underline-position` | `u:under`, `l:left`, `r:right`, `ul:under left`, `ru:right under` |
720
- | `tw` | `text-wrap` | `w:wrap`, `n:nowrap`, `b:balance`, `p:pretty` |
763
+
764
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
765
+ | -------- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
766
+ | `ta` | `text-align` | `s:start`, `e:end`, `l:left`, `r:right`, `c:center`, `j:justify`, `mp:match-parent`, `mc:-moz-center`, `wc:-webkit-center` |
767
+ | `tal` | `text-align-last` | `s:start`, `e:end`, `l:left`, `r:right`, `c:center`, `j:justify` |
768
+ | `td` | `text-decoration` | `u:underline` |
769
+ | `tdc` | `text-decoration-color` | - |
770
+ | `tdl` | `text-decoration-line` | `u:underline`, `o:overline`, `lt:line-through`, `b:blink` |
771
+ | `tds` | `text-decoration-style` | `db:double`, `dt:dotted`, `ds:dashed`, `w:wavy` |
772
+ | `tdt` | `text-decoration-thickness` | `ff:from-font` |
773
+ | `tdsi` | `text-decoration-skip-ink` | - |
774
+ | `teph` | `text-emphasis` | - |
775
+ | `tec` | `text-emphasis-color` | - |
776
+ | `tep` | `text-emphasis-position` | `or:over right`, `ol:over left`, `ur:under right`, `ul:under left`, `lo:left over`, `ru:right under`, `lu:left under` |
777
+ | `tes` | `text-emphasis-style` | - |
778
+ | `ti` | `text-indent` | - |
779
+ | `tj` | `text-justify` | `iw:inter-word`, `ic:inter-character`, `d:distribute` |
780
+ | `tor` | `text-orientation` | `m:mixed`, `u:upright`, `sr:sideways-right`, `sl:sideways-left`, `s:sideways`, `ugo:use-glyph-orientation` |
781
+ | `tol` | `text-overflow` | `c:clip`, `e:ellipsis` |
782
+ | `trd` | `text-rendering` | `op:optimizeSpeed`, `ol:optimizeLegibility`, `g:geometricPrecision` |
783
+ | `tsh` | `text-shadow` | - |
784
+ | `ttr` | `text-transform` | `c:capitalize`, `u:uppercase`, `l:lowercase`, `fw:full-width`, `fsk:full-size-kana` |
785
+ | `tuo` | `text-underline-offset` | - |
786
+ | `tup` | `text-underline-position` | `u:under`, `l:left`, `r:right`, `ul:under left`, `ru:right under` |
787
+ | `tw` | `text-wrap` | `w:wrap`, `n:nowrap`, `b:balance`, `p:pretty` |
721
788
 
722
789
  ### Line & Spacing
723
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
724
- |----------|------------|------------------|
725
- | `lh` | `line-height` | - |
726
- | `lts` | `letter-spacing` | `n:normal` |
727
- | `wrs` | `word-spacing` | - |
728
- | `lbrk` | `line-break` | - |
729
- | `wrb` | `word-break` | - |
730
- | `wrtm` | `writing-mode` | - |
790
+
791
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
792
+ | -------- | ---------------- | ---------------- |
793
+ | `lh` | `line-height` | - |
794
+ | `lts` | `letter-spacing` | `n:normal` |
795
+ | `wrs` | `word-spacing` | - |
796
+ | `lbrk` | `line-break` | - |
797
+ | `wrb` | `word-break` | - |
798
+ | `wrtm` | `writing-mode` | - |
731
799
 
732
800
  ---
733
801
 
734
802
  ## 6. Flexbox
735
803
 
736
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
737
- |----------|------------|------------------|
738
- | `fx` | `flex` | `i:0 1 auto`, `a:1 1 auto` |
739
- | `fxb` | `flex-basis` | - |
740
- | `fxd` | `flex-direction` | `r:row`, `rr:row-reverse`, `c:column`, `cr:column-reverse` |
741
- | `fxf` | `flex-flow` | - |
742
- | `fxg` | `flex-grow` | - |
743
- | `fxs` | `flex-shrink` | - |
744
- | `fxw` | `flex-wrap` | `w:wrap`, `wr:wrap-reverse`, `n:nowrap` |
745
- | `jc` | `justify-content` | `c:center`, `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `l:left`, `r:right`, `n:normal`, `sp:space-between`, `sa:space-around`, `se:space-evenly`, `st:stretch`, `sc:safe center`, `uc:unsafe center` |
746
- | `ai` | `align-items` | `n:normal`, `c:center`, `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `ss:self-start`, `se:self-end`, `b:baseline`, `fb:first baseline`, `lb:last baseline`, `sc:safe center`, `uc:unsafe center` |
747
- | `as` | `align-self` | `n:normal`, `c:center`, `s:start`, `e:end`, `ss:self-start`, `se:self-end`, `fs:flex-start`, `fe:flex-end`, `b:baseline`, `fb:first baseline`, `lb:last baseline`, `st:stretch`, `sc:safe center`, `uc:unsafe center` |
748
- | `ac` | `align-content` | `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `n:normal`, `b:baseline`, `fb:first baseline`, `lb:last baseline`, `sp:space-between`, `sa:space-around`, `se:space-evenly`, `st:stretch`, `sc:safe center`, `uc:unsafe center` |
804
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
805
+ | -------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
806
+ | `fx` | `flex` | `i:0 1 auto`, `a:1 1 auto` |
807
+ | `fxb` | `flex-basis` | - |
808
+ | `fxd` | `flex-direction` | `r:row`, `rr:row-reverse`, `c:column`, `cr:column-reverse` |
809
+ | `fxf` | `flex-flow` | - |
810
+ | `fxg` | `flex-grow` | - |
811
+ | `fxs` | `flex-shrink` | - |
812
+ | `fxw` | `flex-wrap` | `w:wrap`, `wr:wrap-reverse`, `n:nowrap` |
813
+ | `jc` | `justify-content` | `c:center`, `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `l:left`, `r:right`, `n:normal`, `sp:space-between`, `sa:space-around`, `se:space-evenly`, `st:stretch`, `sc:safe center`, `uc:unsafe center` |
814
+ | `ai` | `align-items` | `n:normal`, `c:center`, `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `ss:self-start`, `se:self-end`, `b:baseline`, `fb:first baseline`, `lb:last baseline`, `sc:safe center`, `uc:unsafe center` |
815
+ | `as` | `align-self` | `n:normal`, `c:center`, `s:start`, `e:end`, `ss:self-start`, `se:self-end`, `fs:flex-start`, `fe:flex-end`, `b:baseline`, `fb:first baseline`, `lb:last baseline`, `st:stretch`, `sc:safe center`, `uc:unsafe center` |
816
+ | `ac` | `align-content` | `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `n:normal`, `b:baseline`, `fb:first baseline`, `lb:last baseline`, `sp:space-between`, `sa:space-around`, `se:space-evenly`, `st:stretch`, `sc:safe center`, `uc:unsafe center` |
749
817
 
750
818
  ---
751
819
 
752
820
  ## 7. Grid
753
821
 
754
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
755
- |----------|------------|------------------|
756
- | `g` | `grid` | - |
757
- | `ga` | `grid-area` | - |
758
- | `gc` | `grid-column` | `f:1 / -1` |
759
- | `gce` | `grid-column-end` | - |
760
- | `gcs` | `grid-column-start` | - |
761
- | `gr` | `grid-row` | `f:1 / -1` |
762
- | `gre` | `grid-row-end` | - |
763
- | `grs` | `grid-row-start` | - |
764
- | `gt` | `grid-template` | - |
765
- | `gta` | `grid-template-areas` | - |
766
- | `gtc` | `grid-template-columns` | `s:subgrid` |
767
- | `gtr` | `grid-template-rows` | `s:subgrid` |
768
- | `gac` | `grid-auto-columns` | `mic:min-content`, `mac:max-content`, `mm:minmax(0, 1fr)` |
769
- | `gar` | `grid-auto-rows` | `mic:min-content`, `mac:max-content`, `mm:minmax(0, 1fr)` |
770
- | `gaf` | `grid-auto-flow` | `r:row`, `c:column`, `d:dense`, `rd:row dense`, `cd:column dense` |
771
- | `gap` | `gap` | - |
772
- | `rgap` | `row-gap` | - |
773
- | `colg` | `column-gap` | - |
774
- | `ji` | `justify-items` | `n:normal`, `st:stretch`, `c:center`, `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `ss:self-start`, `se:self-end`, `l:left`, `r:right`, `b:baseline`, `fb:first baseline`, `lb:last baseline`, `lr:legacy right`, `ll:legacy left`, `lc:legacy center`, `sc:safe center`, `uc:unsafe center` |
775
- | `js` | `justify-self` | `n:normal`, `st:stretch`, `c:center`, `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `ss:self-start`, `se:self-end`, `l:left`, `r:right`, `b:baseline`, `sc:safe center`, `uc:unsafe center` |
776
- | `pli` | `place-items` | - |
777
- | `pls` | `place-self` | - |
778
- | `plc` | `place-content` | - |
822
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
823
+ | -------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
824
+ | `g` | `grid` | - |
825
+ | `ga` | `grid-area` | - |
826
+ | `gc` | `grid-column` | `f:1 / -1` |
827
+ | `gce` | `grid-column-end` | - |
828
+ | `gcs` | `grid-column-start` | - |
829
+ | `gr` | `grid-row` | `f:1 / -1` |
830
+ | `gre` | `grid-row-end` | - |
831
+ | `grs` | `grid-row-start` | - |
832
+ | `gt` | `grid-template` | - |
833
+ | `gta` | `grid-template-areas` | - |
834
+ | `gtc` | `grid-template-columns` | `s:subgrid` |
835
+ | `gtr` | `grid-template-rows` | `s:subgrid` |
836
+ | `gac` | `grid-auto-columns` | `mic:min-content`, `mac:max-content`, `mm:minmax(0, 1fr)` |
837
+ | `gar` | `grid-auto-rows` | `mic:min-content`, `mac:max-content`, `mm:minmax(0, 1fr)` |
838
+ | `gaf` | `grid-auto-flow` | `r:row`, `c:column`, `d:dense`, `rd:row dense`, `cd:column dense` |
839
+ | `gap` | `gap` | - |
840
+ | `rgap` | `row-gap` | - |
841
+ | `colg` | `column-gap` | - |
842
+ | `ji` | `justify-items` | `n:normal`, `st:stretch`, `c:center`, `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `ss:self-start`, `se:self-end`, `l:left`, `r:right`, `b:baseline`, `fb:first baseline`, `lb:last baseline`, `lr:legacy right`, `ll:legacy left`, `lc:legacy center`, `sc:safe center`, `uc:unsafe center` |
843
+ | `js` | `justify-self` | `n:normal`, `st:stretch`, `c:center`, `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `ss:self-start`, `se:self-end`, `l:left`, `r:right`, `b:baseline`, `sc:safe center`, `uc:unsafe center` |
844
+ | `pli` | `place-items` | - |
845
+ | `pls` | `place-self` | - |
846
+ | `plc` | `place-content` | - |
779
847
 
780
848
  ---
781
849
 
782
850
  ## 8. Effects & Filters
783
851
 
784
852
  ### Opacity & Visibility
785
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
786
- |----------|------------|------------------|
787
- | `opc` | `opacity` | - |
788
- | `v` | `visibility` | `c:collapse` |
853
+
854
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
855
+ | -------- | ------------ | ---------------- |
856
+ | `opc` | `opacity` | - |
857
+ | `v` | `visibility` | `c:collapse` |
789
858
 
790
859
  ### Filter & Backdrop
791
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
792
- |----------|------------|------------------|
793
- | `flt` | `filter` | - |
794
- | `bkdf` | `backdrop-filter` | - |
860
+
861
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
862
+ | -------- | ----------------- | ---------------- |
863
+ | `flt` | `filter` | - |
864
+ | `bkdf` | `backdrop-filter` | - |
795
865
 
796
866
  ### Blend Modes
797
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
798
- |----------|------------|------------------|
799
- | `mbd` | `mix-blend-mode` | `n:normal`, `m:multiply`, `s:screen`, `o:overlay`, `d:darken`, `l:lighten`, `cd:color-dodge`, `i:color-burn`, `hl:hard-light`, `sl:soft-light`, `di:difference`, `e:exclusion`, `h:hue`, `sa:saturation`, `c:color`, `lu:luminosity` |
867
+
868
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
869
+ | -------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
870
+ | `mbd` | `mix-blend-mode` | `n:normal`, `m:multiply`, `s:screen`, `o:overlay`, `d:darken`, `l:lighten`, `cd:color-dodge`, `i:color-burn`, `hl:hard-light`, `sl:soft-light`, `di:difference`, `e:exclusion`, `h:hue`, `sa:saturation`, `c:color`, `lu:luminosity` |
800
871
 
801
872
  ### Box Shadow
802
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
803
- |----------|------------|------------------|
804
- | `bxsh` | `box-shadow` | - |
805
- | `bxshd` | `box-shadow` | - |
873
+
874
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
875
+ | -------- | ------------ | ---------------- |
876
+ | `bxsh` | `box-shadow` | - |
877
+ | `bxshd` | `box-shadow` | - |
806
878
 
807
879
  ---
808
880
 
809
881
  ## 9. Transforms & Animations
810
882
 
811
883
  ### Transform
812
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
813
- |----------|------------|------------------|
814
- | `tra` | `transform` | - |
815
- | `trab` | `transform-box` | - |
816
- | `trao` | `transform-origin` | - |
817
- | `tras` | `transform-style` | - |
818
- | `rot` | `rotate` | - |
819
- | `s` | `scale` | - |
820
- | `trl` | `translate` | - |
884
+
885
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
886
+ | -------- | ------------------ | ---------------- |
887
+ | `tra` | `transform` | - |
888
+ | `trab` | `transform-box` | - |
889
+ | `trao` | `transform-origin` | - |
890
+ | `tras` | `transform-style` | - |
891
+ | `rot` | `rotate` | - |
892
+ | `s` | `scale` | - |
893
+ | `trl` | `translate` | - |
821
894
 
822
895
  ### Transition
823
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
824
- |----------|------------|------------------|
825
- | `tran` | `transition` | - |
826
- | `tranb` | `transition-behavior` | - |
827
- | `trand` | `transition-delay` | - |
828
- | `trandur` | `transition-duration` | - |
829
- | `tranp` | `transition-property` | - |
830
- | `trantf` | `transition-timing-function` | - |
896
+
897
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
898
+ | --------- | ---------------------------- | ---------------- |
899
+ | `tran` | `transition` | - |
900
+ | `tranb` | `transition-behavior` | - |
901
+ | `trand` | `transition-delay` | - |
902
+ | `trandur` | `transition-duration` | - |
903
+ | `tranp` | `transition-property` | - |
904
+ | `trantf` | `transition-timing-function` | - |
831
905
 
832
906
  ### Animation
833
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
834
- |----------|------------|------------------|
835
- | `ani` | `animation` | - |
836
- | `anic` | `animation-composition` | `r:replace`, `a:add`, `ac:accumulate`, `ra:replace, add`, `aac:add, accumulate`, `raac:replace, add, accumulate` |
837
- | `anide` | `animation-delay` | - |
838
- | `anidi` | `animation-direction` | `r:reverse`, `a:alternate`, `ar:alternate-reverse`, `nr:normal, reverse`, `arn:alternate, reverse, normal` |
839
- | `anidu` | `animation-duration` | - |
840
- | `anifm` | `animation-fill-mode` | `f:forwards`, `b:backwards`, `nb:none, backwards`, `fbn:both, forwards, none` |
841
- | `aniic` | `animation-iteration-count` | - |
842
- | `anin` | `animation-name` | `s:slide` |
843
- | `anips` | `animation-play-state` | `p:paused`, `r:running` |
844
- | `anitf` | `animation-timing-function` | `ei:ease-in`, `eo:ease-out`, `eio:ease-in-out`, `l:linear`, `ss:step-start`, `se:step-end` |
907
+
908
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
909
+ | -------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------- |
910
+ | `ani` | `animation` | - |
911
+ | `anic` | `animation-composition` | `r:replace`, `a:add`, `ac:accumulate`, `ra:replace, add`, `aac:add, accumulate`, `raac:replace, add, accumulate` |
912
+ | `anide` | `animation-delay` | - |
913
+ | `anidi` | `animation-direction` | `r:reverse`, `a:alternate`, `ar:alternate-reverse`, `nr:normal, reverse`, `arn:alternate, reverse, normal` |
914
+ | `anidu` | `animation-duration` | - |
915
+ | `anifm` | `animation-fill-mode` | `f:forwards`, `b:backwards`, `nb:none, backwards`, `fbn:both, forwards, none` |
916
+ | `aniic` | `animation-iteration-count` | - |
917
+ | `anin` | `animation-name` | `s:slide` |
918
+ | `anips` | `animation-play-state` | `p:paused`, `r:running` |
919
+ | `anitf` | `animation-timing-function` | `ei:ease-in`, `eo:ease-out`, `eio:ease-in-out`, `l:linear`, `ss:step-start`, `se:step-end` |
845
920
 
846
921
  ---
847
922
 
848
923
  ## 10. Overflow & Scrolling
849
924
 
850
925
  ### Overflow
851
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
852
- |----------|------------|------------------|
853
- | `ofl` | `overflow` | - |
854
- | `oflx` | `overflow-x` | `c:clip`, `s:scroll` |
855
- | `ofly` | `overflow-y` | `c:clip`, `s:scroll` |
856
- | `oflb` | `overflow-block` | - |
857
- | `ofli` | `overflow-inline` | - |
858
- | `ofla` | `overflow-anchor` | - |
859
- | `oflcm` | `overflow-clip-margin` | - |
860
- | `oflw` | `overflow-wrap` | `c:clip`, `s:scroll` |
926
+
927
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
928
+ | -------- | ---------------------- | -------------------- |
929
+ | `ofl` | `overflow` | - |
930
+ | `oflx` | `overflow-x` | `c:clip`, `s:scroll` |
931
+ | `ofly` | `overflow-y` | `c:clip`, `s:scroll` |
932
+ | `oflb` | `overflow-block` | - |
933
+ | `ofli` | `overflow-inline` | - |
934
+ | `ofla` | `overflow-anchor` | - |
935
+ | `oflcm` | `overflow-clip-margin` | - |
936
+ | `oflw` | `overflow-wrap` | `c:clip`, `s:scroll` |
861
937
 
862
938
  ### Scroll
863
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
864
- |----------|------------|------------------|
865
- | `scrb` | `scroll-behavior` | - |
866
- | `scrm` | `scroll-margin` | - |
867
- | `scrmb` | `scroll-margin-bottom` | - |
868
- | `scrml` | `scroll-margin-left` | - |
869
- | `scrmr` | `scroll-margin-right` | - |
870
- | `scrmt` | `scroll-margin-top` | - |
871
- | `scrp` | `scroll-padding` | - |
872
- | `scrpb` | `scroll-padding-bottom` | - |
873
- | `scrpl` | `scroll-padding-left` | - |
874
- | `scrpr` | `scroll-padding-right` | - |
875
- | `scrpt` | `scroll-padding-top` | - |
876
- | `scrsa` | `scroll-snap-align` | - |
877
- | `scrss` | `scroll-snap-stop` | - |
878
- | `scrst` | `scroll-snap-type` | - |
879
- | `sbc` | `scrollbar-color` | - |
880
- | `sbg` | `scrollbar-gutter` | - |
881
- | `sbw` | `scrollbar-width` | - |
939
+
940
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
941
+ | -------- | ----------------------- | ---------------- |
942
+ | `scrb` | `scroll-behavior` | - |
943
+ | `scrm` | `scroll-margin` | - |
944
+ | `scrmb` | `scroll-margin-bottom` | - |
945
+ | `scrml` | `scroll-margin-left` | - |
946
+ | `scrmr` | `scroll-margin-right` | - |
947
+ | `scrmt` | `scroll-margin-top` | - |
948
+ | `scrp` | `scroll-padding` | - |
949
+ | `scrpb` | `scroll-padding-bottom` | - |
950
+ | `scrpl` | `scroll-padding-left` | - |
951
+ | `scrpr` | `scroll-padding-right` | - |
952
+ | `scrpt` | `scroll-padding-top` | - |
953
+ | `scrsa` | `scroll-snap-align` | - |
954
+ | `scrss` | `scroll-snap-stop` | - |
955
+ | `scrst` | `scroll-snap-type` | - |
956
+ | `sbc` | `scrollbar-color` | - |
957
+ | `sbg` | `scrollbar-gutter` | - |
958
+ | `sbw` | `scrollbar-width` | - |
882
959
 
883
960
  ### Overscroll
884
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
885
- |----------|------------|------------------|
886
- | `osrbh` | `overscroll-behavior` | `c:contain` |
887
- | `osrbb` | `overscroll-behavior-block` | `c:contain` |
888
- | `osrbi` | `overscroll-behavior-inline` | `c:contain` |
889
- | `osrbx` | `overscroll-behavior-x` | `c:contain` |
890
- | `orsby` | `overscroll-behavior-y` | `c:contain` |
961
+
962
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
963
+ | -------- | ---------------------------- | ---------------- |
964
+ | `osrbh` | `overscroll-behavior` | `c:contain` |
965
+ | `osrbb` | `overscroll-behavior-block` | `c:contain` |
966
+ | `osrbi` | `overscroll-behavior-inline` | `c:contain` |
967
+ | `osrbx` | `overscroll-behavior-x` | `c:contain` |
968
+ | `orsby` | `overscroll-behavior-y` | `c:contain` |
891
969
 
892
970
  ---
893
971
 
894
972
  ## 11. Lists & Tables
895
973
 
896
974
  ### Lists
897
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
898
- |----------|------------|------------------|
899
- | `ls` | `list-style` | `i:inside`, `di:disc`, `c:circle`, `s:square`, `de:decimal`, `g:georgian`, `tci:trad-chinese-informal`, `k:kannada` |
900
- | `lsi` | `list-style-image` | - |
901
- | `lisp` | `list-style-position` | `i:inside`, `o:outside` |
902
- | `lst` | `list-style-type` | `di:disc`, `c:circle`, `s:square`, `de:decimal`, `g:georgian`, `tci:trad-chinese-informal`, `k:kannada` |
975
+
976
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
977
+ | -------- | --------------------- | ------------------------------------------------------------------------------------------------------------------- |
978
+ | `ls` | `list-style` | `i:inside`, `di:disc`, `c:circle`, `s:square`, `de:decimal`, `g:georgian`, `tci:trad-chinese-informal`, `k:kannada` |
979
+ | `lsi` | `list-style-image` | - |
980
+ | `lisp` | `list-style-position` | `i:inside`, `o:outside` |
981
+ | `lst` | `list-style-type` | `di:disc`, `c:circle`, `s:square`, `de:decimal`, `g:georgian`, `tci:trad-chinese-informal`, `k:kannada` |
903
982
 
904
983
  ### Tables
905
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
906
- |----------|------------|------------------|
907
- | `tbl` | `table-layout` | - |
908
- | `bdcl` | `border-collapse` | `s:separate`, `c:collapse` |
909
- | `bdsp` | `border-spacing` | - |
910
- | `empc` | `empty-cells` | - |
911
- | `caps` | `caption-side` | - |
984
+
985
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
986
+ | -------- | ----------------- | -------------------------- |
987
+ | `tbl` | `table-layout` | - |
988
+ | `bdcl` | `border-collapse` | `s:separate`, `c:collapse` |
989
+ | `bdsp` | `border-spacing` | - |
990
+ | `empc` | `empty-cells` | - |
991
+ | `caps` | `caption-side` | - |
912
992
 
913
993
  ### Columns
914
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
915
- |----------|------------|------------------|
916
- | `col` | `columns` | - |
917
- | `colc` | `column-count` | - |
918
- | `colf` | `column-fill` | - |
919
- | `colg` | `column-gap` | - |
920
- | `colr` | `column-rule` | - |
921
- | `colrc` | `column-rule-color` | - |
922
- | `colrs` | `column-rule-style` | - |
923
- | `colrw` | `column-rule-width` | - |
924
- | `cols` | `column-span` | - |
925
- | `colw` | `column-width` | - |
994
+
995
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
996
+ | -------- | ------------------- | ---------------- |
997
+ | `col` | `columns` | - |
998
+ | `colc` | `column-count` | - |
999
+ | `colf` | `column-fill` | - |
1000
+ | `colg` | `column-gap` | - |
1001
+ | `colr` | `column-rule` | - |
1002
+ | `colrc` | `column-rule-color` | - |
1003
+ | `colrs` | `column-rule-style` | - |
1004
+ | `colrw` | `column-rule-width` | - |
1005
+ | `cols` | `column-span` | - |
1006
+ | `colw` | `column-width` | - |
926
1007
 
927
1008
  ---
928
1009
 
929
1010
  ## 12. Advanced Properties
930
1011
 
931
1012
  ### Containment
932
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
933
- |----------|------------|------------------|
934
- | `cnt` | `contain` | - |
935
- | `cntibs` | `contain-intrinsic-block-size` | - |
936
- | `cntih` | `contain-intrinsic-height` | - |
937
- | `cntiis` | `contain-intrinsic-inline-size` | - |
938
- | `cntis` | `contain-intrinsic-size` | - |
939
- | `ciw` | `contain-intrinsic-width` | - |
1013
+
1014
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
1015
+ | -------- | ------------------------------- | ---------------- |
1016
+ | `cnt` | `contain` | - |
1017
+ | `cntibs` | `contain-intrinsic-block-size` | - |
1018
+ | `cntih` | `contain-intrinsic-height` | - |
1019
+ | `cntiis` | `contain-intrinsic-inline-size` | - |
1020
+ | `cntis` | `contain-intrinsic-size` | - |
1021
+ | `ciw` | `contain-intrinsic-width` | - |
940
1022
 
941
1023
  ### Container Queries
942
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
943
- |----------|------------|------------------|
944
- | `ctr` | `container` | - |
945
- | `ctrn` | `container-name` | - |
946
- | `ctrt` | `container-type` | - |
1024
+
1025
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
1026
+ | -------- | ---------------- | ---------------- |
1027
+ | `ctr` | `container` | - |
1028
+ | `ctrn` | `container-name` | - |
1029
+ | `ctrt` | `container-type` | - |
947
1030
 
948
1031
  ### Content & Counters
949
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
950
- |----------|------------|------------------|
951
- | `ctt` | `content` | - |
952
- | `cntri` | `counter-increment` | - |
953
- | `cntrr` | `counter-reset` | - |
954
- | `cntrs` | `counter-set` | - |
1032
+
1033
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
1034
+ | -------- | ------------------- | ---------------- |
1035
+ | `ctt` | `content` | - |
1036
+ | `cntri` | `counter-increment` | - |
1037
+ | `cntrr` | `counter-reset` | - |
1038
+ | `cntrs` | `counter-set` | - |
955
1039
 
956
1040
  ### Page Breaks
957
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
958
- |----------|------------|------------------|
959
- | `pg` | `page` | - |
960
- | `pgba` | `page-break-after` | - |
961
- | `pgbb` | `page-break-before` | - |
962
- | `pgbi` | `page-break-inside` | - |
963
- | `brka` | `break-after` | - |
964
- | `brkb` | `break-before` | - |
965
- | `brki` | `break-inside` | - |
1041
+
1042
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
1043
+ | -------- | ------------------- | ---------------- |
1044
+ | `pg` | `page` | - |
1045
+ | `pgba` | `page-break-after` | - |
1046
+ | `pgbb` | `page-break-before` | - |
1047
+ | `pgbi` | `page-break-inside` | - |
1048
+ | `brka` | `break-after` | - |
1049
+ | `brkb` | `break-before` | - |
1050
+ | `brki` | `break-inside` | - |
966
1051
 
967
1052
  ### Other Advanced
968
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
969
- |----------|------------|------------------|
970
- | `a` | `all` | - |
971
- | `is` | `isolation` | `i:isolate` |
972
- | `z` | `z-index` | - |
973
- | `ord` | `order` | - |
974
- | `fl` | `float` | `is:inline-start`, `ie:inline-end`, `r:right`, `l:left` |
975
- | `clr` | `clear` | - |
976
- | `rsz` | `resize` | `b:both`, `h:horizontal`, `v:vertical` |
977
- | `us` | `user-select` | `t:text`, `all:all`, `c:contain` |
978
- | `pe` | `pointer-events` | - |
979
- | `cr` | `cursor` | `p:pointer`, `d:default`, `cm:context-menu`, `h:help`, `pg:progress`, `w:wait`, `c:cell`, `t:text`, `vt:vertical-text`, `al:alias`, `cp:copy`, `mo:move`, `nd:no-drop`, `na:not-allowed`, `gr:grab`, `gb:grabbing`, `as:all-scroll`, `colr:col-resize`, `rr:row-resize`, `nr:n-resize`, `er:e-resize`, `sr:s-resize`, `wr:w-resize`, `ner:ne-resize`, `ser:se-resize`, `swr:sw-resize`, `ewr:ew-resize`, `nsr:ns-resize`, `nesw:nesw-resize`, `nwse:nwse-resize`, `zi:zoom-in`, `zo:zoom-out` |
980
- | `toa` | `touch-action` | `p:pan-x`, `py:pan-y`, `pm:pan-x pan-y`, `pi:pinch-zoom` |
981
- | `zo` | `zoom` | - |
1053
+
1054
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
1055
+ | -------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1056
+ | `a` | `all` | - |
1057
+ | `is` | `isolation` | `i:isolate` |
1058
+ | `z` | `z-index` | - |
1059
+ | `ord` | `order` | - |
1060
+ | `fl` | `float` | `is:inline-start`, `ie:inline-end`, `r:right`, `l:left` |
1061
+ | `clr` | `clear` | - |
1062
+ | `rsz` | `resize` | `b:both`, `h:horizontal`, `v:vertical` |
1063
+ | `us` | `user-select` | `t:text`, `all:all`, `c:contain` |
1064
+ | `pe` | `pointer-events` | - |
1065
+ | `cr` | `cursor` | `p:pointer`, `d:default`, `cm:context-menu`, `h:help`, `pg:progress`, `w:wait`, `c:cell`, `t:text`, `vt:vertical-text`, `al:alias`, `cp:copy`, `mo:move`, `nd:no-drop`, `na:not-allowed`, `gr:grab`, `gb:grabbing`, `as:all-scroll`, `colr:col-resize`, `rr:row-resize`, `nr:n-resize`, `er:e-resize`, `sr:s-resize`, `wr:w-resize`, `ner:ne-resize`, `ser:se-resize`, `swr:sw-resize`, `ewr:ew-resize`, `nsr:ns-resize`, `nesw:nesw-resize`, `nwse:nwse-resize`, `zi:zoom-in`, `zo:zoom-out` |
1066
+ | `toa` | `touch-action` | `p:pan-x`, `py:pan-y`, `pm:pan-x pan-y`, `pi:pinch-zoom` |
1067
+ | `zo` | `zoom` | - |
982
1068
 
983
1069
  ---
984
1070
 
985
1071
  ## 13. WebKit Specific
986
1072
 
987
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
988
- |----------|------------|------------------|
989
- | `wlc` | `-webkit-line-clamp` | - |
990
- | `wtfc` | `-webkit-text-fill-color` | - |
991
- | `wts` | `-webkit-text-stroke` | - |
992
- | `wtsc` | `-webkit-text-stroke-color` | - |
993
- | `wtsw` | `-webkit-text-stroke-width` | `m:medium`, `t:thick` |
1073
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
1074
+ | -------- | --------------------------- | --------------------- |
1075
+ | `wlc` | `-webkit-line-clamp` | - |
1076
+ | `wtfc` | `-webkit-text-fill-color` | - |
1077
+ | `wts` | `-webkit-text-stroke` | - |
1078
+ | `wtsc` | `-webkit-text-stroke-color` | - |
1079
+ | `wtsw` | `-webkit-text-stroke-width` | `m:medium`, `t:thick` |
994
1080
 
995
1081
  ---
996
1082
 
997
-
998
1083
  ## 14. Special Values
999
1084
 
1000
1085
  ### Common Values
@@ -1039,14 +1124,14 @@ Ví dụ: `5cBlue` vs `9cRed` → `9cRed` thắng. Nhưng `5cBlue!` (viết `c!B
1039
1124
 
1040
1125
  ---
1041
1126
 
1042
- *Bảng tra cứu này bao gồm tất cả 409 thuộc tính CSS và giá trị viết tắt được hỗ trợ trong xCSS. Để sử dụng, hãy kết hợp viết tắt thuộc tính với giá trị viết tắt theo cú pháp: `[MQ:][layer]<property><value>[@selector]` (lưu ý: `<property><value>` là bắt buộc)*
1127
+ _Bảng tra cứu này bao gồm tất cả 409 thuộc tính CSS và giá trị viết tắt được hỗ trợ trong xCSS. Để sử dụng, hãy kết hợp viết tắt thuộc tính với giá trị viết tắt theo cú pháp: `[MQ:][layer]<property><value>[@selector]` (lưu ý: `<property><value>` là bắt buộc)_
1128
+
1043
1129
  # Hướng dẫn sử dụng xCSS
1044
1130
 
1045
1131
  xCSS là một hệ thống CSS-in-JS cho phép bạn viết CSS ngắn gọn và hiệu quả thông qua các class name đặc biệt. Sau khi học, bạn sẽ:
1046
1132
 
1047
- * Đọc/viết class theo công thức và hiểu nó biến thành CSS như thế nào
1048
- * Kiểm soát **media query**, **@layer**, **!important**, **selector** giả (pseudo) và tổ hợp nhiều thuộc tính trong **một class**
1049
-
1133
+ - Đọc/viết class theo công thức và hiểu nó biến thành CSS như thế nào
1134
+ - Kiểm soát **media query**, **@layer**, **!important**, **selector** giả (pseudo) và tổ hợp nhiều thuộc tính trong **một class**
1050
1135
 
1051
1136
  > **Lưu ý**: Danh sách viết tắt thuộc tính và giá trị sẽ có ở **phần sau**.
1052
1137
 
@@ -1059,6 +1144,7 @@ xCSS là một hệ thống CSS-in-JS cho phép bạn viết CSS ngắn gọn v
1059
1144
  **Lưu ý quan trọng**: `<property><value>` là **bắt buộc** - phải có cả thuộc tính CSS và giá trị CSS.
1060
1145
 
1061
1146
  **Ví dụ cú pháp đúng:**
1147
+
1062
1148
  - `cRed` - Màu đỏ (layer 0)
1063
1149
  - `5cRed` - Màu đỏ ở layer 5
1064
1150
  - `md:cRed` - Màu đỏ trên màn hình trung bình
@@ -1088,7 +1174,7 @@ xCSS là một hệ thống CSS-in-JS cho phép bạn viết CSS ngắn gọn v
1088
1174
  #### 3. Property (Thuộc tính) - **BẮT BUỘC**
1089
1175
 
1090
1176
  - Viết thường, có thể là tên đầy đủ hoặc viết tắt
1091
- - Không có dấu `-` trừ trường hợp có thuộc tính có dấu trừ thường bắt đầu `-w`
1177
+ - Không có dấu `-` trừ trường hợp có thuộc tính có dấu trừ thường bắt đầu `-w`
1092
1178
  - Ví dụ: `w` (width), `h` (height), `c` (color), `bg` (background)
1093
1179
 
1094
1180
  #### 4. Value (Giá trị) - **BẮT BUỘC**
@@ -1163,7 +1249,7 @@ xCSS là một hệ thống CSS-in-JS cho phép bạn viết CSS ngắn gọn v
1163
1249
  <div class="cRed@:hover">Đỏ khi hover</div>
1164
1250
 
1165
1251
  <!-- Focus effect -->
1166
- <input class="bdw2px@:focus" placeholder="Border khi focus">
1252
+ <input class="bdw2px@:focus" placeholder="Border khi focus" />
1167
1253
 
1168
1254
  <!-- Child selector -->
1169
1255
  <div class="cBlue@>a">Màu xanh cho thẻ con a</div>
@@ -1244,12 +1330,12 @@ Ví dụ: `5cBlue` vs `9cRed` → `9cRed` thắng. Nhưng `5cBlue!` (viết `c!B
1244
1330
 
1245
1331
  ## Lỗi phổ biến & cách tránh
1246
1332
 
1247
- * **Dùng chữ hoa ở đầu thuộc tính** → sai. Thuộc tính (**property**) phải là **chữ thường** hoặc `--var`
1248
- * **Thiếu property hoặc value** → sai. Cả hai đều **bắt buộc** phải có
1249
- * **Nhầm dấu `-` và `!`**: `w-!10px` là lỗi. Hãy dùng `w!10px`
1250
- * **Quên `;` trong giá trị có khoảng trắng**: `ff{Courier New}` → nên viết `ff{Courier;New}`
1251
- * **Selector có khoảng trắng** phải dùng `;` và sẽ được đổi lại khi xuất
1252
- * **Không có bảng viết tắt** → trình biên dịch không biết dịch `ta` thành `text-align`
1333
+ - **Dùng chữ hoa ở đầu thuộc tính** → sai. Thuộc tính (**property**) phải là **chữ thường** hoặc `--var`
1334
+ - **Thiếu property hoặc value** → sai. Cả hai đều **bắt buộc** phải có
1335
+ - **Nhầm dấu `-` và `!`**: `w-!10px` là lỗi. Hãy dùng `w!10px`
1336
+ - **Quên `;` trong giá trị có khoảng trắng**: `ff{Courier New}` → nên viết `ff{Courier;New}`
1337
+ - **Selector có khoảng trắng** phải dùng `;` và sẽ được đổi lại khi xuất
1338
+ - **Không có bảng viết tắt** → trình biên dịch không biết dịch `ta` thành `text-align`
1253
1339
 
1254
1340
  ## Lưu ý
1255
1341
 
@@ -1266,10 +1352,12 @@ Ví dụ: `5cBlue` vs `9cRed` → `9cRed` thắng. Nhưng `5cBlue!` (viết `c!B
1266
1352
  ### 🎯 **Nguyên tắc đặt tên class**
1267
1353
 
1268
1354
  #### ✅ **Nên làm:**
1355
+
1269
1356
  - **Ngắn gọn, dễ đọc**: `cRed`, `w100px`, `p16px`
1270
1357
  - **Sử dụng viết tắt chuẩn**: `dF` thay vì `displayFlex` (d: display, F: Flex)
1271
1358
 
1272
1359
  #### ❌ **Tránh:**
1360
+
1273
1361
  - **Tên quá dài**: `wCalc(100%;-;20px;-;30px;-;10px)` → nên dùng CSS variable
1274
1362
  - **Giá trị phức tạp**: `bxsh{0;4px;8px;12px;rgba(0,0,0,0.1);inset}` → nên định nghĩa qua biến
1275
1363
  - **Thuộc tính lặp lại**: `cRed`, `cBlue`, `cGreen` → nên dùng color palette
@@ -1277,10 +1365,11 @@ Ví dụ: `5cBlue` vs `9cRed` → `9cRed` thắng. Nhưng `5cBlue!` (viết `c!B
1277
1365
  ### 🎨 **Quản lý giá trị phức tạp**
1278
1366
 
1279
1367
  #### **Sử dụng CSS Variables cho giá trị dài:**
1368
+
1280
1369
  ```css
1281
1370
  :root {
1282
- --shadow-card: 0 4px 8px rgba(0,0,0,0.1);
1283
- --shadow-hover: 0 8px 16px rgba(0,0,0,0.15);
1371
+ --shadow-card: 0 4px 8px rgba(0, 0, 0, 0.1);
1372
+ --shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.15);
1284
1373
  --border-radius: 8px;
1285
1374
  --spacing-sm: 8px;
1286
1375
  --spacing-md: 16px;
@@ -1291,85 +1380,98 @@ Ví dụ: `5cBlue` vs `9cRed` → `9cRed` thắng. Nhưng `5cBlue!` (viết `c!B
1291
1380
  ```html
1292
1381
  <!-- Thay vì viết dài -->
1293
1382
  <div class="bxsh{0;4px;8px;rgba(0,0,0,0.1)} bdra8px p16px">
1294
-
1295
- <!-- Nên dùng biến -->
1296
- <div class="bxsh--shadow-card bdra--border-radius p--spacing-md">
1383
+ <!-- Nên dùng biến -->
1384
+ <div class="bxsh--shadow-card bdra--border-radius p--spacing-md"></div>
1385
+ </div>
1297
1386
  ```
1298
1387
 
1299
1388
  #### **Tạo component classes cho pattern thường dùng:**
1389
+
1300
1390
  ```html
1301
1391
  <!-- Thay vì lặp lại nhiều lần -->
1302
1392
  <div class="dF&aiC&jcSp&p16px&bgcWhite&bxsh{0;2px;4px;rgba(0,0,0,0.1)}">
1303
-
1304
- <!-- Nên tạo component class -->
1305
- <div class="card">
1393
+ <!-- Nên tạo component class -->
1394
+ <div class="card"></div>
1395
+ </div>
1306
1396
  ```
1307
1397
 
1308
1398
  ### 📱 **Responsive Design Best Practices**
1309
1399
 
1310
1400
  #### **Sử dụng mobile-first approach:**
1401
+
1311
1402
  ```html
1312
1403
  <!-- Base styles cho mobile -->
1313
1404
  <div class="w100% p8px">
1314
-
1315
- <!-- Override cho desktop -->
1316
- <div class="md:w50% md:p16px lg:w33% lg:p24px">
1405
+ <!-- Override cho desktop -->
1406
+ <div class="md:w50% md:p16px lg:w33% lg:p24px"></div>
1407
+ </div>
1317
1408
  ```
1318
1409
 
1319
1410
  #### **Nhóm breakpoints logic:**
1411
+
1320
1412
  ```html
1321
1413
  <!-- Layout chính -->
1322
1414
  <div class="dB md:dF">
1323
-
1324
- <!-- Spacing responsive -->
1325
- <div class="p8px md:p16px lg:p24px">
1326
-
1327
- <!-- Typography responsive -->
1328
- <div class="fns14px md:fns16px lg:fns18px">
1415
+ <!-- Spacing responsive -->
1416
+ <div class="p8px md:p16px lg:p24px">
1417
+ <!-- Typography responsive -->
1418
+ <div class="fns14px md:fns16px lg:fns18px"></div>
1419
+ </div>
1420
+ </div>
1329
1421
  ```
1330
1422
 
1331
1423
  ### 🎭 **Layer Management**
1332
1424
 
1333
1425
  #### **Tổ chức layers theo hierarchy:**
1426
+
1334
1427
  ```html
1335
1428
  <!-- Base styles (0) -->
1336
1429
  <div class="cBlack fns16px">
1337
-
1338
- <!-- Component styles (1-5) -->
1339
- <div class="2btnPrimary">
1340
-
1341
- <!-- Utility styles (6-10) -->
1342
- <div class="8m16px">
1343
-
1344
- <!-- Override styles (11-19) -->
1345
- <div class="15cRed">
1430
+ <!-- Component styles (1-5) -->
1431
+ <div class="2btnPrimary">
1432
+ <!-- Utility styles (6-10) -->
1433
+ <div class="8m16px">
1434
+ <!-- Override styles (11-19) -->
1435
+ <div class="15cRed"></div>
1436
+ </div>
1437
+ </div>
1438
+ </div>
1346
1439
  ```
1347
1440
 
1348
1441
  ### 🔧 **Performance Tips**
1349
1442
 
1350
1443
  #### **Tránh over-engineering:**
1444
+
1351
1445
  ```html
1352
1446
  <!-- Đơn giản và hiệu quả -->
1353
1447
  <div class="dF&aiC&p16px">
1354
-
1355
- <!-- Thay vì phức tạp không cần thiết -->
1356
- <div class="dF&aiC&jcC&p16px&m0&b0&bgcT">
1448
+ <!-- Thay vì phức tạp không cần thiết -->
1449
+ <div class="dF&aiC&jcC&p16px&m0&b0&bgcT"></div>
1450
+ </div>
1357
1451
  ```
1358
1452
 
1359
1453
  #### **Sử dụng shorthand khi có thể:**
1454
+
1360
1455
  ```html
1361
1456
  <!-- Margin shorthand -->
1362
- <div class="m16px"> <!-- margin: 16px -->
1363
- <div class="mt8px&mb8px"> <!-- margin-top: 8px; margin-bottom: 8px -->
1364
-
1365
- <!-- Padding shorthand -->
1366
- <div class="p16px"> <!-- padding: 16px -->
1367
- <div class="px16px&py8px"> <!-- padding: 8px 16px -->
1457
+ <div class="m16px">
1458
+ <!-- margin: 16px -->
1459
+ <div class="mt8px&mb8px">
1460
+ <!-- margin-top: 8px; margin-bottom: 8px -->
1461
+
1462
+ <!-- Padding shorthand -->
1463
+ <div class="p16px">
1464
+ <!-- padding: 16px -->
1465
+ <div class="px16px&py8px"><!-- padding: 8px 16px --></div>
1466
+ </div>
1467
+ </div>
1468
+ </div>
1368
1469
  ```
1369
1470
 
1370
1471
  ### 🎨 **Design System Integration**
1371
1472
 
1372
1473
  #### **Tạo design tokens:**
1474
+
1373
1475
  ```css
1374
1476
  :root {
1375
1477
  /* Colors */
@@ -1397,19 +1499,23 @@ Ví dụ: `5cBlue` vs `9cRed` → `9cRed` thắng. Nhưng `5cBlue!` (viết `c!B
1397
1499
  ```
1398
1500
 
1399
1501
  #### **Sử dụng semantic naming:**
1502
+
1400
1503
  ```html
1401
1504
  <!-- Thay vì màu cụ thể -->
1402
1505
  <div class="cBlue">
1403
-
1404
- <!-- Nên dùng semantic -->
1405
- <div class="cPrimary">
1406
- <div class="cSuccess">
1407
- <div class="cError">
1506
+ <!-- Nên dùng semantic -->
1507
+ <div class="cPrimary">
1508
+ <div class="cSuccess">
1509
+ <div class="cError"></div>
1510
+ </div>
1511
+ </div>
1512
+ </div>
1408
1513
  ```
1409
1514
 
1410
1515
  ### 🚀 **Maintenance Tips**
1411
1516
 
1412
1517
  #### **Documentation cho team:**
1518
+
1413
1519
  ```html
1414
1520
  <!-- Component: Button Primary -->
1415
1521
  <!-- Usage: <button class="btnPrimary">Click me</button> -->
@@ -1418,21 +1524,28 @@ Ví dụ: `5cBlue` vs `9cRed` → `9cRed` thắng. Nhưng `5cBlue!` (viết `c!B
1418
1524
  ```
1419
1525
 
1420
1526
  #### **Consistent naming convention:**
1527
+
1421
1528
  ```html
1422
1529
  <!-- Layout -->
1423
1530
  <div class="container">
1424
- <div class="row">
1425
- <div class="col">
1426
-
1427
- <!-- Components -->
1428
- <div class="card">
1429
- <div class="btn">
1430
- <div class="input">
1431
-
1432
- <!-- Utilities -->
1433
- <div class="textCenter">
1434
- <div class="mAuto">
1435
- <div class="dNone">
1531
+ <div class="row">
1532
+ <div class="col">
1533
+ <!-- Components -->
1534
+ <div class="card">
1535
+ <div class="btn">
1536
+ <div class="input">
1537
+ <!-- Utilities -->
1538
+ <div class="textCenter">
1539
+ <div class="mAuto">
1540
+ <div class="dNone"></div>
1541
+ </div>
1542
+ </div>
1543
+ </div>
1544
+ </div>
1545
+ </div>
1546
+ </div>
1547
+ </div>
1548
+ </div>
1436
1549
  ```
1437
1550
 
1438
1551
  ### 💡 **Pro Tips**
@@ -1449,7 +1562,9 @@ Ví dụ: `5cBlue` vs `9cRed` → `9cRed` thắng. Nhưng `5cBlue!` (viết `c!B
1449
1562
  **HTML**
1450
1563
 
1451
1564
  ```html
1452
- <div class="md:7 dF&aiC&jcSp p16px bgc--panel bxsh{0;2px;8px;rgba(0,0,0,.1)} c--fg@>a;:hover">
1565
+ <div
1566
+ class="md:7 dF&aiC&jcSp p16px bgc--panel bxsh{0;2px;8px;rgba(0,0,0,.1)} c--fg@>a;:hover"
1567
+ >
1453
1568
  <a class="cBlue wClamp(120px;240px;100%)">Link</a>
1454
1569
  <button class="w!120px h40px bdra8px cWhite bgc#0070f3">Nút</button>
1455
1570
  </div>
@@ -1458,19 +1573,42 @@ Ví dụ: `5cBlue` vs `9cRed` → `9cRed` thắng. Nhưng `5cBlue!` (viết `c!B
1458
1573
  **CSS (phát sinh ý tưởng)**
1459
1574
 
1460
1575
  ```css
1461
- @media (min-width: 768px){
1462
- @layer l7{
1463
- .md\:7\.dF\&aiC\&jcSp\:where(*){ display:flex; align-items:center; justify-content:space-between; padding:16px; background-color: var(--panel); box-shadow:0 2px 8px rgba(0,0,0,.1) }
1464
- .md\:7\.c\-\-fg\@\>a\;\:hover > a:hover{ color: var(--fg) }
1465
- .md\:7\.wClamp\(120px\;240px\;100\%\){ width: clamp(120px,240px,100%) }
1576
+ @media (min-width: 768px) {
1577
+ @layer l7 {
1578
+ .md\:7\.dF\&aiC\&jcSp\:where(*) {
1579
+ display: flex;
1580
+ align-items: center;
1581
+ justify-content: space-between;
1582
+ padding: 16px;
1583
+ background-color: var(--panel);
1584
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
1585
+ }
1586
+ .md\:7\.c\-\-fg\@\>a\;\:hover > a:hover {
1587
+ color: var(--fg);
1588
+ }
1589
+ .md\:7\.wClamp\(120px\;240px\;100\%\) {
1590
+ width: clamp(120px, 240px, 100%);
1591
+ }
1466
1592
  }
1467
1593
  }
1468
- .cBlue{ color: blue }
1469
- .w\!120px{ width: 120px !important }
1470
- .h40px{ height: 40px }
1471
- .bdra8px{ border-radius: 8px }
1472
- .cWhite{ color: #fff }
1473
- .bgc\#0070f3{ background-color: #0070f3 }
1594
+ .cBlue {
1595
+ color: blue;
1596
+ }
1597
+ .w\!120px {
1598
+ width: 120px !important;
1599
+ }
1600
+ .h40px {
1601
+ height: 40px;
1602
+ }
1603
+ .bdra8px {
1604
+ border-radius: 8px;
1605
+ }
1606
+ .cWhite {
1607
+ color: #fff;
1608
+ }
1609
+ .bgc\#0070f3 {
1610
+ background-color: #0070f3;
1611
+ }
1474
1612
  ```
1475
1613
 
1476
1614
  ## Bảng tra cứu nhanh
@@ -1478,29 +1616,29 @@ Ví dụ: `5cBlue` vs `9cRed` → `9cRed` thắng. Nhưng `5cBlue!` (viết `c!B
1478
1616
  ### Media Query
1479
1617
 
1480
1618
  | Ký hiệu | Kích thước màn hình |
1481
- | --------- | ------------------------ |
1482
- | `xs:` | ≤ 575px |
1483
- | `sm:` | ≥ 576px |
1484
- | `md:` | ≥ 768px |
1485
- | `lg:` | ≥ 992px |
1486
- | `xl:` | ≥ 1200px |
1487
- | `2xl:` | ≥ 1400px |
1619
+ | ------- | ------------------- |
1620
+ | `xs:` | ≤ 575px |
1621
+ | `sm:` | ≥ 576px |
1622
+ | `md:` | ≥ 768px |
1623
+ | `lg:` | ≥ 992px |
1624
+ | `xl:` | ≥ 1200px |
1625
+ | `2xl:` | ≥ 1400px |
1488
1626
 
1489
1627
  ### Layer
1490
1628
 
1491
- | Ký hiệu | Mô tả |
1492
- | ---------- | ----------------------------------------------------- |
1493
- | `0` | Layer mặc định (ưu tiên thấp) |
1494
- | `1-19` | Layer tùy chỉnh (số càng cao ưu tiên càng cao) |
1629
+ | Ký hiệu | Mô tả |
1630
+ | ------- | ---------------------------------------------- |
1631
+ | `0` | Layer mặc định (ưu tiên thấp) |
1632
+ | `1-19` | Layer tùy chỉnh (số càng cao ưu tiên càng cao) |
1495
1633
 
1496
1634
  ### Giá trị đặc biệt
1497
1635
 
1498
- | Ký hiệu | Ý nghĩa |
1499
- | --------- | --------------------- |
1500
- | `!` | !important |
1501
- | `--` | CSS Variable |
1636
+ | Ký hiệu | Ý nghĩa |
1637
+ | ------- | ----------------- |
1638
+ | `!` | !important |
1639
+ | `--` | CSS Variable |
1502
1640
  | `{}` | Giá trị tùy chỉnh |
1503
- | `;` | Thay thế dấu cách |
1641
+ | `;` | Thay thế dấu cách |
1504
1642
 
1505
1643
  ## Câu hỏi thường gặp (FAQ)
1506
1644
 
@@ -1535,494 +1673,526 @@ Ví dụ: `5cBlue` vs `9cRed` → `9cRed` thắng. Nhưng `5cBlue!` (viết `c!B
1535
1673
  ## 1. Layout & Display
1536
1674
 
1537
1675
  ### Display
1538
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1539
- |----------|------------|------------------|
1540
- | `d` | `display` | `b:block`, `ib:inline-block`, `i:inline`, `f:flex`, `if:inline-flex`, `t:table`, `it:inline-table`, `tcp:table-caption`, `tcell:table-cell`, `tcol:table-column`, `tcolg:table-column-group`, `tfg:table-footer-group`, `thg:table-header-group`, `trg:table-row-group`, `tr:table-row`, `fr:flow-root`, `g:grid`, `ig:inline-grid`, `c:contents`, `li:list-item` |
1676
+
1677
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
1678
+ | -------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1679
+ | `d` | `display` | `b:block`, `ib:inline-block`, `i:inline`, `f:flex`, `if:inline-flex`, `t:table`, `it:inline-table`, `tcp:table-caption`, `tcell:table-cell`, `tcol:table-column`, `tcolg:table-column-group`, `tfg:table-footer-group`, `thg:table-header-group`, `trg:table-row-group`, `tr:table-row`, `fr:flow-root`, `g:grid`, `ig:inline-grid`, `c:contents`, `li:list-item` |
1541
1680
 
1542
1681
  ### Position
1543
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1544
- |----------|------------|------------------|
1545
- | `pos` | `position` | `s:static`, `f:fixed`, `a:absolute`, `r:relative`, `st:sticky` |
1682
+
1683
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
1684
+ | -------- | ---------- | -------------------------------------------------------------- |
1685
+ | `pos` | `position` | `s:static`, `f:fixed`, `a:absolute`, `r:relative`, `st:sticky` |
1546
1686
 
1547
1687
  ### Sizing
1548
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1549
- |----------|------------|------------------|
1550
- | `w` | `width` | `mic:min-content`, `mac:max-content`, `fc:fit-content`, `f:100%` |
1551
- | `h` | `height` | `mic:min-content`, `mac:max-content`, `fc:fit-content` |
1552
- | `mw` | `max-width` | - |
1553
- | `mxw` | `max-width` | - |
1554
- | `mh` | `max-height` | - |
1555
- | `miw` | `min-width` | `f:100%`, `mic:min-content`, `mac:max-content`, `fc:fit-content` |
1556
- | `mih` | `min-height` | `f:100%`, `mic:min-content`, `mac:max-content`, `fc:fit-content` |
1557
- | `blks` | `block-size` | - |
1558
- | `ins` | `inline-size` | - |
1559
- | `mbs` | `max-block-size` | - |
1560
- | `mis` | `max-inline-size` | - |
1561
- | `mibs` | `min-block-size` | - |
1562
- | `misz` | `min-inline-size` | - |
1688
+
1689
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
1690
+ | -------- | ----------------- | ---------------------------------------------------------------- |
1691
+ | `w` | `width` | `mic:min-content`, `mac:max-content`, `fc:fit-content`, `f:100%` |
1692
+ | `h` | `height` | `mic:min-content`, `mac:max-content`, `fc:fit-content` |
1693
+ | `mw` | `max-width` | - |
1694
+ | `mxw` | `max-width` | - |
1695
+ | `mh` | `max-height` | - |
1696
+ | `miw` | `min-width` | `f:100%`, `mic:min-content`, `mac:max-content`, `fc:fit-content` |
1697
+ | `mih` | `min-height` | `f:100%`, `mic:min-content`, `mac:max-content`, `fc:fit-content` |
1698
+ | `blks` | `block-size` | - |
1699
+ | `ins` | `inline-size` | - |
1700
+ | `mbs` | `max-block-size` | - |
1701
+ | `mis` | `max-inline-size` | - |
1702
+ | `mibs` | `min-block-size` | - |
1703
+ | `misz` | `min-inline-size` | - |
1563
1704
 
1564
1705
  ### Positioning
1565
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1566
- |----------|------------|------------------|
1567
- | `t` | `top` | - |
1568
- | `r` | `right` | - |
1569
- | `b` | `bottom` | - |
1570
- | `l` | `left` | - |
1571
- | `i` | `inset` | - |
1572
- | `iblk` | `inset-block` | - |
1573
- | `ibe` | `inset-block-end` | - |
1574
- | `ibsta` | `inset-block-start` | - |
1575
- | `ii` | `inset-inline` | - |
1576
- | `iie` | `inset-inline-end` | - |
1577
- | `iis` | `inset-inline-start` | - |
1706
+
1707
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
1708
+ | -------- | -------------------- | ---------------- |
1709
+ | `t` | `top` | - |
1710
+ | `r` | `right` | - |
1711
+ | `b` | `bottom` | - |
1712
+ | `l` | `left` | - |
1713
+ | `i` | `inset` | - |
1714
+ | `iblk` | `inset-block` | - |
1715
+ | `ibe` | `inset-block-end` | - |
1716
+ | `ibsta` | `inset-block-start` | - |
1717
+ | `ii` | `inset-inline` | - |
1718
+ | `iie` | `inset-inline-end` | - |
1719
+ | `iis` | `inset-inline-start` | - |
1578
1720
 
1579
1721
  ---
1580
1722
 
1581
1723
  ## 2. Spacing
1582
1724
 
1583
1725
  ### Margin
1584
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1585
- |----------|------------|------------------|
1586
- | `m` | `margin` | - |
1587
- | `mt` | `margin-top` | - |
1588
- | `mr` | `margin-right` | - |
1589
- | `mb` | `margin-bottom` | - |
1590
- | `ml` | `margin-left` | - |
1591
- | `mblk` | `margin-block` | - |
1592
- | `mbe` | `margin-block-end` | - |
1593
- | `mbsta` | `margin-block-start` | - |
1594
- | `min` | `margin-inline` | - |
1595
- | `mie` | `margin-inline-end` | - |
1596
- | `mista` | `margin-inline-start` | - |
1726
+
1727
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
1728
+ | -------- | --------------------- | ---------------- |
1729
+ | `m` | `margin` | - |
1730
+ | `mt` | `margin-top` | - |
1731
+ | `mr` | `margin-right` | - |
1732
+ | `mb` | `margin-bottom` | - |
1733
+ | `ml` | `margin-left` | - |
1734
+ | `mblk` | `margin-block` | - |
1735
+ | `mbe` | `margin-block-end` | - |
1736
+ | `mbsta` | `margin-block-start` | - |
1737
+ | `min` | `margin-inline` | - |
1738
+ | `mie` | `margin-inline-end` | - |
1739
+ | `mista` | `margin-inline-start` | - |
1597
1740
 
1598
1741
  ### Padding
1599
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1600
- |----------|------------|------------------|
1601
- | `p` | `padding` | - |
1602
- | `pt` | `padding-top` | - |
1603
- | `pr` | `padding-right` | - |
1604
- | `pb` | `padding-bottom` | - |
1605
- | `pl` | `padding-left` | - |
1606
- | `pblk` | `padding-block` | - |
1607
- | `pbe` | `padding-block-end` | - |
1608
- | `pbs` | `padding-block-start` | - |
1609
- | `pi` | `padding-inline` | `s:start`, `c:center`, `e:end`, `b:baseline`, `st:stretch` |
1610
- | `pie` | `padding-inline-end` | - |
1611
- | `pis` | `padding-inline-start` | - |
1742
+
1743
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
1744
+ | -------- | ---------------------- | ---------------------------------------------------------- |
1745
+ | `p` | `padding` | - |
1746
+ | `pt` | `padding-top` | - |
1747
+ | `pr` | `padding-right` | - |
1748
+ | `pb` | `padding-bottom` | - |
1749
+ | `pl` | `padding-left` | - |
1750
+ | `pblk` | `padding-block` | - |
1751
+ | `pbe` | `padding-block-end` | - |
1752
+ | `pbs` | `padding-block-start` | - |
1753
+ | `pi` | `padding-inline` | `s:start`, `c:center`, `e:end`, `b:baseline`, `st:stretch` |
1754
+ | `pie` | `padding-inline-end` | - |
1755
+ | `pis` | `padding-inline-start` | - |
1612
1756
 
1613
1757
  ---
1614
1758
 
1615
1759
  ## 3. Colors & Background
1616
1760
 
1617
1761
  ### Color
1618
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1619
- |----------|------------|------------------|
1620
- | `c` | `color` | `i:inherit`, `t:transparent` |
1762
+
1763
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
1764
+ | -------- | ---------- | ---------------------------- |
1765
+ | `c` | `color` | `i:inherit`, `t:transparent` |
1621
1766
 
1622
1767
  ### Background
1623
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1624
- |----------|------------|------------------|
1625
- | `bg` | `background` | - |
1626
- | `bgc` | `background-color` | `t:transparent`, `c:currentcolor` |
1627
- | `bgi` | `background-image` | - |
1628
- | `bgp` | `background-position` | `t:top`, `b:bottom`, `l:left`, `r:right`, `c:center`, `lt:left top`, `ct:center top`, `rt:right top`, `lc:left center`, `cc:center center`, `rc:right center`, `lb:left bottom`, `cb:center bottom`, `rb:right bottom` |
1629
- | `bgpx` | `background-position-x` | `l:left`, `r:right`, `c:center` |
1630
- | `bgpy` | `background-position-y` | `t:top`, `b:bottom`, `c:center` |
1631
- | `bgr` | `background-repeat` | `r:repeat`, `x:repeat-x`, `y:repeat-y`, `s:space`, `rn:round`, `n:no-repeat`, `rs: repeat space`, `rr:repeat repeat`, `nr:no-repeat round` |
1632
- | `bgs` | `background-size` | `c:contain` |
1633
- | `bga` | `background-attachment` | `s:scroll`, `f:fixed`, `l:local` |
1634
- | `bgbm` | `background-blend-mode` | `n:normal`, `m:multiply`, `s:screen`, `o:overlay`, `d:darken`, `l:lighten`, `cd:color-dodge`, `i:color-burn`, `hl:hard-light`, `sl:soft-light`, `di:difference`, `e:exclusion`, `h:hue`, `sa:saturation`, `c:color`, `lu:luminosity` |
1635
- | `bgcl` | `background-clip` | `bb:border-box`, `pb:padding-box`, `cb:content-box`, `t:text` |
1636
- | `bgo` | `background-origin` | `bb:border-box`, `pb:padding-box`, `cb:content-box` |
1768
+
1769
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
1770
+ | -------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
1771
+ | `bg` | `background` | - |
1772
+ | `bgc` | `background-color` | `t:transparent`, `c:currentcolor` |
1773
+ | `bgi` | `background-image` | - |
1774
+ | `bgp` | `background-position` | `t:top`, `b:bottom`, `l:left`, `r:right`, `c:center`, `lt:left top`, `ct:center top`, `rt:right top`, `lc:left center`, `cc:center center`, `rc:right center`, `lb:left bottom`, `cb:center bottom`, `rb:right bottom` |
1775
+ | `bgpx` | `background-position-x` | `l:left`, `r:right`, `c:center` |
1776
+ | `bgpy` | `background-position-y` | `t:top`, `b:bottom`, `c:center` |
1777
+ | `bgr` | `background-repeat` | `r:repeat`, `x:repeat-x`, `y:repeat-y`, `s:space`, `rn:round`, `n:no-repeat`, `rs: repeat space`, `rr:repeat repeat`, `nr:no-repeat round` |
1778
+ | `bgs` | `background-size` | `c:contain` |
1779
+ | `bga` | `background-attachment` | `s:scroll`, `f:fixed`, `l:local` |
1780
+ | `bgbm` | `background-blend-mode` | `n:normal`, `m:multiply`, `s:screen`, `o:overlay`, `d:darken`, `l:lighten`, `cd:color-dodge`, `i:color-burn`, `hl:hard-light`, `sl:soft-light`, `di:difference`, `e:exclusion`, `h:hue`, `sa:saturation`, `c:color`, `lu:luminosity` |
1781
+ | `bgcl` | `background-clip` | `bb:border-box`, `pb:padding-box`, `cb:content-box`, `t:text` |
1782
+ | `bgo` | `background-origin` | `bb:border-box`, `pb:padding-box`, `cb:content-box` |
1637
1783
 
1638
1784
  ---
1639
1785
 
1640
1786
  ## 4. Border
1641
1787
 
1642
1788
  ### Border General
1643
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1644
- |----------|------------|------------------|
1645
- | `bd` | `border` | `d:dotted`, `ds:dashed`, `db:double`, `g:groove`, `r:ridge`, `i:inset`, `o:outset` |
1646
- | `bds` | `border-style` | `dt:dotted`, `ds:dashed`, `s:solid`, `db:double`, `g:groove`, `r:ridge`, `in:inset`, `out:outset` |
1647
- | `bdc` | `border-color` | - |
1648
- | `bdw` | `border-width` | `t:thin`, `m:medium`, `th:thick` |
1789
+
1790
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
1791
+ | -------- | -------------- | ------------------------------------------------------------------------------------------------- |
1792
+ | `bd` | `border` | `d:dotted`, `ds:dashed`, `db:double`, `g:groove`, `r:ridge`, `i:inset`, `o:outset` |
1793
+ | `bds` | `border-style` | `dt:dotted`, `ds:dashed`, `s:solid`, `db:double`, `g:groove`, `r:ridge`, `in:inset`, `out:outset` |
1794
+ | `bdc` | `border-color` | - |
1795
+ | `bdw` | `border-width` | `t:thin`, `m:medium`, `th:thick` |
1649
1796
 
1650
1797
  ### Border Sides
1651
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1652
- |----------|------------|------------------|
1653
- | `bdt` | `border-top` | - |
1654
- | `bdr` | `border-right` | - |
1655
- | `bdb` | `border-bottom` | - |
1656
- | `bdl` | `border-left` | - |
1798
+
1799
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
1800
+ | -------- | --------------- | ---------------- |
1801
+ | `bdt` | `border-top` | - |
1802
+ | `bdr` | `border-right` | - |
1803
+ | `bdb` | `border-bottom` | - |
1804
+ | `bdl` | `border-left` | - |
1657
1805
 
1658
1806
  ### Border Radius
1659
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1660
- |----------|------------|------------------|
1661
- | `bda` | `border-radius` | - |
1662
- | `bdra` | `border-radius` | - |
1663
- | `bdtlr` | `border-top-left-radius` | - |
1664
- | `bdtrr` | `border-top-right-radius` | - |
1665
- | `bdblr` | `border-bottom-left-radius` | - |
1666
- | `bdbrr` | `border-bottom-right-radius` | - |
1667
- | `bdeer` | `border-end-end-radius` | - |
1668
- | `bdesr` | `border-end-start-radius` | - |
1669
- | `bdser` | `border-start-end-radius` | - |
1670
- | `bdssr` | `border-start-start-radius` | - |
1807
+
1808
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
1809
+ | -------- | ---------------------------- | ---------------- |
1810
+ | `bda` | `border-radius` | - |
1811
+ | `bdra` | `border-radius` | - |
1812
+ | `bdtlr` | `border-top-left-radius` | - |
1813
+ | `bdtrr` | `border-top-right-radius` | - |
1814
+ | `bdblr` | `border-bottom-left-radius` | - |
1815
+ | `bdbrr` | `border-bottom-right-radius` | - |
1816
+ | `bdeer` | `border-end-end-radius` | - |
1817
+ | `bdesr` | `border-end-start-radius` | - |
1818
+ | `bdser` | `border-start-end-radius` | - |
1819
+ | `bdssr` | `border-start-start-radius` | - |
1671
1820
 
1672
1821
  ### Border Block/Inline
1673
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1674
- |----------|------------|------------------|
1675
- | `bdblk` | `border-block` | - |
1676
- | `bdblc` | `border-block-color` | - |
1677
- | `bdble` | `border-block-end` | - |
1678
- | `bdbls` | `border-block-start` | - |
1679
- | `bdblst` | `border-block-style` | `d:dotted`, `ds:dashed`, `db:double`, `g:groove`, `r:ridge`, `i:inset`, `o:outset` |
1680
- | `bdblwi` | `border-block-width` | - |
1681
- | `bdi` | `border-inline` | - |
1682
- | `bdic` | `border-inline-color` | - |
1683
- | `bdie` | `border-inline-end` | - |
1684
- | `bdista` | `border-inline-start` | - |
1685
- | `bdistl` | `border-inline-style` | - |
1686
- | `bdinw` | `border-inline-width` | - |
1822
+
1823
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
1824
+ | -------- | --------------------- | ---------------------------------------------------------------------------------- |
1825
+ | `bdblk` | `border-block` | - |
1826
+ | `bdblc` | `border-block-color` | - |
1827
+ | `bdble` | `border-block-end` | - |
1828
+ | `bdbls` | `border-block-start` | - |
1829
+ | `bdblst` | `border-block-style` | `d:dotted`, `ds:dashed`, `db:double`, `g:groove`, `r:ridge`, `i:inset`, `o:outset` |
1830
+ | `bdblwi` | `border-block-width` | - |
1831
+ | `bdi` | `border-inline` | - |
1832
+ | `bdic` | `border-inline-color` | - |
1833
+ | `bdie` | `border-inline-end` | - |
1834
+ | `bdista` | `border-inline-start` | - |
1835
+ | `bdistl` | `border-inline-style` | - |
1836
+ | `bdinw` | `border-inline-width` | - |
1687
1837
 
1688
1838
  ---
1689
1839
 
1690
1840
  ## 5. Typography
1691
1841
 
1692
1842
  ### Font
1693
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1694
- |----------|------------|------------------|
1695
- | `fn` | `font` | - |
1696
- | `ff` | `font-family` | `a:ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`, `s:ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif`, `m:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace` |
1697
- | `fnf` | `font-family` | - |
1698
- | `fns` | `font-size` | - |
1699
- | `fw` | `font-weight` | - |
1700
- | `fnw` | `font-weight` | - |
1701
- | `fnsty` | `font-style` | - |
1702
- | `fnstr` | `font-stretch` | - |
1703
- | `fnfs` | `font-feature-settings` | - |
1704
- | `fnk` | `font-kerning` | - |
1705
- | `fnlo` | `font-language-override` | - |
1706
- | `fnos` | `font-optical-sizing` | - |
1707
- | `fnp` | `font-palette` | - |
1708
- | `fnsa` | `font-size-adjust` | - |
1709
- | `fnsyn` | `font-synthesis` | - |
1710
- | `fnsp` | `font-synthesis-position` | - |
1711
- | `fnssc` | `font-synthesis-small-caps` | - |
1712
- | `fnss` | `font-synthesis-style` | - |
1713
- | `fnsw` | `font-synthesis-weight` | - |
1714
- | `fnv` | `font-variant` | - |
1715
- | `fnva` | `font-variant-alternates` | - |
1716
- | `fnvc` | `font-variant-caps` | - |
1717
- | `fnvea` | `font-variant-east-asian` | - |
1718
- | `fnve` | `font-variant-emoji` | - |
1719
- | `fnvl` | `font-variant-ligatures` | - |
1720
- | `fnvn` | `font-variant-numeric` | - |
1721
- | `fnvp` | `font-variant-position` | - |
1722
- | `fnvs` | `font-variation-settings` | - |
1843
+
1844
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
1845
+ | -------- | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1846
+ | `fn` | `font` | - |
1847
+ | `ff` | `font-family` | `a:ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`, `s:ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif`, `m:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace` |
1848
+ | `fnf` | `font-family` | - |
1849
+ | `fns` | `font-size` | - |
1850
+ | `fw` | `font-weight` | - |
1851
+ | `fnw` | `font-weight` | - |
1852
+ | `fnsty` | `font-style` | - |
1853
+ | `fnstr` | `font-stretch` | - |
1854
+ | `fnfs` | `font-feature-settings` | - |
1855
+ | `fnk` | `font-kerning` | - |
1856
+ | `fnlo` | `font-language-override` | - |
1857
+ | `fnos` | `font-optical-sizing` | - |
1858
+ | `fnp` | `font-palette` | - |
1859
+ | `fnsa` | `font-size-adjust` | - |
1860
+ | `fnsyn` | `font-synthesis` | - |
1861
+ | `fnsp` | `font-synthesis-position` | - |
1862
+ | `fnssc` | `font-synthesis-small-caps` | - |
1863
+ | `fnss` | `font-synthesis-style` | - |
1864
+ | `fnsw` | `font-synthesis-weight` | - |
1865
+ | `fnv` | `font-variant` | - |
1866
+ | `fnva` | `font-variant-alternates` | - |
1867
+ | `fnvc` | `font-variant-caps` | - |
1868
+ | `fnvea` | `font-variant-east-asian` | - |
1869
+ | `fnve` | `font-variant-emoji` | - |
1870
+ | `fnvl` | `font-variant-ligatures` | - |
1871
+ | `fnvn` | `font-variant-numeric` | - |
1872
+ | `fnvp` | `font-variant-position` | - |
1873
+ | `fnvs` | `font-variation-settings` | - |
1723
1874
 
1724
1875
  ### Text
1725
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1726
- |----------|------------|------------------|
1727
- | `ta` | `text-align` | `s:start`, `e:end`, `l:left`, `r:right`, `c:center`, `j:justify`, `mp:match-parent`, `mc:-moz-center`, `wc:-webkit-center` |
1728
- | `tal` | `text-align-last` | `s:start`, `e:end`, `l:left`, `r:right`, `c:center`, `j:justify` |
1729
- | `td` | `text-decoration` | `u:underline` |
1730
- | `tdc` | `text-decoration-color` | - |
1731
- | `tdl` | `text-decoration-line` | `u:underline`, `o:overline`, `lt:line-through`, `b:blink` |
1732
- | `tds` | `text-decoration-style` | `db:double`, `dt:dotted`, `ds:dashed`, `w:wavy` |
1733
- | `tdt` | `text-decoration-thickness` | `ff:from-font` |
1734
- | `tdsi` | `text-decoration-skip-ink` | - |
1735
- | `teph` | `text-emphasis` | - |
1736
- | `tec` | `text-emphasis-color` | - |
1737
- | `tep` | `text-emphasis-position` | `or:over right`, `ol:over left`, `ur:under right`, `ul:under left`, `lo:left over`, `ru:right under`, `lu:left under` |
1738
- | `tes` | `text-emphasis-style` | - |
1739
- | `ti` | `text-indent` | - |
1740
- | `tj` | `text-justify` | `iw:inter-word`, `ic:inter-character`, `d:distribute` |
1741
- | `tor` | `text-orientation` | `m:mixed`, `u:upright`, `sr:sideways-right`, `sl:sideways-left`, `s:sideways`, `ugo:use-glyph-orientation` |
1742
- | `tol` | `text-overflow` | `c:clip`, `e:ellipsis` |
1743
- | `trd` | `text-rendering` | `op:optimizeSpeed`, `ol:optimizeLegibility`, `g:geometricPrecision` |
1744
- | `tsh` | `text-shadow` | - |
1745
- | `ttr` | `text-transform` | `c:capitalize`, `u:uppercase`, `l:lowercase`, `fw:full-width`, `fsk:full-size-kana` |
1746
- | `tuo` | `text-underline-offset` | - |
1747
- | `tup` | `text-underline-position` | `u:under`, `l:left`, `r:right`, `ul:under left`, `ru:right under` |
1748
- | `tw` | `text-wrap` | `w:wrap`, `n:nowrap`, `b:balance`, `p:pretty` |
1876
+
1877
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
1878
+ | -------- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
1879
+ | `ta` | `text-align` | `s:start`, `e:end`, `l:left`, `r:right`, `c:center`, `j:justify`, `mp:match-parent`, `mc:-moz-center`, `wc:-webkit-center` |
1880
+ | `tal` | `text-align-last` | `s:start`, `e:end`, `l:left`, `r:right`, `c:center`, `j:justify` |
1881
+ | `td` | `text-decoration` | `u:underline` |
1882
+ | `tdc` | `text-decoration-color` | - |
1883
+ | `tdl` | `text-decoration-line` | `u:underline`, `o:overline`, `lt:line-through`, `b:blink` |
1884
+ | `tds` | `text-decoration-style` | `db:double`, `dt:dotted`, `ds:dashed`, `w:wavy` |
1885
+ | `tdt` | `text-decoration-thickness` | `ff:from-font` |
1886
+ | `tdsi` | `text-decoration-skip-ink` | - |
1887
+ | `teph` | `text-emphasis` | - |
1888
+ | `tec` | `text-emphasis-color` | - |
1889
+ | `tep` | `text-emphasis-position` | `or:over right`, `ol:over left`, `ur:under right`, `ul:under left`, `lo:left over`, `ru:right under`, `lu:left under` |
1890
+ | `tes` | `text-emphasis-style` | - |
1891
+ | `ti` | `text-indent` | - |
1892
+ | `tj` | `text-justify` | `iw:inter-word`, `ic:inter-character`, `d:distribute` |
1893
+ | `tor` | `text-orientation` | `m:mixed`, `u:upright`, `sr:sideways-right`, `sl:sideways-left`, `s:sideways`, `ugo:use-glyph-orientation` |
1894
+ | `tol` | `text-overflow` | `c:clip`, `e:ellipsis` |
1895
+ | `trd` | `text-rendering` | `op:optimizeSpeed`, `ol:optimizeLegibility`, `g:geometricPrecision` |
1896
+ | `tsh` | `text-shadow` | - |
1897
+ | `ttr` | `text-transform` | `c:capitalize`, `u:uppercase`, `l:lowercase`, `fw:full-width`, `fsk:full-size-kana` |
1898
+ | `tuo` | `text-underline-offset` | - |
1899
+ | `tup` | `text-underline-position` | `u:under`, `l:left`, `r:right`, `ul:under left`, `ru:right under` |
1900
+ | `tw` | `text-wrap` | `w:wrap`, `n:nowrap`, `b:balance`, `p:pretty` |
1749
1901
 
1750
1902
  ### Line & Spacing
1751
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1752
- |----------|------------|------------------|
1753
- | `lh` | `line-height` | - |
1754
- | `lts` | `letter-spacing` | `n:normal` |
1755
- | `wrs` | `word-spacing` | - |
1756
- | `lbrk` | `line-break` | - |
1757
- | `wrb` | `word-break` | - |
1758
- | `wrtm` | `writing-mode` | - |
1903
+
1904
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
1905
+ | -------- | ---------------- | ---------------- |
1906
+ | `lh` | `line-height` | - |
1907
+ | `lts` | `letter-spacing` | `n:normal` |
1908
+ | `wrs` | `word-spacing` | - |
1909
+ | `lbrk` | `line-break` | - |
1910
+ | `wrb` | `word-break` | - |
1911
+ | `wrtm` | `writing-mode` | - |
1759
1912
 
1760
1913
  ---
1761
1914
 
1762
1915
  ## 6. Flexbox
1763
1916
 
1764
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1765
- |----------|------------|------------------|
1766
- | `fx` | `flex` | `i:0 1 auto`, `a:1 1 auto` |
1767
- | `fxb` | `flex-basis` | - |
1768
- | `fxd` | `flex-direction` | `r:row`, `rr:row-reverse`, `c:column`, `cr:column-reverse` |
1769
- | `fxf` | `flex-flow` | - |
1770
- | `fxg` | `flex-grow` | - |
1771
- | `fxs` | `flex-shrink` | - |
1772
- | `fxw` | `flex-wrap` | `w:wrap`, `wr:wrap-reverse`, `n:nowrap` |
1773
- | `jc` | `justify-content` | `c:center`, `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `l:left`, `r:right`, `n:normal`, `sp:space-between`, `sa:space-around`, `se:space-evenly`, `st:stretch`, `sc:safe center`, `uc:unsafe center` |
1774
- | `ai` | `align-items` | `n:normal`, `c:center`, `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `ss:self-start`, `se:self-end`, `b:baseline`, `fb:first baseline`, `lb:last baseline`, `sc:safe center`, `uc:unsafe center` |
1775
- | `as` | `align-self` | `n:normal`, `c:center`, `s:start`, `e:end`, `ss:self-start`, `se:self-end`, `fs:flex-start`, `fe:flex-end`, `b:baseline`, `fb:first baseline`, `lb:last baseline`, `st:stretch`, `sc:safe center`, `uc:unsafe center` |
1776
- | `ac` | `align-content` | `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `n:normal`, `b:baseline`, `fb:first baseline`, `lb:last baseline`, `sp:space-between`, `sa:space-around`, `se:space-evenly`, `st:stretch`, `sc:safe center`, `uc:unsafe center` |
1917
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
1918
+ | -------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1919
+ | `fx` | `flex` | `i:0 1 auto`, `a:1 1 auto` |
1920
+ | `fxb` | `flex-basis` | - |
1921
+ | `fxd` | `flex-direction` | `r:row`, `rr:row-reverse`, `c:column`, `cr:column-reverse` |
1922
+ | `fxf` | `flex-flow` | - |
1923
+ | `fxg` | `flex-grow` | - |
1924
+ | `fxs` | `flex-shrink` | - |
1925
+ | `fxw` | `flex-wrap` | `w:wrap`, `wr:wrap-reverse`, `n:nowrap` |
1926
+ | `jc` | `justify-content` | `c:center`, `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `l:left`, `r:right`, `n:normal`, `sp:space-between`, `sa:space-around`, `se:space-evenly`, `st:stretch`, `sc:safe center`, `uc:unsafe center` |
1927
+ | `ai` | `align-items` | `n:normal`, `c:center`, `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `ss:self-start`, `se:self-end`, `b:baseline`, `fb:first baseline`, `lb:last baseline`, `sc:safe center`, `uc:unsafe center` |
1928
+ | `as` | `align-self` | `n:normal`, `c:center`, `s:start`, `e:end`, `ss:self-start`, `se:self-end`, `fs:flex-start`, `fe:flex-end`, `b:baseline`, `fb:first baseline`, `lb:last baseline`, `st:stretch`, `sc:safe center`, `uc:unsafe center` |
1929
+ | `ac` | `align-content` | `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `n:normal`, `b:baseline`, `fb:first baseline`, `lb:last baseline`, `sp:space-between`, `sa:space-around`, `se:space-evenly`, `st:stretch`, `sc:safe center`, `uc:unsafe center` |
1777
1930
 
1778
1931
  ---
1779
1932
 
1780
1933
  ## 7. Grid
1781
1934
 
1782
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1783
- |----------|------------|------------------|
1784
- | `g` | `grid` | - |
1785
- | `ga` | `grid-area` | - |
1786
- | `gc` | `grid-column` | `f:1 / -1` |
1787
- | `gce` | `grid-column-end` | - |
1788
- | `gcs` | `grid-column-start` | - |
1789
- | `gr` | `grid-row` | `f:1 / -1` |
1790
- | `gre` | `grid-row-end` | - |
1791
- | `grs` | `grid-row-start` | - |
1792
- | `gt` | `grid-template` | - |
1793
- | `gta` | `grid-template-areas` | - |
1794
- | `gtc` | `grid-template-columns` | `s:subgrid` |
1795
- | `gtr` | `grid-template-rows` | `s:subgrid` |
1796
- | `gac` | `grid-auto-columns` | `mic:min-content`, `mac:max-content`, `mm:minmax(0, 1fr)` |
1797
- | `gar` | `grid-auto-rows` | `mic:min-content`, `mac:max-content`, `mm:minmax(0, 1fr)` |
1798
- | `gaf` | `grid-auto-flow` | `r:row`, `c:column`, `d:dense`, `rd:row dense`, `cd:column dense` |
1799
- | `gap` | `gap` | - |
1800
- | `rgap` | `row-gap` | - |
1801
- | `colg` | `column-gap` | - |
1802
- | `ji` | `justify-items` | `n:normal`, `st:stretch`, `c:center`, `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `ss:self-start`, `se:self-end`, `l:left`, `r:right`, `b:baseline`, `fb:first baseline`, `lb:last baseline`, `lr:legacy right`, `ll:legacy left`, `lc:legacy center`, `sc:safe center`, `uc:unsafe center` |
1803
- | `js` | `justify-self` | `n:normal`, `st:stretch`, `c:center`, `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `ss:self-start`, `se:self-end`, `l:left`, `r:right`, `b:baseline`, `sc:safe center`, `uc:unsafe center` |
1804
- | `pli` | `place-items` | - |
1805
- | `pls` | `place-self` | - |
1806
- | `plc` | `place-content` | - |
1935
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
1936
+ | -------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1937
+ | `g` | `grid` | - |
1938
+ | `ga` | `grid-area` | - |
1939
+ | `gc` | `grid-column` | `f:1 / -1` |
1940
+ | `gce` | `grid-column-end` | - |
1941
+ | `gcs` | `grid-column-start` | - |
1942
+ | `gr` | `grid-row` | `f:1 / -1` |
1943
+ | `gre` | `grid-row-end` | - |
1944
+ | `grs` | `grid-row-start` | - |
1945
+ | `gt` | `grid-template` | - |
1946
+ | `gta` | `grid-template-areas` | - |
1947
+ | `gtc` | `grid-template-columns` | `s:subgrid` |
1948
+ | `gtr` | `grid-template-rows` | `s:subgrid` |
1949
+ | `gac` | `grid-auto-columns` | `mic:min-content`, `mac:max-content`, `mm:minmax(0, 1fr)` |
1950
+ | `gar` | `grid-auto-rows` | `mic:min-content`, `mac:max-content`, `mm:minmax(0, 1fr)` |
1951
+ | `gaf` | `grid-auto-flow` | `r:row`, `c:column`, `d:dense`, `rd:row dense`, `cd:column dense` |
1952
+ | `gap` | `gap` | - |
1953
+ | `rgap` | `row-gap` | - |
1954
+ | `colg` | `column-gap` | - |
1955
+ | `ji` | `justify-items` | `n:normal`, `st:stretch`, `c:center`, `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `ss:self-start`, `se:self-end`, `l:left`, `r:right`, `b:baseline`, `fb:first baseline`, `lb:last baseline`, `lr:legacy right`, `ll:legacy left`, `lc:legacy center`, `sc:safe center`, `uc:unsafe center` |
1956
+ | `js` | `justify-self` | `n:normal`, `st:stretch`, `c:center`, `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `ss:self-start`, `se:self-end`, `l:left`, `r:right`, `b:baseline`, `sc:safe center`, `uc:unsafe center` |
1957
+ | `pli` | `place-items` | - |
1958
+ | `pls` | `place-self` | - |
1959
+ | `plc` | `place-content` | - |
1807
1960
 
1808
1961
  ---
1809
1962
 
1810
1963
  ## 8. Effects & Filters
1811
1964
 
1812
1965
  ### Opacity & Visibility
1813
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1814
- |----------|------------|------------------|
1815
- | `opc` | `opacity` | - |
1816
- | `v` | `visibility` | `c:collapse` |
1966
+
1967
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
1968
+ | -------- | ------------ | ---------------- |
1969
+ | `opc` | `opacity` | - |
1970
+ | `v` | `visibility` | `c:collapse` |
1817
1971
 
1818
1972
  ### Filter & Backdrop
1819
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1820
- |----------|------------|------------------|
1821
- | `flt` | `filter` | - |
1822
- | `bkdf` | `backdrop-filter` | - |
1973
+
1974
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
1975
+ | -------- | ----------------- | ---------------- |
1976
+ | `flt` | `filter` | - |
1977
+ | `bkdf` | `backdrop-filter` | - |
1823
1978
 
1824
1979
  ### Blend Modes
1825
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1826
- |----------|------------|------------------|
1827
- | `mbd` | `mix-blend-mode` | `n:normal`, `m:multiply`, `s:screen`, `o:overlay`, `d:darken`, `l:lighten`, `cd:color-dodge`, `i:color-burn`, `hl:hard-light`, `sl:soft-light`, `di:difference`, `e:exclusion`, `h:hue`, `sa:saturation`, `c:color`, `lu:luminosity` |
1980
+
1981
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
1982
+ | -------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
1983
+ | `mbd` | `mix-blend-mode` | `n:normal`, `m:multiply`, `s:screen`, `o:overlay`, `d:darken`, `l:lighten`, `cd:color-dodge`, `i:color-burn`, `hl:hard-light`, `sl:soft-light`, `di:difference`, `e:exclusion`, `h:hue`, `sa:saturation`, `c:color`, `lu:luminosity` |
1828
1984
 
1829
1985
  ### Box Shadow
1830
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1831
- |----------|------------|------------------|
1832
- | `bxsh` | `box-shadow` | - |
1833
- | `bxshd` | `box-shadow` | - |
1986
+
1987
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
1988
+ | -------- | ------------ | ---------------- |
1989
+ | `bxsh` | `box-shadow` | - |
1990
+ | `bxshd` | `box-shadow` | - |
1834
1991
 
1835
1992
  ---
1836
1993
 
1837
1994
  ## 9. Transforms & Animations
1838
1995
 
1839
1996
  ### Transform
1840
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1841
- |----------|------------|------------------|
1842
- | `tra` | `transform` | - |
1843
- | `trab` | `transform-box` | - |
1844
- | `trao` | `transform-origin` | - |
1845
- | `tras` | `transform-style` | - |
1846
- | `rot` | `rotate` | - |
1847
- | `s` | `scale` | - |
1848
- | `trl` | `translate` | - |
1997
+
1998
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
1999
+ | -------- | ------------------ | ---------------- |
2000
+ | `tra` | `transform` | - |
2001
+ | `trab` | `transform-box` | - |
2002
+ | `trao` | `transform-origin` | - |
2003
+ | `tras` | `transform-style` | - |
2004
+ | `rot` | `rotate` | - |
2005
+ | `s` | `scale` | - |
2006
+ | `trl` | `translate` | - |
1849
2007
 
1850
2008
  ### Transition
1851
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1852
- |----------|------------|------------------|
1853
- | `tran` | `transition` | - |
1854
- | `tranb` | `transition-behavior` | - |
1855
- | `trand` | `transition-delay` | - |
1856
- | `trandur` | `transition-duration` | - |
1857
- | `tranp` | `transition-property` | - |
1858
- | `trantf` | `transition-timing-function` | - |
2009
+
2010
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
2011
+ | --------- | ---------------------------- | ---------------- |
2012
+ | `tran` | `transition` | - |
2013
+ | `tranb` | `transition-behavior` | - |
2014
+ | `trand` | `transition-delay` | - |
2015
+ | `trandur` | `transition-duration` | - |
2016
+ | `tranp` | `transition-property` | - |
2017
+ | `trantf` | `transition-timing-function` | - |
1859
2018
 
1860
2019
  ### Animation
1861
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1862
- |----------|------------|------------------|
1863
- | `ani` | `animation` | - |
1864
- | `anic` | `animation-composition` | `r:replace`, `a:add`, `ac:accumulate`, `ra:replace, add`, `aac:add, accumulate`, `raac:replace, add, accumulate` |
1865
- | `anide` | `animation-delay` | - |
1866
- | `anidi` | `animation-direction` | `r:reverse`, `a:alternate`, `ar:alternate-reverse`, `nr:normal, reverse`, `arn:alternate, reverse, normal` |
1867
- | `anidu` | `animation-duration` | - |
1868
- | `anifm` | `animation-fill-mode` | `f:forwards`, `b:backwards`, `nb:none, backwards`, `fbn:both, forwards, none` |
1869
- | `aniic` | `animation-iteration-count` | - |
1870
- | `anin` | `animation-name` | `s:slide` |
1871
- | `anips` | `animation-play-state` | `p:paused`, `r:running` |
1872
- | `anitf` | `animation-timing-function` | `ei:ease-in`, `eo:ease-out`, `eio:ease-in-out`, `l:linear`, `ss:step-start`, `se:step-end` |
2020
+
2021
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
2022
+ | -------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------- |
2023
+ | `ani` | `animation` | - |
2024
+ | `anic` | `animation-composition` | `r:replace`, `a:add`, `ac:accumulate`, `ra:replace, add`, `aac:add, accumulate`, `raac:replace, add, accumulate` |
2025
+ | `anide` | `animation-delay` | - |
2026
+ | `anidi` | `animation-direction` | `r:reverse`, `a:alternate`, `ar:alternate-reverse`, `nr:normal, reverse`, `arn:alternate, reverse, normal` |
2027
+ | `anidu` | `animation-duration` | - |
2028
+ | `anifm` | `animation-fill-mode` | `f:forwards`, `b:backwards`, `nb:none, backwards`, `fbn:both, forwards, none` |
2029
+ | `aniic` | `animation-iteration-count` | - |
2030
+ | `anin` | `animation-name` | `s:slide` |
2031
+ | `anips` | `animation-play-state` | `p:paused`, `r:running` |
2032
+ | `anitf` | `animation-timing-function` | `ei:ease-in`, `eo:ease-out`, `eio:ease-in-out`, `l:linear`, `ss:step-start`, `se:step-end` |
1873
2033
 
1874
2034
  ---
1875
2035
 
1876
2036
  ## 10. Overflow & Scrolling
1877
2037
 
1878
2038
  ### Overflow
1879
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1880
- |----------|------------|------------------|
1881
- | `ofl` | `overflow` | - |
1882
- | `oflx` | `overflow-x` | `c:clip`, `s:scroll` |
1883
- | `ofly` | `overflow-y` | `c:clip`, `s:scroll` |
1884
- | `oflb` | `overflow-block` | - |
1885
- | `ofli` | `overflow-inline` | - |
1886
- | `ofla` | `overflow-anchor` | - |
1887
- | `oflcm` | `overflow-clip-margin` | - |
1888
- | `oflw` | `overflow-wrap` | `c:clip`, `s:scroll` |
2039
+
2040
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
2041
+ | -------- | ---------------------- | -------------------- |
2042
+ | `ofl` | `overflow` | - |
2043
+ | `oflx` | `overflow-x` | `c:clip`, `s:scroll` |
2044
+ | `ofly` | `overflow-y` | `c:clip`, `s:scroll` |
2045
+ | `oflb` | `overflow-block` | - |
2046
+ | `ofli` | `overflow-inline` | - |
2047
+ | `ofla` | `overflow-anchor` | - |
2048
+ | `oflcm` | `overflow-clip-margin` | - |
2049
+ | `oflw` | `overflow-wrap` | `c:clip`, `s:scroll` |
1889
2050
 
1890
2051
  ### Scroll
1891
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1892
- |----------|------------|------------------|
1893
- | `scrb` | `scroll-behavior` | - |
1894
- | `scrm` | `scroll-margin` | - |
1895
- | `scrmb` | `scroll-margin-bottom` | - |
1896
- | `scrml` | `scroll-margin-left` | - |
1897
- | `scrmr` | `scroll-margin-right` | - |
1898
- | `scrmt` | `scroll-margin-top` | - |
1899
- | `scrp` | `scroll-padding` | - |
1900
- | `scrpb` | `scroll-padding-bottom` | - |
1901
- | `scrpl` | `scroll-padding-left` | - |
1902
- | `scrpr` | `scroll-padding-right` | - |
1903
- | `scrpt` | `scroll-padding-top` | - |
1904
- | `scrsa` | `scroll-snap-align` | - |
1905
- | `scrss` | `scroll-snap-stop` | - |
1906
- | `scrst` | `scroll-snap-type` | - |
1907
- | `sbc` | `scrollbar-color` | - |
1908
- | `sbg` | `scrollbar-gutter` | - |
1909
- | `sbw` | `scrollbar-width` | - |
2052
+
2053
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
2054
+ | -------- | ----------------------- | ---------------- |
2055
+ | `scrb` | `scroll-behavior` | - |
2056
+ | `scrm` | `scroll-margin` | - |
2057
+ | `scrmb` | `scroll-margin-bottom` | - |
2058
+ | `scrml` | `scroll-margin-left` | - |
2059
+ | `scrmr` | `scroll-margin-right` | - |
2060
+ | `scrmt` | `scroll-margin-top` | - |
2061
+ | `scrp` | `scroll-padding` | - |
2062
+ | `scrpb` | `scroll-padding-bottom` | - |
2063
+ | `scrpl` | `scroll-padding-left` | - |
2064
+ | `scrpr` | `scroll-padding-right` | - |
2065
+ | `scrpt` | `scroll-padding-top` | - |
2066
+ | `scrsa` | `scroll-snap-align` | - |
2067
+ | `scrss` | `scroll-snap-stop` | - |
2068
+ | `scrst` | `scroll-snap-type` | - |
2069
+ | `sbc` | `scrollbar-color` | - |
2070
+ | `sbg` | `scrollbar-gutter` | - |
2071
+ | `sbw` | `scrollbar-width` | - |
1910
2072
 
1911
2073
  ### Overscroll
1912
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1913
- |----------|------------|------------------|
1914
- | `osrbh` | `overscroll-behavior` | `c:contain` |
1915
- | `osrbb` | `overscroll-behavior-block` | `c:contain` |
1916
- | `osrbi` | `overscroll-behavior-inline` | `c:contain` |
1917
- | `osrbx` | `overscroll-behavior-x` | `c:contain` |
1918
- | `orsby` | `overscroll-behavior-y` | `c:contain` |
2074
+
2075
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
2076
+ | -------- | ---------------------------- | ---------------- |
2077
+ | `osrbh` | `overscroll-behavior` | `c:contain` |
2078
+ | `osrbb` | `overscroll-behavior-block` | `c:contain` |
2079
+ | `osrbi` | `overscroll-behavior-inline` | `c:contain` |
2080
+ | `osrbx` | `overscroll-behavior-x` | `c:contain` |
2081
+ | `orsby` | `overscroll-behavior-y` | `c:contain` |
1919
2082
 
1920
2083
  ---
1921
2084
 
1922
2085
  ## 11. Lists & Tables
1923
2086
 
1924
2087
  ### Lists
1925
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1926
- |----------|------------|------------------|
1927
- | `ls` | `list-style` | `i:inside`, `di:disc`, `c:circle`, `s:square`, `de:decimal`, `g:georgian`, `tci:trad-chinese-informal`, `k:kannada` |
1928
- | `lsi` | `list-style-image` | - |
1929
- | `lisp` | `list-style-position` | `i:inside`, `o:outside` |
1930
- | `lst` | `list-style-type` | `di:disc`, `c:circle`, `s:square`, `de:decimal`, `g:georgian`, `tci:trad-chinese-informal`, `k:kannada` |
2088
+
2089
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
2090
+ | -------- | --------------------- | ------------------------------------------------------------------------------------------------------------------- |
2091
+ | `ls` | `list-style` | `i:inside`, `di:disc`, `c:circle`, `s:square`, `de:decimal`, `g:georgian`, `tci:trad-chinese-informal`, `k:kannada` |
2092
+ | `lsi` | `list-style-image` | - |
2093
+ | `lisp` | `list-style-position` | `i:inside`, `o:outside` |
2094
+ | `lst` | `list-style-type` | `di:disc`, `c:circle`, `s:square`, `de:decimal`, `g:georgian`, `tci:trad-chinese-informal`, `k:kannada` |
1931
2095
 
1932
2096
  ### Tables
1933
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1934
- |----------|------------|------------------|
1935
- | `tbl` | `table-layout` | - |
1936
- | `bdcl` | `border-collapse` | `s:separate`, `c:collapse` |
1937
- | `bdsp` | `border-spacing` | - |
1938
- | `empc` | `empty-cells` | - |
1939
- | `caps` | `caption-side` | - |
2097
+
2098
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
2099
+ | -------- | ----------------- | -------------------------- |
2100
+ | `tbl` | `table-layout` | - |
2101
+ | `bdcl` | `border-collapse` | `s:separate`, `c:collapse` |
2102
+ | `bdsp` | `border-spacing` | - |
2103
+ | `empc` | `empty-cells` | - |
2104
+ | `caps` | `caption-side` | - |
1940
2105
 
1941
2106
  ### Columns
1942
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1943
- |----------|------------|------------------|
1944
- | `col` | `columns` | - |
1945
- | `colc` | `column-count` | - |
1946
- | `colf` | `column-fill` | - |
1947
- | `colg` | `column-gap` | - |
1948
- | `colr` | `column-rule` | - |
1949
- | `colrc` | `column-rule-color` | - |
1950
- | `colrs` | `column-rule-style` | - |
1951
- | `colrw` | `column-rule-width` | - |
1952
- | `cols` | `column-span` | - |
1953
- | `colw` | `column-width` | - |
2107
+
2108
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
2109
+ | -------- | ------------------- | ---------------- |
2110
+ | `col` | `columns` | - |
2111
+ | `colc` | `column-count` | - |
2112
+ | `colf` | `column-fill` | - |
2113
+ | `colg` | `column-gap` | - |
2114
+ | `colr` | `column-rule` | - |
2115
+ | `colrc` | `column-rule-color` | - |
2116
+ | `colrs` | `column-rule-style` | - |
2117
+ | `colrw` | `column-rule-width` | - |
2118
+ | `cols` | `column-span` | - |
2119
+ | `colw` | `column-width` | - |
1954
2120
 
1955
2121
  ---
1956
2122
 
1957
2123
  ## 12. Advanced Properties
1958
2124
 
1959
2125
  ### Containment
1960
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1961
- |----------|------------|------------------|
1962
- | `cnt` | `contain` | - |
1963
- | `cntibs` | `contain-intrinsic-block-size` | - |
1964
- | `cntih` | `contain-intrinsic-height` | - |
1965
- | `cntiis` | `contain-intrinsic-inline-size` | - |
1966
- | `cntis` | `contain-intrinsic-size` | - |
1967
- | `ciw` | `contain-intrinsic-width` | - |
2126
+
2127
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
2128
+ | -------- | ------------------------------- | ---------------- |
2129
+ | `cnt` | `contain` | - |
2130
+ | `cntibs` | `contain-intrinsic-block-size` | - |
2131
+ | `cntih` | `contain-intrinsic-height` | - |
2132
+ | `cntiis` | `contain-intrinsic-inline-size` | - |
2133
+ | `cntis` | `contain-intrinsic-size` | - |
2134
+ | `ciw` | `contain-intrinsic-width` | - |
1968
2135
 
1969
2136
  ### Container Queries
1970
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1971
- |----------|------------|------------------|
1972
- | `ctr` | `container` | - |
1973
- | `ctrn` | `container-name` | - |
1974
- | `ctrt` | `container-type` | - |
2137
+
2138
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
2139
+ | -------- | ---------------- | ---------------- |
2140
+ | `ctr` | `container` | - |
2141
+ | `ctrn` | `container-name` | - |
2142
+ | `ctrt` | `container-type` | - |
1975
2143
 
1976
2144
  ### Content & Counters
1977
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1978
- |----------|------------|------------------|
1979
- | `ctt` | `content` | - |
1980
- | `cntri` | `counter-increment` | - |
1981
- | `cntrr` | `counter-reset` | - |
1982
- | `cntrs` | `counter-set` | - |
2145
+
2146
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
2147
+ | -------- | ------------------- | ---------------- |
2148
+ | `ctt` | `content` | - |
2149
+ | `cntri` | `counter-increment` | - |
2150
+ | `cntrr` | `counter-reset` | - |
2151
+ | `cntrs` | `counter-set` | - |
1983
2152
 
1984
2153
  ### Page Breaks
1985
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1986
- |----------|------------|------------------|
1987
- | `pg` | `page` | - |
1988
- | `pgba` | `page-break-after` | - |
1989
- | `pgbb` | `page-break-before` | - |
1990
- | `pgbi` | `page-break-inside` | - |
1991
- | `brka` | `break-after` | - |
1992
- | `brkb` | `break-before` | - |
1993
- | `brki` | `break-inside` | - |
2154
+
2155
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
2156
+ | -------- | ------------------- | ---------------- |
2157
+ | `pg` | `page` | - |
2158
+ | `pgba` | `page-break-after` | - |
2159
+ | `pgbb` | `page-break-before` | - |
2160
+ | `pgbi` | `page-break-inside` | - |
2161
+ | `brka` | `break-after` | - |
2162
+ | `brkb` | `break-before` | - |
2163
+ | `brki` | `break-inside` | - |
1994
2164
 
1995
2165
  ### Other Advanced
1996
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
1997
- |----------|------------|------------------|
1998
- | `a` | `all` | - |
1999
- | `is` | `isolation` | `i:isolate` |
2000
- | `z` | `z-index` | - |
2001
- | `ord` | `order` | - |
2002
- | `fl` | `float` | `is:inline-start`, `ie:inline-end`, `r:right`, `l:left` |
2003
- | `clr` | `clear` | - |
2004
- | `rsz` | `resize` | `b:both`, `h:horizontal`, `v:vertical` |
2005
- | `us` | `user-select` | `t:text`, `all:all`, `c:contain` |
2006
- | `pe` | `pointer-events` | - |
2007
- | `cr` | `cursor` | `p:pointer`, `d:default`, `cm:context-menu`, `h:help`, `pg:progress`, `w:wait`, `c:cell`, `t:text`, `vt:vertical-text`, `al:alias`, `cp:copy`, `mo:move`, `nd:no-drop`, `na:not-allowed`, `gr:grab`, `gb:grabbing`, `as:all-scroll`, `colr:col-resize`, `rr:row-resize`, `nr:n-resize`, `er:e-resize`, `sr:s-resize`, `wr:w-resize`, `ner:ne-resize`, `ser:se-resize`, `swr:sw-resize`, `ewr:ew-resize`, `nsr:ns-resize`, `nesw:nesw-resize`, `nwse:nwse-resize`, `zi:zoom-in`, `zo:zoom-out` |
2008
- | `toa` | `touch-action` | `p:pan-x`, `py:pan-y`, `pm:pan-x pan-y`, `pi:pinch-zoom` |
2009
- | `zo` | `zoom` | - |
2166
+
2167
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
2168
+ | -------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
2169
+ | `a` | `all` | - |
2170
+ | `is` | `isolation` | `i:isolate` |
2171
+ | `z` | `z-index` | - |
2172
+ | `ord` | `order` | - |
2173
+ | `fl` | `float` | `is:inline-start`, `ie:inline-end`, `r:right`, `l:left` |
2174
+ | `clr` | `clear` | - |
2175
+ | `rsz` | `resize` | `b:both`, `h:horizontal`, `v:vertical` |
2176
+ | `us` | `user-select` | `t:text`, `all:all`, `c:contain` |
2177
+ | `pe` | `pointer-events` | - |
2178
+ | `cr` | `cursor` | `p:pointer`, `d:default`, `cm:context-menu`, `h:help`, `pg:progress`, `w:wait`, `c:cell`, `t:text`, `vt:vertical-text`, `al:alias`, `cp:copy`, `mo:move`, `nd:no-drop`, `na:not-allowed`, `gr:grab`, `gb:grabbing`, `as:all-scroll`, `colr:col-resize`, `rr:row-resize`, `nr:n-resize`, `er:e-resize`, `sr:s-resize`, `wr:w-resize`, `ner:ne-resize`, `ser:se-resize`, `swr:sw-resize`, `ewr:ew-resize`, `nsr:ns-resize`, `nesw:nesw-resize`, `nwse:nwse-resize`, `zi:zoom-in`, `zo:zoom-out` |
2179
+ | `toa` | `touch-action` | `p:pan-x`, `py:pan-y`, `pm:pan-x pan-y`, `pi:pinch-zoom` |
2180
+ | `zo` | `zoom` | - |
2010
2181
 
2011
2182
  ---
2012
2183
 
2013
2184
  ## 13. WebKit Specific
2014
2185
 
2015
- | Viết tắt | Thuộc tính | Giá trị viết tắt |
2016
- |----------|------------|------------------|
2017
- | `wlc` | `-webkit-line-clamp` | - |
2018
- | `wtfc` | `-webkit-text-fill-color` | - |
2019
- | `wts` | `-webkit-text-stroke` | - |
2020
- | `wtsc` | `-webkit-text-stroke-color` | - |
2021
- | `wtsw` | `-webkit-text-stroke-width` | `m:medium`, `t:thick` |
2186
+ | Viết tắt | Thuộc tính | Giá trị viết tắt |
2187
+ | -------- | --------------------------- | --------------------- |
2188
+ | `wlc` | `-webkit-line-clamp` | - |
2189
+ | `wtfc` | `-webkit-text-fill-color` | - |
2190
+ | `wts` | `-webkit-text-stroke` | - |
2191
+ | `wtsc` | `-webkit-text-stroke-color` | - |
2192
+ | `wtsw` | `-webkit-text-stroke-width` | `m:medium`, `t:thick` |
2022
2193
 
2023
2194
  ---
2024
2195
 
2025
-
2026
2196
  ## 14. Special Values
2027
2197
 
2028
2198
  ### Common Values
@@ -2067,146 +2237,84 @@ Ví dụ: `5cBlue` vs `9cRed` → `9cRed` thắng. Nhưng `5cBlue!` (viết `c!B
2067
2237
 
2068
2238
  ---
2069
2239
 
2070
- *Bảng tra cứu này bao gồm tất cả 409 thuộc tính CSS và giá trị viết tắt được hỗ trợ trong xCSS. Để sử dụng, hãy kết hợp viết tắt thuộc tính với giá trị viết tắt theo cú pháp: `[MQ:][layer]<property><value>[@selector]` (lưu ý: `<property><value>` là bắt buộc)*
2071
-
2072
- ```
2073
-
2074
- ## Các khái niệm cốt lõi
2075
-
2076
- ### 1. `stateValue(initialValue)`
2077
-
2078
- Hàm `stateValue` tạo ra một đối tượng trạng thái (state object) đơn lẻ. Bạn có thể truy cập và cập nhật giá trị của nó thông qua thuộc tính `.value`.
2079
-
2080
- ```javascript
2081
- import fkui from './src/fkui-core.js';
2082
-
2083
- const count = fkui.stateValue(0);
2084
-
2085
- console.log(count.value); // 0
2086
-
2087
- count.value = 1;
2088
-
2089
- console.log(count.value); // 1
2090
- ```
2091
-
2092
- ### 2. `stateObject(object)`
2093
-
2094
- Hàm `stateObject` chuyển đổi một đối tượng JavaScript thông thường thành một đối tượng trạng thái phản ứng. Mọi thay đổi đối với các thuộc tính của đối tượng này sẽ tự động được theo dõi.
2095
-
2096
- ```javascript
2097
- const user = fkui.stateObject({
2098
- name: 'John Doe',
2099
- age: 30
2100
- });
2101
-
2102
- console.log(user.name); // 'John Doe'
2103
-
2104
- user.age = 31; // Giao diện người dùng sẽ tự động cập nhật
2105
- ```
2106
-
2107
- ### 3. `computed(func)`
2108
-
2109
- Hàm `computed` tạo ra một trạng thái dẫn xuất (derived state) từ các trạng thái khác. Giá trị của nó sẽ tự động được tính toán lại khi các trạng thái phụ thuộc thay đổi.
2110
-
2111
- ```javascript
2112
- const a = fkui.stateValue(1);
2113
- const b = fkui.stateValue(2);
2114
-
2115
- const sum = fkui.computed(() => a.value + b.value);
2116
-
2117
- console.log(sum.value); // 3
2118
-
2119
- a.value = 5;
2120
-
2121
- console.log(sum.value); // 7
2122
- ```
2123
-
2124
- ### 4. `tags`
2125
-
2126
- `tags` là một đối tượng cho phép bạn tạo các phần tử HTML một cách dễ dàng.
2127
-
2128
- ```javascript
2129
- const { div, p, button } = fkui.tags;
2240
+ _Bảng tra cứu này bao gồm tất cả 409 thuộc tính CSS và giá trị viết tắt được hỗ trợ trong xCSS. Để sử dụng, hãy kết hợp viết tắt thuộc tính với giá trị viết tắt theo cú pháp: `[MQ:][layer]<property><value>[@selector]` (lưu ý: `<property><value>` là bắt buộc)_
2130
2241
 
2131
- const myDiv = div({ class: 'container' },
2132
- p('Hello, world!'),
2133
- button({ onclick: () => alert('Clicked!') }, 'Click me')
2134
- );
2135
-
2136
- document.body.appendChild(myDiv);
2137
- ```
2138
-
2139
- ### 5. `append(dom, ...children)`
2140
-
2141
- Hàm `append` được sử dụng để thêm các phần tử con vào một phần tử DOM.
2142
-
2143
- ```javascript
2144
- const { div, p } = fkui.tags;
2145
- const container = div();
2146
-
2147
- fkui.append(container, p('Child 1'), p('Child 2'));
2148
- ```
2149
-
2150
- ### 6. `effect(func)`
2151
-
2152
- Hàm `effect` thực thi một hàm và tự động chạy lại nó khi các trạng thái mà nó phụ thuộc thay đổi. Điều này rất hữu ích để thực hiện các tác vụ phụ (side effects) như ghi log, hoặc cập nhật DOM theo cách thủ công.
2153
-
2154
- ```javascript
2155
- const name = fkui.stateValue('Guest');
2156
-
2157
- fkui.effect(() => {
2158
- console.log(`Name changed to: ${name.value}`);
2159
- });
2160
-
2161
- name.value = 'John'; // "Name changed to: John" sẽ được in ra console
2162
- ```
2163
-
2164
- ### 7. `listDom(container, items, itemFunc)`
2165
-
2166
- Hàm `listDom` dùng để hiển thị một danh sách các mục. Nó sẽ tự động cập nhật DOM khi danh sách thay đổi (thêm, xóa, hoặc sắp xếp lại các mục).
2167
-
2168
- ```javascript
2169
- const { ul, li } = fkui.tags;
2170
-
2171
- const items = fkui.stateObject(['Apple', 'Banana', 'Orange']);
2172
-
2173
- const myList = fkui.listDom(ul(), items, item => li(item.value));
2174
-
2175
- document.body.appendChild(myList);
2176
-
2177
- // Thêm một mục mới vào danh sách
2178
- items.push('Mango');
2179
- ```
2180
-
2181
- ## Ví dụ hoàn chỉnh
2182
-
2183
- Đây là một ví dụ về một bộ đếm đơn giản:
2242
+ ### Example
2184
2243
 
2185
2244
  ```html
2245
+
2186
2246
  <!DOCTYPE html>
2187
- <html>
2188
- <head>
2189
- <title>fkui-core.js Counter</title>
2190
- </head>
2191
- <body>
2192
- <div id="app"></div>
2193
-
2194
- <script type="module">
2195
- import fkui from './src/fkui-core.js';
2196
-
2197
- const { div, h1, button } = fkui.tags;
2198
- const app = document.getElementById('app');
2199
-
2200
- const count = fkui.stateValue(0);
2201
-
2202
- const counterComponent = div(
2203
- h1('Counter: ', () => count.value),
2204
- button({ onclick: () => count.value-- }, '-'),
2205
- button({ onclick: () => count.value++ }, '+')
2206
- );
2207
-
2208
- fkui.append(app, counterComponent);
2209
- </script>
2210
- </body>
2247
+ <html lang="vi">
2248
+ <head>
2249
+ <meta charset="utf-8">
2250
+ <meta name="viewport" content="width=device-width, initial-scale=1">
2251
+ <title>Login</title>
2252
+ <meta name="description" content="Mẫu HTML5 cơ bản">
2253
+ <style>
2254
+ :root {
2255
+ --primary-color: #007bff;
2256
+ --secondary-color: #6c757d;
2257
+ --success-color: #28a745;
2258
+ --info-color: #17a2b8;
2259
+ --warning-color: #ffc107;
2260
+ --danger-color: #dc3545;
2261
+ --light-text: #6c757d;
2262
+ --dark-text: #343a40;
2263
+ --body-bg: #f8f9fa;
2264
+ --div-color: #dee2e6;
2265
+ --bd3:1px 1px 1px 1px #dee2e6;
2266
+ --w:#fff;
2267
+ }
2268
+ </style>
2269
+ </head>
2270
+ <body>
2271
+ <div class="dF jcC aiC h100vh bgc--body-bg px10px">
2272
+ <div class="bgc--w p40px bda8px bxshd--bd3 w400px">
2273
+ <h1 class="taC c--dark-text mb30px">Login</h1>
2274
+ <div class="dF fxdC my8px">
2275
+ <input class="p8px" type="text" placeholder="Username">
2276
+ </div>
2277
+ <div class="dF fxdC my8px">
2278
+ <input class="p8px" type="password" placeholder="Password">
2279
+ <a href="#" class="c--primary-color taR mt8px">
2280
+ Forgot password?
2281
+ </a>
2282
+ </div>
2283
+ <div class="taC mt30px">
2284
+ <button class="bdN bgc--primary-color cWhite p12px w100% bdra4px">
2285
+ Login
2286
+ </button>
2287
+ </div>
2288
+ <div class="dF aiC my20px">
2289
+ <div class="fx1 h1px bgc--div"></div>
2290
+ <span class="px10px c--light-text">Or continue with</span>
2291
+ <div class="fx1 h1px bgc--div"></div>
2292
+ </div>
2293
+ <div class="dF jcC">
2294
+ <button class="bdN bgc--info-color c--w p12px mx8px dF aiC bdra4px">
2295
+ <span class="ml8px">Facebook</span>
2296
+ </button>
2297
+ <button class="bdN bgc--success-color c--w p12px mx8px dF aiC bdra4px">
2298
+
2299
+ <span class="ml8px">X-Twitter</span>
2300
+ </button>
2301
+ </div>
2302
+ <div class="dF aiC my20px">
2303
+ <div class="fx1 h1px bgc--div"></div>
2304
+ </div>
2305
+ <div class="taC">
2306
+ <a href="#" class="p12px">
2307
+ Create new account
2308
+ </a>
2309
+ </div>
2310
+ </div>
2311
+ </div>
2312
+
2313
+ <script type="module">
2314
+ import $ from "https://unpkg.com/@fwkui/x-css@1.0.2/index.js";
2315
+ $.cssObserve(document);
2316
+ </script>
2317
+ </body>
2211
2318
  </html>
2319
+
2212
2320
  ```