Computer >> Hướng Dẫn Máy Tính >  >> Phần Mềm >> Các Trình Duyệt

Tại Sao Hỗ Trợ Trình Duyệt Cũ Vẫn Quan Trọng: Hướng Dẫn Hiện Đại

Hỗ trợ trình duyệt cũ

Bạn không cần lo lắng nhiều về hỗ trợ trình duyệt cũ ngày nay. Chúng đã ổn kể từ khi Internet Explorer 8 "chết".

Nhưng câu hỏi còn lại: Làm sao hỗ trợ Internet Explorer 9 và trình duyệt khác? Từ đầu, bạn có nên nghĩ đến hỗ trợ IE 9 không?

Chúng ta sẽ xem vài điều cân nhắc.

Tư duy tính năng, không phải trình duyệt

Giả sử thế giới chỉ có hai tính năng và hai trình duyệt.

  1. Browser A hỗ trợ feature A nhưng không hỗ trợ feature B.
  2. Browser B hỗ trợ feature B nhưng không hỗ trợ feature A.

Có thể detect trình duyệt hỗ trợ tính năng gì và hành động từ đó.

// This is JavaScript 
if (Browser A) { // Code for A} 
if (Browser B) { // code for B}

Nhưng nếu nhiều trình duyệt hơn? Thế giới có browser C, D, E? Khó hỗ trợ tính năng cần thiết nếu bạn nghĩ về trình duyệt.

Có cách tốt hơn: Kiểm tra xem tính năng có tồn tại không. Nếu có, dùng nó. Nếu không, cung cấp fallback code.

Khối code sau chạy từ browser A đến browser Z.

// This is JavaScript 
if (feature A) { // Code if browser contains feature A} else { // Code if browser doesn't contain feature A}

Và bây giờ bạn không phải lo trình duyệt.

Quyết định dùng tính năng

Nhiều người quyết định dùng tính năng dựa trên số trình duyệt hỗ trợ. Nhưng, như đã tranh luận, trình duyệt không quan trọng.

Quan trọng là: Bạn có code fallback cho tính năng dễ dàng không? Nếu code fallback dễ dàng, hãy dùng tính năng. Nếu không code fallback dễ dàng, đừng dùng tính năng.

Quyết định trình duyệt nào hỗ trợ

Vẫn cần điểm cắt (cutoff).

Trình duyệt nào bạn hỗ trợ?

Trình duyệt nào bạn KHÔNG hỗ trợ? Nếu không muốn hỗ trợ trình duyệt, không hợp lý viết fallback code cho nó.

Câu trả lời tốt nhất: Quan sát ai dùng site của bạn. Họ dùng trình duyệt gì? Theo dõi theo đó.

Có, có outlier cố truy cập website trên IE 6. Nhưng bạn có thời gian và năng lượng viết code thêm cho trình duyệt hầu như không ai dùng?

Năng lượng bạn có tốt hơn dành chỗ khác?

Mức độ hỗ trợ

Tôi tranh luận có 4 mức hỗ trợ:

  1. mọi thứ trông và chạy giống hệt nhau mọi trình duyệt
  2. site trông giống nhau, nhưng functionality có thể khác cross-browser
  3. functionality phải giống nhau, nhưng giao diện có thể khác cross-browser
  4. cả giao diện và functionality đều có thể khác cross-browser

Bạn cung cấp mức hỗ trợ nào cho trình duyệt cũ? Tại sao?

Tóm lại

Hãy suy nghĩ:

  1. tại sao bạn cố hỗ trợ trình duyệt cũ?
  2. mức hỗ trợ nào bạn cho?
  3. có xứng đáng nguồn lực bạn dành không?

Hỗ Trợ Trình Duyệt Cũ — CSS

Có hai cách cung cấp fallback cho tính năng CSS:

  1. property fallbacks
  2. feature queries

Property fallbacks

Nếu trình duyệt không nhận ra property hoặc value tương ứng, trình duyệt sẽ bỏ qua property hoàn toàn.

Khi đó, trình duyệt dùng — hoặc fallback — về value trước đó tìm thấy.

Đây là cách dễ nhất cung cấp fallback.

Ví dụ:

.layout { display: block; display: grid; }

Trong ví dụ, browser hỗ trợ CSS Grid dùng display: grid. Browser không hỗ trợ CSS Grid fallback về display: block.

Bỏ qua giá trị mặc định

Nếu element bạn dùng mặc định display: block, bạn có thể bỏ khai báo display: block. Nghĩa là hỗ trợ CSS Grid chỉ một dòng code:

.layout { display: grid; }

Browser hỗ trợ CSS Grid đọc được property CSS khác như grid-template-columns. Browser không hỗ trợ thì không.

Điều này nghĩa là bạn viết thêm CSS Grid property mà không lo fallback value.

.layout { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 1em; }

Feature queries, hoặc @supports, cho biết CSS property hoặc value tương ứng có được browser hỗ trợ không.

Bạn có thể nghĩ CSS feature queries như câu lệnh if/else trong JavaScript. Chúng trông như:

@supports (property: value) { /* Code when property or value is supported*/} 
@supports not (property: value) { /* Code when property or value is not supported */}

@supports hữu ích nếu muốn browser đọc CSS chỉ khi hỗ trợ property cụ thể.

Cho ví dụ CSS Grid trên, bạn làm:

@supports (display: grid) { .layout { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 1em; padding-left: 1em; padding-right: 1em; }}

Trong ví dụ, padding-left và padding-right chỉ được đọc bởi browser hỗ trợ cả @supports và CSS Grid.

Jen Simmons có ví dụ @supports hay hơn. Bà dùng feature queries detect browser có hỗ trợ property như -webkit-initial-letter không.

@supports (initial-letter: 4) or (-webkit-initial-letter: 4) { p::first-letter { -webkit-initial-letter: 4; initial-letter: 4; color: #FE742F; font-weight: bold; margin-right: 0.5em; }}

Tại Sao Hỗ Trợ Trình Duyệt Cũ Vẫn Quan Trọng: Hướng Dẫn Hiện Đại

Ví dụ Jen đưa ra câu hỏi: Site có nên trông giống nhau cross-browser? Sẽ xem sau. Nhưng trước, thêm về feature queries.

Hỗ trợ feature queries

Feature queries có support tốt. Tất cả major browser hiện tại support feature queries.

Tại Sao Hỗ Trợ Trình Duyệt Cũ Vẫn Quan Trọng: Hướng Dẫn Hiện Đại

Tính năng được hỗ trợ nhưng feature queries không?

Đây từng là phần tricky. Jen Simmons và chuyên gia khác cảnh báo. Đọc cách xử lý trong bài này.

Quan điểm tôi: Tôi không support IE 11 nữa, nên dùng feature queries như cách trên.

Dùng property fallbacks và feature queries cùng lúc

Nhìn code sau. Browser sẽ apply padding value nào?

@supports (display: grid) { .layout { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 1em; padding-left: 1em; padding-right: 1em; }} 
.layout { padding-left: 2em; padding-right: 2em; }

Câu trả lời: Tất cả browser sẽ apply 2em left và right padding.

Tại sao?

Vì padding-left: 2em và padding-right: 2em khai báo sau trong file CSS. Property khai báo sau override property khai báo trước.

Nếu muốn padding-left: 2em và padding-right: 2em chỉ apply cho browser không hỗ trợ CSS Grid, đổi thứ tự property.

.layout { padding-left: 2em; padding-right: 2em; } 
@supports (display: grid) { .layout { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 1em; padding-left: 1em; padding-right: 1em; }}

Lưu ý: Luôn practice tốt khai báo fallback code trước trong CSS vì bản chất cascading.

Điều này cũng nghĩa là, nếu dùng cả @supports và @supports not, khai báo @supports not trước. Code consistent hơn.

/* Luôn viết "@supports not" trước nếu dùng */@supports not (display: grid) { .layout { padding-left: 2em; padding-right: 2em; }} 
@supports (display: grid) { .layout { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 1em; padding-left: 1em; padding-right: 1em; }}

Bây giờ nói về site có nên trông giống nhau cross-browser.

Site có nên trông giống nhau cross-browser?

Một số tin site nên trông giống nhau cross-browser. Tin branding quan trọng, nhấn mạnh site nhất quán để bảo toàn brand.

Người khác nói không. Tin nên embrace tinh thần progressive enhancement. Có thể cho user browser tốt trải nghiệm tốt hơn.

Cả hai quan điểm đúng, nhưng từ góc độ khác.

Góc độ quan trọng nhất từ user. Site có cung cấp được user thứ họ đến tìm không?

Nếu có, không cần quá cứng nhắc consistency. Tiến lên và cho user browser tốt trải nghiệm thậm chí tốt hơn!

Tóm lại

Để hỗ trợ tính năng CSS, bạn dùng:

  1. Property fallbacks
  2. Feature queries

Khi viết CSS, đảm bảo khai báo fallback code trước trước code khác cho browser support tốt hơn.

Hỗ Trợ Trình Duyệt Cũ — JavaScript

Dễ dàng cung cấp JavaScript support cho trình duyệt cũ. Hầu hết thời gian chỉ cần dùng polyfill.

Nhưng có thêm điều bạn làm được.

Polyfill là gì?

Polyfill là đoạn code nói cho trình duyệt cách implement JavaScript feature. Khi thêm polyfill, không cần lo support nữa. Nó chạy.

Cách Polyfill hoạt động:

  1. check xem feature có supported không
  2. nếu không, thêm code support feature

Ví dụ polyfill hoạt động. Check browser có hỗ trợ Array.prototype.find. Nếu không, nói cho browser cách hỗ trợ.

Tìm code này trên MDN.

if (!Array.prototype.find) { Object.defineProperty(Array.prototype, 'find', { value: function(predicate) { // 1. Let O be ? ToObject(this value). if (this == null) { throw new TypeError('"this" is null or not defined'); } 
var o = Object(this); 
// 2. Let len be ? ToLength(? Get(O, "length")). var len = o.length >>> 0; 
// 3. If IsCallable(predicate) is false, throw a TypeError exception. if (typeof predicate !== 'function') { throw new TypeError('predicate must be a function'); } 
// 4. If thisArg was supplied, let T be thisArg; else let T be undefined. var thisArg = arguments[1]; 
// 5. Let k be 0. var k = 0; 
// 6. Repeat, while k < len while (k < len) { // a. Let Pk be ! ToString(k). // b. Let kValue be ? Get(O, Pk). // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)). // d. If testResult is true, return kValue. var kValue = o[k]; if (predicate.call(thisArg, kValue, k, o)) { return kValue; } // e. Increase k by 1. k++; } 
// 7. Return undefined. return undefined; }, configurable: true, writable: true });}

Lưu ý: Polyfill là tập hợp con của shim. Shim là thư viện mang API mới đến môi trường cũ.

Dùng polyfill

Có hai cách dùng polyfill:

  1. polyfill thủ công, như ví dụ trên
  2. thêm nhiều polyfill cùng lúc qua thư viện

Polyfill thủ công

Đầu tiên, tìm polyfill bạn cần. Google quanh có thể tìm thấy. Developer thông minh đã tạo polyfill cho hầu hết thứ bạn cần.

Khi tìm thấy polyfill, dùng quy trình trên cung cấp support cho trình duyệt cũ.

Thêm nhiều polyfill cùng lúc

Một số thư viện chứa nhiều polyfill. ES6-shim là ví dụ. Nó cung cấp support tất cả ES6 feature trên trình duyệt cũ.

Dùng tính năng JavaScript tiên phong

Nếu muốn dùng cutting-edge JS feature, cân nhắc thêm Babel vào build process.

Babel là tool compile JavaScript. Trong quá trình compile, nó có thể:

  1. thêm shim/polyfill bạn cần
  2. compile preprocessor thành JavaScript

Thêm về điểm 2:

Babel chạy offline trong build process. Đọc file bạn pass vào, convert thành JavaScript browser đọc được.

Điều này nghĩa là bạn dùng cutting-edge feature như Flow, TypeScript, và công nghệ cool khác. Chúng chạy trên browser, miễn pass qua Babel trước!

Polyfill không đủ thì sao?

Nếu polyfill không đủ support feature, bạn muốn xem lại mức support cho browser đó.

Cần cung cấp cùng functionality cross-browser? Cân nhắc progressive enhancement.

Có thể code cách không dùng feature?

Nhiều maybe, nhưng bạn hiểu ý.

Làm sao biết browser hỗ trợ feature?

Đầu tiên, check caniuse.com. Viết tên JS feature muốn, thấy browser support level.

Ví dụ với Abort Controller

Tại Sao Hỗ Trợ Trình Duyệt Cũ Vẫn Quan Trọng: Hướng Dẫn Hiện Đại

Nếu caniuse.com không cho info, check MDN. Browser support ở cuối hầu hết bài.

Ví dụ Abort Controller lại:

Tại Sao Hỗ Trợ Trình Duyệt Cũ Vẫn Quan Trọng: Hướng Dẫn Hiện Đại

Cảnh giác chi phí JavaScript

Khi dùng polyfill bạn thêm JS code.

Vấn đề thêm JS: có nhiều JS hơn. Với nhiều JS đến nhiều vấn đề:

  1. trình duyệt cũ thường ở máy tính cũ. Có thể không đủ processing power.
  2. JS bundle delay site load. Xem thêm "The cost of JavaScript" by Addy Osmani

Tóm lại

Dễ dàng thêm support JS feature. Hầu hết thời gian, thêm polyfill xong. Nhưng nhận thức chi phí JavaScript khi làm!

Đôi khi, tốt hơn bỏ feature hoàn toàn.

Tại sao support trình duyệt cũ?

Tại sao phải quan tâm browser cũ?

Ai dùng browser cũ? Có lẽ user máy cũ?

Nếu dùng máy cũ, có lẽ không tiền mua máy mới.

Nếu không tiền mua máy mới, có lẽ không mua gì từ bạn.

Nếu không mua từ bạn, tại sao phải care support browser của họ?

Đối với business person, suy nghĩ đó hoàn toàn hợp lý. Nhưng tại sao developer vẫn kiên持 support trình duyệt cũ?

Hãy phân tích

Nhiều layer giả định trên suy nghĩ gốc.

"Ai dùng browser cũ? Có lẽ user máy cũ? Nếu dùng máy cũ, có lẽ không tiền mua máy mới".

Mặc dù đúng người dùng browser cũ vì máy cũ, không thể giả định họ không mua máy mới được.

  • Có lẽ công ty họ không mua cho.
  • Có lẽ họ hài lòng máy, không muốn upgrade.
  • Có lẽ không có kiến thức upgrade máy.
  • Có lẽ không tiếp cận máy mới.
  • Có lẽ bị bó buộc điện thoại không có browser tốt.

Đừng giả định.

Nếu không tiền mua máy mới, có lẽ không mua từ bạn. Nếu không mua từ bạn, tại sao care support browser?

Phải zoom out sang lĩnh vực khác nói điểm này.

Truy cập xe lăn (Wheelchair accessibility)

Nếu đến Singapore, nhận ramp hoặc thang máy bên cạnh hầu như mọi cầu thang.

Tại sao? Tại sao chính phủ và công ty private chi tiền thang máy và ramp? Tại sao xây khi cầu thang đủ đưa người từ thấp lên cao?

Rời ra有些人 không dùng cầu thang được. Không đi được. Phải ngồi xe lăn, không thể tự đẩy lên cầu thang. Thang máy và ramp phục vụ họ.

Và ra những người khác cũng hưởng lợi từ thang máy và ramp.

  1. Người gối yếu.
  2. Người mang xe đạp hoặc xe đẩy.
  3. Cha mẹ đẩy xe con.

Nếu thấy mình đẩy bất cứ thứ có bánh xe, bạn dùng ramp hoặc thang máy không suy nghĩ. Bạn cũng hưởng lợi.

Nhưng vấn đề: Không ai kiếm tiền từ vận hành ramp hoặc thang máy? Vậy tại sao xây?

Vì nó worth it (xứng đáng).

Và worth không luôn nghĩa là tiền.

Cân nhắc biến đổi khí hậu

Bạn sống trên Trái Đất. Cảm thấy sao về biến đổi khí hậu?

Một số không care. Rừng cháy ok. Công ty ô nhiễm sông và thải吨 CO2 ok. Không ảnh hưởng họ.

Nhưng có nhóm care. Yêu hành tinh. Muốn cho con cái nơi sống tốt hơn. Nhiều lý do care. Và có lẽ muốn tiết kiệm tài nguyên max.

Bạn đứng đâu?

Bạn cho tiền công ty phá hủy trái đất khi vận hành?

Có lẽ bạn cho. Có lẽ không. Có lẽ không care. Ba option đều valid.

Và lại thấy, không phải lúc nào cũng về tiền.

Web là cho mọi người

Giấc mơ وراء Web: không gian thông tin chung giao tiếp bằng chia sẻ thông tin.

— Tim Berners-Lee

Chúng ta frontend developer là người gác lại web. Web ra sao tùy chúng ta. Không ép mọi người xây ramp và thang máy, nhưng chúng ta tự xây cho mình.

Lựa chọn ở bạn, thực sự.

Bạn không phải care nếu không muốn.

Hầu hết frontend developer giỏi tôi biết? Họ care. Chọn inclusive. Đó là điều làm chúng ta thành frontend developer.

Chúng ta care.

Nhưng đôi khi cũng có constraint và limit. Và làm việc với limit đó.

Bài này đăng gốc tại blog tôi.
Đăng ký newsletter nếu muốn bài giúp bạn thành frontend developer tốt hơn.

Học lập trình miễn phí. Chương trình mở của freeCodeCamp đã giúp hơn 40.000 người có việc làm lập trình viên. Bắt đầu ngay