Làm thế nào để viết fallbacks css cho vh vw

Question

bất cứ ai có thể giải thích như thế nào fallbacks làm việc trong CSS? Tôi cố gắng để thiết lập nó cho vh và vw và rõ ràng tôi không nhận được nó ...

Đây là giải pháp cố gắng của tôi, mà không hoạt động. Thuộc tính chiều cao được lấy mỗi lần.

CSS:

-webkit-height: 5.2vh; 
-moz-height: 5.2vh; 
-ms-height: 5.2vh; 
-o-height: 5.2vh; 
height: 41px; /* The Fallback */ 

Answer 1

Mã của bạn (và tại sao nó không hoạt động)

Nhìn vào mã ban đầu của bạn, tôi có một vài ý kiến:

-webkit-height: 5.2vh; 
-moz-height: 5.2vh; 
-ms-height: 5.2vh; 
-o-height: 5.2vh; 
height: 41px; /* The Fallback */ 

Các tiền tố, các bit -webkit-, chỉ áp dụng nếu có một thuộc tính tiền tố theo tên đó. Chiều cao không có thuộc tính tiền tố, do đó các trình duyệt chỉ bỏ qua các khai báo đó.

(Mẹo: Bạn có thể kiểm tra một cái gì đó giống như MDN để xem những gì thuộc tính tồn tại.)

Giải pháp:

Trong trường hợp này, chúng ta có thể tận dụng lợi thế của một thực tế rằng, nếu trình duyệt gặp phải một tài sản hoặc một giá trị mà họ không hiểu, họ bỏ qua nó và tiếp tục. Vì vậy, những gì bạn đang muốn tìm một cái gì đó như:

height: 41px; 
height: 5.2vh; 

Trình duyệt thấy height: 41px, như mong đợi. Nó phân tích cú pháp đó và biết phải làm gì với nó. Sau đó, nó sẽ thấy height: 5.2vh. Nếu trình duyệt hiểu được đơn vị vh, nó sẽ sử dụng thay vì 41px, giống như color: blue; color: red; sẽ kết thúc là màu đỏ. Nếu nó không hiểu đơn vị vh, nó sẽ bỏ qua nó, và, bởi vì chúng tôi đã xác định dự phòng đầu tiên, thực tế là trình duyệt bỏ qua các đơn vị vh không quan trọng.

Make ý nghĩa?

Answer 2

Nơi mùa thu của bạn trở lại trên bạn giá trị khác. Nếu giá trị ghi đè không hoạt động trên trình duyệt, giá trị đầu tiên sẽ được sử dụng.

height: 41px; /* The Fallback */ 
height: 5.2vh; 

Answer 3

Các thuộc tính -moz-height, -webkit-height, -o-height, và -ms-height không tính phần mở rộng hợp lệ, họ không xác định bởi bất kỳ việc triển khai UA.

Bạn nhận được height: 41px làm giá trị chiến thắng vì -webkit-height (trong Chrome hoặc Safari) không được công nhận, nhưng height: 41px là.

Bạn sẽ muốn sử dụng này:

height: 41px;  
height: 5.2vh; 

... với mã này, trình duyệt đầu tiên sẽ nhận height: 41px, sau đó nếu họ nhận ra height: 52.vh sẽ được áp dụng, nếu không họ sẽ trở lại cuối cùng Giá trị "tốt": 41px.