Bạn có thể chọn từ hơn 3000 trình duyệt dành cho máy tính để bàn và thiết bị di động, bao gồm Chrome, Safari, Internet Explorer, Edge, Yandex, Opera và Firefox, cho phép bạn đảm bảo rằng khách hàng của mình có được trải nghiệm pixel hoàn hảo trên mọi kích thước màn hình, thiết bị, hệ điều hành,
Kiểm tra tất cả các trình duyệtWebStorm có thể cảnh báo bạn khi bạn sử dụng thuộc tính CSS không được trình duyệt mục tiêu hỗ trợ. Để bật chức năng này, hãy vào Tùy chọn/Cài đặt. biên tập viên. Kiểm tra và kích hoạt Kiểm tra tương thích trình duyệt
Tính năng Kiểm tra tính tương thích của trình duyệt [BCC] giúp bạn định vị các tổ hợp HTML và CSS gặp sự cố trong một số trình duyệt nhất định. Khi bạn chạy BCC trên một tệp đang mở, Dreamweaver sẽ quét tệp và báo cáo mọi sự cố kết xuất CSS tiềm ẩn trong bảng Kết quả. Xếp hạng độ tin cậy, được biểu thị bằng một phần tư, một nửa, ba phần tư hoặc vòng tròn được lấp đầy hoàn toàn, cho biết khả năng xảy ra lỗi [vòng tròn được lấp đầy một phần tư biểu thị khả năng xảy ra và vòng tròn được lấp đầy hoàn toàn biểu thị khả năng xảy ra rất cao]. Đối với mỗi lỗi tiềm ẩn mà nó tìm thấy, Dreamweaver cũng cung cấp liên kết trực tiếp đến tài liệu về lỗi trên Adobe CSS Advisor, một trang web trình bày chi tiết các lỗi kết xuất trình duyệt phổ biến và cung cấp giải pháp khắc phục chúng
Theo mặc định, tính năng BCC kiểm tra các trình duyệt sau. Firefox 1. 5; . 0 và 7. 0; . 2; . 0; . 0 và 9. 0; . 0
Tính năng này thay thế tính năng Kiểm tra trình duyệt mục tiêu cũ, nhưng vẫn giữ lại chức năng CSS của tính năng đó. Nghĩa là, tính năng BCC mới vẫn kiểm tra mã trong tài liệu của bạn để xem liệu có bất kỳ thuộc tính hoặc giá trị CSS nào không được trình duyệt mục tiêu của bạn hỗ trợ hay không
Quy tắc CSS
@supports [transform-origin: 5% 5%] {
}
0 cho phép bạn chỉ định các khai báo CSS phụ thuộc vào sự hỗ trợ của trình duyệt đối với các tính năng CSS. Sử dụng quy tắc này thường được gọi là truy vấn tính năng. Quy tắc phải được đặt ở cấp cao nhất trong mã của bạn hoặc được lồng vào bên trong bất kỳ mã nào khácTrong JavaScript, có thể truy cập
@supports [transform-origin: 5% 5%] {
}
0 thông qua giao diện mô hình đối tượng CSS @supports [transform-origin: 5% 5%] {
}
2Quy tắc tại
@supports [transform-origin: 5% 5%] {
}
0 bao gồm một khối các câu lệnh có điều kiện hỗ trợ. Điều kiện hỗ trợ là một tập hợp của một hoặc nhiều cặp tên-giá trị [e. g. , @supports [transform-origin: 5% 5%] {
}
4]@supports [] {
/* If the condition is true, use the CSS in this block. */
}
Các điều kiện có thể được kết hợp bằng liên từ [
@supports [transform-origin: 5% 5%] {
}
5], phân từ [@supports [transform-origin: 5% 5%] {
}
6], và/hoặc phủ định [@supports [transform-origin: 5% 5%] {
}
7]@supports [] and [] {
/* If both conditions are true, use the CSS in this block. */
}
Thứ tự ưu tiên của các toán tử có thể được xác định bằng dấu ngoặc đơn. Các điều kiện hỗ trợ có thể sử dụng cú pháp khai báo
@supports [transform-origin: 5% 5%] {
}
4 hoặc cú pháp @supports [transform-origin: 5% 5%] {
}
9. Các phần sau đây mô tả việc sử dụng từng loại điều kiện hỗ trợCú pháp khai báo kiểm tra xem trình duyệt có hỗ trợ khai báo
@supports [transform-origin: 5% 5%] {
}
4 đã chỉ định không. Khai báo phải được bao quanh bởi dấu ngoặc đơn. Ví dụ sau trả về true và áp dụng kiểu CSS nếu trình duyệt hỗ trợ biểu thức @supports [transform-origin: 5% 5%] {
}
31@supports [transform-origin: 5% 5%] {
}
Cú pháp hàm kiểm tra xem trình duyệt có hỗ trợ các giá trị hoặc biểu thức trong hàm không. Các chức năng được hỗ trợ trong cú pháp chức năng được mô tả trong các phần sau
@supports [transform-origin: 5% 5%] {
}
32 Thử nghiệm
@supports [transform-origin: 5% 5%] {
}
Hàm này đánh giá xem trình duyệt có hỗ trợ cú pháp bộ chọn đã chỉ định hay không. Ví dụ sau trả về true và áp dụng kiểu CSS nếu trình duyệt hỗ trợ bộ kết hợp con
@supports [transform-origin: 5% 5%] {
}
3@supports [transform-origin: 5% 5%] {
}
33
@supports [transform-origin: 5% 5%] {
}
Hàm này kiểm tra xem trình duyệt có hỗ trợ công nghệ phông chữ được chỉ định để bố cục và hiển thị không. Ví dụ sau trả về true và áp dụng kiểu CSS nếu trình duyệt hỗ trợ công nghệ phông chữ
@supports [transform-origin: 5% 5%] {
}
34@supports [transform-origin: 5% 5%] {
}
9Bảng dưới đây mô tả các công nghệ phông chữ có sẵn có thể được truy vấn bằng chức năng này
TechnologySupports@supports [transform-origin: 5% 5%] {
}
35Multi-colored glyphs via COLR version 0 table@supports [transform-origin: 5% 5%] {
}
36Multi-colored glyphs via COLR version 1 table@supports [transform-origin: 5% 5%] {
}
37SVG multi-colored tables@supports [transform-origin: 5% 5%] {
}
38Standard bitmap graphics tables@supports [transform-origin: 5% 5%] {
}
39Color bitmap data tables@supports [transform-origin: 5% 5%] {
}
90OpenType @supports [transform-origin: 5% 5%] {
}
91 and @supports [transform-origin: 5% 5%] {
}
92 tables@supports [transform-origin: 5% 5%] {
}
93TrueType @supports [transform-origin: 5% 5%] {
}
94 and @supports [transform-origin: 5% 5%] {
}
95 tables@supports [transform-origin: 5% 5%] {
}
96Graphite features, namely @supports [transform-origin: 5% 5%] {
}
97, @supports [transform-origin: 5% 5%] {
}
98 , @supports [transform-origin: 5% 5%] {
}
99 , @supports [transform-origin: 5% 5%] {
}
50, and @supports [transform-origin: 5% 5%] {
}
51 tables@supports [transform-origin: 5% 5%] {
}
52Incremental font . @supports [transform-origin: 5% 5%] {
}
54Bảng phông chữ bằng cách sử dụng @supports [transform-origin: 5% 5%] {
}
55 để chọn một trong nhiều bảng màu trong phông chữ@supports [transform-origin: 5% 5%] {
}
56
@supports [transform-origin: 5% 5%] {
}
Hàm này kiểm tra xem trình duyệt có hỗ trợ định dạng phông chữ được chỉ định cho bố cục và hiển thị không. Ví dụ sau trả về true và áp dụng kiểu CSS nếu trình duyệt hỗ trợ định dạng phông chữ
@supports [transform-origin: 5% 5%] {
}
57@supports [transform-origin: 5% 5%] {
}
5Bảng sau đây mô tả các định dạng có sẵn có thể được truy vấn bằng chức năng này
Định dạngMô tảPhần mở rộng tệp@supports [transform-origin: 5% 5%] {
}
58OpenType Collection@supports [transform-origin: 5% 5%] {
}
59, @supports [transform-origin: 5% 5%] {
}
60@supports [transform-origin: 5% 5%] {
}
61Embedded OpenType@supports [transform-origin: 5% 5%] {
}
62@supports [transform-origin: 5% 5%] {
}
57OpenType@supports [transform-origin: 5% 5%] {
}
64, @supports [transform-origin: 5% 5%] {
}
65@supports [transform-origin: 5% 5%] {
}
66SVG Font [không dùng nữa]@supports [transform-origin: 5% 5%] {
}
67, @supports [transform-origin: 5% 5%] {
}
68@supports [transform-origin: 5% 5%] {
}
69TrueType@supports [transform-origin: 5% 5%] {
}
64@supports [] {
/* If the condition is true, use the CSS in this block. */
}
71WOFF 1. 0 [Định dạng phông chữ mở trên web]____572____573WOFF 2. 0 [Định dạng phông chữ mở trên web]____574Toán tử
@supports [transform-origin: 5% 5%] {
}
7 đứng trước một biểu thức dẫn đến phủ định của biểu thức. Điều sau đây trả về true nếu thuộc tính @supports [] {
/* If the condition is true, use the CSS in this block. */
}
76 của trình duyệt coi @supports [] {
/* If the condition is true, use the CSS in this block. */
}
77 là không hợp lệ@supports [transform-origin: 5% 5%] {
}
6Như với bất kỳ toán tử nào, toán tử
@supports [transform-origin: 5% 5%] {
}
7 có thể được áp dụng cho một khai báo có độ phức tạp bất kỳ. Các ví dụ sau đều hợp lệ@supports [] {
/* If the condition is true, use the CSS in this block. */
}
7Ghi chú. Không cần đặt toán tử
@supports [transform-origin: 5% 5%] {
}
7 giữa hai dấu ngoặc đơn ở cấp cao nhất. Để kết hợp nó với các toán tử khác, như @supports [transform-origin: 5% 5%] {
}
5 và @supports [transform-origin: 5% 5%] {
}
6, cần có dấu ngoặc đơnToán tử
@supports [transform-origin: 5% 5%] {
}
5 tạo một biểu thức mới từ sự kết hợp của hai biểu thức ngắn hơn. Nó chỉ trả về true nếu cả hai biểu thức ngắn hơn cũng đúng. Ví dụ sau trả về true khi và chỉ khi hai biểu thức ngắn hơn đồng thời là true@supports [transform-origin: 5% 5%] {
}
1Nhiều liên từ có thể được đặt cạnh nhau mà không cần thêm dấu ngoặc đơn. Sau đây là cả hai tương đương
@supports [transform-origin: 5% 5%] {
}
2Toán tử
@supports [transform-origin: 5% 5%] {
}
6 tạo một biểu thức mới từ phép tách hai biểu thức ngắn hơn. Nó trả về true nếu một hoặc cả hai biểu thức ngắn hơn cũng đúng. Ví dụ sau trả về true nếu ít nhất một trong hai biểu thức ngắn hơn là true@supports [] and [] {
/* If both conditions are true, use the CSS in this block. */
}
0Nhiều phân đoạn có thể được đặt cạnh nhau mà không cần thêm dấu ngoặc đơn. Sau đây là cả hai tương đương
@supports [] and [] {
/* If both conditions are true, use the CSS in this block. */
}
1Ghi chú. Khi sử dụng cả hai toán tử
@supports [transform-origin: 5% 5%] {
}
5 và @supports [transform-origin: 5% 5%] {
}
6, dấu ngoặc đơn phải được sử dụng để xác định thứ tự áp dụng. Mặt khác, điều kiện không hợp lệ và toàn bộ quy tắc bị bỏ qua@supports [] and [] {
/* If both conditions are true, use the CSS in this block. */
}
2@supports [] and [] {
/* If both conditions are true, use the CSS in this block. */
}
3@supports [] and [] {
/* If both conditions are true, use the CSS in this block. */
}
4@supports [] and [] {
/* If both conditions are true, use the CSS in this block. */
}
5Các quy tắc có điều kiện của CSS cung cấp khả năng kiểm tra sự hỗ trợ của bộ chọn, chẳng hạn như
@supports [transform-origin: 5% 5%] {
}
16@supports [] and [] {
/* If both conditions are true, use the CSS in this block. */
}
6Ví dụ sau áp dụng kiểu CSS nếu trình duyệt hỗ trợ công nghệ phông chữ
@supports [transform-origin: 5% 5%] {
}
34@supports [] and [] {
/* If both conditions are true, use the CSS in this block. */
}
7Cũng có thể kiểm tra sự hỗ trợ của công nghệ phông chữ bằng cách sử dụng hàm
@supports [transform-origin: 5% 5%] {
}
18 bên trong quy tắc @supports [transform-origin: 5% 5%] {
}
19. Nếu trình duyệt không hỗ trợ công nghệ phông chữ, bạn có thể sử dụng phông chữ dự phòng [@supports [transform-origin: 5% 5%] {
}
20] để thay thế