Tôi nên xem xét gì khi kết hợp khả năng tương thích trình duyệt chéo vào thiết kế của mình?

Thông thường, khi tôi xây dựng một thiết kế trang web, tôi sẽ tập trung vào một trình duyệt (Chrome) và xây dựng nó để hoàn thành trước khi mở một trình duyệt khác. Sau khi hoàn thành, tôi sẽ kiểm tra nó trong các trình duyệt khác trong khi bắt chéo ngón tay của mình và hy vọng rằng mọi thứ đều ổn.

Tôi nhận thức được các trình chuẩn hóa CSS có sẵn giúp thống nhất giữa các trình duyệt, nhưng đôi khi tôi thích không sử dụng một trình duyệt để ngăn chặn sự phình to không cần thiết.

Tôi chỉ quan tâm đến các trình duyệt mới nhất và các thiết kế hoàn hảo pixel không phải là điều cần thiết. Tôi cần lưu ý những thiết kế nào (cả trực quan và dưới mui xe) để ngăn chặn bất kỳ vấn đề đau đầu tiềm năng hoặc "hack CSS" do các vấn đề tương thích trình duyệt chéo?

Xem xét bạn chỉ nhắm mục tiêu các trình duyệt mới nhất (tại thời điểm viết Chrome 37.x, Firefox 32.x, Internet Explorer 11 sẽ bao gồm các công cụ kết xuất chính mới nhất), bạn có thể thực hiện khả năng tương thích trình duyệt khá dễ dàng và trong hầu hết các trường hợp - hack miễn phí, vì tất cả các trình duyệt được đề cập đều hỗ trợ hầu hết các thuộc tính HTML và CSS mới nhất.

Một vài câu hỏi bạn nên tự hỏi mình trước khi bắt đầu:

1.) Tôi sẽ được lợi như thế nào từ thời gian / tiền bỏ ra để làm cho trang web của tôi trông giống như trình duyệt chéo?

Nếu bạn dành nhiều giờ để tối ưu hóa trang web của mình và làm cho nó trông giống nhau trong tất cả các trình duyệt sẽ không hoàn lại trong một khoảng thời gian hợp lý, rõ ràng là bạn đang lãng phí thời gian để đạt được khả năng tương thích giữa các trình duyệt (ví dụ: có làm được không ý nghĩa / trả hết để tối ưu hóa trang web mạng nội bộ cho Chrome / Firefox, nếu thư viện bạn đang làm việc có hợp đồng 10 năm với Microsoft để chạy trên phần mềm của họ?).

2.) Điều quan trọng là nội dung trang web của tôi trông giống nhau trong tất cả các trình duyệt (pixel perfect)?

Nếu không có lý do cụ thể nào mà bạn cần một đường đứt nét để trông giống nhau trong tất cả các trình duyệt, bạn không nên bận tâm đến nó - hãy để nó cho trình duyệt hiển thị theo quy tắc kết xuất của nó. Nó sẽ không giống nhau trong mọi trình duyệt, nhưng sẽ không có người dùng thông thường nào kiểm tra xem trang web của bạn có hiển thị đường đứt nét giống nhau trong Firefox hoặc trong IE hay không. Người dùng có xu hướng sử dụng một trình duyệt để duyệt nội dung - miễn là tất cả các chức năng trang web của bạn hoạt động và trông hấp dẫn trực quan bạn là tốt để đi. Thiết kế hoàn hảo Pixel rất hiếm khi cần thiết (bạn có thể muốn đạt được chúng để thể hiện kỹ năng của mình - đặc biệt trong các trang web danh mục đầu tư của nhà phát triển cá nhân).

3.) Chức năng của trang web của tôi có thể hoạt động trong bất kỳ trình duyệt nào không?

Nhiều kỹ thuật HTML / CSS (/ JavaScript) mới nhất sẽ không hoạt động trong tất cả các trình duyệt, vì các thông số kỹ thuật HTML / CSS mới nhất vẫn chưa hoàn thành và các nhà cung cấp trình duyệt thường quyết định đưa vào các tính năng kiểm tra mà không tuân theo thông số kỹ thuật HOẶC thay đổi thông số kỹ thuật , trong khi nhà cung cấp vẫn không phát hành phiên bản mới của trình duyệt của họ. Nếu đó là trường hợp, bạn có hai lựa chọn:

