Tổng quan
Những người mới tìm hiểu cũng như những người đã có kiến thức CSS cơ bản thường hiểu chưa đúng về
7 và
8. Hầu hết mọi người thường nghĩ
7 không hữu ích và
8 hữu ích hơn nhiều so với
7. Thực tế thì
7 thực sự đủ dùng và chúng ta thậm chí không cần đến
8. Vậy
7 và
8 là cái quái quỷ gì?:empty và :blank là gì?
7 là một pseudo selector. Nó cho phép bạn lựa chọn các phần tử rỗng hoặc chỉ chứa comment HTML.:empty {
/* do something here */
}
Các phần tử rỗng là các phần tử không chứa gì bên trong chúng. Nó cũng không thể chứa khoảng trắng. Chúng ta cùng xem một ví dụ về phần tử rỗng dưới đây:
Các phần tử rỗng có thể chứa các comment HTML.
8 là một dạng khác mà
7 hỗ trợ. Giống như
7,
8 sẽ lựa chọn những phần tử rỗng hoặc chỉ chứa comment HTML. Ngoài ra,
8 cho phép chúng ta chọn các phần tử có chứa các khoảng trắng bên trong phần tử.
:empty và :blank trong các tình huống thực tế
Cả
7 và
8 hữu ích khi chúng ta cần:- Style một phần tử rỗng
- Tạo trạng thái rỗng cho phần tử
Giả sử chúng ta có một phần tử
4 . Bạn sẽ chỉ style cho phần tử này khi có lỗi xảy ra.
Whoops! Something went wrong!
Ở đây, chúng ta phải style cho phần tử có class là
5. Nếu chúng ta không dùng pseudo selector
7 thì chúng ta cần phải sử dụng một class hoặc attribute để style. Điều này có vẻ hơi thừa thãi và không tối ưu.class hoặc
attribute để style. Điều này có vẻ hơi thừa thãi và không tối ưu.
Whoops! Something went wrong!
.error {
display: none;
background-color: hsl[0, 20%, 50%];
padding: 0.5em 0.75em;
}
.error[data-state="error"] {
display: block;
}
Nhưng khi chúng ta sử dụng
7 thì không cần dùng class hoặc attribute . Chúng ta có thể style trực tiếp vào class
8. Chúng ta cũng không cần thuộc tính
9class hoặc attribute . Chúng ta có thể style trực tiếp vào class
8. Chúng ta cũng không cần thuộc tính
9.error {
background-color: hsl[0, 20%, 50%];
padding: 0.5em 0.75em;
}
.error:empty {
padding: 0;
}
Dưới đây là đoạn code demo giúp bạn có thể hiểu rõ hơn. Thử xoá bỏ
Whoops! Something went wrong!
0 trong
Whoops! Something went wrong!
1 bạn sẽ thấy màu nền của phần tử rỗng này.//jsfiddle.net/8qn0ejub/
- Tạo trạng thái rỗng
Giả sử chúng ta tạo một danh sách việc cần phải làm. Trong lần đầu tiên khi xem danh sách việc cần làm có thể sẽ là một danh sách rỗng. Trạng thái khi không có việc cần làm chúng ta gọi là trạng thái rỗng .trạng thái rỗng .
Nếu chúng ta muốn tạo trạng thái rỗng cho danh sách việc cần làm, chúng ta có thể thêm một
4 phía sau
Whoops! Something went wrong!
3. Như vậy, chúng ta có thể kết hợp
7 và
Whoops! Something went wrong!
5 [adjacent sibling] hoặc
Whoops! Something went wrong!
6 [subsequent sibling] để style cho trạng thái rỗng.
- Item 1
- Item 2
- Item 3
.empty-state {
display: none;
}
ul:empty + .empty-state {
display: block;
}
Nhược điểm của :empty
7 thường được dùng trong thực tế. Tuy nhiên, nó có 2 nhược điểm sau:- Trải nghiệm phát triển kém
- Chúng ta cần xoá bỏ khoảng trắng sử dụng Javascript.
Nhược điểm đầu tiên không phải là vấn đề lớn. Tuy nhiên, nhược điểm thứ hai là không hợp lệ và thực tế thì chúng ta không cần phải dùng Javascript để xoá khoảng trắng.
- Trải nghiệm phát triển kém
Chúng ta quay lại ví dụ về danh sách công việc cần làm. Chúng ta có đoạn markup danh sách việc cần làm như sau:
- Item 1
- Item 2
- Item 3
Làm sao để chúng ta kiểm tra được các phần tử
7 ?Chúng ta sẽ thử xoá bỏ các phần tử
Whoops! Something went wrong!
9 bên trong
Whoops! Something went wrong!
3. Sau khi xoá các
Whoops! Something went wrong!
9 chúng ta được đoạn code sau:
1Chúng ta có thể nhận thấy đoạn HTML trên sẽ không kích hoạt
7 bởi vì
7 chỉ hoạt động khi phần tử không chứa khoảng trắng.Để
7 hoạt động chúng ta chỉ cần xoá bỏ khoảng trắng bên trong thẻ
Whoops! Something went wrong!
3 là xong. - Xoá bỏ khoảng trắng sử dụng Javascript
Chúng ta sẽ không cần sử dụng Javascript để xoá khoảng trắng nếu sử dụng
7. Giả định này là sai.Giả sử chúng ta có đoạn code HTML sau:
2Để trạng thái rỗng hoạt động, chúng ta cần xoá phần tử
Whoops! Something went wrong!
9 cuối cùng bên trong
Whoops! Something went wrong!
3. Nếu sử dụng Javascript chúng ta cần sử dùng hàm
Whoops! Something went wrong!
9
3 Giả sử đoạn code trên sẽ sinh ra mã HTML như sau
1thì chúng ta sẽ phải xoá bỏ toàn bộ khoảng trắng trong
Whoops! Something went wrong!
3 như đoạn code dưới đây:
5Giả sử của chúng ta ở trên đã sai vì đoạn code trên sẽ sinh ra đoạn HTML sau:
6Khả năng hỗ trợ trình duyệt của :blank và :empty
7 hỗ trợ hầu hết trên các trình duyệt trong khi
8 hỗ trợ kém hơn. Điều này là lý đó để sử dụng
7 hơn là
8.- Trình duyệt hỗ trợ `:empty`
- Trình duyệt hỗ trợ
8
Kết luận
7 và
8 cho phép chúng ta style phần tử rỗng và tạo ra trạng thái rỗng một cách dễ dàng.
8 tốt hơn
7 vì nó cung cấp trải nghiệm cho người lập trình tốt hơn. Tuy nhiên, chúng ta không thể dùng
8 vì nó hỗ trợ trình duyệt kém hơn. Do đó,
7 thường được sử dụng hơn.Nguồn tham khảo: //zellwk.com/blog/empty-and-blank/?ck_subscriber_id=228370172 //zellwk.com/blog/empty-and-blank/?ck_subscriber_id=228370172