फ़्लो-रिलेटिव शॉर्टहैंड की मदद से, लॉजिकल लेआउट को बेहतर बनाना

Chromium के लिए, नए लॉजिकल प्रॉपर्टी शॉर्टहैंड और नई इनसेट प्रॉपर्टी.

एडम आर्गील

ओरियोल ब्रुफ़ाउ

Chromium 69 (3 सितंबर, 2018) से, लॉजिकल प्रॉपर्टी और वैल्यू की मदद से डेवलपर फ़िज़िकल, डायरेक्शन, और डाइमेंशन स्टाइल के बजाय, लॉजिकल के ज़रिए अपने अंतरराष्ट्रीय लेआउट पर कंट्रोल कर पा रहे हैं. Chromium 87 में, शॉर्टहैंड और ऑफ़सेट भेजे गए हैं, ताकि इन लॉजिकल प्रॉपर्टी और वैल्यू को लिखना थोड़ा आसान हो जाए. इसकी मदद से, Chromium को Firefox के वर्शन तक पहुंचने के लिए इस्तेमाल किया जाता है. Firefox 66 से साल के बाद से इस तरह के शॉर्टहैंड का इस्तेमाल किया जा सकता है. Safari ने उन्हें अपने टेक्नोलॉजी की झलक में तैयार कर दिया है.

दस्तावेज़ का फ़्लो

अगर आपको लॉजिकल प्रॉपर्टी, इनलाइन और ब्लॉक ऐक्सिस के बारे में पहले से जानकारी है और आपको रीफ़्रेशर की ज़रूरत नहीं है, तो आगे बढ़ें. अगर आपको ऐसा नहीं करना है, तो यहां एक छोटा सा रीफ़्रेशर दिया गया है.

अंग्रेज़ी में, अक्षर और शब्द बाएं से दाएं फ़्लो करते हैं, जबकि पैराग्राफ़ ऊपर से नीचे दिखते हैं. परंपरागत चीनी में, अक्षरों और शब्दों को ऊपर से नीचे रखा जाता है, जबकि पैराग्राफ़ दाईं से बाईं ओर स्टैक होते हैं. सिर्फ़ इन दो मामलों में, अगर हम ऐसी सीएसएस लिखते हैं जो किसी पैराग्राफ़ में "मार्जिन टॉप" करती है, तो इसका मतलब है कि हमने भाषा के लिए सिर्फ़ एक स्टाइल के बीच सही स्पेस दिया है. अगर पेज का अंग्रेज़ी से पारंपरिक चाइनीज़ में अनुवाद किया गया है, तो हो सकता है कि वर्टिकल राइटिंग मोड में मार्जिन का कोई मतलब न निकले.

इसलिए, बॉक्स का फ़िज़िकल साइड, अंतरराष्ट्रीय तौर पर ज़्यादा काम का नहीं है. इस तरह से, कई भाषाओं के साथ काम करने की प्रोसेस शुरू होती है. साथ ही, बॉक्स मॉडल के फ़िज़िकल और लॉजिकल साइड के बारे में सीखना शुरू होता है.

क्या आपने कभी Chrome DevTools में p एलिमेंट की जांच की है? अगर ऐसा है, तो आपने देखा होगा कि डिफ़ॉल्ट उपयोगकर्ता एजेंट स्टाइल फ़िज़िकल नहीं होती हैं, बल्कि तर्क के तौर पर होती हैं.

