Tăng cường tiến bộ là gì?
Nâng cao lũy tiến là một kỹ thuật giúp đảm bảo phần mềm của bạn mạnh mẽ và có thể truy cập được. Bằng cách làm theo nó, bạn có thể đảm bảo càng nhiều người càng tốt sẽ có thể sử dụng trang web hoặc ứng dụng của bạn.
Bắt đầu với một phiên bản khả thi tối thiểu của thiết kế web của bạn và đảm bảo nó hoạt động khi cần thiết. Sau đó, tạo lớp chức năng và kiểu dáng bổ sung để các trình duyệt có khả năng cao hơn có thể hưởng lợi.
Mục Lục
Làm thế nào để tăng cường lũy tiến hoạt động?
Do tính chất cực kỳ phân tán của nó, web luôn cần hỗ trợ rất nhiều loại thiết bị. Từ máy tính cơ bản của những năm 1970 đến máy tính để bàn, máy tính bảng và TV hiện đại, các trang web đã đi một chặng đường dài.
Trọng tâm của mọi thứ là HTML. Vì nó là một ngôn ngữ “dễ tha thứ”, các trình duyệt sẽ hiển thị HTML cũng như chúng hiểu nó. Thông thường, họ sẽ bỏ qua bất cứ điều gì họ không hỗ trợ.
Điều này có thể hữu ích từ quan điểm của nhà phát triển, nhưng nó có thể gây ra vấn đề cho người đọc. Nếu trang web của bạn hiển thị một trang trống khi JavaScript không thể chạy, người dùng có rất ít sự lựa chọn ngoài việc từ bỏ nó. Tính năng nâng cao lũy tiến khuyến khích bạn cung cấp nội dung cốt lõi cho tất cả những ai có thể truy cập nội dung đó, sau đó nâng cao nội dung đó bằng cách sử dụng các công nghệ thích hợp, chẳng hạn như CSS và JavaScript.
Một cách tiếp cận tiến bộ để tạo kiểu
CSS là ngôn ngữ biểu định kiểu của web mà bạn có thể sử dụng để tùy chỉnh màu sắc, phông chữ, bố cục và nhiều khía cạnh trực quan khác trên trang của mình. Bạn có thể sử dụng nó để cải thiện giao diện mặc định cho nội dung của mình, nhưng điều đó không có nghĩa là bạn không nên cấu trúc đúng nội dung của mình ngay từ đầu.
Lấy một thanh menu làm ví dụ; bạn có thể cấu trúc nó như thế này:
<nav>
<a href="/register">register</a>
<a href="/login">log in</a>
<a href="/about">about us</a>
<a href="/contact">contact</a>
</nav>
Để hiển thị một menu ngang, với mỗi liên kết trông hơi giống một nút, bạn có thể tạo kiểu cho nó bằng CSS sau:
nav a {
text-decoration: none;
display: inline-block;
padding: 0.5em 1em;
border: 1px solid;
border-radius: 8px;
margin-right: 1em;
}
Khi trình duyệt hiển thị đầy đủ điều này, nó sẽ giống như sau:
Tuy nhiên, nếu không có CSS, menu sẽ hiển thị như sau:
Lưu ý rằng nó trông không giống một menu và nó không dễ sử dụng vì các liên kết hợp nhất thành một.
Bạn có thể sử dụng một cấu trúc thay thế để làm cho thiết kế mạnh mẽ hơn:
<nav>
<ul>
<li><a href="/register">register</a></li>
<li><a href="/login">log in</a></li>
<li><a href="/about">about us</a></li>
<li><a href="/contact">contact</a></li>
</ul>
</nav>
Vì đánh dấu này sử dụng một phần tử danh sách không có thứ tự, nên nó có thể sử dụng được nhiều hơn khi không có CSS:
Lưu ý rằng việc quét nhanh và hiểu các liên kết này dễ dàng hơn bao nhiêu, ngay cả với kiểu dáng mặc định của trình duyệt. Cách tiếp cận này sẽ yêu cầu bạn thêm một chút CSS để ghi đè lên các kiểu danh sách mặc định:
nav li { display: inline; }
Mặc dù cấu trúc và kiểu dáng cuối cùng phức tạp hơn và hầu hết người dùng sẽ bật CSS, nhưng cách tiếp cận này mạnh mẽ hơn. Nó sẽ thân thiện hơn với người dùng trình đọc màn hình và trình duyệt dựa trên thiết bị đầu cuối.
Giới thiệu chức năng dần dần
Nâng cao dần dần là quan trọng nhất khi nói đến chức năng của một trang web hoặc ứng dụng. Nguyên tắc nói rằng, dù thế nào đi chăng nữa, trang web của bạn phải hoạt động tốt nhất có thể.
Trong thực tế, điều này thường áp dụng cho JavaScript. Nếu bạn giới thiệu hành vi phía máy khách, nó sẽ tạo lớp chức năng trên trang web hoặc ứng dụng đã hoạt động mà không có nó.
Một trường hợp rất phổ biến là xử lý sự kiện. Hãy tưởng tượng một trang tải nội dung bổ sung theo yêu cầu. Đây có thể là thao tác cuộn vô hạn thủ công, nhúng nhận xét hoặc tương tự.
<body>
<!-- ... -->
<button onclick="load_more();">
Load More
</button>
<!-- ... -->
</body>
Cái nút trong một cái nhấp chuột thuộc tính chứa mã JavaScript sẽ chạy khi ai đó nhấp vào nút. Tuy nhiên, nếu không có JavaScript, nút này sẽ không làm gì cả. Người dùng sẽ không nhấp vào nút này mà không có phản hồi và không biết điều gì đang xảy ra. Một cách tiếp cận tốt hơn nhiều sử dụng tăng cường lũy tiến:
<body>
<!-- ... -->
<a id="p2" href="/page/2">Page 2</a>
<script>
function load_more() { console.log("!"); }
var link = document.getElementById("p2");
var button = document.createElement("button");
button.innerText = "Load More";
button.addEventListener("click", load_more);
document.body.insertBefore(button, link);
link.parentNode.removeChild(link);
</script>
</body>
Mã này chuyển đổi liên kết cơ bản thành một nút có trình xử lý sự kiện. Bằng cách giới thiệu sự phụ thuộc vào JavaScript bằng chính JavaScript, bạn có thể chắc chắn rằng nó sẽ hoạt động. Và có một hành vi mặc định chức năng hoạt động, dưới dạng liên kết tiêu chuẩn tới /trang 2.
Tăng cường lũy tiến có thực sự cần thiết?
Mọi người đều sử dụng trình duyệt có CSS và JavaScript, vậy tại sao phải bận tâm phục vụ cho một tình huống không phát sinh? Vâng, có một số lý do bạn nên áp dụng thực hành tốt về tăng cường lũy tiến.
- Đầu tiên, không phải tất cả những người truy cập trang web của bạn đều sử dụng trình duyệt. Một số khách truy cập sẽ là bot, chẳng hạn như trình lập chỉ mục của công cụ tìm kiếm và những người này có thể không hiểu gì về CSS hoặc JavaScript.
- Thứ hai, không phải mọi người truy cập trang web của bạn sẽ sử dụng trình duyệt có CSS và JavaScript. Một số khách truy cập có thể sử dụng trình duyệt dựa trên thiết bị đầu cuối, hiển thị văn bản thuần túy với định dạng tối thiểu. Những người khác có thể sử dụng trình đọc màn hình.
- Thứ ba, ngay cả khi một trình duyệt hỗ trợ CSS và JavaScript, mọi thứ vẫn không ổn. Liên kết bị hỏng hoặc kết nối mạng kém có thể dẫn đến thiếu tệp .css hoặc .js. Một lỗi trong JavaScript có thể khiến mã khác hoàn toàn không chạy.
- Cuối cùng, một số khách truy cập có thể chủ động quyết định tắt CSS hoặc JavaScript. Họ có thể làm như vậy vì lo ngại về quyền riêng tư hoặc vì họ đang sử dụng kết nối chậm hoặc trả tiền theo mức sử dụng.
Một tư duy tiến bộ hoạt động kỳ diệu
Trên hết, nâng cao lũy tiến khuyến khích bạn áp dụng cách tiếp cận ưu tiên nội dung. Nội dung là quan trọng nhất, vì vậy văn bản và hình ảnh của bạn phải luôn có sẵn cho mọi người, bất kể họ đang truy cập trang web của bạn.
Bằng cách mang đến cho tất cả độc giả trải nghiệm tốt nhất có thể, sau đó làm cho nó thậm chí còn tốt hơn cho những người có thể hưởng lợi, bạn có thể có được thế giới tốt nhất. Nâng cao dần dần chỉ là một thành phần quan trọng của thực hành khả năng sử dụng và khả năng tiếp cận tốt.