10 cách để ẩn các phần tử trong CSS – css cách ẩn văn bản

Craig Buckler trình bày các phương pháp CSS khác nhau có sẵn để ẩn các phần tử trên trang web, xem chúng khác nhau như thế nào và phương pháp nào tốt nhất khi nào.

Bạn đang xem : css cách ẩn văn bản

Có nhiều cách để ẩn một phần tử trong CSS, nhưng chúng khác nhau về cách chúng ảnh hưởng đến khả năng truy cập , bố cục, hoạt ảnh, hiệu suất và xử lý sự kiện.

Hoạt ảnh

Một số tùy chọn ẩn CSS là tất cả hoặc không có gì. Phần tử có thể nhìn thấy hoàn toàn hoặc hoàn toàn ẩn và không có trạng thái ở giữa. Những thứ khác, chẳng hạn như độ trong suốt, có thể có nhiều giá trị, do đó, hoạt ảnh CSS được nội suy trở nên khả thi.

Khả năng truy cập

Mỗi phương pháp được mô tả bên dưới sẽ ẩn một phần tử một cách trực quan, nhưng nó có thể ẩn hoặc không thể ẩn nội dung khỏi các công nghệ hỗ trợ. Ví dụ, một trình đọc màn hình vẫn có thể thông báo văn bản nhỏ trong suốt. Các thuộc tính CSS khác hoặc thuộc tính ARIA , chẳng hạn như aria-hidden = "true" có thể cần thiết để mô tả hành động thích hợp.

Hãy cảnh giác rằng hình ảnh động cũng có thể gây mất phương hướng, đau nửa đầu, co giật hoặc những khó chịu về thể chất khác đối với một số người. Hãy cân nhắc sử dụng truy vấn phương tiện prefers-favid-Reduce-motion để tắt các hoạt ảnh khi được chỉ định trong tùy chọn của người dùng.

Xử lý sự kiện

Ẩn sẽ ngăn các sự kiện được kích hoạt trên phần tử đó hoặc không có tác dụng – nghĩa là phần tử không hiển thị nhưng vẫn có thể được nhấp vào hoặc nhận được các tương tác khác của người dùng.

Hiệu suất

Sau khi trình duyệt tải và phân tích cú pháp mô hình đối tượng HTML và CSS, trang được hiển thị theo ba giai đoạn:

  1. Bố cục: tạo ra hình dạng và vị trí của từng phần tử
  2. Tô màu: vẽ ra các pixel cho từng phần tử
  3. Thành phần : định vị các lớp phần tử theo thứ tự thích hợp

Một hiệu ứng chỉ gây ra các thay đổi về bố cục sẽ mượt mà hơn đáng kể so với những hiệu ứng ảnh hưởng đến bố cục. Trong một số trường hợp, trình duyệt cũng có thể sử dụng tính năng tăng tốc phần cứng.

1. opacity filter: opacity ()

Thuộc tính opacity: N filter: opacity (N) có thể được chuyển một số giữa 0 và 1, hoặc tỷ lệ phần trăm từ 0% đến 100% biểu thị hoàn toàn trong suốt và hoàn toàn không trong suốt.

Xem Bút
ẩn với độ mờ: 0
bằng SitePoint ( @SitePoint )
trên CodePen .

Có một chút khác biệt thực tế giữa hai loại này trong các trình duyệt hiện đại, mặc dù filter nên được sử dụng nếu nhiều hiệu ứng được áp dụng cùng một lúc (mờ, tương phản, thang độ xám, v.v.)

Độ mờ có thể được làm động và mang lại hiệu suất tuyệt vời, nhưng hãy cảnh giác rằng phần tử hoàn toàn trong suốt vẫn còn trên trang và có thể kích hoạt các sự kiện.

Hệ mét
hiệu ứng
hỗ trợ trình duyệt
tốt, nhưng IE chỉ hỗ trợ opacity 0 đến 1
khả năng tiếp cận
nội dung không được đọc nếu 0 hoặc 0% được đặt
bố cục bị ảnh hưởng?
không
yêu cầu kết xuất
thành phần
màn biểu diễn
tốt nhất, có thể sử dụng tăng tốc phần cứng
khung hoạt hình có thể?
Vâng
sự kiện được kích hoạt khi ẩn?
Vâng

