Đang load dữ liệu
content không chỉ có mỗi value là ""Thuộc tính content là thuộc tính quan trọng nhất khi bạn sử dụng những pseudo-elements như :before hay :after, nếu thiếu đi thuộc tính này thì những thuộc tính khác coi như không có tác dụng gì.
Tuy nhiên, bên cạnh cái value được sử dụng nhiều nhất là content: "" thì content còn có thể chứa nhiều kiểu value khác, mà có thể bạn cũng chưa khám phá hết. Hãy cùng liệt kê để xem content còn có bao nhiêu kiểu value nữa nhé!
data-* attribute của thẻ HTML|
1
2
3
|
Status
|
|
1
2
3
4
5
|
div {
content: attr(data-status);
}
|
Thay vì tạo ra 1 thẻ HTML mới, ta gắn thêm data-status="Pending", ở CSS sẽ lấy được giá trị 1 cách dynamic từ HTML trả về, và HTML sẽ chính là nơi để code Backend (code logic) can thiệp truyền vào dễ dàng, hãy xem thêm ví dụ dưới để để hiểu hơn:
Ở ví dụ trên có bạn sẽ thắc mắc rằng, vì sao không đưa trực tiếp đoạn text Pending vào content cho nhanh, sẽ không linh động nếu trang web của chúng ta có đa ngôn ngữ các bạn ạ! Thay vào đó, nếu sử dụng kiểu content: attr(data-*) như này sẽ giúp lấy tự động giá trị từ HTML
content là 1 image|
1
2
3
4
5
|
div:before {
content: url(image.jpg);
}
|
Hay thậm chí là content còn có thể chứa nhiều image:
|
1
2
3
4
5
|
div:before {
content: url(image.jpg) url(image.jpg);
}
|
Tuy nhiên nếu đưa vào image kiểu này thì không control được size của ảnh, không như thuộc tính
background-imageta cóbackground-positionđể canh vị trí hay làbackground-sizeđể resize kích thước ảnh. Có lẽ vì vậy mà nó ít được sử dụng.
|
1
2
3
4
5
6
7
|
div:before {
content: 'text line 1\a'
'text line 2';
white-space: pre;
}
|
Có thể bạn cần xem
CSS Framework có thật sự cần thiết như chúng ta nghĩ?
scroll-behavior[Not Cross-Browsers]Smooth scrolling là hiệu ứng khi click vào link trên menu và trang cuộn từ từ tới thành phần tương ứng.
1 ví dụ về hiệu ứng Smooth scrolling với jQuery bạn tham khảo để hiểu thêm
Đó là cách mà mình làm trước đây với rất nhiều dự án, nhưng dạo gần đây, mình khám phá ra 1 thuộc tính CSS mới đã và đang được phát triển để phổ biến hơn đến các trình duyệt đó là scroll-behavior.
Một điều lưu ý là để sử dụng thuộc tính này làm được hiệu ứng trên thì bạn phải tạo ra vùng scroll bởi 1 div bọc tất cả nội dung trang web, thay vì là sử dụng scroll mặc định của html, body.
Giả sử mình có 1 div
bọc toàn bộ nội dung trang web và thêm vào đoạn code CSS như sau:
|
1
2
3
4
5
6
7
8
|
.wrapper {
width: 100vw;
height: 100vh;
overflow: auto;
scroll-behavior: smooth;
}
|
Lúc này chỉ cần link href="#target_id_section" đến id của section tương ứng, ta có được hiệu ứng Smooth scrolling bằng CSS thuần, mà không cần đến 1 chút JS nào.
Nhưng để áp dụng được cho dự án của bạn, hãy chú ý đến vài nhược điểm sau:
Và đương nhiên là những nhược điểm trên hoàn toàn có thể khắc phục được bởi sự can thiệp của JS, bạn tìm hiểu thêm ở bài viết này
:focus-within [Not Cross-Browsers]Đây là 1 pseuso-class mới giúp chúng ra style cho thẻ parent khi focus vào children của nó. Children ở đây có thể là nhiều cấp.
Các bạn lưu ý là với :focus-within thì chỉ có thể sử dụng được khi thành phần children có trạng thái :focus thôi, hầu hết là các thành phần trong form như input, select, button. Còn lại các thẻ như div, img, p thì không có trạng thái :focus đâu nhé!
Nếu bạn muốn select thành phần parent khi
:hover(thay vì:focus) vào thành phần children, thì phần 3 của series này mình có giới thiệu về trick củapointer-eventscó thể làm được, bạn tham khảo thêm.
Bây giờ, giả sử mình muốn highlight 1 cái box khi focus vào ô input trong box đó thì với :focus-within mình đã xử lý được 1 cách dễ dàng, hãy xem demo bên dưới để hiểu rõ hơn
Cho đến thời điểm hiện tại của bài viết này thì trình duyệt IE và Edge vẫn chưa support nó, các trình duyệt phổ biến còn lại cho Desktop và Mobile hầu như là support ổn rồi.
Hi vọng mọi người sẽ tăng thêm skill CSS với 3 tips trên.
Tham khảo các phần trước tại đây:
Nguồn: Sưu tầm từ internet via Devmaster
.png "Lập trình frontend với reacjs (Full)")