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

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

Adam Argyle

Oriol Brufau

Chromium 69 (3 सितंबर, 2018) से, लॉजिकल प्रॉपर्टी और वैल्यू से मदद मिली है डेवलपर अपने अंतरराष्ट्रीय लेआउट पर तर्क के साथ नियंत्रण बनाए रखते हैं, दिशा-निर्देश और डाइमेंशन स्टाइल के मुकाबले एक नया अनुभव देता है. Chromium 87 में, शॉर्टहैंड और ऑफ़सेट के हिसाब से डेटा भेज दिया गया है, ताकि इन लॉजिकल प्रॉपर्टी और वैल्यू को लिखना थोड़ा आसान हो जाए. यह Chromium को 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 है! ये लॉजिकल प्रॉपर्टी, अंग्रेज़ी के पाठकों की ऊपर और नीचे के हिस्से में, लेकिन भी दाईं और बाईं ओर एक जैपनीज़ पाठक को कहते हैं. एक बार लिखा गया, हर जगह काम करता है.

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

ब्लॉक करने का निर्देश वह दिशा है जिस पर नया कॉन्टेंट ब्लॉक होता है. जैसे, खुद से पूछना, "अगला पैराग्राफ़ कहां रखना है?". आप इसे "कॉन्टेंट ब्लॉक" या "टेक्स्ट का ब्लॉक" मान सकते हैं. हर भाषा के लिए, ब्लॉक को क्रम से लगाया जाता है और उन्हें क्रम से लगाया जाता है 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;

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

फ़िज़िकल प्रॉपर्टी top, right, bottom, और left को लिखा जा सकता है inset प्रॉपर्टी की वैल्यू के तौर पर. 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> और कुछ लॉजिकल प्रॉपर्टी. अगर आपको यह जानना है कि दुनिया भर में विचार करने वाले सीएसएस एक साथ काम करते हैं, मुझे उम्मीद है कि यह एक छोटा सा अर्थपूर्ण परिचय है.

पॉलीफ़िलिंग और क्रॉस-ब्राउज़र सपोर्ट

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

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() के pseudo-selector का इस्तेमाल करती है. साथ ही, बीच में सही दूरी दिखाते हैं, तो अंत में सपोर्ट करने वाले ब्राउज़र के लिए स्पेसिंग:

/* 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, इमोशन और अन्य में ऑटोमेटेड बंडलर और/या बिल्ड है इस्तेमाल करें, जिसमें कई तरह के फ़ॉलबैक और समाधान शामिल हों. हर एक को देखें का इस्तेमाल करें.

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

ज़्यादा सीएसएस, लॉजिकल प्रॉपर्टी ऑफ़र करेंगी. हालांकि, इसे अभी तक पूरा नहीं किया गया है! एक बड़ी कमी है हालांकि, इसमें शॉर्टहैंड का एक सेट शामिल है. 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 शॉर्टहैंड की सुविधा इस्तेमाल की जा सकती है, ताकि लॉजिकल समरी लागू हो सके, जो कि कुछ के लिए बहुत सूक्ष्म.

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

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 पर मौजूदा समस्याओं की जांच करें. अगर किसी भी मौजूदा समस्या का मिलान आपकी गड़बड़ी से नहीं हो रहा है, तो नई समस्या बनाएं.