Xem Thêm  Cách sử dụng các loại đầu vào khác nhau trong Biểu mẫu HTML - các loại đầu vào khác nhau trong html

2. color Alpha Transparency

opacity ảnh hưởng đến toàn bộ phần tử, nhưng bạn cũng có thể đặt color , background-color và thuộc tính border-color riêng biệt. Việc áp dụng kênh zero alpha bằng rgba (0,0,0,0) hoặc tương tự sẽ hiển thị một mục hoàn toàn trong suốt:

Xem Bút
ẩn với alpha màu
bằng SitePoint ( @SitePoint )
trên CodePen .

Mỗi thuộc tính có thể được tạo hoạt ảnh riêng biệt để tạo ra các hiệu ứng thú vị. Lưu ý rằng không thể áp dụng độ trong suốt cho các phần tử có nền hình ảnh trừ khi chúng được tạo bằng linear-gradient hoặc tương tự.

Có thể đặt kênh alpha bằng:

  • trong suốt : hoàn toàn trong suốt (không thể thực hiện các hoạt ảnh ở giữa)
  • rgba (r, g, b, a) : red, green, blue và alpha
  • hsla (h, s, l, a) : màu sắc, độ bão hòa, độ đậm nhạt và alpha
  • #RRGGBBAA #RGBA
  • số liệu

hiệu ứng
hỗ trợ trình duyệt
tốt, nhưng IE chỉ hỗ trợ transparent rgba
khả năng tiếp cận
nội dung vẫn đọc
bố cục bị ảnh hưởng?
không
yêu cầu kết xuất
bức tranh
màn biểu diễn
tốt, nhưng không nhanh bằng opacity
khung hoạt hình có thể?
Vâng
sự kiện được kích hoạt khi ẩn?
Vâng

3. biến đổi

Thuộc tính convert có thể được sử dụng để dịch (di chuyển), chia tỷ lệ, xoay hoặc làm nghiêng một phần tử. scale (0) hoặc translate (-999px, 0px) off-screen sẽ ẩn phần tử:

Xem Bút
ẩn với biến đổi: scale (0);
bằng SitePoint ( @SitePoint )
trên CodePen .

biến đổi mang lại hiệu suất tuyệt vời và khả năng tăng tốc phần cứng vì phần tử được di chuyển hiệu quả vào một lớp riêng biệt và có thể được làm động ở dạng 2D hoặc 3D. Không gian bố cục ban đầu vẫn như cũ, nhưng sẽ không có sự kiện nào được kích hoạt bởi phần tử ẩn hoàn toàn.

Hệ mét
hiệu ứng
hỗ trợ trình duyệt
tốt
khả năng tiếp cận
nội dung vẫn đọc
bố cục bị ảnh hưởng?
không - các kích thước ban đầu vẫn còn
yêu cầu kết xuất
thành phần
màn biểu diễn
tốt nhất, có thể sử dụng tăng tốc phần cứng
khung hoạt hình có thể?
Vâng
sự kiện được kích hoạt khi ẩn?
không

4. clip-path

Thuộc tính clip-path tạo vùng cắt để xác định phần nào của phần tử có thể nhìn thấy. Việc sử dụng một giá trị như clip-path: circle (0); sẽ ẩn hoàn toàn phần tử.

Xem Bút
ẩn với clip-path
bằng SitePoint ( @SitePoint )
trên CodePen .

clip-path cung cấp phạm vi cho các hoạt ảnh thú vị, mặc dù chỉ nên dựa vào nó trong các trình duyệt hiện đại.

Hệ mét
hiệu ứng
hỗ trợ trình duyệt
chỉ các trình duyệt hiện đại
khả năng tiếp cận
nội dung vẫn được một số ứng dụng đọc
bố cục bị ảnh hưởng?
không - các kích thước ban đầu vẫn còn
yêu cầu kết xuất
sơn
màn biểu diễn
hợp lý
khung hoạt hình có thể?
vâng, trong các trình duyệt hiện đại
sự kiện được kích hoạt khi ẩn?
không

5. khả năng hiển thị

Thuộc tính ibility có thể được đặt thành display hoặc hidden để hiển thị và ẩn một phần tử:

Xem Bút
ẩn với khả năng hiển thị: ẩn
bằng SitePoint ( @SitePoint )
trên CodePen .

