CSS शॉर्टहैंड प्रॉपर्टीज का उपयोग करके अपनी स्टाइलशीट्स को कम जगह घेरने देना सीखें।
CSS शॉर्टहैंड प्रॉपर्टीज आपको कम लिखने और अधिक करने की अनुमति देती हैं।
मान लें आप अपने h1 एलिमेंट को जॉर्जिया फ़ॉन्ट-फैमिली, 42 पिक्सेल का फ़ॉन्ट-साइज़, और 1.25 की लाइन-हाइट के साथ स्टाइल करना चाहते हैं।
पहले, आइए नीचे सामान्य CSS मेथड देखें:
h1 { font-family: "Georgia", "serif"; font-size: 42px; line-height: 1.25; }अब नीचे CSS font शॉर्टहैंड मेथड का उपयोग करके इसकी तुलना करें:
h1 { font: 42px/1.25 "Georgia", "serif"; }तीन लाइनें एक में सघन!
शॉर्टहैंड प्रॉपर्टीज कई स्टाइल घोषणाओं को एक लाइन में संयोजित करके काम करती हैं और आपके कोड को कम जगह घेरने देती हैं।
शॉर्टहैंड कोड नियमित मेथड की तरह पठनीय नहीं हो सकता, जो अधिक अभिव्यंजक है। हालांकि, ऐसा इसलिए है क्योंकि यह नया है। एक बार जब आप इसका उपयोग करना शुरू कर देंगे तो यह जल्दी ही सेकंड नेचर बन जाएगा।
आइए एक और शॉर्टहैंड CSS प्रॉपर्टी उदाहरण देखें ताकि बात स्पष्ट हो जाए।
यहाँ एक बटन है जिसमें टॉप और बॉटम पैडिंग 12px है, और लेफ्ट और राइट पैडिंग 20px है:
यह निम्नलिखित पैडिंग प्रॉपर्टीज का उपयोग करता है:
button { padding-top: 12px; padding-right: 20px; padding-bottom: 12px; padding-left: 20px; }अब आइए शॉर्टहैंड padding प्रॉपर्टी का उपयोग करें और CSS को कम फूला हुआ बनाएं:
button { padding: 12px 20px; /* टॉप-बॉटम, लेफ्ट-राइट */ }चार लाइनें एक में सघन!
उपरोक्त padding शॉर्टहैंड को टू-वैल्यू शॉर्टहैंड कहा जाता है, क्योंकि ठीक है, यह दो वैल्यूज का उपयोग करता है।
- पहली वैल्यू
12pxpadding-topऔरpadding-bottomप्रॉपर्टी से मेल खाती है। 20pxवैल्यूpadding-leftऔरpadding-rightसे मेल खाती है।
यहाँ CSS में शॉर्टहैंड प्रॉपर्टीज की पूरी सूची है:
all, animation, background, border, border-block-end, border-block-start, border-bottom, border-color, border-image, border-inline-end, border-inline-start, border-left, border-radius, border-right, border-style, border-top, border-width, column-rule, columns, flex, flex-flow, font, gap, grid, grid-area, grid-column, grid-row, grid-template, list-style, margin, mask, offset, outline, overflow, padding, place-content, place-items, place-self, scroll-margin, scroll-padding, text-decoration, text-emphasis, transition.
मोज़िला के पूर्ण CSS शॉर्टहैंड डॉक्स देखें।
सभी शॉर्टहैंड प्रॉपर्टीज याद रखने लायक नहीं हैं क्योंकि संभावना है कि आप शायद ही कभी, यदि कभी, उनका उपयोग करेंगे। हालांकि, इस ट्यूटोरियल के दो शॉर्टहैंड उदाहरण font और padding, सबसे अधिक उपयोग किए जाने वाले शॉर्टहैंड्स में से कुछ हैं।
निम्नलिखित शॉर्टहैंड प्रॉपर्टीज भी देखने लायक हैं (क्योंकि आप उनका बहुत उपयोग करेंगे) margin, background, border, animation, transition, border-radius।