• triển khai một polyfill sẽ bắt chước tính năng không được hỗ trợ mong muốn
• cung cấp một dự phòng. Dự phòng thường có chức năng hạn chế, nhưng chúng sẽ cung cấp hỗ trợ tối thiểu để trang web của bạn không bị sụp đổ khi tính năng này không được hỗ trợ (thậm chí hiển thị thông báo " Trình duyệt của bạn không hỗ trợ tính năng này " tốt hơn hiển thị trang trống).

Một vài cân nhắc khi xây dựng trang web của bạn:

• Hãy nghĩ về các trang web của bạn như các mô-đun . Khi bạn hoàn thành thiết kế cho một mô-đun (giả sử điều hướng trang web), hãy kiểm tra nó trong tất cả các trình duyệt bạn định hỗ trợ cùng một lúc. Nếu bạn thấy bất kỳ vấn đề nào, hãy cố gắng khắc phục chúng trước khi chuyển sang mô-đun tiếp theo - dễ dàng gỡ lỗi các đoạn mã nhỏ hơn so với gỡ lỗi thiết kế đã hoàn thành và không biết chính xác phần nào gây ra sự cố.
• Giữ mã của bạn ở mức tối thiểu . Nếu bạn chỉ cần hiển thị / ẩn một div, thì bạn không cần phải triển khai khung của bên thứ ba để đạt được nó ( "không đủ jQuery" ) - JavaScript đơn giản có thể làm điều đó một cách hoàn hảo.
• Tái cấu trúc sớm và tái cấu trúc thường xuyên . Bạn có thể thường nhận ra rằng bạn đã viết quá nhiều quy tắc CSS cho một cái gì đó có thể được thực hiện theo cách đơn giản hơn nhiều. Đừng ngại cấu trúc lại mã của bạn; nó sẽ làm cho cuộc sống của bạn và cuộc sống của nhà phát triển tiềm năng sẽ làm việc với mã của bạn sau này dễ dàng hơn nhiều, vì sẽ có ít mã hơn để đọc, do đó ít sai sót hơn.
• Sử dụng tiền tố nhà cung cấp . Nhiều tính năng CSS mới nhất vẫn yêu cầu tiền tố trình duyệt cụ thể để chạy ngay cả trong phiên bản mới nhất. Cung cấp tên thuộc tính có tiền tố của nhà cung cấp trước tên thuộc tính CSS thông thường để làm cho nó hoạt động trong trình duyệt mong muốn.

Đây sẽ là những cân nhắc chính của tôi để suy nghĩ trước khi bắt đầu công việc.

Một điều bạn cần lưu ý là mức độ tương thích của các yếu tố nhất định của HTML, CSS, v.v với các trình duyệt khác nhau. Các phần tử HTML5 mới hơn (và thậm chí một số bit của CSS3) không hoạt động trong một số trình duyệt, gây ra sự cố với các khu vực của thiết kế.

Bạn có thể kiểm tra điều này bằng cách tra cứu nhiều tài liệu tham khảo có thể ( Mozilla Developer Network , CSStricks , CanIUse , w3schools (xem thêm w3fools )). Chúng thường có phần tương thích trình duyệt, cho biết phần tử nào sẽ hoạt động trong đó và liệu có thể sử dụng bất kỳ giải pháp thay thế hoặc tiền tố nào để hỗ trợ khả năng tương thích hay không - ví dụ:

Mã điều kiện cũng có thể được sử dụng để thêm các thứ để làm cho nó hoạt động cho một trình duyệt cụ thể - ví dụ: để có các phiên bản 8 trở xuống của IE sử dụng HTML5shiv (để các phần tử HTML5 hoạt động):

<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></sc/>
<![endif]-->

Mặc dù làm một thứ sẽ hoạt động tốt ngay từ đầu cũng tốt.

Tôi chỉ quan tâm đến các trình duyệt mới nhất và các thiết kế hoàn hảo pixel không phải là điều cần thiết.

Sau đó, bạn có khả năng tốt để đi. Miễn là bạn xây dựng theo tiêu chuẩn, sẽ không có bất kỳ sự ngạc nhiên lớn nào trên các trình duyệt nếu bạn chỉ nhắm mục tiêu mới nhất và lớn nhất. Chỉ không phụ thuộc hoàn toàn vào bất kỳ một tính năng CSS nào chưa được hỗ trợ rộng rãi mà không có kế hoạch dự phòng.