Khoảng trống được sử dụng bởi phần tử vẫn ở nguyên vị trí trừ khi giá trị sập được sử dụng.

Hệ mét
hiệu ứng
hỗ trợ trình duyệt
Xuất sắc
khả năng tiếp cận
nội dung không được đọc
bố cục bị ảnh hưởng?
không, trừ khi thu gọn được sử dụng
yêu cầu kết xuất
thành phần, trừ khi thu gọn được sử dụng
màn biểu diễn
tốt
khung hoạt hình có thể?
không
sự kiện được kích hoạt khi ẩn?
không

6. hiển thị

display có lẽ là phương pháp ẩn phần tử được sử dụng nhiều nhất. Giá trị none sẽ xóa phần tử một cách hiệu quả như thể nó chưa từng tồn tại trong DOM.

Xem Bút
ẩn với hiển thị: none
bằng SitePoint ( @SitePoint )
trên CodePen .

Tuy nhiên, nó có thể là thuộc tính CSS tồi tệ nhất để sử dụng trong đa số trường hợp. Nó không thể được làm động và sẽ kích hoạt một bố cục trang trừ khi phần tử được di chuyển ra khỏi luồng tài liệu bằng cách sử dụng vị trí: tuyệt đối hoặc chứa tài sản được thông qua.

display cũng bị quá tải, với các tùy chọn như block , inline , table , flexbox , lưới và hơn thế nữa. Đặt lại về giá trị chính xác sau khi display: none; có thể có vấn đề (mặc dù unset có thể hữu ích).

Hệ mét
hiệu ứng
hỗ trợ trình duyệt
Xuất sắc
khả năng tiếp cận
nội dung không được đọc
bố cục bị ảnh hưởng?
Vâng
yêu cầu kết xuất
cách trình bày
màn biểu diễn
nghèo
khung hoạt hình có thể?
không
sự kiện được kích hoạt khi ẩn?
không

7. Thuộc tính HTML hidden

Thuộc tính HTML hidden có thể được thêm vào bất kỳ phần tử nào:

  

& lt;

p

ẩn

& gt;

Nội dung ẩn

& lt; /

p

& gt;

để áp dụng kiểu mặc định của trình duyệt:

  

[< / p>

ẩn

]

{

display

:

none

;

}

Điều này có những lợi ích và khuyết điểm giống như display: none , mặc dù nó có thể hữu ích khi sử dụng hệ thống quản lý nội dung không cho phép thay đổi kiểu.

8. Vị trí tuyệt đối

Thuộc tính position cho phép một phần tử được di chuyển từ vị trí static mặc định của nó trong bố cục trang bằng cách sử dụng top , dưới cùng , trái phải < / mã> . Do đó, một phần tử tuyệt đối -positioned có thể được di chuyển ra ngoài màn hình bằng left: -999px hoặc tương tự:

Xem Bút
ẩn với vị trí: tuyệt đối
bằng SitePoint ( @SitePoint )
trên CodePen .

Hệ mét
hiệu ứng
hỗ trợ trình duyệt
xuất sắc, trừ khi sử dụng position: stick
khả năng tiếp cận
nội dung vẫn đọc
bố cục bị ảnh hưởng?
có, nếu vị trí được thay đổi
yêu cầu kết xuất
phụ thuộc
màn biểu diễn
hợp lý nếu cẩn thận
khung hoạt hình có thể?
có, trên top , bottom , left right
sự kiện được kích hoạt khi bị ẩn?
có, nhưng có thể không thể tương tác với phần tử ngoài màn hình

9. Chồng lên một phần tử khác

Một phần tử có thể được ẩn trực quan bằng cách đặt một phần tử khác lên trên cùng có cùng màu với nền. Trong ví dụ này, phần tử giả :: after được phủ lên, mặc dù có thể sử dụng bất kỳ phần tử con nào:

Xem Bút
ẩn với lớp phủ
bằng SitePoint ( @SitePoint )
trên CodePen .

Mặc dù có thể về mặt kỹ thuật, nhưng tùy chọn này yêu cầu nhiều mã hơn các tùy chọn khác.