p {
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

Chromium की उपयोगकर्ता एजेंट स्टाइलशीट की सीएसएस

मार्जिन सबसे ऊपर या सबसे नीचे नहीं है, जैसा कि अंग्रेज़ी पढ़ने वाले किसी व्यक्ति को लग सकता है. यह block-start और block-end है! ये लॉजिकल प्रॉपर्टी, अंग्रेज़ी रीडर के ऊपर और नीचे वाले हिस्से की तरह होती हैं, लेकिन दाईं और बाईं ओर मौजूद जैपनीज़ रीडर से भी मेल खाती हैं. सिर्फ़ एक बार लिखा गया है, हर जगह काम करता है.

सामान्य फ़्लो तब होता है, जब कोई वेबपेज जान-बूझकर इस कई दिशा में ले जाता है. जब दस्तावेज़ की दिशा बदलने के हिसाब से पेज का कॉन्टेंट अपडेट होता है, तो लेआउट और उसके एलिमेंट को प्रोसेस किया जाता है. एमडीएन पर या सीएसएस डिसप्ले मॉड्यूल की खास जानकारी में, "इन" और "आउट" फ़्लो के बारे में ज़्यादा जानें. हालांकि, लॉजिकल प्रॉपर्टी का फ़्लो होना ज़रूरी नहीं होता है, लेकिन वे दिशा में बदलाव होने पर आपके लिए कई अहम काम कर लेती हैं. फ़्लो का मतलब है दिशा-निर्देश, किन अक्षरों, शब्दों, और कॉन्टेंट के साथ सफ़र करना ज़रूरी है. इससे हम तार्किक निर्देशों को ब्लॉक और इनलाइन कर देते हैं.

ब्लॉक करने का निर्देश, वह दिशा है जिस दिशा में नया कॉन्टेंट ब्लॉक किया जाता है. उदाहरण के लिए, खुद से पूछें कि "अगला पैराग्राफ़ कहां रखा जाए?". यह कॉन्टेंट "कॉन्टेंट ब्लॉक" या "टेक्स्ट का ब्लॉक" हो सकता है. हर भाषा अपने ब्लॉक को अपने-आप तय करती है और उन्हें अपने-आप लागू होने वाले block-axis के साथ व्यवस्थित करती है. block-start वह साइड है जहां पैराग्राफ़ को पहले रखा जाता है, जबकि block-end साइड में मौजूद नए पैराग्राफ़ लागू होते हैं.

उदाहरण के लिए, पारंपरिक जापानी हैंडराइटिंग में, ब्लॉक की दिशा दाईं से बाईं ओर जाती है:

इनलाइन डायरेक्शन, अक्षरों और शब्दों की दिशा होता है. इस पर ध्यान दें कि लिखते समय आपका हाथ और हाथ किस दिशा में यात्रा करते हैं. ये inline-axis के साथ-साथ जाते हैं. inline-start वह हिस्सा है जहां से लिखना शुरू किया जाता है, जबकि inline-end वह हिस्सा होता है जहां लेखन खत्म या खत्म होता है. ऊपर दिया गया वीडियो, inline-axis ऊपर से नीचे है, लेकिन इस अगले वीडियो में inline-axis दाईं से बाईं ओर जाता है.

flow-relative होने का मतलब है कि एक भाषा के लिए लिखी गई स्टाइल, कॉन्टेक्स्ट के हिसाब से और दूसरी भाषाओं में सही तरीके से लागू होगी. कॉन्टेंट उसी भाषा के मुताबिक होगा जिसमें डिलीवर किया जा रहा है.

नए शॉर्टहैंड

नीचे दिए गए कुछ शॉर्टहैंड, ब्राउज़र के लिए नई सुविधाएं नहीं हैं. ये ब्लॉक या इनलाइन किनारों पर एक साथ वैल्यू सेट करने की सुविधा का इस्तेमाल करके, स्टाइल लिखने के आसान तरीके हैं. inset-* लॉजिकल प्रॉपर्टी में नई सुविधाएं जुड़ती हैं, क्योंकि इससे पहले लॉजिकल प्रॉपर्टी वाली ऐब्सलूट पोज़िशन तय करने के पुराने तरीके मौजूद नहीं थे. हालांकि, मैं आपको Chromium 87 में आने वाली सभी नई लॉजिकल प्रॉपर्टी के बारे में एक साथ बताने वाली हूं.

मार्जिन शॉर्टहैंड

कोई नई सुविधा नहीं मिली, लेकिन कुछ बेहद आसान शॉर्टहैंड में ये शामिल हैं:
margin-block और margin-inline.

margin-block-start: 2ch;
margin-block-end: 2ch;

margin-block: 2ch;
/* or */
margin-block: 2ch 2ch;

अब तक "ऊपर और नीचे" या "बाएं और दाएं" के लिए कोई शॉर्टहैंड नहीं है...! शायद आपने margin: 10px; के शॉर्टहैंड का इस्तेमाल करके चारों साइड का रेफ़रंस दिया हो. साथ ही, अब लॉजिकल प्रॉपर्टी शॉर्टहैंड का इस्तेमाल करके, आसानी से दो अलग-अलग साइड का रेफ़रंस दिया जा सकता है.

margin-inline-start: 4ch;
margin-inline-end: 2ch;

margin-inline: 4ch 2ch;

शॉर्टहैंड पैडिंग करना

कोई नई सुविधा नहीं भेजी गई, लेकिन ज़्यादा इस्तेमाल में आसान शॉर्टहैंड में ये चीज़ें शामिल हुईं:
padding-block और padding-inline.

padding-block-start: 2ch;
padding-block-end: 2ch;

padding-block: 2ch;
/* or */
padding-block: 2ch 2ch;

साथ ही, inline शॉर्टहैंड का बिना शुल्क वाला सेट:

padding-inline-start: 4ch;
padding-inline-end: 2ch;

padding-inline: 4ch 2ch;

इनसेट और शॉर्टहैंड

inset प्रॉपर्टी की वैल्यू के तौर पर, फ़िज़िकल प्रॉपर्टी top, right, bottom, और left को लिखा जा सकता है. position की किसी भी वैल्यू को इनसेट के साथ सेट करने से फ़ायदा हो सकता है.

.cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
}

