सीएसएस आशुलिपि बनाम लोंगहैंड - जब उपयोग करने के लिए

शॉर्टहैंड और लॉन्गहैंड - एक संक्षिप्त और दूसरा सटीक है। एक संक्षिप्तता की चाह से बाहर अस्तित्व में आया, जबकि दूसरा स्पष्टता को बनाए रखने के लिए दृढ़ है। किसी भी तरह से, उनके पास अपने उद्देश्य, पेशेवरों और विपक्ष हैं, इसलिए बोलने के लिए.

यह पोस्ट सीएसएस शॉर्टहैंड नोटेशन और लॉन्गहैंड नोटेशन दोनों पर कुछ प्रकाश डालेगा, जबकि यह निष्कर्ष निकालना कि किस स्थिति के लिए उपयोग करना सबसे अच्छा है.

आशुलिपि संपत्ति क्या है?

आशुलिपि संपत्ति एक संपत्ति है जो सीएसएस गुणों के अन्य सेटों के लिए मान लेती है। उदाहरण के लिए, हम एक मान प्रदान कर सकते हैं सीमा चौड़ाई, झालर की शैली तथा किनारे का रंग का उपयोग करते हुए सीमा अकेले संपत्ति.

मूल रूप से,

 सीमा: 1px ठोस नीला; 

के समान है:

 सीमा-चौड़ाई: 1 पीएक्स; सीमा-शैली: ठोस; सीमा-रंग: नीला;

इसके साथ, हमें अलग-अलग संपत्ति मूल्यों को अलग-अलग घोषित करने की आवश्यकता नहीं है (जो निरर्थक है, समय- और अंतरिक्ष-खपत)। यह घोषणा में लेफ्ट-आउट संपत्तियों को भी रीसेट करता है, जिसका कुछ फायदा उठाया जा सकता है.

यह कैसे काम करता है?

जैसा कि पहले उल्लेख किया गया है, हम शॉर्टहैंड में अन्य संपत्ति मूल्यों का एक सेट लिखते हैं, यदि शॉर्टहैंड में सभी संपत्ति मूल्य हैं तो यह आदेश मायने नहीं रखता है एक अलग तरह के हैं जैसे की सीमा. गुणों के साथ समान प्रकार के मूल्य मार्जिन की तरह, आदेश मायने रखता है. संदेह होने पर, दक्षिणावर्त याद रखें!

अब, यदि हम घोषणा में एक संपत्ति या दो को याद करते हैं तो क्या होगा? उपरोक्त उदाहरण में, मान लें कि हमने अनदेखा कर दिया झालर की शैली.

 बॉर्डर: 1px नीला; 

अब हम सीमाओं को नहीं देख पाएंगे, इसलिए नहीं कि शॉर्टहैंड प्रॉपर्टी काम नहीं करती थी, बल्कि इसलिए झालर की शैली जो हमने छोड़ा, उसे डिफ़ॉल्ट मान मिला कोई नहीं. यह है कि आशुलिपि संपत्ति प्रदान की गई है.

 बॉर्डर: 1px कोई भी नीला नहीं; 

अब छोड़ते हैं 1px के लिये सीमा चौड़ाई और अन्य दो रखें:

 सीमा: ठोस नीला;

हम सीमाओं को केवल मोटी चौड़ाई के साथ देख पाएंगे और ऐसा इसलिए है क्योंकि सीमा चौड़ाई संपत्ति को डिफ़ॉल्ट मान मिला मध्यम.

 सीमा: मध्यम ठोस नीला; 

यह हमारे लिए यह निष्कर्ष निकालता है कि जब एक संपत्ति मूल्य छोड़ दिया जाता है आशुलिपि घोषणा में, वह संपत्ति अपने डिफ़ॉल्ट मूल्य पर लेती है (भले ही इसे उसी के लिए सौंपे गए पिछले मूल्य को ओवरराइड करना पड़े).

अगर वहाँ है सीमा-चौड़ाई: 1 पीएक्स; एक तत्व के लिए कहीं पहले सीमा: ठोस नीला; उसी के लिए, सीमा की चौड़ाई होने जा रही है मध्यम (डिफ़ॉल्ट मान), नहीं 1px.

एक और बात ध्यान देने योग्य है हम जैसे मूल्यों का उपयोग नहीं कर सकते वारिस, प्रारंभिक या सेट नहीं, जो कि सभी CSS गुणों के लिए उपलब्ध हैं, शॉर्टहैंड नोटेशन में। यदि हम उन का उपयोग करते हैं, तो ब्राउज़र को यह पता नहीं चल पाएगा कि शॉर्टहैंड में किस संपत्ति का प्रतिनिधित्व करना है - पूरी घोषणा को छोड़ दिया जाएगा.

