Xem trang web không có JavaScript

Khi tôi chỉ có ít kinh nghiệm với việc mã hóa các trang web, điều tôi thích nhất là xây dựng những thứ lạ mắt bằng JavaScript. Xây dựng hoạt ảnh tuyệt vời nhưng cũng thay đổi hoặc thậm chí thao túng DOM (Mô hình đối tượng tài liệu) để thay đổi hành vi của trang web của tôi. Khi một giáo viên trong trường xem một trong những dự án của tôi, tôi đã nhận được phản hồi rằng trang web của tôi không hoạt động tốt nếu không có JavaScript và đang chặn người dùng của tôi khỏi những thứ như điều hướng qua trang web. Kể từ ngày hôm nay, tôi quyết định luôn kiểm tra trang web của mình bằng cách tắt JavaScript

According to Blockmetry in the fourth quarter of 2016 0.2% of the page views from worldwide traffic across all devices in the fourth quarter of 2016 had JavaScript disabled. They measured this looking for the

Bạn có thể tranh luận rằng 0. 2% không phải là nhiều và bạn phải mất nhiều thời gian để điều chỉnh các dự án hiện tại của mình. Đừng quên rằng 0. 2% dựa trên lưu lượng truy cập trên toàn thế giới và có thể có khả năng bạn đang xây dựng trang web cho một nhóm mục tiêu có số lượng JavaScript bị vô hiệu hóa cao hơn. Điều này có nghĩa là khi bạn đang thực hiện các dự án lớn hơn, bạn nên nghiên cứu người dùng của mình và xác định xem việc tối ưu hóa trang web của mình để hoạt động hoàn toàn mà không cần JavaScript có hợp lý hay không. Như đã nói, việc cập nhật các dự án hiện tại rất tốn thời gian, nhưng khi bạn xây dựng dự án từ đầu, bạn nên làm điều này ngay từ đầu. Biến nó thành một khuôn mẫu để viết mã với chủ đề này để không mất thêm thời gian

Bây giờ, hãy bắt đầu viết mã và thử nghiệm một chút để thực sự tìm hiểu cách xây dựng trang web không yêu cầu JavaScript

Vô hiệu hóa JavaScript cho mục đích thử nghiệm

Đó là một thói quen tốt để kiểm tra tất cả các dự án của bạn đã tắt JavaScript. Hầu hết các trình duyệt đều cho phép bạn tắt tính năng này trong bảng điều khiển dành cho nhà phát triển

Trên Mac, bạn có thể mở DevTools của Google Chrome bằng Option-Cmd-I. Chuyển đến cài đặt bằng cách nhấp vào ba vòng tròn được căn chỉnh theo chiều dọc và ở bên phải, chọn hộp kiểm có nội dung 'Tắt JavaScript'

Nếu bạn đang sử dụng một loại máy tính và/hoặc trình duyệt khác, vui lòng tìm kiếm trên internet cách mở bảng điều khiển dành cho nhà phát triển. Đồng thời đảm bảo rằng họ hỗ trợ tùy chọn tắt JavaScript. Nếu không thì sử dụng Google Chrome

Điều hướng có và không có JavaScript

Một thói quen xấu mà tôi từng mắc phải là chuyển đổi điều hướng bằng JavaScript. Người dùng đang truy cập trang web của tôi trên thiết bị di động bị tắt JavaScript không thể sử dụng menu

var menu = {
 icon: document.querySelectorAll(‘img’)[0],
 list: document.querySelectorAll(‘ul’)[0]
};if(menu.icon) {
 menu.icon.addEventListener(‘click’, toggleMenu);
}function toggleMenu() {
 if(menu.list.classList.contains(‘hide’)) {
 menu.list.classList.remove(‘hide’);
 } else {
 menu.list.classList.add(‘hide’);
 }
}

Nếu bạn muốn biết HTML và CSS trông như thế nào, vui lòng xem ví dụ về Codepen bên dưới

Ví dụ. https. // codepen. io/HomoDeus/bút/owVZva

Nói xin chào với ông. Nhãn và bà. Đầu vào

Hãy xóa tất cả JavaScript và thay thế bằng khoảng 10 dòng CSS và hai phần tử HTML, nhãn và đầu vào

Viết mã sạch cảm thấy tốt, vì vậy hãy loại bỏ. ẩn lớp khỏi phần tử điều hướng

Thêm một yếu tố đầu vào với một id. Tôi đặt tên nó là toggleMenu, vì chúng tôi muốn điều hướng của mình chuyển đổi. Dán nhãn xung quanh phần tử img và đặt thuộc tính for bằng id của phần tử. Điều này cho phép chúng tôi kích hoạt phần tử đầu vào khi nhấp vào nhãn

  Logo
  
    
  

  

Whenever the label is triggering the input field we will display the