Kiểm tra đường đẫn với CSS3
Thứ 4, 11:19 PM Ngày 26/05/2010, số lần xem 362, Lập trình web
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.
