उपयोगी आशुलिपि के लिए तार्किक गुण

मेरे पसंदीदा सॉर्टा ब्लॉग पोस्ट के साथ मिशेल बार्कर: संक्षिप्त, व्यावहारिक, और आपको अपने समय के लिए एक मूल्यवान सोने की डली के साथ छोड़ देता है। यहां, वह CSS में लॉजिकल प्रॉपर्टी शॉर्टहैंड में आती है, विशेष रूप से वे जो केवल एक अक्ष पर लंबाई निर्धारित करते हैं, केवल ब्लॉक (ऊर्ध्वाधर) अक्ष या केवल इनलाइन (क्षैतिज) अक्ष कहते हैं।

मैं कहता हूं "ब्लॉक" और "इनलाइन" क्योंकि, जहां तक ​​तार्किक गुणों का संबंध है, एक्स-अक्ष वर्तमान के आधार पर एक लंबवत धुरी की तरह व्यवहार कर सकता है writing-mode.

तो, जहाँ हम हमेशा से रहे हैं padding, margin, तथा border शॉर्टहैंड जो एक बहु-मूल्य सिंटैक्स का समर्थन कर सकते हैं, उनमें से कोई भी हमें अन्य अक्ष पर लंबाई निर्धारित किए बिना किसी विशिष्ट अक्ष पर लंबाई घोषित करने की अनुमति नहीं देता है।

उदाहरण के लिए:

/* This gives us margin on the inline axis */
margin: 0 3rem;

...लेकिन हमें वहां पहुंचने के लिए दूसरी धुरी तय करनी पड़ी। तार्किक गुणों के साथ, हालांकि, हमारे पास प्रत्येक अक्ष के लिए अतिरिक्त शॉर्टहैंड हैं, जिसका अर्थ है कि हम इसका अनुमान लगा सकते हैं margin-inline इनलाइन अक्ष पर विशेष रूप से काम करने के लिए आशुलिपि:

margin-inline: 3rem;

मिशेल पासिंग में मेरी पसंदीदा तार्किक संपत्ति आशुलिपि का उल्लेख करती है। आप कितनी बार किसी चीज़ को इस तरह की धुन पर रखते हैं:

.position-me {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

हम उन चार पंक्तियों को साथ में प्राप्त कर सकते हैं inset: 0. या हम सीधे ब्लॉक और इनलाइन अक्ष को लक्षित कर सकते हैं inset-block और inset-inline, क्रमशः।

जब हम शॉर्टहैंड की बात कर रहे होते हैं, तो मैं हमेशा सावधानी के बारे में एक शब्द रखना पसंद करता हूं "आकस्मिक" सीएसएस रीसेट. इनमें से सिर्फ एक सामान्य सीएसएस गलतियाँ जो मैं करता हूँ.

सीधा लिंक →