मैं एक very similar question में उल्लेख किया है ...
क्योंकि आप के लिए खाते में करने की जरूरत है यह, उन मामलों में जहाँ मानकीकृत सुविधाओं के लिए विक्रेता उपसर्गों अत्यंत समस्याग्रस्त हो जाते हैं में से एक है सभी अलग उपसर्ग और/या विभिन्न ब्राउज़रों के विभिन्न संस्करणों में विभिन्न सुविधाओं के अपरिवर्तनीय कार्यान्वयन।
क्या एक मुट्ठी भर। और फिर आपको इनके विभिन्न क्रमपरिवर्तनों को जोड़ना होगा। हैंडफुल क्या है।
संक्षेप में, आपको यह पता लगाने की आवश्यकता है कि प्रत्येक ब्राउज़र के कौन से संस्करणों में प्रत्येक व्यक्तिगत गुणों के लिए उपसर्ग की आवश्यकता होती है, और जब तक आपको ब्लोट नहीं लगता है, तो आपको अलग-अलग ब्राउज़रों के लिए अलग-अलग उपसर्गों को लागू करने की आवश्यकता होगी।
जुड़ा हुआ प्रश्न संक्रमणों के बजाय एनिमेशन को संदर्भित करता है जिसके परिणामस्वरूप काफी अलग-अलग नोटेशन होते हैं, लेकिन दोनों सुविधाएं AFECK जैसी समान अपरिवर्तनीय प्रक्रियाओं के माध्यम से होती हैं। ऐसा कहा जा रहा है, यहां 2D transforms और transitions के लिए caniuse.com से संगतता तालिकाएं हैं।
दूसरे शब्दों में, सिर्फ इसलिए कि एक सुविधा एक ब्राउज़र के एक संस्करण में उपसर्ग है, इसका मतलब यह नहीं है कि अन्य सुविधा एक ही ब्राउज़र के उसी संस्करण में भी उपसर्ग है। उदाहरण के लिए, क्रोम अपरिक्स्ड संक्रमण कम से कम दस प्रमुख संस्करण (26) इसे अपरिवर्तित रूपांतरित करने से पहले (36), और सफारी अभी भी को बदलने के लिए उपसर्ग की आवश्यकता है।
transition: -webkit-transform .3s ease-in-out;
और अगर आप पूरी तरह से करने की जरूरत है, आप के साथ निम्नलिखित भी पुराने संस्करणों को कवर करना होगा:
-webkit-transition: -webkit-transform .3s ease-in-out;
अन्य नतीजतन, आप निश्चित रूप से इस घोषणा के लिए करने जा रहे हैं ब्राउज़रों, चमत्कारिक ढंग से, (और साथ ही एनिमेशन) एक साथ दोनों संक्रमण और रूपांतरण unprefix करने में सक्षम थे, जो चीजों को बहुत आसान:
-ms-transition है केवल आईई 10 के प्री-रिलीज संस्करणों द्वारा उपयोग किया जाता है, जो लंबे समय से समाप्त हो चुका है। आईई का कोई अन्य संस्करण प्रीफिक्स्ड संक्रमण का उपयोग नहीं करता है, इसलिए आपको उस विशेष संक्रमण उपसर्ग को हटा देना चाहिए।
-ms-transform उपसर्ग के साथ केवल आईई 9 द्वारा उपयोग किया जाता है; IE10 और बाद में जहाज अपरिवर्तित परिवर्तन के साथ। लेकिन सुंदर गिरावट के प्रयोजनों के लिए आप अपने -ms-transform: rotateX(-30deg); घोषणा को रखना चाह सकते हैं - बस ध्यान रखें कि इसे संक्रमण नहीं किया जा सकता क्योंकि IE9 सीएसएस संक्रमण या एनिमेशन का समर्थन नहीं करता है।
-moz-transition और -moz-transform करने के लिए और 15, सहित तब 16.
-o-transition और -o-transform में बिना उपसर्ग के लिए और 12.00, तो 12.10 में बिना उपसर्ग सहित ओपेरा द्वारा इस्तेमाल किया गया अप फ़ायरफ़ॉक्स द्वारा इस्तेमाल किया गया है, तो फिर से पहले से जुड़ा हुआ ब्लिंक पर जाने के बाद के संस्करणों में -webkit- के रूप में।
संक्षेप में, यहाँ सभी उपसर्गों है कि आप की जरूरत है, caniuse.com (मैं वर्तमान और अधिकांश भाग के लिए सही होने की भरोसा है) द्वारा दी गई जानकारी के आधार पर कर रहे हैं:
-webkit-transition: -webkit-transform .3s ease-in-out; /* Chrome < 26, Safari < 7 */
-moz-transition: -moz-transform .3s ease-in-out; /* Firefox < 16 */
-o-transition: -o-transform .3s ease-in-out; /* Opera < 12.10 */
transition: -webkit-transform .3s ease-in-out; /* Chrome 26-35, Safari, Opera 15-23 */
transition: transform .3s ease-in-out; /* IE10+, Firefox 16+, Chrome 36+, Opera 12.10 */
-webkit-transform: rotateX(-30deg);
-moz-transform: rotateX(-30deg);
-ms-transform: rotateX(-30deg); /* Only for graceful degradation in IE9, cannot be transitioned */
-o-transform: rotateX(-30deg);
transform: rotateX(-30deg);
न्यूनतम है कि आप इस लेखन के रूप में प्रत्येक ब्राउज़र के नवीनतम संस्करण का समर्थन करने की आवश्यकता होगी है:
transition: -webkit-transform .3s ease-in-out; /* Chrome 26-35, Safari, Opera 15-23 */
transition: transform .3s ease-in-out; /* IE10+, Firefox 16+, Chrome 36+, Opera 12.10 */
-webkit-transform: rotateX(-30deg);
transform: rotateX(-30deg);
टिप्पणी में उल्लेख किया है, आप के लिए यह स्वचालित करने के लिए Autoprefixer जैसे किसी उपकरण का उपयोग कर सकते हैं आप आवश्यक ब्राउज़र समर्थन के स्तर के आधार पर। हालांकि, उन लोगों के लिए जो अपने सीएसएस को मैन्युअल रूप से लिखना पसंद करते हैं, या उन लोगों के लिए जो वास्तव में सोच रहे हैं कि कौन से उपसर्गों को ब्राउज़र द्वारा आवश्यक है, यह है।
अंतिम नोट पर: उपरोक्त उदाहरणों में दो अपरिवर्तित transition घोषणाओं को नोटिस करें? ,
transition: -webkit-transform .3s ease-in-out, transform .3s ease-in-out;
लेकिन, दुर्भाग्य से, Chrome will erroneously completely ignore this declaration है जबकि अन्य ब्राउज़र तब भी वह अच्छे लागू होगी: अब, आप लगता है कि यह काफी आसान सिर्फ इस तरह एक भी घोषणा में उन्हें गठबंधन करने के लिए होगा।
यह सिर्फ राय है –
@ श्री एलियन: तो आप कह रहे हैं कि इससे कोई फर्क नहीं पड़ता? –
@ श्री एलियन मैं असहमत हूं। ऐसा लगता है कि, "यदि मैं विशेषता के लिए विक्रेता उपसर्ग का उपयोग करता हूं, तो क्या मुझे संपत्ति के लिए भी इसकी आवश्यकता है?" इसका उद्देश्य उत्तरदायी उत्तर दिया जा सकता है। – Scimonster