क्या विक्रेता उपसर्ग के साथ CSS3 कीफ्रेम सूचीबद्ध करने का कोई छोटा तरीका है?

Question

फिलहाल मैं सभी रूपों को सूचीबद्ध करने के लिए है:

@-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); } 
} 

[…] 

आप अंदाजा हो। क्या इस छोटे से लिखने का कोई तरीका है? कुछ इस तरह है कि यह तोड़ नहीं:

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

Answer 1

सीएसएस में नहीं मूल रूप से लेकिन आप एक CSS पूर्वप्रक्रमक, उदाहरण के LESS के लिए जो कुछ दोहराव दूर करने के लिए "mixins" की अवधारणा का समर्थन करता है का उपयोग करके ऐसा कर सकते हैं।

अधिक जानकारी लेख से here पाया जा सकता है, विशेष रूप से उदाहरण:

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

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

Answer 2

आपकी आवश्यकता, एक पुस्तकालय जैसे https://github.com/jQueryKeyframes/jQuery.Keyframes भी आप के लिए मुख्य-फ़्रेम वाक्य रचना के प्रबंधन के द्वारा स्वत: लगाकर पूरा कर सकते हैं पर निर्भर करता है।

Answer 3

जैसा कि स्वीकृत उत्तर में बताया गया है, सीएसएस प्रीप्रोसेसरों में मिश्रित कुछ समय पहले इस समस्या को हल करने के लिए कला की स्थिति रहे हैं।

लेकिन सौभाग्य से समय परिवर्तन और उपकरण बेहतर और बेहतर हो जाते हैं। Bootstrap जैसे फ्रेमवर्क autoprefixer जैसे टूल्स पर स्विच किए गए हैं जो आपके सीएसएस में स्वचालित रूप से विक्रेता उपसर्ग जोड़ते हैं। इस तरह आपको विक्रेता उपसर्गों के बारे में एक-दूसरे को सोचने की आवश्यकता नहीं है और फिर भी आप अद्यतित रहते हैं।

ऑटोप्रेफ़िक्स caniuse.com से डेटा को अपने आप को अद्यतित रखने के लिए उपयोग करता है और आपको केवल यह निर्दिष्ट करने की आवश्यकता है कि आप कौन से ब्राउज़र का समर्थन करना चाहते हैं और आपको अब परवाह करने की आवश्यकता नहीं है। यदि आपने अभी तक Grunt कार्य स्वचालन पर स्विच नहीं किया है, तो अब यह कोशिश करने का समय है, क्योंकि grunt-autoprefixer कार्य भी उपलब्ध है।