Chỉnh sửa CSS trên các browser bằng Media Query, không cần thông qua JavaScript

Tram Ho

Chào các bạn!

Đọc tiêu đề bài viết này chắc các bạn cũng hiểu luôn nội dung của bài viết này là sẽ viết về cái gì rồi nhỉ. Có lẽ bất kỳ ai là 1 developer sẽ không ít lần đau đầu với việc fix bug css trên các browser khác nhau nhỉ? Thực ra không chỉ các bạn chuyên về backend, thậm chí ngay cả những fontender như bọn mình chuyên về UI cũng đau đầu không kém thì có request là sẽ test trên nhiều brower đặc biệt là IE. Mặc dù IE được coi là root browser đấy nhưng về độ cùi của nó thì chắc không cần giới thiệu nhiều nữa rồi.

Nếu như trước đây khi chưa biết tới tip này, mình toàn sử dụng cách hơi cùi bắp 1 chút đó là define browser bằng js sau đó add class tương ứng với mỗi browser vào body rồi từ đó chỉnh sửa css cho từng browser.

Ví dụ như cách sử dụng đoạn js sau để define browser (hoặc cũng có thể là 1 đoạn js khác)

Tuy nhiên, cho tới thời điểm hiện tại, mình đã phát hiện ra tip khá tiện lợi và nhẹ nhàng hơn cực kỳ nhiều, có thể hỗ trợ các bạn chỉnh sửa css trên các browser thông qua media query. Và bây giờ chúng ta cùng đi vào chi tiết xem tip này bao gồm những gì nhé. Let’s go!

1. Internet Explorer

Về IE, tất nhiên, cho tới hiện tại chắc chẳng còn ai dùng các version IE6, IE7 thậm chí là IE8 nhưng việc liệt kê ra đây chắc cũng không thừa đâu nhỉ 😊

IE 6

Hoặc

IE 7

Hoặc

IE 6 and 7

Hoặc

Hoặc

IE 6, 7 and 8

IE 8

Hoặc

IE 8 Standards Mode Only

IE 8,9 and 10

IE 9 only

IE 9 and above

IE 9 and 10

IE 10 only

IE 10 and above

Hoặc

IE 11 (and above..)

Microsoft Edge

2. Firefox

Hoặc

3. Webkit

Có lẽ đa phần deloper đều quá quen thuộc với các browser được build trên nền tảng -webkit- này rồi nhỉ. Không xa lạ gì cả, đó là 2 browser ChromeSafari. Hiện tại có thêm Microsoft Edge cũng chạy trên nền tảng -webkit- luôn.

Với bản thân mình luôn code trên Chrome nên sẽ set Chrome là default, lấy Chrome làm thước đo chuẩn nên rất ít khi sử dụng các media query browser để chỉnh sửa css. Tuy nhiên, mình vẫn sẽ liệt kê ra đây cho đầy đủ.

Chrome & Safari (any version)

Chrome 29+

Safari (7.1+)

Safari (10.1+)

Trên đây gần như là tất cả những gì mình đã khám phá được về việc sử dụng media query để chỉnh sửa css trên các browser khác nhau. List này tuy chưa đủ nhưng nó cũng vô cùng dài và mình thì chưa dùng hết tất cả. Tuy nhiên đã áp dụng thành công cho IE10&11 và Firefox. Tất nhiên không thể coi là đầy đủ vì sẽ còn vô vàn cách khác nữa, nếu bạn nào biết thêm thì comment bên dưới cho mình học hỏi thêm với nhé.

Chúc các bạn áp dụng thành công!

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo