Css có hoạt động trên tất cả các trình duyệt không?

Sản xuất nội dung tốt

Trong phần Xác thực HTML, chúng tôi đã nói về việc sử dụng trình xác thực để đảm bảo HTML của chúng tôi tuân theo các quy tắc của ngôn ngữ. Điều đó mang lại cho chúng tôi một số đảm bảo rằng nó sẽ được hiểu theo cách tương tự bởi bất kỳ trình duyệt nào (hoặc công cụ khác như trình chỉ mục của Google) cần hoạt động với nó. Tạo mã hợp lệ chắc chắn giúp thuyết phục chúng tôi rằng trang sẽ hoạt động trong mọi trình duyệt

Có một Trình xác thực CSS tương tự sẽ đảm bảo mã CSS của bạn tuân theo các quy tắc của ngôn ngữ đó. Bạn nên đảm bảo rằng CSS bạn sản xuất cũng hợp lệ vì những lý do tương tự

Tuy nhiên, đối với CSS, tình hình có thể phức tạp hơn khi thực sự hoạt động trên các trình duyệt khác nhau…

Xử lý mặc định CSS của trình duyệt

Hãy nhớ rằng khi bạn thêm biểu định kiểu vào tài liệu của mình, bạn luôn thêm vào CSS mặc định của trình duyệt. Chúng có thể khác nhau trong các trình duyệt khác nhau. một số kiểu phần tử nhất định theo mặc định trong khi những phần tử khác thì không; . Làm việc trên các bảng định kiểu mặc định này có thể khó khăn vì khó dự đoán một trình duyệt khác sẽ làm gì

Bạn có thể sử dụng biểu định kiểu đặt lại để giúp khắc phục điều này. Đây là các bảng định kiểu được chuẩn bị sẵn để loại bỏ tất cả các giá trị mặc định do trình duyệt đặt. Ý tưởng là sau đó bạn sẽ có một điểm xuất phát nhất quán mà bạn có thể xây dựng từ đó. Bạn có thể áp dụng cả biểu định kiểu đặt lại và các tùy chỉnh của riêng mình bằng cách bao gồm hai thành phần như thế này

Ví dụ: CSS đặt lại sẽ xóa font-style: italic khỏi thành phần . Nếu bạn muốn tạo kiểu theo một cách cụ thể, bạn phải thêm lại lựa chọn kiểu đó vào CSS của riêng bạn. Điều này có thể có nghĩa là bạn sẽ phải làm việc nhiều hơn một chút (vì bạn phải thay thế các kiểu mặc định), nhưng nó mang lại sự thoải mái khi bạn biết những thay đổi kiểu nào sẽ được áp dụng và buộc bạn phải suy nghĩ về kiểu dáng của các thành phần cơ bản này, có thể là một

Kiểm tra tính tương thích của trình duyệt

Đặc biệt với CSS, có một câu hỏi lớn là liệu một trình duyệt cụ thể có hiểu được các tính năng bạn đang sử dụng hay không. CSS đã được phát triển rất tích cực trong những năm gần đây và ngay cả các trình duyệt web mới cũng không thể tạo ra tất cả các hiệu ứng được ngụ ý bởi Tham chiếu CSS

Đây không phải là vấn đề trong HTML, gần đây đã ổn định hơn một chút. Các vấn đề tương thích HTML duy nhất sẽ đến từ các phiên bản Internet Explorer cũ hơn. Đối với khóa học này, chúng tôi sẽ vui vẻ bỏ qua các phiên bản IE cũ và tiếp tục

Đối với CSS, bạn cần biết những tính năng nào bạn có thể sử dụng một cách an toàn. Các thuộc tính mà chúng tôi đã thảo luận rõ ràng trong Hướng dẫn này có thể được sử dụng phổ biến, nhưng đó chỉ là một phần nhỏ của những gì có sẵn

