CSS3 Nâng cao Khóa Học Đào Tạo

1. CSS Hiện đại và Sự tiến hóa của CSS

• Từ CSS3 sang CSS hiện đại
• Các tiêu chuẩn CSS hiện tại và triển khai trên trình duyệt
• Hiểu về quy định CSS và sự hỗ trợ của trình duyệt
• Cải tiến dần (Progressive enhancement)
• Phát hiện tính năng và suy thoái mềm dẻo (graceful degradation)
• Hiểu hệ sinh thái CSS hiện đại

2. Bộ chọn (Selectors) Nâng cao

• Các bộ chọn thuộc tính nâng cao
• Các lớp giả cấu trúc (Structural pseudo-classes)
• :is()
• :where()
• :not()
• :has() và các bộ chọn quan hệ
• Độ đặc hiệu của bộ chọn (Selector specificity)
• Quản lý độ đặc hiệu trong các dự án lớn
• Phương pháp tốt nhất cho các bộ chọn hiện đại

3. Màu sắc Hiện đại và Hiệu ứng Thị giác

• Các hàm màu RGB, HSL và hiện đại
• color(), lab(), lch(), oklab() và oklch()
• Màu tương đối (Relative colors)
• Độ trong suốt và kênh alpha
• Các gradient nâng cao
• Gradient tuyến tính, radial và conic
• color-mix()
• Nội suy màu (Color interpolation)
• Bộ lọc CSS và hiệu ứng thị giác
• Hệ thống chủ đề và màu sắc hiện đại

4. Thuộc tính Tùy chỉnh CSS và Hệ thống Thiết kế

• Biến CSS / Thuộc tính tùy chỉnh
• Biến và giá trị dự phòng (fallback values)
• Thay đổi chủ đề động (Dynamic theming)
• Tùy chỉnh cấp thành phần
• Mật mã thiết kế (Design tokens) với CSS
• Tạo chủ đề sáng và tối
• Sử dụng var(), @property và các thuộc tính tùy chỉnh có kiểu
• Xây dựng hệ thống thiết kế CSS bền vững

5. Nesting trong CSS và Quản lý Cascade

• CSS nesting bản địa
• Cú pháp và các phương pháp tốt nhất cho nesting
• Nesting CSS so với các trình xử lý trước
• Cascade và kế thừa
• Các tầng cascade với @layer
• Quản lý CSS bên thứ ba
• @scope và các khái niệm định kiểu phạm vi (scoped styling)
• Xây dựng kiến trúc CSS có thể dự đoán được

6. Bố cục Nâng cao với Flexbox

• Ôn tập cơ bản về Flexbox
• Trục chính và trục chéo
• Căn chỉnh nâng cao
• Kích thước linh hoạt
• gap
• Gom hàng và sắp xếp
• Bố cục Flexbox lồng nhau
• Các mẫu Flexbox phổ biến
• Thành phần phản hồi nhanh sử dụng Flexbox

7. CSS Grid Nâng cao

• Ôn tập cơ bản về Grid
• Lưới tường minh và ẩn
• Kích thước đường track nâng cao
• minmax()
• auto-fit và auto-fill
• min(), max() và clamp()
• Vùng lưới (Grid areas)
• Bố cục Grid phản hồi nhanh
• Bố cục trang phức tạp
• CSS Subgrid
• Sử dụng Subgrid cho bố cục thành phần được căn chỉnh

8. Container Queries và Phản hồi Nhanh dựa trên Thành phần

• Tại sao các truy vấn phương tiện viewport không phải lúc nào cũng đủ
• Các khái niệm Container queries
• container-type
• @container
• Đơn vị độ dài container query
• Thiết kế phản hồi nhanh do thành phần dẫn dắt
• Truy vấn kiểu dáng container query
• Thiết kế các thành phần phản hồi nhanh có thể tái sử dụng
• Container queries so với media queries

9. Thiết kế Phản hồi Nhanh Hiện đại

• Thiết kế mobile-first
• Các điểm ngắt (breakpoints) phản hồi nhanh
• Typography (bố trí chữ) linh hoạt
• Độ espaci (khoảng cách) linh hoạt
• clamp()
• Các đơn vị viewport hiện đại:
  • svh
  • lvh
  • dvh
  • svw
  • lvw
  • dvw