position: absolute;
top: 1px;
right: 2px;
bottom: 3px;
left: 4px;

position: absolute;
inset: 1px 2px 3px 4px;

यह तुरंत सुविधाजनक लगेगा! इनसेट, फ़िज़िकल साइड के लिए शॉर्टहैंड है. यह मार्जिन और पैडिंग की तरह ही काम करता है.

नई सुविधाएं

भले ही, शारीरिक तौर पर शॉर्टहैंड में किसी तरह की दिलचस्पी हो, इसका फ़ायदा inset शॉर्टहैंड की मदद से मिलता है. इसमें कई लॉजिकल फ़ीचर होते हैं. इन शॉर्टहैंड से, डेवलपर को आसानी से कॉन्टेंट बनाने में मदद मिलती है (वे टाइप करने के लिए छोटे होते हैं). साथ ही, इनसे लेआउट की पहुंच भी बढ़ती है, क्योंकि ये फ़्लो-रिलेटिव होते हैं.

position: absolute;
top: 10px;
bottom: 10px;

position: absolute;
inset-block: 10px;

position: absolute;
left: 10px;
right: 20px;

position: absolute;
inset-inline: 10px 20px;

आगे की रीडिंग और इनसेट शॉर्टहैंड और लॉन्गहैंड की पूरी सूची एमडीएन पर उपलब्ध है.

बॉर्डर शॉर्टहैंड

बॉर्डर के साथ-साथ इसकी नेस्ट की गई color, style, और width प्रॉपर्टी में भी नए लॉजिकल शॉर्टहैंड बनाए गए हैं.

border-top-color: hotpink;
border-bottom-color: hotpink;

border-block-color: hotpink;
/* or */
border-block-color: hotpink hotpink;

border-left-style: dashed;
border-right-style: dashed;

border-inline-style: dashed;
/* or */
border-inline-style: dashed dashed;

border-left-width: 1px;
border-right-width: 1px;

border-inline-width: 1px;
/* or */
border-inline-width: 1px 1px;

आगे की रीडिंग और बॉर्डर शॉर्टहैंड और लॉन्गहैंड की पूरी सूची एमडीएन पर उपलब्ध है.

लॉजिकल प्रॉपर्टी <figure> का उदाहरण

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

या फिर इसे आज़माकर देखें!

<figure> और कुछ लॉजिकल प्रॉपर्टी की मदद से, कार्ड को अंतरराष्ट्रीय स्तर पर रिस्पॉन्सिव बनाने के लिए आपको ज़्यादा कुछ नहीं करना होगा. अगर आपको यह जानना है कि अंतरराष्ट्रीय स्तर पर सीएसएस के साथ काम करने वाली ये सारी चीज़ें एक साथ कैसे काम करती हैं, तो मुझे उम्मीद है कि यहां आपको एक छोटी सी जानकारी मिलेगी.

पॉलीफ़िलिंग और क्रॉस-ब्राउज़र सहायता

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

p {
  /* for unsupporting browsers */
  margin-top: 1ch;
  margin-bottom: 2ch;

  /* for supporting browsers to use */
  /* and unsupporting browsers to ignore and go 🤷‍♂️ */
  margin-block: 1ch 2ch;
}

हालांकि, यह सभी के लिए पूरा समाधान नहीं है. यहां हाथ से लिखे गए फ़ॉलबैक के बारे में बताया गया है जो खास भाषाओं को टारगेट करने के लिए, :lang() स्यूडो-सिलेक्टर का इस्तेमाल करता है और अपनी फ़िज़िकल स्पेसिंग को सही तरीके से अडजस्ट करता है. इसके बाद, यह साथ काम करने वाले ब्राउज़र के लिए लॉजिकल स्पेसिंग देता है:

