Câu hỏi tự luận mức độ vận dụng cao Tin học ứng dụng 12 ctst bài F9: Một số kĩ thuật định kiểu bằng vùng chọn trong CSS

4. VẬN DỤNG CAO (3 CÂU)

Câu 1: Nêu cách mà các vùng chọn CSS có thể ảnh hưởng đến khả năng truy cập của trang web?

Câu 2: Hãy phân tích sự khác biệt giữa vùng chọn CSS và các phương pháp định kiểu khác như inline styles?

Câu 3: Sự khác biệt giữa vùng chọn kiểu (pseudo-class) và vùng chọn giả (pseudo-element) trong CSS là gì?

Câu 1:

- Mặc dù bản thân các vùng chọn CSS không trực tiếp ảnh hưởng đến khả năng truy cập (accessibility) theo nghĩa đen, cách chúng ta sử dụng chúng có thể tác động đến trải nghiệm của người dùng, đặc biệt là những người sử dụng công nghệ hỗ trợ như trình đọc màn hình. Dưới đây là một số điểm cần lưu ý:

- Sử dụng vùng chọn quá phụ thuộc vào cấu trúc DOM: Nếu CSS của bạn quá phụ thuộc vào cấu trúc HTML cụ thể (ví dụ: sử dụng quá nhiều vùng chọn con cháu sâu), việc thay đổi cấu trúc HTML có thể làm hỏng giao diện. Điều này gây khó khăn cho việc bảo trì và có thể ảnh hưởng đến khả năng của trình đọc màn hình trong việc diễn giải nội dung. Nên sử dụng class một cách hợp lý để giảm sự phụ thuộc này.

- Ví dụ không tốt: div.content table tr:nth-child(2) td:last-child { ... } (quá cụ thể và dễ bị hỏng nếu cấu trúc bảng thay đổi).

- Ví dụ tốt hơn: .product-price { ... } (dễ bảo trì và áp dụng hơn).

- Ẩn nội dung chỉ bằng CSS: Việc ẩn nội dung bằng display: none; hoặc visibility: hidden; sẽ khiến nội dung đó hoàn toàn biến mất khỏi cây truy cập (accessibility tree), do đó trình đọc màn hình sẽ bỏ qua nó. Nếu bạn muốn ẩn nội dung về mặt thị giác nhưng vẫn muốn nó được đọc bởi trình đọc màn hình, hãy sử dụng các kỹ thuật như:

+ clip-path: inset(100%);

+ position: absolute; kết hợp với width: 1px; height: 1px; overflow: hidden;

- Đảm bảo độ tương phản màu sắc: CSS được sử dụng để thiết lập màu sắc cho văn bản và nền. Hãy đảm bảo rằng độ tương phản giữa màu chữ và màu nền đủ cao để người dùng có thị lực kém vẫn có thể đọc được nội dung. Sử dụng các công cụ kiểm tra độ tương phản màu sắc (ví dụ: WebAIM Contrast Checker) để đảm bảo tuân thủ các tiêu chuẩn WCAG.

= Sử dụng ARIA kết hợp với CSS: ARIA (Accessible Rich Internet Applications) cung cấp các thuộc tính HTML bổ sung để cải thiện khả năng truy cập. Bạn có thể sử dụng CSS để định kiểu cho các thuộc tính ARIA này

Câu 2:

Tiêu chí	Vùng chọn CSS	Inline Styles
Định nghĩa	Sử dụng tệp CSS hoặc thẻ <style> để định dạng nhiều phần tử cùng lúc.	Định dạng trực tiếp trong thuộc tính style của phần tử HTML.
Cách áp dụng	Áp dụng cho nhiều phần tử bằng cách sử dụng vùng chọn.	Chỉ áp dụng cho một phần tử cụ thể.
Quản lý mã	Dễ dàng quản lý và bảo trì, tách biệt nội dung và kiểu dáng.	Khó khăn trong việc quản lý, vì mã bị phân tán.
Tái sử dụng	Có thể tái sử dụng cho nhiều phần tử khác nhau.	Không thể tái sử dụng, mỗi phần tử cần định nghĩa riêng.
Ưu tiên	Có thể có độ ưu tiên khác nhau giữa các quy tắc.	Có độ ưu tiên cao hơn so với quy tắc CSS bên ngoài.
Hiệu suất	Tối ưu hơn khi áp dụng cho nhiều phần tử, giảm kích thước tệp HTML.	Có thể làm tăng kích thước tệp HTML, vì mỗi phần tử đều có thuộc tính riêng.
Khả năng kế thừa	Các quy tắc có thể kế thừa từ phần tử cha.	Không có khả năng kế thừa.
Tính linh hoạt	Linh hoạt trong việc thay đổi và điều chỉnh kiểu dáng cho nhiều phần tử.	Ít linh hoạt, phải thay đổi từng phần tử một.
Dễ đọc	Dễ đọc hơn, mã được tổ chức rõ ràng.	Khó đọc hơn khi có nhiều thuộc tính trong cùng một thẻ.

Câu 3:

Tiêu chí	Vùng chọn kiểu (Pseudo-Class)	Vùng chọn giả (Pseudo-Element)
Định nghĩa	Áp dụng kiểu cho một trạng thái cụ thể của phần tử.	Áp dụng kiểu cho một phần cụ thể của phần tử.
Cách sử dụng	Được định nghĩa bằng cách thêm dấu hai chấm (:) trước tên.	Được định nghĩa bằng cách thêm dấu hai chấm đôi (::) trước tên.
Ví dụ	:hover, :active, :focus	::before, ::after, ::first-line
Mục đích	Thay đổi kiểu dáng của phần tử dựa trên trạng thái người dùng.	Tạo ra nội dung ảo hoặc định dạng một phần cụ thể của phần tử.
Tác động	Thay đổi kiểu cho toàn bộ phần tử.	Thay đổi kiểu cho một phần nội dung cụ thể của phần tử.
Khả năng kế thừa	Không kế thừa từ phần tử cha.	Có thể kế thừa các thuộc tính từ phần tử cha.
Sự phổ biến	Thường được sử dụng để tạo hiệu ứng tương tác.	Thường được sử dụng để thêm nội dung hoặc trang trí.