• Các cân nhắc về viewport động
• Các đơn vị tương đối với container
• Hình ảnh và phương tiện phản hồi nhanh
• Giảm bớt các truy vấn phương tiện không cần thiết

10. Thuộc tính Logic và Quốc tế hóa

• Các thuộc tính CSS logic so với vật lý
• margin-inline / margin-block
• padding-inline / padding-block
• inset-inline / inset-block
• Kích thước logic
• Chế độ viết (Writing modes)
• Bố cục từ phải sang trái (RTL)
• Xây dựng các giao diện thích ứng quốc tế

11. Typography Hiện đại

• Typography phản hồi nhanh
• Phông chữ biến đổi (Variable fonts)
• Các cân nhắc về tải phông chữ
• font-size-adjust
• Các thang tỷ lệ chữ linh hoạt
• Gom hàng và tràn văn bản
• text-wrap: balance
• text-wrap: pretty
• hyphens
• Các phương pháp tốt nhất về typography hiện đại

12. Biến đổi, Chuyển tiếp và Hoạt ảnh

• Biến đổi 2D và 3D
• Chuyển tiếp (Transitions)
• Hoạt ảnh keyframe
• Các hàm thời gian (Timing functions)
• Tổng hợp hoạt ảnh
• Hiệu suất của biến đổi
• Hoạt ảnh điều khiển bằng cuộn (Scroll-driven animations)
• animation-timeline
• Các khái niệm View-timeline
• Tính truy cập của chuyển động
• prefers-reduced-motion
• Các cân nhắc về hiệu suất

13. Tính năng UI CSS Hiện đại

• Dialog và popover CSS bản địa
• Định kiểu các trạng thái UI tương tác
• :popover-open
• :modal
• :focus-visible
• :target
• Định kiểu trạng thái biểu mẫu
• accent-color
• appearance
• field-sizing
• Các điều khiển biểu mẫu hiện đại
• Xây dựng các tương tác chỉ dùng CSS có khả năng truy cập

14. Các Hàm CSS Nâng cao

• calc()
• min()
• max()
• clamp()
• minmax()
• fit-content()
• color-mix()
• Các hàm màu tương đối
• Tổ hợp các hàm cho bố cục linh hoạt
• Các mẫu thiết kế phản hồi nhanh thực tế

15. Trình xử lý trước CSS

• Tổng quan về trình xử lý trước CSS
• LESS
• Biến và mixins
• Nesting các kiểu
• Hàm và các phép toán
• LESS so với CSS bản địa hiện đại
• Khi nào trình xử lý trước vẫn hữu ích
• Di chuyển các tính năng của trình xử lý trước sang CSS bản địa

16. Cân nhắc Thiết kế và Khả năng Truy cập

• Các phương pháp tốt nhất về CSS hiện đại
• Định kiểu ưu tiên khả năng truy cập
• Các trạng thái focus bàn phím
• :focus-visible
• Giảm chuyển động
• Các cân nhắc về độ tương phản và màu sắc
• Văn bản và nội dung phản hồi nhanh
• Văn bản trên hình ảnh
• Các thành phần phản hồi nhanh có khả năng truy cập
• Cải tiến dần

17. Hiệu suất và Khả năng Bảo trì CSS

• Giảm độ phức tạp của CSS
• Tránh độ đặc hiệu không cần thiết
• Các tầng cascade cho khả năng bảo trì
• Các mẫu tiện ích và thành phần có thể tái sử dụng
• Các khái niệm về sự cô lập CSS (CSS containment)
• content-visibility
• Hiệu suất render và bố cục
• Giảm sự dịch chuyển bố cục
• Tổ chức các cơ sở mã CSS lớn
• Chẩn đoán CSS bằng các công cụ phát triển trình duyệt hiện đại

18. Dự án CSS Hiện đại Thực tế

Người tham gia xây dựng một giao diện web hiện đại phản hồi nhanh, tích hợp:

• CSS Grid
• Flexbox
• Subgrid
• Container queries
• Nesting trong CSS
• Thuộc tính tùy chỉnh
• Các tầng cascade
• Các bộ chọn hiện đại
• Typography linh hoạt
• Các đơn vị viewport hiện đại
• Thiết kế phản hồi nhanh
• Màu sắc và gradient hiện đại
• Hoạt ảnh và chuyển tiếp
• Các cân nhắc về khả năng truy cập
• Các phương pháp tốt nhất về hiệu suất