Hệ mét
hiệu ứng
hỗ trợ trình duyệt
Xuất sắc
khả năng tiếp cận
nội dung vẫn đọc
bố cục bị ảnh hưởng?
không, nếu được định vị tuyệt đối
yêu cầu kết xuất
sơn
màn biểu diễn
hợp lý nếu cẩn thận
khung hoạt hình có thể?
Vâng
sự kiện được kích hoạt khi ẩn?
có, khi phần tử giả hoặc phần tử con được phủ lên

10. Giảm kích thước

Có thể ẩn một phần tử bằng cách thu nhỏ kích thước của phần tử đó bằng cách sử dụng width , height , padding , border-width và / hoặc font-size . Cũng có thể cần áp dụng inherit: hidden; để đảm bảo nội dung không tràn ra ngoài.

Xem Bút
ẩn với chiều rộng hoặc chiều cao
bằng SitePoint ( @SitePoint )
trên CodePen .

Có thể có các hiệu ứng động thú vị, nhưng hiệu suất tốt hơn đáng kể với biến đổi .

Hệ mét
hiệu ứng
hỗ trợ trình duyệt
Xuất sắc
khả năng tiếp cận
nội dung vẫn đọc
bố cục bị ảnh hưởng?
Vâng
yêu cầu kết xuất
cách trình bày
màn biểu diễn
nghèo
khung hoạt hình có thể?
Vâng
sự kiện được kích hoạt khi bị ẩn?
không

Lựa chọn Ẩn

display: none đã là giải pháp ưa thích để ẩn các phần tử trong nhiều năm, nhưng nó đã được thay thế bằng các tùy chọn linh hoạt hơn, có thể thay đổi được. Nó vẫn hợp lệ, nhưng có lẽ chỉ khi bạn muốn ẩn vĩnh viễn nội dung với tất cả người dùng. convert hoặc opacity là những lựa chọn tốt hơn khi xem xét hiệu suất.

Nâng cao kỹ năng CSS của bạn lên cấp độ tiếp theo với CSS Master . Tìm hiểu kiến ​​trúc CSS, gỡ lỗi, thuộc tính tùy chỉnh, kỹ thuật bố cục và hoạt ảnh nâng cao, cách sử dụng CSS với SVG, v.v.


Xem thêm những thông tin liên quan đến chủ đề css cách ẩn văn bản

How do I hide text behind an image using CSS ?

  • Tác giả: Front End Video
  • Ngày đăng: 2017-06-04
  • Đánh giá: 4 ⭐ ( 5253 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: https://www.frontendvideo.org

    Download the example code here: http://codepen.io/frontendvideo/pen/QvOOVW

Các thủ thuật trong CSS

  • Tác giả: timtailieu.vn
  • Đánh giá: 4 ⭐ ( 2983 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các thủ thuật trong CSS - Trong bài mở đầu này chúng ta sẽ đi tìm hiểu một số khái niệm và đặc tính của CSS, mà
    chúng ta cần chú ý trong suốt quá trì...

Bảng trong CSS

  • Tác giả: comdy.vn
  • Đánh giá: 3 ⭐ ( 6782 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn này, bạn sẽ học cách tạo kiểu cho bảng trong HTML bằng CSS.

Ẩn văn bản bằng css

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 2763 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Đây là một cách: h1 { text-indent: -9999px; /* sends the text off-screen */ background-image: url(/the_img.png);…

Ẩn text thừa trên nhiều dòng với text-overflow trong CSS

  • Tác giả: duongthien.com
  • Đánh giá: 3 ⭐ ( 5785 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn cần giới hạn số ký tự hay số dòng trong đoạn văn bản để website đẹp và chuyên nghiệp hơn. Để làm điều này bạn có thể dùng thuộc tính text-overflow trong

8 thuộc tính văn bản trong CSS: hiểu rõ nó sẽ giúp bạn rất nhiều đấy

  • Tác giả: freehost.page
  • Đánh giá: 3 ⭐ ( 6867 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách sử dụng CSS để ẩn các phần tử trang web

  • Tác giả: codewatchers.com
  • Đánh giá: 3 ⭐ ( 3332 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Một trong những lý do tạo nên vẻ đẹp của trang web của chúng tôi là thiết kế đẹp và các chủ đề WordPress khác nhau giúp chúng tôi nâng cao vẻ đẹp đó. Tuy nhiên, để duy trì tính độc đáo của trang web,...

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình