W3C डाइजेस्ट। CSS3 में नया क्या है अंक 3

CSS3 वर्किंग ग्रुप लगातार बहस कर रहा है कि नए मानक में क्या होगा। कभी-कभी हिंसक कल्पना और जितना संभव हो उतना शांत करने की इच्छा डेवलपर्स को एक मृत अंत तक ले जाती है।

पिछला भाग यहाँ

हिडन वस्तु एनीमेशन

ऐसा लगता है कि CSS3 के एनिमेशन मॉड्यूल के लिए गंभीर समस्याओं में से एक ऐसी वस्तुएं होंगी जिनमें display: none और visibility: hidden ।

इस विनिर्देशन में, पुनरावृत्त नहीं किए जा सकने वाले गुणों को अनदेखा किया जाता है। हालांकि, एक उदाहरण है जब यह इसके लायक नहीं है। मान लीजिए कि एक ब्लॉक है, यदि आप इसे एक निश्चित hidden वर्ग को असाइन करते हैं, तो इसे सुचारू रूप से भंग करना चाहिए और पूरी तरह से धारा से बाहर निकलना चाहिए। काफी सामान्य व्यवहार जो पहले से ही कई जेएस पुस्तकालयों में मौजूद है।

कोड इस तरह होना चाहिए:

 div { display:block; } div.hidden { display:none; animation: slide-out 1s 1; } 

हालांकि, यदि display:none संपत्ति निर्दिष्ट नहीं है, तो कोई एनीमेशन नहीं होगा। ठीक है, सही है, जिसे छिपी हुई वस्तुओं के लिए एनीमेशन की आवश्यकता है?

लेकिन, यदि आप यहां एनीमेशन घोषणा के लिए ऐसा कोड निर्दिष्ट करते हैं

 @keyframes slide-out { 0% { display:block; opacity: 1; } 100% { display:none; opacity:0; } } 

और गैर-पुनरावृत्त गुणों की उपेक्षा न करें, तो हमें पूरी तरह से तार्किक तस्वीर मिलती है। यदि ब्राउज़र को पता नहीं है कि एनीमेशन क्या है, तो यह बस ब्लॉक को छिपाएगा, display:none बाद display:none div.hidden में display:none नियम काम नहीं करेगा। यदि एनीमेशन समर्थन है, तो एनीमेशन की शुरुआत में, block रूप में संपत्ति का मूल्य block में वापस आ जाता है, अपारदर्शिता संपत्ति पुनरावृत्त होती है, और अंत में ब्लॉक छिपा होता है।

यह छिपी हुई वस्तुओं को एनिमेट करने और पिछली से बहुत दूर की समस्या नहीं है।

क्या ग्रेडियंट्स आसान हो जाएंगे?

ग्रेडिएंट के सिंटैक्स को सरल बनाने के लिए, एक नया transparent कीवर्ड प्रस्तावित किया गया था ताकि इसे इस तरह लिखा जा सके:

  linear-gradient(red, transparent, blue); 

के बजाय

  linear-gradient(red, rgba(255,0,0,0) 50%, rgba(0,0,255,0) 50%, blue); 

साधारण एनकोडर के लिए, पहला विकल्प, ज़ाहिर है, दूसरे की तुलना में कई गुना अधिक सुविधाजनक है।

आपने कहाँ क्लिक किया?

एक और बहुत उपयोगी सुझाव 2 डी और 3 डी परिवर्तन मॉड्यूल के लिए आया था। मान लीजिए कि हमारे पास एक वर्ग है। हम इसे 45 डिग्री तक घुमाते हैं और एक रोम्बस प्राप्त करते हैं। उपयोगकर्ता ने rhombus पर क्लिक किया है, और हमें यह पता लगाने की आवश्यकता है कि rhombus के सापेक्ष क्लिक के निर्देशांक क्या हैं, न कि पूरी विंडो। यहां यह उन घटनाओं को अलग करने में मदद कर सकता है जिन्हें window पर लटका दिया गया था और घटनाओं को document । पहले मामले में, व्यवहार पहले की तरह रहता है, क्लिक के निर्देशांक खिड़की के सापेक्ष मापा जाता है, और दूसरे मामले में उन्हें तत्व के सापेक्ष निर्देशांक में लिया जाता है। इन मॉड्यूलों के आगे विकास के लिए यह क्षेत्र आवश्यक है, अन्यथा, निर्देशांक की गणना के लिए, जावास्क्रिप्ट में जटिल गणनाओं को लगातार लागू करना आवश्यक होगा।

यह इस सप्ताह है, देखने के लिए धन्यवाद!