Nếu bạn đã là một lập trình viên Front-end, có khi nào bạn cố gắng tìm kiếm giải pháp bằng các Google và chợt nhật ra: ‘Cái này CSS làm được?’. Nếu bạn chưa từng, vâng, dưới đây mình sẽ cho bạn thấy.
Mình sẽ liệt kê và đưa ra ví dụ về 15 Mẹo CSS hữu ích mà có thể bạn đã bỏ qua. Một số trong chúng được hỗ trợ hoàn toàn, trong khi một số khác thì có yêu cầu về phiên bản trình duyệt.
1. Mẹo đánh số heading và subheading
Giả sử bạn có một bộ heading và subheading trong document của mình và bạn đang đánh số chúng theo cách thủ công hoặc thông qua một tập lệnh script nào đó.
Thay vào đó, bạn có thể sử dụng bộ đếm CSS (CSS Counter) để làm điều này. Và vì nó là từ một đặc tả của CSS2, bạn có thể tin rằng nó được hỗ trợ bởi tất cả các trình duyệt, ngoại trừ IE 6.
See the Pen CSS Counter by NIIT -ICT Hà Nội (@niiticthanoi) on CodePen.
2. Mẹo Gạch chân Nâng cao
Đôi khi chúng tôi muốn gạch chân với một đường chấm chấm đẹp hoặc nét đứt thay vì một nét liền. Vì không có tùy chọn cho điều đó, chúng tôi giải quyết cho border-bottom. Nhưng border-bottom không phải là một giải pháp tốt nếu văn bản bạn đang gạch chân.
CSS3 đã chỉ định không chỉ một mà ba thuộc tính cho text-decoration là: text-decoration-color, text-decoration-line và text-decoration-style
Bạn có thể sử dụng chúng để tạo underline, overline, thậm chí làm cho văn bản nhấp nháy và hơn thế nữa.
Kể từ tháng 4 năm 2015, chỉ có Firefox hỗ trợ thuộc tính này, nhưng bạn có thể kích hoạt tính năng nền tảng web thử nghiệm của Cameron để sử dụng nó trên Chrome.
See the Pen Underline nâng cao by NIIT -ICT Hà Nội (@niiticthanoi) on CodePen.
3. Mẹo Trích dẫn một câu trích dẫn
Trước hết, không cần phải bận tâm đến việc gõ các trích dẫn chính xác cho các trích dẫn ngắn vì có HTML cho điều đó: thẻ <q> chỉ ra các trích dẫn nội tuyến.
Thẻ <q> cũng đảm nhiệm việc trích dẫn các trích dẫn bên trong bằng các trích dẫn đơn. Vậy, ở đâu ra “Cái này CSS làm được?”
Giả sử bạn không muốn mặc định nháy kép hoặc bạn có nhiều hơn một trích dẫn lồng nhau, bạn có thể xác định tùy chọn trích dẫn của mình cho phần tử trích dẫn bằng CSS bằng cách sử dụng thuộc tính trích dẫn CSS2.
See the Pen Trích dẫn bên trong trích dẫn by NIIT -ICT Hà Nội (@niiticthanoi) on CodePen.
4. Mẹo quản lý bảng cứng đầu
Bạn có thể đã bắt gặp một bảng lớn với kích thước nội dung khác nhau trên mỗi ô mà không tuân theo một chiều rộng bạn đã chỉ định, bất kể bạn cố gắng làm gì đi nữa.
Để cụ thể, sửa chữa này cần làm: table-layout: fixed;. Khi bạn chỉ định bố cục cố định cho bảng, bảng và chiều rộng ô được xác định theo chiều rộng của bảng hoặc của hàng ô đầu tiên (có thể được xác định bởi người dùng) chứ không phải theo nội dung.
Điều này được hỗ trợ bởi tất cả các trình duyệt.
See the Pen dBZoxR by NIIT -ICT Hà Nội (@niiticthanoi) on CodePen.
5. Mẹo dính phần tử theo phần tử khác
Các phần tử stick là các phần tử trên một trang sẽ không được cuộn ra khỏi chế độ xem.
Nói cách khác, nó dính vào một khu vực có thể nhìn thấy (khung nhìn hoặc hộp cuộn). Bạn có thể tạo điều này bằng CSS bằng cách sử dụng position: stick;
>>> Tham khảo: 12 Mẹo CSS Nâng cao
Chúng hoạt động như các phần tử được định vị tương đối trước khi cuộn nhưng sau đó lại giống như phần tử cố định khi cuộn.
Dưới đây là ví dụ:
See the Pen position:sticky (CSS) by NIIT -ICT Hà Nội (@niiticthanoi) on CodePen.
Còn tiếp…
