Làm cách nào để ẩn trang html?

Các nhà phát triển mới bắt đầu từng nghĩ rằng họ có thể ẩn mã HTML của trang web bằng cách hạn chế khách truy cập, nhưng thực tế không phải vậy

Tuy nhiên,

.page-id-143 .site-header {
	display: none;
}

6 thực sự khá hữu ích để ẩn các phần mà không ảnh hưởng đến định dạng tổng thể của trang. Tất cả các phần tử lồng nhau sẽ vẫn được sử dụng. Đây không phải là trường hợp của

.page-id-143 .site-header {
	display: none;
}

5 khi tất cả các thành phần và kiểu lồng nhau bị xóa hoàn toàn.  

Phương pháp này chỉ hoạt động nếu bạn muốn duy trì khoảng cách thiết kế giống nhau nhưng muốn phần tử biến mất.  

3. Ẩn phần tử qua CSS trên một trang hoặc bài đăng cụ thể

Mặc dù bạn có thể sử dụng

.page-id-143 .site-header {
	display: none;
}

5 để ẩn các phần tử trên các trang và bài đăng trong WordPress, nhưng vẫn còn nhiều điều hơn thế nữa khi thực hiện các thay đổi đối với cấu trúc trang web tổng thể của CMS. Nếu bạn muốn làm điều đó, nhiệm vụ đầu tiên của bạn là tìm ID trang của trang được đề cập

Một khả năng là kiểm tra nó bằng các công cụ phát triển trình duyệt của bạn và xem lớp

.page-id-143 .site-header {
	display: none;
}

9 của nó

Ngoài ra, hãy di chuột qua tên của nó trong menu Trang và xem URL được hiển thị ở cuối cửa sổ trình duyệt

Ngoài ra, bạn cần có lớp HTML hoặc id của phần tử muốn ẩn trên trang đó, chẳng hạn như

document.addEventListener['contextmenu', 
     event => event.preventDefault[]
];

20. Sau đó, vấn đề chỉ đơn giản là sử dụng đúng bộ chọn

.page-id-143 .site-header {
	display: none;
}

4. Sử dụng Thuộc tính

document.addEventListener['contextmenu', 
     event => event.preventDefault[]
];

21

Một cách khác để ẩn các thành phần trên trang web của bạn thông qua CSS là thuộc tính

document.addEventListener['contextmenu', 
     event => event.preventDefault[]
];

21. Cái này cho phép bạn thao tác các thành phần trang theo nhiều cách khác nhau để ẩn chúng

• Sử dụng

  document.addEventListener['contextmenu', 
       event => event.preventDefault[]
  ];

  23 để thu nhỏ một phần tử cho đến khi nó không còn nhìn thấy được nữa.  
• Áp dụng

  document.addEventListener['contextmenu', 
       event => event.preventDefault[]
  ];

  24 để chuyển một phần tử ra khỏi màn hình

Đây là một phương pháp thực sự hữu ích vì nó di chuyển phần tử bạn muốn ẩn sang một lớp khác và không ảnh hưởng đến thiết kế ban đầu của bạn theo bất kỳ cách nào. Phần tử sẽ không kích hoạt khi tải trang, vì vậy phần tử này hoàn toàn bị ẩn và không hiển thị.  

5. Sử dụng thuộc tính

document.addEventListener['contextmenu', 
     event => event.preventDefault[]
];

25 cho bất kỳ phần tử nào

Hoặc bạn có thể muốn sử dụng thuộc tính

document.addEventListener['contextmenu', 
     event => event.preventDefault[]
];

25. Cái này có thể áp dụng cho bất kỳ phần tử nào. Nó thực sự hoạt động gần giống với

.page-id-143 .site-header {
	display: none;
}

5 nhưng thực sự có lợi ích khi hoạt động trong nhiều trường hợp hơn. Một số hệ thống quản lý nội dung không cho phép bạn thực hiện các thay đổi về phong cách [hoặc bạn phải thực hiện rất nhiều bước để hoàn thành việc đó], vì vậy thuộc tính

document.addEventListener['contextmenu', 
     event => event.preventDefault[]
];

25 cực kỳ hữu ích trong những tình huống này. Bạn sẽ sử dụng nó như thế này.  

document.addEventListener['contextmenu', 
     event => event.preventDefault[]
];

2

Tuy nhiên, nó có tất cả các nhược điểm giống như

.page-id-143 .site-header {
	display: none;
}

5. Những gì bị ẩn sẽ vẫn có thể đọc được bằng các thiết bị hỗ trợ đọc.  

6. Sử dụng

.page-id-143 .site-header {
	display: none;
}

40

Một tùy chọn khác là sử dụng thuộc tính

.page-id-143 .site-header {
	display: none;
}

40. Nó hoạt động bằng cách tạo một vùng cắt để đặt khía cạnh nào của phần tử có thể được nhìn thấy và khía cạnh nào được hiển thị vô hình. Đây là cách nó hoạt động trong thực tế

.page-id-143 .site-header {
	display: none;
}

4

Một nhược điểm ở đây là nó không tương thích ngược và chỉ hoạt động trong các trình duyệt hiện đại. Điều này có thể dẫn đến các yếu tố bạn muốn ẩn vẫn xuất hiện trong các trình duyệt cũ hơn đối với một số khách truy cập. Một cái gì đó để giữ trong tâm trí.  