/* physical side styles */
p {
  margin-top: 1ch;
  margin-bottom: 2ch;
}

/* adjusted physical side styles per language */
:lang(ja) {
  p {
    /* zero out styles not useful for traditional Japanese */
    margin-top: 0;
    margin-bottom: 0;

    /* add appropriate styles for traditional Japanese */
    margin-right: 1ch;
    margin-left: 2ch;
  }
}

/* add selectors and adjust for languages all supported */
:lang(he) {…}
:lang(mn) {…}

/* Logical Sides */
/* Then, for supporting browsers to use */
/* and unsupporting browsers to ignore #TheCascade */
p {
  /* remove any potential physical cruft.. */
  margin: 0;
  /* explicitly set logical value */
  margin-block: 1ch 2ch;
}

@supports का इस्तेमाल करके यह भी तय किया जा सकता है कि फ़िज़िकल प्रॉपर्टी में फ़ॉलबैक देना है या नहीं:

p {
  margin-top: 1ch;
  margin-bottom: 2ch;
}

@supports (margin-block: 0) {
  p {
    margin-block: 1ch 2ch;
  }
}

Sass, PostCSS, Emotion, और अन्य ऐप्लिकेशन के पास ऑटोमेटेड बंडलर और/या बिल्ड टाइम ऑफ़र होते हैं. इनमें फ़ॉलबैक या समाधानों की एक बड़ी रेंज होती है. हर एक फ़ंक्शन की जांच करके पता लगाएं कि आपके टूलचेन और साइट की पूरी रणनीति से किस तरह का मैच होता है.

आगे क्या करना है

और भी सीएसएस लॉजिकल प्रॉपर्टी ऑफ़र करेंगी, लेकिन अभी तक ऐसा नहीं किया गया है! हालांकि, शॉर्टहैंड का एक बड़ा सेट मौजूद नहीं है और इस GitHub समस्या का समाधान होना बाकी है. ड्राफ़्ट में कुछ समय के लिए इसका समाधान मौजूद है. अगर आपको बॉक्स के सभी लॉजिकल साइड को शॉर्टहैंड की मदद से स्टाइल करना हो, तो कैसा रहेगा?

margin: 1px 2px 3px 4px;
margin: 1px 2px;
margin: 2px;

margin: logical 1px 2px 3px 4px;
margin: logical 1px 2px;
margin: logical 2px;

मौजूदा ड्राफ़्ट प्रस्ताव का मतलब यह होगा कि आपको लॉजिकल समान लागू करने के लिए हर शॉर्टहैंड में logical लिखना होगा, जो कुछ लोगों को बहुत DRY नहीं लगता.

ब्लॉक या पेज लेवल पर इस जगह को बदलने के कई और सुझाव भी हैं. लेकिन इससे, फ़िज़िकल साइड को भी ध्यान में रखते हुए कॉन्टेंट का लॉजिकल इस्तेमाल करना मुश्किल हो सकता है.

html {
  flow-mode: physical;
  /* or */
  flow-mode: logical;
  /* now all margin/padding/etc references are logical */
}

/* hopefully no 3rd/1st party code is hard coded to top/left/etc ..? */

यह मुश्किल है! अपना वोट दें, अपनी राय दें, और अपने सुझाव दें.

लॉजिकल प्रॉपर्टी सीखना या सीखना है? यहां एमडीएन पर 🤓 गाइड और उदाहरणों के साथ-साथ ज़्यादा जानकारी दी गई है

सुझाव/राय दें या शिकायत करें

• फ़्लो-रिलेटिव शॉर्टहैंड के सीएसएस सिंटैक्स में बदलाव का सुझाव देने के लिए, पहले csswg-drafts रिपॉज़िटरी पर मौजूदा समस्याएं देखें. अगर कोई भी मौजूदा समस्या आपके प्रस्ताव से मेल नहीं खाती है, तो एक नई समस्या बनाएं.
• Chromium के फ़्लो-रिलेटिव शॉर्टहैंड को लागू करने में आने वाली गड़बड़ियों की शिकायत करने के लिए, पहले Chromium Bug Tracker पर मौजूदा समस्याओं की जांच करें. अगर कोई भी मौजूदा समस्या आपकी गड़बड़ी से मेल नहीं खाती है, तो एक नई समस्या बनाएं.