Các trình duyệt web đã tồn tại miễn là các trang web có. Trên thực tế, các trình duyệt là một thành phần thiết yếu trong trải nghiệm hoặc những người xem trang web của bạn - nhưng không phải tất cả các trình duyệt đều được tạo ra như nhau. Nó là hoàn toàn có thể (và thực sự khá có thể) để có khách hàng xem các trang web của bạn trong các trình duyệt rất cũ và thiếu các tính năng được tìm thấy trong các trình duyệt hiện đại hơn. Điều này có thể gây ra các vấn đề quan trọng khi bạn cố gắng phát triển các trang web tận dụng những tiến bộ mới nhất trong thiết kế và phát triển trang web . Nếu ai đó truy cập trang web của bạn bằng cách sử dụng một trong những trình duyệt cũ đó và các kỹ thuật nâng cao mới nhất của bạn không hoạt động đối với họ, bạn có thể phân phối trải nghiệm kém tổng thể. Tăng cường tiến bộ là một chiến lược xử lý thiết kế trang web cho các trình duyệt khác nhau, cụ thể là các trình duyệt cũ thiếu hỗ trợ hiện đại.
Tăng cường tiến bộ là một cách để thiết kế trang web sao cho các tính năng của tác nhân người dùng càng được hỗ trợ, càng có nhiều tính năng mà trang web sẽ có. Nó trái ngược với chiến lược thiết kế được gọi là suy thoái duyên dáng . Chiến lược đó xây dựng các trang cho các trình duyệt hiện đại nhất trước tiên và sau đó đảm bảo rằng chúng cũng hoạt động khá tốt với các trình duyệt ít chức năng hơn - rằng trải nghiệm "giảm xuống một cách duyên dáng". Cải tiến nâng cao bắt đầu với các trình duyệt ít có khả năng hơn trước và xây dựng trải nghiệm từ đó.
Cách sử dụng tăng cường nâng cao
Khi bạn tạo một thiết kế web bằng cách sử dụng nâng cao tiến bộ, điều đầu tiên bạn sẽ làm là tạo một thiết kế hoạt động cho mẫu số chung thấp nhất của trình duyệt web. Tại cốt lõi của nó, tăng cường tiến bộ nói rằng nội dung của bạn nên có sẵn cho tất cả các trình duyệt web, không chỉ là một tập hợp con. Đây là lý do tại sao bạn bắt đầu bằng cách hỗ trợ các trình duyệt cũ, lỗi thời và ít có khả năng này.Nếu bạn tạo một trang web hoạt động tốt đối với họ, bạn biết bạn đã tạo ra đường cơ sở nên cung cấp ít nhất một trải nghiệm có thể sử dụng cho tất cả khách truy cập.
Khi bắt đầu với các trình duyệt có khả năng nhất trước tiên, bạn sẽ muốn đảm bảo rằng tất cả các HTML của bạn phải hợp lệ và đúng ngữ nghĩa. Điều này sẽ giúp đảm bảo rằng nhiều đại lý người dùng nhất có thể xem trang và hiển thị chính xác.
Hãy nhớ rằng các kiểu thiết kế trực quan và bố cục trang tổng thể được thêm bằng cách sử dụng các bảng định kiểu bên ngoài . Đây thực sự là nơi sự tiến bộ nâng cao xảy ra. Bạn sử dụng biểu định kiểu để tạo thiết kế trang web hoạt động cho tất cả khách truy cập. Sau đó, bạn có thể thêm các kiểu bổ sung để nâng cao trang khi tác nhân người dùng có được chức năng. Mọi người đều có phong cách cơ sở, nhưng đối với bất kỳ trình duyệt tin tức nào có thể hỗ trợ các kiểu nâng cao hơn và hiện đại hơn, họ sẽ nhận được thêm một số chi tiết. Bạn "nâng cao tiến bộ" trang cho các trình duyệt có thể hỗ trợ các kiểu đó.
Có một vài cách mà bạn có thể áp dụng nâng cao tiến bộ. Trước hết, bạn nên xem xét một trình duyệt làm gì nếu nó không hiểu một dòng CSS - nó bỏ qua nó! Điều này thực sự làm việc trong lợi của bạn. Nếu bạn tạo một tập hợp kiểu cơ sở mà tất cả các trình duyệt đều hiểu, thì bạn có thể thêm các kiểu bổ sung cho các trình duyệt mới. Nếu họ hỗ trợ các phong cách, họ sẽ áp dụng chúng. Nếu không, họ sẽ bỏ qua chúng và chỉ sử dụng các kiểu đường cơ sở đó. Một ví dụ đơn giản về tăng cường tiến bộ có thể được nhìn thấy trong CSS này:
.Nội dung chính {
nền: # 999;
nền: rgba (153,153,153, 0,75);
}
Kiểu này trước tiên đặt nền cho màu xám. Quy tắc thứ hai sử dụng các giá trị màu RGBA để thiết lập mức độ trong suốt. Nếu trình duyệt hỗ trợ RGBA, trình duyệt sẽ ghi đè kiểu đầu tiên với kiểu thứ hai. Nếu không, chỉ người đầu tiên sẽ được áp dụng. Bạn đã đặt màu nền cơ bản và sau đó thêm kiểu bổ sung cho các trình duyệt hiện đại hơn.
Sử dụng truy vấn tính năng
Một cách khác bạn có thể áp dụng nâng cao tiến bộ là sử dụng những gì được gọi là "truy vấn tính năng". Đây là những tương tự như các truy vấn phương tiện truyền thông , đó là một phần thiết yếu của thiết kế trang web đáp ứng . Trong khi truy vấn phương tiện truyền thông văn bản cho các kích thước màn hình nhất định, các truy vấn tính năng sẽ kiểm tra xem một tính năng nhất định có được hỗ trợ hay không. Cú pháp bạn sẽ sử dụng là:
@supports (display: flex) {}Bất kỳ kiểu nào bạn thêm vào bên trong quy tắc này sẽ chỉ hoạt động nếu trình duyệt đó hỗ trợ "flex", đó là kiểu dành cho Flexbox. Bạn có thể đặt một bộ quy tắc cho mọi người và sau đó sử dụng các truy vấn tính năng để bổ sung thêm cho các trình duyệt được chọn.
Bài báo gốc của Jennifer Krynin. Biên tập bởi Jeremy Girard vào ngày 13/12/2016.