Công nghệ mỗi ngày một phát triển, là một nhà thiết kế, công việc đòi hỏi bạn phải thường xuyên cập nhật các công nghệ mới nhất để ứng dụng cho sản phẩm của mình. Hôm nay, chúng ta sẻ sử dụng một tính năng độc đáo của CSS3 để kiểm tra nhanh các đường dẫn trên website.

Vấn đề

Bạn muốn nhanh chóng hoàn thành các sản phẩm web của mình. Bạn bắt đầu bằng việc viết dàn trang bằng HTML để sẵn ở đó, vì bạn chưa biết khách hàng sẻ yêu cầu mình thiết lập những thành phần nào của trang web nên bạn để trống các đường dẫn chuyển hướng trên website. Sau đây là một ví dụ nhỏ trên một phần công việc của bạn:

< ul id="nav">
   < li>< a href="">Home
   < li>< a href="">About
   < li>< a href="">Contact
   ...
< /ul>

Một thời gian sau đó, bạn tìm được khách hàng, bây giờ bạn muốn lấy bản dàn trang mà mình đã làm sẵn để tiếp tục phát triển và hoàn thiện. Bạn không nhớ được vị trí chính xác của các đường dẫn mà mình đã bỏ trống. Vậy bạn phải làm gì để có thể nhanh chóng tìm ra các đường dẫn liên kết đó? Vâng, đơn giản là bạn chỉ cần sử dụng CSS3 để kiểm tra các đường dẫn mà mình đã tạo.

CSS3 – Giải pháp cho bạn

Chỉ cần dán đoạn mã dưới đây vào cuối tập tin CSS của bạn.

/* Find all links where an href is not provided */
html body a:not([href]), html body a[href='']  { background: red !important;}

Sau đó bạn mở trang web của mình lên bằng một trong các trình duyệt có hỗ trợ CSS3, bây giờ bất kì một liên kết nào bị rỗng sẻ có nền màu đỏ. Sửa tập tin HTML của bạn theo yêu cầu của khách hàng và kiểm tra lại nhé. Khi tất cả các đường dẫn đã được điền vào, các mảng màu đỏ sẻ tự động biến mất.

Bonus: kiểm tra nâng cao

Để kiểm tra xem website của bạn có sử dụng các liên kết JavaScript hay không, bạn chỉ cần dán đoạn mã sau đây vào tập tin CSS của bạn:

/* Find all links where the href = # */
html body a[href='#'] { background: yellow !important;}

Tiếp theo, ta sẻ vô hiệu hóa chức năng đọc Javasript trên trình duyệt của bạn (mỗi trình duyệt đều có option này đi kèm theo).

Bây giờ, với bất cứ đường dẫn nào có chứa các liên kết JavaScript mà bạn quên chưa đặt cho nó một đường dẫn hợp lệ thì nó sẻ có nền màu vàng. Sau khi bạn đặt lại đường dẫn JS thì màu nền sẻ tự động biến mất.

Các biến thể

Là một di tích còn lại của trình duyệt IE6, ngày nay có rất nhiều nhà thiết kế sử dụng href="#" để biểu thị một đường dẫn rỗng, vì vậy thuộc tính :hover vẫn có thể sử dụng được. Nếu đây là trường hợp mà bạn gặp phải thì bạn sẻ có 2 lựa chọn:

1) Thay đổi thói quen sử dụng href="#" để biểu thị đường dẫn rỗng bằng href=" " và sử dụng href="#" cho các liên kết JavaScript.

2) Sử dụng CSS3.