Một số cách để hạn chế bug trên trình duyệt IE?

Xin chào mọi người, mình là một FrontEnd Developer. Vì vậy nên mình thường xuyên làm việc với các trình duyệt web (browser) và trong đó có trình duyệt IE (Internet Explorer) của Microsoft. Nhắc đến IE có lẽ đây là một nỗi ám ảnh lớn nhất của hầu hết các lập trình viên FrontEnd, vì trình duyệt này thường xuyên bị vỡ layout, không tương thích thư viện Javascript,... Nhưng dù có thế nào thì công việc của FrontEnd Developer vẫn phải làm sao cho nội dung website hiển thị tốt nhất, trải nghiệm người dùng tối ưu nhất trên IE, bởi vì vẫn có 1 số lượng không nhỏ người dùng vẫn dùng trình duyệt này (bất chấp có Chrome, FireFox,...) vì đơn giản nó vẫn là trình duyệt mặc định của hệ điều hành Windows, hệ điều hành có lượng người dùng lớn nhất thế giới. Vì vậy, trong nội dung bài viết ngắn này mình xin chia sẻ một số kinh nghiệm trong quá trình làm việc của mình với IE để hạn chế tối đa bug trên trình duyệt này, từ đó làm cho công việc fix bug trở nên đỡ vất vả hơn.

Xem xét sự tương thích các thuộc tính, phương pháp mới của CSS3

Hiện tại có rất nhiều thuộc tính, phương pháp mới của CSS giúp cho công việc dàn trang, dựng layout hay thực hiện các animation của website trở nên đơn giản hơn. Nhưng không phải các thuộc tính CSS này đều hỗ trợ trên tất cả các trình duyệt và có một phần lớn các thuộc tính lại không hỗ trợ trên trình duyệt IE, đặc biệt là các phiên bản IE cũ. Vì vậy, khi dùng các thuộc tính mới này của CSS, layout của website trên IE có thể bị vỡ hoặc một số style, animation có thể không đúng như yêu cầu. Vì vậy, tùy theo yêu cầu của dự án hoặc khách hàng mà ta xem xét thuộc tính nào có thể sử dụng được khi áp dụng. Dưới đây là một số thuộc tính CSS không được hỗ trợ trên IE hoặc chỉ hỗ trợ các phiên bản IE gần đây (có kèm link dẫn đến mô tả chức năng của từng thuộc tính).

• Appearance: không hỗ trợ trong tất cả các phiên bản trình duyệt IE.
• Backface-visibility: không hỗ trợ trong tất cả các phiên bản trình duyệt IE.
• CSS Grid Layout: bao gồm một số thuộc tính như display: flex, grid-template-columns, grid-template-rows, align-self,... chỉ hỗ trợ một phần trên IE11 với tiền tố -ms.
• Flexbox: bao gồm một số thuộc tính như display: flex, justify-content, flex-basic,... chỉ hỗ trợ từ IE10 trở lên.
• Animation: chỉ hỗ trợ IE10 trở lên.
• Resize: không hỗ trợ trong tất cả các phiên bản IE.
• Box: Chỉ hỗ trợ một số thuộc tính như box-sizing, box-shadow. Trên đây là danh sách một số các thuộc tính CSS không được hoặc được hỗ trợ giới hạn trên trình duyệt IE, còn rất nhiều thuộc tính khác nữa mọi người có thể tìm hiểu thêm ở đây.

Hạn chế sử dụng các font chữ lạ

Điều này nghe có vẻ lạ lẫm nhưng thực ra mình đã gặp nhiều lần khi làm dự án. Có những font chữ khi hiển thị trên trình duyệt IE thì không giống như trên các trình duyệt khác, đặc biệt là các font chữ tiếng Nhật. Và việc fix những lỗi liên quan đến font chữ trên IE là việc rất vất vả cũng như mất nhiều thời gian. Có những trường hợp lại phải đề nghị với khách hàng đổi font chữ khác tương tự với font chữ hiện tại đang dùng.

Đặt mình vào vị trí của BackEnd Developer

Khi thực hiện phần layout cho một chức năng nào đó trong website, bạn cần đặt mình vào vị trí của một BackEnd Developer. Điều này không có nghĩa là chúng ta cần phải nắm kiến thức chuyên sâu về một ngôn ngữ nào đó của BackEnd, mà ở đây khi thực hiện làm layout cho chức năng đó ta cần dựa vào kinh nghiệm của mình để phán đoán những phát sinh có thể xảy ra khi tiến hành ghép code giữa BackEnd và FrontEnd, ví dụ như BackEnd có thể thêm một thư viện nào đó vào và làm cấu trúc code HTML/CSS thay đổi dẫn đến việc thay đổi layout website trên IE. Từ đó đưa ra những giải pháp dự phòng trước những vấn đề phát sinh đó.

Kiếm tra các thư viện Javascript trước khi dùng

Tương tự như CSS ở trên, hiện tại cũng có rất nhiều thư viện Javascript ra đời để hỗ trợ các lập trình viên trong việc thực hiện các chức năng của website nhằm giảm bớt thời gian viết những chức năng đó bằng Javascript thuần mất nhiều thời gian và công sức, ví dụ như các thư viện Javascript vẽ biểu đồ, slider, style scrollbar, hỗ trợ markdown,.... Tuy nhiên, cũng có rất nhiều thư viện Javascript chỉ hoạt động tốt trên các trình duyệt hiện đại hoặc các trình duyệt phiên bản mới mà chưa hoạt động tốt trên IE, điều này sẽ làm phá vỡ cấu trúc website hoặc làm cho trải nghiệm người dùng không tốt. Việc debug CSS trên IE vất vả bao nhiêu thì việc debug thư viện Javascript còn vất vả hơn gấp nhiều lần, nhiều khi chỉ còn cách là gỡ bỏ thư viện đã dùng và thay thế bằng thư viện mới rất mất thời gian. Vì vậy, trước khi sử dụng các thư viện Javascript nào thì các bạn nên kiểm tra tính tương thích của nó trong các trình duyệt rồi hãy sử dụng. Trên đây là bài viết chia sẻ một số kinh nghiệm của bản thân mình khi làm việc với trình duyệt IE, mong rằng sẽ giúp ích được cho các bạn. Cảm ơn các bạn đã đọc bài viết!