Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 3)

Bài đăng này đã không được cập nhật trong 3 năm

Hello mọi người, mình tiếp tục trở lại với series về thủ thuật CSS đây.

1. Enable `Show user agent shadow DOM` trong DevTools của trình duyệt để debug CSS dễ dàng hơn

Đã bao giờ bạn code CSS cho:

Input có type="range" với các pseudo như ::-webkit-slider-runnable-track, ::-webkit-slider-thumb
Input có type="text" với các pseudo như ::placeholder

mà không biết debug trên trình duyệt như thế nào?

Đơn giản là trong Settings của ChromeDevTools bạn cần enable option Show user agent shadow DOM

alt

Ở Firefox, bạn có cũng có thể enable tính năng này lên bằng cách mở 1 tab mới, gõ about:config và set devtools.inspector.showAllAnonymousContent thành true, restart lại trình duyệt rồi thưởng thức

Hình từ nguồn tham khảo

2. Remove khoảng cách thừa ở dưới image

Bình thường khi tạo ra 1 img trong HTML, nó sẽ sinh ra khoảng cách nhỏ ở dưới tấm hình đó, nếu bạn tạo wrapper cho tấm ảnh rồi CSS border cho wrapper sẽ thấy rõ. Sinh ra 1 khoảng cách như thế là không ổn chút nào với người làm Frontend. Hãy xem demo bên dưới

Cách khắc phục là luôn luôn set thuộc tính vertical-align: middle cho thẻ img

3. Những thứ hay ho bạn có thể làm với `pointer-events`

Ở phần 2 của series này, mình cũng có chia sẻ 1 tip sử dụng pointer-events: none cho button disabled. Không chỉ dừng lại ở đó, pointer-events còn có thể làm nhiều thứ thú vị hơn thế nữa.

Bạn đã từng bó tay khi trong CSS muốn selectors tới parent hay previous element. Trong sách vở thì nói rằng CSS không support selectors đấy, nhưng pointer-events có thể giúp bạn làm được

Key ở đây là: set pointer-events: none cho parent element (scope mà bạn target tới) và reset pointer-events: auto cho descendant element (element mà bạn muốn hover lên nó)

Hãy xem kết quả bên dưới:

Change style của parent element khi hover

Change style của previous element khi hover