CSS có sức mạnh đáng sợ hơn chúng ta nghĩ. Và món ngôn ngữ style sheet này vẫn đang trên đà phát triển mạnh mẽ qua mỗi năm, mang đến nhiều tính năng tuyệt vời cho trình duyệt.

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àm attr()

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:

Sau đây là thumbnail ví dụ với captions động hiển thị khi rơ chuột:

See the Pen Thumbnail with Animated Captions by SitePoint (@SitePoint) on CodePen.

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):

See the Pen Selection CSS Counter by Will Boyd (@lonekorean) on CodePen.

CSS cũng có thể được áp dụng với loạt số thay đổi liên tục trong list item, các items có thể được sắp xếp lại bằng cách kéo thả:

See the Pen CSS Counters drag-and-drop demonstration by SitePoint (@SitePoint) on CodePen.

Cũng giống như ví dụ trước, nên nhớ – kết quả bạn nhân được có thể vướn một số vấn đề truy cập.

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àm calc() (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:

Sau đây là ví dụ minh họa:

See the Pen Aligning “position: fixed” elements with CSS calc() by SitePoint (@SitePoint) on CodePen.

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, chỉ với 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.

(Sitepoint)

Có thể bạn chưa biết:

TUYỂN THỰC TẬP REACT NATIVE

* Trang bị kỹ năng về JS, lập trình hybrid app, sử dụng những công cụ hỗ trợ (VScode, github, sourcetree, ...)
* Thành quả mong muốn là các bạn tham gia sẽ có được kỹ năng lập trình hybrid app

Biểu mẫu đăng ký training tại đây >> http://bit.ly/2NK9YWd

TEAM MOBILE APPS - CTY DVMS