Để tăng cường bảo mật nội dung và kiểm soát trải nghiệm người dùng trên trang web, các kỹ thuật sau đây kết hợp giữa HTML, CSS và JavaScript được áp dụng một cách hiệu quả — đặc biệt phù hợp cho nền tảng có yêu cầu cao về bản quyền như trang truyện, hệ thống học trực tuyến hoặc cổng thông tin nội bộ.

Liên kết điều hướng linh hoạt

Sử dụng thuộc tính target để kiểm soát hành vi mở liên kết:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Mở trong tab mới</a>
<a href="https://example.com">Mở trong tab hiện tại</a>

Vô hiệu hóa thao tác chọn văn bản

Áp dụng CSS để ngăn người dùng bôi đen nội dung (không ảnh hưởng đến ô nhập liệu):

* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input[type="text"],
textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

Điều khiển trạng thái form

Phân biệt rõ ràng giữa hai cơ chế vô hiệu hóa:

• disabled: Vô hiệu hóa hoàn toàn — giá trị không được gửi khi submit.
• readonly: Chỉ đọc — giá trị vẫn được gửi, nhưng người dùng không thể chỉnh sửa.

Bảo vệ chống gỡ lỗi bằng JavaScript

Một giải pháp nhẹ và tương thích tốt hơn so với các phương pháp cũ:

const checkDevTools = () => {
  const threshold = 160;
  if (
    window.outerWidth - window.innerWidth > threshold ||
    window.outerHeight - window.innerHeight > threshold
  ) {
    location.reload();
  }
};

setInterval(checkDevTools, 1000);

Xử lý nội dung vượt giới hạn

Hiển thị văn bản cắt gọn theo số dòng mong muốn:

Hai dòng, ẩn phần dư:

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Một dòng, ẩn phần dư:

.clamp-1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Định dạng văn bản nâng cao

• Gạch ngang: text-decoration: line-through;
• Gạch dưới: text-decoration: underline;
• Căn giữa: text-align: center;
• Ngắt từ tự động: word-break: break-word;

Tùy chỉnh placeholder cho input

Thay đổi màu sắc gợi ý nhập liệu:

input::placeholder {
  color: #999;
  font-size: 14px;
}

Đơn vị đáp ứng và bố cục

• vw: 1% chiều rộng viewport
• vh: 1% chiều cao viewport
• flexbox: display: flex; kết hợp justify-content, align-items
• Hiệu ứng bóng: box-shadow: 0 4px 12px rgba(0,0,0,0.1);
• Bo góc: border-radius: 8px;

Chọn phần tử chính xác bằng CSS

Quy tắc đặt tên lớp CSS chuẩn

• Chỉ dùng chữ thường, dấu gạch ngang (-) làm phân cách.
• Tránh viết tắt trừ khi phổ biến: btn, nav, modal.
• Không bắt đầu bằng số: class="1col" → sai.
• Phân tách rõ ràng chức năng: header-main, card-content, footer-copyright.

Hiển thị dữ liệu an toàn trong template

Sử dụng toán tử nullish coalescing để xử lý giá trị rỗng:

<span>{{ transaction.totalAmount ?? '0' }}</span>

Hiệu ứng và tương tác

• Ẩn con trỏ: cursor: default;
• Hiện con trỏ nhấp: cursor: pointer;
• Vô hiệu hóa sự kiện chuột: pointer-events: none;
• Ẩn danh sách: list-style: none;
• Co dãn hình ảnh: object-fit: cover;