Thủ thuật CSS hữu ích dành cho lập trình viên Front End

Nếu hiện tại bạn đang là lập trình viên Front End thì chắc hẳn đã có nhiều lần bạn từng cố gắng tìm hiểu về cách viết CSS sao cho nó hoạt động một cách tốt nhất và nhanh nhất. Trong bài viết dưới đây, Tự Học Lập Trình sẽ tổng hợp một số thủ thuật CSS hữu ích dành riêng cho bạn, hãy xem qua và bỏ túi cho mình những mẹo nhỏ này nhé!

Tắt animation trên web

Có rất nhiều lập trình viên thường than rằng máy tính của mình hoạt động chậm và muốn tắt animation trên web đi, nhưng lại không biết nên làm như thế nào cho thuận lợi. Đối với các hệ điều hành dành cho cả desktop và mobile hiện nay, các nhà phát triển đều đang hoàn thiện và cung cấp đến người dùng tính năng để tắt đi bớt hiệu ứng (motion, animation). Hưởng ứng theo phong trào này, các trình duyệt cũng đã xây dựng và phát hành đến cộng đồng phát triển web một media query có tên là prefers-reduced-motion.

Trong thực tế sẽ có những trang web khách hàng yêu cầu phải có thêm nhiều hiệu ứng và điều này đang làm tốn RAM khiến cho máy tính của bạn có cảm giác đang hoạt động chậm hơn, trải nghiệm trên trang web lúc đấy không còn được mượt mà, hoặc đôi khi là bị giật nếu máy có cấu hình hơi yếu. Để khắc phục những điều này, bạn có thể sử dụng prefers-reduced-motion.

Tuy chưa được phổ biến ở tất cả các trình duyệt mà chúng ta thường phục vụ, trong đó có cả IE, nhưng vì đây là tính năng hoạt động theo kiểu enhancement, tức là nếu có được thêm một trình duyệt nào đáp ứng thì càng tốt chừng đó. Vì nó không gây ảnh hưởng trực tiếp đến trải nghiệm của người dùng, nên nếu trình duyệt không hỗ trợ thì cũng không có gì đáng lo ngại.

Thủ thuật CSS gạch chân

Có đôi khi dùng CSS, chúng ta lại muốn gạch chân với một đường chấm chấm đẹp hoặc đứt nét thay vì một đường liền mặc định. Nhưng vì không có tùy chọn nào cho điều đó nên chúng ta thường sử dụng border-bottom để giải quyết điều này. Nhưng border-bottom không phải là một giải pháp tốt nhất nếu muốn gạch chân cho các đoạn text thật vừa vặn.

CSS3 ra đời đã cung cấp đến người dùng không chỉ một mà là ba thuộc tính mới cho việc trang trí văn bản, bao gồm text-decoration-color, text-decoration-line và text-decoration-style. Bạn có thể sử dụng chúng để tạo kiểu underline, overline, thậm chí là làm cho văn bản động, nhấp nháy hay còn nhiều hơn thế nữa.

Tuy nhiên, 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 và sử dụng nó trên Chrome.

Tạo văn bản bao quanh các khối

Nếu bạn muốn văn bản hiển thị lên trang web của mình có độ cong độc đáo trên một số hình ảnh xuất hiện ở bên cạnh nó, hãy sử dụng CSS Shapes. Để triển khai các hình dạng CSS, chúng ta có thể sử dụng ba thuộc tính hình là shape-outside, shape-margin và shape-image-threshold.

Kể từ tháng 4 năm 2015, CSS Shapes được hỗ trợ bởi các trình duyệt WebKit.

Đánh số đề mục và phân nhóm bằng CSS

Giả sử bạn có một bộ tiêu đề cùng với tiêu đề phụ trong tài liệu của mình và đang đánh số chúng theo cách thủ công thông thường hoặc thông qua một tập lệnh. Điều này quả là một sự bất tiện và tốn của bạn khá nhiều thời gian. Để khắc phục, bạn có thể sử dụng bộ đếm CSS, nó giúp bạn giải quyết mọi thứ nhanh chóng và dễ dàng hơn.