Đối với các thuộc tính khác, bạn nên kiểm tra thông tin về khả năng tương thích với trình duyệt của chúng. Tham chiếu CSS mà chúng tôi đang sử dụng bao gồm một số. ở cuối trang về các thuộc tính CSS là bảng khi hỗ trợ cho các tính năng khác nhau xuất hiện

Dưới đây là ảnh chụp màn hình về tính khả dụng của hai thuộc tính CSS trong các trình duyệt khác nhau. Đầu tiên là một tính năng rất cũ và được thiết lập tốt. Thứ hai hiện đang khá thử nghiệm

Trong bảng thông tin tương thích thứ hai cho biết Firefox 46 (phát hành vào tháng 4 năm 2016), Chrome 23 (phát hành tháng 11 năm 2012) và không hỗ trợ trong bất kỳ phiên bản Internet Explorer nào (kể từ ảnh chụp màn hình này)

Kết quả ở đây là thuộc tính đầu tiên (là color) có thể được sử dụng tự do và bạn biết rằng nó sẽ hoạt động. Cái thứ hai có lẽ chỉ có thể được sử dụng theo cách rất thử nghiệm (hoặc trong tình huống mà bạn không thực sự quan tâm liệu hiệu ứng có xuất hiện hay không)

Ngoài ra, hãy lưu ý trong bảng tương thích, tab thứ hai dành cho khả năng tương thích với trình duyệt di động. Chúng thường giống nhau. các trình duyệt khác nhau thêm các tính năng mới vào những thời điểm khác nhau. Trong cả hai trường hợp, phiên bản trình duyệt mà bạn “phải” hỗ trợ không rõ ràng và thường phụ thuộc vào đối tượng của bạn

Đây có thể là một khía cạnh rất khó chịu khi làm việc với CSS, nhưng không thể tránh khỏi. Khi bạn đang tìm hiểu các tính năng CSS mới, bạn không có lựa chọn nào khác ngoài việc tìm hiểu xem chúng có thực sự sử dụng được trong các trình duyệt hiện tại hay không

Trang thử nghiệm tốt

Thông tin tương thích trong tài liệu tham khảo sẽ cung cấp cho bạn thông tin mà bạn không thể tự khám phá. Chúng vẫn không thể thay thế cho việc thực sự thấy trang của bạn hoạt động trong các tình huống khác nhau

Bạn nên đảm bảo kiểm tra các trang của mình bằng các trình duyệt khác nhau và đảm bảo chúng hoạt động theo cách bạn mong đợi

• Thay đổi kích thước cửa sổ trình duyệt của bạn. không phải ai cũng có cùng kích thước màn hình và không phải ai cũng giữ trình duyệt của mình ở kích thước toàn màn hình. Thay đổi kích thước trình duyệt của bạn thành một vài kích thước khác nhau và đảm bảo rằng trang của bạn vẫn khớp với nhau và trông ổn

• Hãy thử một trình duyệt khác. nếu bạn thường sử dụng Chrome, hãy thử các trang của bạn trong Firefox và Internet Explorer. Chúng thường sẽ giống nhau, nhưng bạn có thể tìm thấy sự khác biệt về tính tương thích và CSS mặc định mà bạn cần khắc phục

• Thử một thiết bị di động. Các trang của bạn có hoạt động trên điện thoại không? . Thử trang của bạn trong một cửa sổ trình duyệt rất nhỏ trên máy tính nhìn chung sẽ cho bạn ý tưởng hay về giao diện của trang trên điện thoại, nhưng xem nhanh trên một thiết bị khác có lẽ là một ý kiến ​​hay

Một lần nữa, việc phải thực hiện những kiểm tra này có thể gây khó chịu, nhưng tính linh hoạt của web khiến việc tạo ra các trang hoạt động trong các tình huống khác nhau trở nên cần thiết

CSS có được hỗ trợ bởi tất cả các trình duyệt không?

Tại sao tệp CSS không hoạt động trong Chrome?

Trình duyệt có thể hiểu CSS không?

Trình duyệt nào hỗ trợ hầu hết tất cả các thuộc tính CSS?