Có cách nào ngắn để liệt kê các khung hình chính CSS3 với các tiền tố của nhà cung cấp không?

Question

Tại thời điểm này tôi phải liệt kê tất cả các biến:

@-webkit-keyframes show { 
    from { background-color: rgba(0, 0, 0, 0); } 
    to { background-color: rgba(0, 0, 0, 0.8); } 
} 

@-moz-keyframes show { 
    from { background-color: rgba(0, 0, 0, 0); } 
    to { background-color: rgba(0, 0, 0, 0.8); } 
} 

[…] 

Bạn nhận được các ý tưởng. Có cách nào để viết ngắn hơn không? Một cái gì đó như thế này mà không được phá vỡ nó:

@-webkit-keyframes show, @-moz-keyframes show {} 

Answer 1

Không natively trong CSS nhưng bạn có thể thực hiện điều này bằng cách sử dụng một tiền xử lý CSS, ví dụ LESS mà hỗ trợ các khái niệm về "mixins" để loại bỏ một số trùng lặp.

Thông tin thêm có thể được tìm thấy here, đặc biệt là ví dụ từ bài viết:

@-webkit-keyframes some-animation {.mixi-frames;} 
@-moz-keyframes some-animation {.mixi-frames;} 

.mixi-frames() { 
    from {width: 254px;} 
    to {width: 512px;} 
} 

Answer 2

Tùy thuộc vào yêu cầu của bạn, thư viện như https://github.com/jQueryKeyframes/jQuery.Keyframes cũng có thể thực hiện prefixing tự động bằng cách quản lý các cú pháp keyframe cho bạn.

Answer 3

Như đã nêu trong câu trả lời được chấp nhận, các bản mix trong bộ tiền xử lý CSS đã được nhà nước nghệ thuật giải quyết vấn đề này một thời gian trước đây.

Nhưng may mắn thay đổi và công cụ ngày càng tốt hơn. Các khung như Bootstrap chuyển sang các công cụ như autoprefixer, thêm tiền tố nhà cung cấp tự động vào css của bạn. Bằng cách này bạn không cần phải suy nghĩ một giây về tiền tố nhà cung cấp nữa và bạn vẫn cập nhật.

Autoprefixer sử dụng dữ liệu từ caniuse.com để tự cập nhật và bạn chỉ cần chỉ định trình duyệt nào bạn muốn hỗ trợ và bạn không cần phải quan tâm nữa. Nếu bạn chưa chuyển sang tự động hóa tác vụ Grunt, bây giờ là lúc để thử, vì cũng có sẵn tác vụ grunt-autoprefixer.