5 mẹo CSS hữu ích nhưng ít người biết

Đã làm việc trong các agency về web qua nhiều năm, tôi tích lũy được cho mình một số mẹo và thủ thuật. Một số chúng đã được tôi bất giác sử dụng trong tiềm thức hàng ngày. Một số mẹo khá là thường gặp, và những số khác thì bất thường hơn, nhưng tất cả các đoạn code và ví dụ dưới đây là những thứ mà tôi đã sử dụng trên các trang web của khách hàng.

Transitions – chuyển đổi

Theo mặc định trên tất cả các trang web do chính tay xây dựng, tôi luôn thêm một CSS transition trên các liên kết và nút cho trạng thái hover state của chúng. Dù nó chỉ là để thêm hiệu ứng đẹp khi bạn di chuyển chuột, và giúp xóa đi sự thay đổi đột ngột khi bạn tương tác với một nút hoặc liên kết.

Đối với một nút, tôi rất có thể sẽ thêm quá trình chuyển đổi cho màu background như được hiển thị ở trên, còn đối với một link thì tôi đặt thuộc tính cho tất cả chuyển đổi, transition property, là (transition: all 0.2s ease-in-out). Nhờ đó mà có thể chuyển đổi màu di chuột và đường viền.

Tôi cũng không bao giờ sử dụng text-decoration: underline vì bạn không có nhiều tác động lên nó, trong khi bạn có thể sử dụng bottom border để có được một hiệu ứng đẹp hơn nhiều. Padding cho phép khoảng cách spacing tốt hơn và bạn thậm chí có thể chuyển đổi hoặc tạo hiệu ứng cho đường biên – border nếu muốn.

Background overlay

Giả sử bạn có một số text, phải được đặt hoàn toàn trên đầu hình ảnh. Nhưng hình nền quá sáng, làm cho văn bản không đọc được. Bạn có thể thêm một div khác trong đó đó để tạo ra một lớp phủ tối phía sau văn bản, tuy nhiên điều này lại không được hiệu quả lắm và việc phải thêm một div trống thì quả thực sự không cần thiết.

Thay vào đó hãy dùng Pseudo-element!

Sử dụng phần tử :before có nghĩa là chúng ta cũng có thể áp dụng nó nếu một class nào đó được thêm vào div chẳng hạn.

Hiệu ứng underline cho nhiều dòng

Đây là một trường hợp tôi được yêu cầu làm trên trang web của khách hàng. Nó cho phép khả năng có một hiệu ứng gạch chân đậm mà sẽ kéo dài trên một câu với chiều dài của câu đó, ngay cả khi là nhiều dòng.

Sticky elements

Bạn cần một element để dính vào scroll, nhưng lại không muốn sử dụng JavaScript, hoặc một plugin, hoặc chiều cao của nội dung của bạn là dynamic và có khả năng thay đổi? Hãy sử dụng position: sticky.

Điều này cực kỳ hữu ích cho tôi khi tôi phải có một sidebar dính bên cạnh một accordion element. Bởi vì việc mở và đóng của accordion, bạn sẽ phải tính toán chiều cao hoặc sử dụng một số phương pháp phức tạp khác, điều mà position: sticky có thể hoàn thành ngay lập tức. Trường hợp ngoại lệ duy nhất để nó không hoạt động là khi phần thân của element được thiết lập để overflow: hidden, và không được hỗ trợ trong IE11.

Ngăn chặn highlighting

Việc có thể chọn văn bản trên một trang web là một tính năng thông dụng, tuy nhiên đôi khi tôi thấy rằng người dùng có thể nhấp nhiều lần trên một phần tử (ví dụ: một mũi tên băng chuyền) và nó sẽ selects/highlight phần tử đó.

Để ngăn chặn điều này, bạn có thể sử dụng đoạn mã sau:

Cảm ơn bạn đã đọc bài viết này! Tôi hy vọng nó sẽ có ích cho một số người trong quá trình học tập và làm việc với CSS.

Techtalk via Dev.to