Hướng dẫn what is blank html? - Html trống là gì?

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ử

- Style một phần tử rỗng

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.

https://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:

1

Chú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

1

thì 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:

5

Giả sử của chúng ta ở trên đã sai vì đoạn code trên sẽ sinh ra đoạn HTML sau:

6

Khả 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: https://zellwk.com/blog/empty-and-blank/?ck_subscriber_id=228370172 https://zellwk.com/blog/empty-and-blank/?ck_subscriber_id=228370172