सब संपत्ति

वहाँ एक सीएसएस आशुलिपि संपत्ति है कि कर सकते हैं सभी CSS गुणों के लिए मान सेट करें. सीएसएस-व्यापक मूल्य वारिस, प्रारंभिक तथा सेट नहीं सभी संपत्तियों पर लागू होते हैं और इसलिए ये एकमात्र मान हैं जिन्हें स्वीकार किया गया है सब संपत्ति.

 div सभी: प्रारंभिक

यह बना देगा div तत्व सभी CSS संपत्ति मानों को खोदता है, और उनमें से प्रत्येक में डिफ़ॉल्ट मान रीसेट करें.

⚠ चेतावनी

चलो दुरुपयोग नहीं करते हैं सब संपत्ति। इसकी आवश्यकता केवल बहुत ही दुर्लभ परिस्थितियों में उत्पन्न हो सकती है, जब हम किसी तत्व के पिछले CSS कोड को नहीं छू पा रहे हैं जिसे हम इस संपत्ति को लागू करना चाहते हैं.

ध्यान दें: सीएसएस संपत्ति रंग हर रंग चैनल में हेक्स मान के दो नंबर समान होने पर शॉर्टहैंड नोटेशन के साथ हेक्साडेसिमल मान लेता है। उदाहरण के लिए, पृष्ठभूमि: # 445599; वैसा ही है पृष्ठभूमि: # 459;.

क्या है लॉन्गहैंड प्रॉपर्टी??

व्यक्तिगत गुण कि एक आशुलिपि संपत्ति में शामिल किया जा सकता है longhand गुण कहा जाता है। कुछ उदाहरण निम्न हैं; पृष्ठभूमि छवि, मार्जिन छोड़ दिया, एनीमेशन अवधि, आदि.

हमें इसका उपयोग क्यों करना चाहिए?

भले ही आशुलिपि विकल्प आसान हो, लेकिन उनके पास एक नुकसान है। याद रखें कि शुरुआत में हमने देखा कि शॉर्टहैंड किसी भी बचे हुए गुणों को अपने डिफ़ॉल्ट मानों से कैसे ओवरराइड करता है? यदि रीसेट वांछित नहीं है तो यह एक समस्या हो सकती है.

ले लो फ़ॉन्ट उदाहरण के लिए आशुलिपि संपत्ति। में इसका उपयोग करते हैं h4 तत्व (जिसमें एक डिफ़ॉल्ट ब्राउज़र शैली है फोंट की मोटाई: बोल्ड)

 फ़ॉन्ट: 20 पीएक्स "कूरियर नया"; 

उपरोक्त आशुलिपि कोड में, के लिए कोई मूल्य नहीं है फ़ॉन्ट वजन संपत्ति, इसलिए फोंट की मोटाई: बोल्ड(ब्राउज़र डिफ़ॉल्ट शैली) डिफ़ॉल्ट मान द्वारा ओवरराइड किया जाएगा font-weight: सामान्य कारण h4 तत्व अपनी बोल्ड शैली को खोने के लिए, जिसका इरादा नहीं था.

तो, ऊपर दिए गए उदाहरण के लिए सरल दो लॉन्गहैंड गुण हैं, फ़ॉन्ट आकार तथा फ़ॉन्ट परिवार परिपूर्ण हैं.

इसके लिए, शॉर्टहैंड का उपयोग करना केवल एक या दो संपत्ति मान असाइन करना बहुत उपयोगी नहीं है. शॉर्टहैंड में ब्राउज़र को हर एक संपत्ति (बाएं लोगों सहित) की व्याख्या करने के लिए अतिरिक्त काम क्यों दें, जब काम करने के लिए केवल एक की आवश्यकता हो?

एक तरफ उत्पादन, विकास के चरण के दौरान, कुछ डेवलपर्स (विशेष रूप से शुरुआती) के लिए आशुलिपि की तुलना में काम करने के लिए आसान longhand संकेतन का उपयोग कर पा सकते हैं बेहतर पठनीयता और स्पष्टता.

निष्कर्ष

आजकल तेजी से कोडिंग (एम्मेट जैसे उपकरणों की मदद से) और खनन की संभावना के साथ, शॉर्टहैंड पर एक उच्च विश्वसनीयता की आवश्यकता नहीं है, लेकिन एक ही समय में, यह टाइप करने के लिए बहुत तार्किक है मार्जिन: 0;. जिस संदर्भ में हम अपनी CSS सूचनाओं को प्राथमिकता देते हैं वह अलग-अलग होगी और हमें केवल यह पता लगाना है कि कौन सा अंकन हमारे लिए सबसे अच्छा काम करेगा और कब.