/ Góc Học Tập

Tính năng các hàm trong CSS

Các hàm trong CSS ngày cành đem đến nhiều tính năng tuyệt vời hơn. Hãy cùng Itexpress.edu.vn tìm hiểu tính năng của ngôn ngữ style sheet này.

CSS vẫn đang trên đà phát triển mạnh mẽ qua mỗi năm. Và sau đây là 8 hàm CSS siêu hay cho dân Dev.

các hàm trong CSS

8 Tính năng siêu hay của các hàm trong CSS

1. Pure CSS Tooltips

Rất nhiều website hiện vẫn đang sử dụng JavaScript để tạo tooltips, và phức tạp hơn nhiều so với CSS. Giải pháp đơn giản nhất, ta chỉ việc lồng tooltip text vào data attribute trong HTML code, ví dụ như data-tooltip="…". Với markup như vậy, bạn có thể tiếp tục hiển thị tooltip text trong hàm attr() với đoạn code sau:

Để chỉnh style của tooltip, bạn hiển nhiên cần nhiều code hơn một chút. Nếu bạn không biết phải làm gì, Hint.css là một thư viện rất hay để bạn thỏa sức vọc vạch.

2. Tận(/lạm) dụng Custom Data Attributes và hàmattr()

Hàm attr(), bên cạnh ứng dụng vào tootips, ta còn có thể xây dựng thumbnail có tittle và description để kết hợp với data attributes. Bạn chỉ cần một dòng HTML code sau:

Đến đây bạn có thể dùng hàm attr() để hiển thị tittle và description:

Lưu ý: Những thumbnail này đôi khi cũng xuất hiện sự cố truy cập.

3. CSS Counters

Đây không phải là tính năng nổi tiếng nhất của CSS, và nhiều người nghĩ rằng CSS counter không được hỗ trợ mạnh mẽ như những tính năng khác. Nhưng sự thật hoàn toàn ngược lại, với CSS Counters, bạn có thể làm được đủ thứ “màu nhiệm” trên hầu hết trình duyệt.

Thống kê: http://caniuse.com/#feat=forms

Tuy CSS counter không hợp với danh sách theo thứ tự (<ol>) cho lắm, nhưng lại hoàn hảo nếu bạn muốn đánh dấu trang hay hiển thị số dưới các đầu mục trong gallery. Bạn còn có thể đếm số đầu mục đã check, khá ấn tượng với số code ít ỏi mà bạn cần động đến (và không cần cả JavaScript).

4. Frosted Glass với CSS Filters

Với iOS 7, Apple mang đến cho chúng ta hiệu ứng “kính mờ” – với những thành tố mờ mờ ảo ảo như kính bị kết băng. Tái hiện hiệu ứng này là một việc khá rắc rối – khi chưa có CSS filter, ta chỉ có thể dùng blurred images. Ngày nay, CSS filter đã được đa số trình duyệt hỗ trợ, giúp ta vận dụng hiệu ứng này dễ dàng hơn.

Thống kê: http://caniuse.com/#feat=css-filters

5. Dùng HTML Elements làm hình Background

Thông thường, bạn sẽ chỉ định một file JPEG hoặc PNG làm hình background hay gradient. Nhưng bạn có biết rằng, với hàm element(), bạn còn có thể sử dụng <div> làm hình background? Hiện nay, hàm element() chỉ được Firefox hỗ trợ.

Thống kê: http://caniuse.com/#feat=css-element-function

6. Smarter Grids with calc()

Fluid grids rất hay, nhưng vẫn còn hạn chế. Ví dụ như, bạn không thể có gutter phía trên và dưới cùng kích thước với gutter trái phải. Hơn nữa, markup loạn tùng phèo cả lên, tùy vào việc bạn dùng grid system nào. Ngay cả riêng flexbox cũng không phải là giải pháp tối ưu, nhưng với hàmcalc() (có thể dùng làm giá trị trong CSS), grid sẽ cải thiện mạnh mẽ.

Thống kế: http://caniuse.com/#feat=calc

7. Aligning position:fixed Elements with CSS calc()

Không chỉ để dùng với grid, hàm cal() còn dùng để align các thành tố vào vị trí cố định. Ví dụ, nếu bạn có content wraper với fluid spacing sang trái và phải, và bạn muốn canh thảnh một thành tố cố định trong wrapper đó – bạn sẽ khá vất vả khi phải quyết định chọn giá trị nào cho property “phải” hoặc “trái”. Với calc(), bạn có thể kết hợp các giá trị tương đối và tuyệt đối để canh thẳng thành tố thật vừa vặn:

8. Animations với cubic-bezier()

Để tăng sự thu hút của UI trang web hay UI ứng dụng, bạn có thể sử dụng animation, và tùy chỉnh “cơ bản” sẽ rất hạn chế. Ví dụ, "linear" hay ”ease-in-out".  Thậm chí bạn còn không thể dùng animation “nhảy” bouncy được. Với hàm cubic-bezier(), bạn có thể thao túng animation đúng theo ý mình.

Có hai cách sử dụng cubic-bezier(): thấu hiểu nguyên lý chính xác của hàm, hoặc dùng cubic-bezier generator. Cách thứ hai hiển nhiên sẽ nhanh gọn hơn rồi.

Lời kết

Như vậy, với các hàm trong CSS, bạn hoàn toàn có thể giải quyết các vấn đề khó chịu (như grid “ngu”) và đồng thời có thêm sự tự do trong sáng tạo của mình.

Hơn nữa, trước môi trường trình duyệt ngày càng hoàn thiện, có lẽ đã đến lúc bạn quan tâm hơn đến kỹ năng CSS của mình.

Nguồn: techtalk