Trình duyệt & nền tảng
Yugen UI nhắm tới trình duyệt evergreen và React 19 trở lên; không cần polyfill cho các tính năng CSS hiện đại mà Tailwind CSS v4 dựa vào.
Trình duyệt
Hai phiên bản mới nhất của mỗi trình duyệt evergreen. Mốc tối thiểu thực tế là mốc của Tailwind CSS v4.
| Trình duyệt | Phiên bản | Trạng thái |
|---|---|---|
| Chrome, Edge (Chromium) | 2 bản mới nhất · tối thiểu 111 | Hỗ trợ |
| Firefox | 2 bản mới nhất · tối thiểu 128 | Hỗ trợ |
| Safari macOS & iOS / iPadOS | 2 bản mới nhất · tối thiểu 16.4 | Hỗ trợ |
| Chrome Android, Samsung Internet | Bản mới nhất | Hỗ trợ |
| Internet Explorer, Edge Legacy (EdgeHTML) | — | Không hỗ trợ |
Cần hỗ trợ trình duyệt cũ hơn?Tailwind CSS v4 không có chế độ tương thích ngược; khi đó hãy cân nhắc Tailwind 3 và tự chuyển cấu hình token sang
tailwind.config.js — ngoài phạm vi hỗ trợ của Yugen UI.Tính năng CSS được dùng
Tất cả đều có trong mọi trình duyệt ở bảng trên — không cần polyfill hay PostCSS bổ sung.
| Tính năng | Dùng ở đâu |
|---|---|
| CSS custom properties | Toàn bộ token: --colorNeutralForeground1, --spacingM, --brand-80… |
@layer | Tailwind v4 xuất CSS theo cascade layer (theme, base, components, utilities) — utility luôn thắng base. |
@property | Tailwind v4 đăng ký biến cho transform, shadow, gradient để animate mượt. |
color-mix() | Modifier độ mờ trên màu token: bg-shell/85 (thanh trên cùng), border-brand-stroke/30 (Badge tint). |
:has() | Input tắt (has-[input:disabled]), vòng focus Radio (has-[button:focus-visible]), Switch tắt. |
| Logical properties | ms-*, ps-*, start-*, border-s, rounded-s-*, text-start — nền tảng của RTL. |
:focus-visible | Vòng focus 2px chỉ hiện khi dùng bàn phím. |
:dir() / [dir] | Biến thể rtl: để lật icon và transform. |
| Đơn vị dvh | Chiều cao Dialog / Drawer / Toast trên mobile (max-h-dvh). |
clip-path: inset() | Thanh brand 2px ở đáy ô nhập. |
aspect-ratio | AspectRatio, Image. |
translate / scale / rotate | Thuộc tính transform riêng lẻ mà Tailwind v4 sinh ra. |
| prefers-reduced-motion, prefers-color-scheme | Tắt animation lặp (motion-reduce:animate-none), chọn theme ban đầu. |
oklch() | Không bắt buộc: token dùng mã HEX, palette mặc định (oklch) của Tailwind đã bị tắt. |
React, TypeScript, Tailwind
| Thành phần | Phiên bản | Ghi chú |
|---|---|---|
| React / React DOM | 19 trở lên (React 18 được hỗ trợ đến 0.14) | Nhận ref như một prop, dùng useId, useSyncExternalStore; Radix, cmdk, react-day-picker đều hỗ trợ React 19. |
| TypeScript | 5.x | Mã nguồn viết ở chế độ strict; mọi kiểu prop export cùng component (ButtonProps, FieldProps…). |
| Tailwind CSS | 4.x | Bắt buộc v4: cấu hình CSS-first (@theme, @utility), cú pháp size-4!, max-h-(--var). |
| Bundler | Vite 6 trở lên · Next.js 14 / 15 · bất kỳ bundler hỗ trợ PostCSS | Component không dùng API riêng của bundler; chỉ cần alias @/. |
| Radix UI | Theo package.json | Mỗi primitive là một package riêng — chỉ cài cái bạn dùng. |
| Icon | Có sẵn | Icon bên trong component đi kèm yugen-ui dưới dạng SVG nhỏ (Fluent System Icons), không cần cài gói icon. Icon của bạn: thêm @fluentui/react-icons, hoặc bộ icon SVG bất kỳ. |
Chuột, cảm ứng, bàn phím
Mọi component dùng được bằng cả ba phương thức nhập, và với công nghệ hỗ trợ.
| Phương thức | Hành vi |
|---|---|
| Chuột / bút | Đủ trạng thái hover → pressed. Ở Tailwind v4, hover: chỉ áp dụng trên thiết bị có hover thật nên không “dính” hover trên màn hình cảm ứng. |
| Cảm ứng | Slider đặt touch-none để kéo không cuộn trang; Toast vuốt để đóng; Drawer, Carousel dùng được bằng tay. Control medium cao 32px (≥ 24px theo WCAG 2.5.8) — giao diện ưu tiên cảm ứng nên dùng size="large" (40px). |
| Bàn phím | Tab / Shift+Tab giữa các control, phím mũi tên trong nhóm (Tabs, Menu, RadioGroup, Toolbar, Tree, List…), Esc đóng overlay. Xem bảng đầy đủ ở trang Tổng quan khả năng tiếp cận. |
| Trình đọc màn hình | Nên kiểm thử với NVDA + Firefox / Chrome, JAWS + Chrome, VoiceOver + Safari (macOS, iOS), TalkBack + Chrome (Android), Narrator + Edge. |
| Chế độ tương phản (forced-colors) | Bề mặt nổi và nút giữ border-transparent thay vì bỏ viền, nên Windows High Contrast vẫn vẽ đường viền; focus dùng outline nên luôn hiện. |
| Thu phóng | Bố cục dùng flex / grid và chiều rộng tối đa theo khung nhìn (calc(100vw - …)) để reflow khi phóng to. |
Kiểm thử trên từng engine
Mọi PR chạy E2E trên Chromium. Firefox và WebKit chạy hằng tuần và trên PR phát hành vào main.
Trên Firefox và WebKit (Safari desktop, iPhone) chạy các test kéo chuột, Carousel, bàn phím, luồng chính của docs và bố cục mobile. Kiểm tra a11y (axe) chỉ chạy trên Chromium vì kết quả không phụ thuộc engine. Khác biệt đã biết:
| Engine | Khác biệt | Ảnh hưởng |
|---|---|---|
| Safari / WebKit | Click chuột không đặt focus vào nút (hành vi mặc định của macOS). | Không đổi hành vi component. Khi kiểm thử focus, hãy thao tác bằng bàn phím. |
| Firefox, WebKit | Playwright không giả lập được chạm-kéo (Input.dispatchTouchEvent chỉ có trên Chromium). | Kéo Sheet và vuốt Carousel chỉ được kiểm thử tự động trên Chromium; trên iOS cần thử bằng tay. |
| Firefox, WebKit | Không cho trang đọc clipboard nếu người dùng chưa cho phép. | Nút Copy chỉ ghi (navigator.clipboard.writeText trong sự kiện click) nên chạy trên mọi engine. |