7. Lớp phủ một phần tử

Tiếp tục, một điều bạn có thể muốn thử là phủ một phần tử để ẩn các khía cạnh của trang web của bạn. Với phương pháp này, theo đúng nghĩa đen, bạn đang đặt một phần tử lên trên phần tử khác để phần tử bên dưới không còn hiển thị đối với khách truy cập trang web. Miễn là phần tử được đặt ở trên cùng có cùng màu với nền trang web của bạn, nó sẽ ẩn phần tử bạn muốn che khuất một cách hiệu quả. Một cách hay để thực hiện điều này là phần tử giả

.page-id-143 .site-header {
	display: none;
}

42

.page-id-143 .site-header {
	display: none;
}

8

Tuy nhiên, nó có thể khó làm việc hơn một chút so với một số phương pháp khác được nêu chi tiết tại đây. Ngoài ra, bạn vẫn gặp sự cố thiết bị hỗ trợ đọc phần tử ẩn. Ngoài ra, trong trường hợp này, nó có thể còn khó hiểu hơn, vì nó sẽ đọc phần tử ẩn và phần tử được phủ, trông không được đẹp mắt.  

8. Sử dụng

.page-id-143 .site-header {
	display: none;
}

43

Một cách khác để ẩn phần tử bằng CSS là sử dụng thuộc tính

.page-id-143 .site-header {
	display: none;
}

44. Ở đây, về cơ bản, bạn đang xóa phần tử bạn muốn ẩn khỏi luồng HTML thông thường và đặt nó bên ngoài vùng hiển thị. Đặt định vị phần tử thành

.page-id-143 .site-header {
	display: none;
}

45 sẽ đặt nó ở một điểm cụ thể so với trình duyệt web, không liên quan đến các phần tử khác. Đây là cách sử dụng thủ thuật này để ẩn mọi thứ trên trang của bạn.  

.my-class {
	display: none;
}

2

Thao tác này sẽ chuyển phần tử đã chọn ra khỏi màn hình để phần tử đó không còn hiển thị nữa. Thông thường, nó cũng sẽ không thể đọc được đối với các thiết bị hỗ trợ.  

Ẩn các yếu tố với khả năng tiếp cận trong tâm trí

Cho đến nay, chúng ta đã thảo luận về tám cách hiệu quả khác nhau để ẩn các thành phần trên trang web của bạn bằng cách sử dụng CSS. Tuy nhiên, nhiều chiến thuật trong số này chỉ ẩn các yếu tố đối với những người sáng mắt, khiến chúng vẫn hiển thị với các thiết bị hỗ trợ như trình đọc màn hình. Như bạn có thể tưởng tượng, điều này có thể tạo ra nhiều nhầm lẫn khi một yếu tố ẩn đột nhiên được đọc to. Rất tiếc.  

Một ví dụ phổ biến về điều này xảy ra là khi mọi người chỉ cần làm cho màu văn bản khớp với màu nền của trang web. Chắc chắn, hầu hết mọi người sẽ không thể nhìn thấy nó nhưng các công nghệ hỗ trợ vẫn có thể và sẽ đọc được nội dung của nó. Nó không phải là một cái nhìn tốt. Tốt nhất, điều đó có nghĩa là nội dung bạn không muốn vẫn hiển thị với một số người dùng. Nhưng tệ nhất, nó cho biết trang web của bạn không thể truy cập được, điều này không được chấp nhận vào năm 2021.  

Nhiều phương pháp ẩn phần tử được đề cập ở trên có thể được truy cập đơn giản bằng cách sử dụng thuộc tính

.page-id-143 .site-header {
	display: none;
}

46, thuộc tính này cũng sẽ ẩn phần tử được đề cập khỏi trình đọc màn hình. ARIA là viết tắt của Accessible Rich Internet Applications và là một loạt các thuộc tính mà bạn có thể áp dụng cho trang web và ứng dụng của mình để giúp chúng sẵn sàng truy cập

.my-class {
	display: none;
}

4

Nếu trang web của bạn dựa vào hoạt ảnh để ẩn các phần tử, có thể nên tắt chúng đối với những khách truy cập không xử lý chúng tốt. Để làm điều này, bạn có thể sử dụng truy vấn phương tiện

.page-id-143 .site-header {
	display: none;
}

47. Theo cách đó, nếu khách truy cập đã tắt hoạt ảnh trong tùy chọn người dùng của họ, thì CSS này sẽ tôn trọng điều đó và bạn sẽ hỗ trợ những người bị co giật và đau nửa đầu.  

.my-class {
	display: none;
}

6

Phần kết luận

Đôi khi có những lý do chính đáng để ẩn các phần của trang web của bạn với khách truy cập. Rất may, bạn có thể dễ dàng làm như vậy thông qua đánh dấu CSS. Bằng cách sử dụng các phương pháp được mô tả ở trên, bạn có thể nhanh chóng và dễ dàng thực hiện các thay đổi mà không cần phải mã hóa lại toàn bộ trang web của mình. Và bằng cách ghi nhớ khả năng tiếp cận trong các sửa đổi của mình, bạn đang phục vụ phần lớn đối tượng tiềm năng của mình.