इनसेट-ब्लॉक-स्टार्ट - सीएसएस-ट्रिक्स

Anonim

inset-block-startएक तार्किक सीएसएस गुण है जो उस लंबाई को निर्धारित करता है जो एक तत्व अपने शुरुआती किनारे से ब्लॉक दिशा में ऑफसेट होता है। यह घोषित करने की तरह है कि topइसके शुरुआती बिंदु को छोड़कर तत्व के द्वारा निर्धारित किया गया है direction, text-orientationऔर writing-mode, अन्य तार्किक गुणों की तरह।

संपत्ति CSS लॉजिकल प्रॉपर्टीज़ और वैल्यूज़ लेवल 1 विनिर्देश का हिस्सा है जो वर्तमान में संपादक की ड्राफ्ट स्थिति में है। इसका मतलब है कि परिभाषा और इसके बारे में जानकारी अब और आधिकारिक सिफारिश के बीच बदल सकती है।

.element ( inset-block-start: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )

इसलिए, उदाहरण के लिए, यदि लेखन मोड संपत्ति के लिए सेट किया horizontal-lrगया है, तो वह inset-block-startउसी तरह कार्य करेगा topऔर तत्व के ऑफसेट को शुरू के किनारे से सेट करेगा, जो कि शीर्ष है। यहां तक ​​कि आपको इसके लिए एक positionही तत्व पर एक स्पष्ट निर्दिष्ट करने की आवश्यकता है , जैसे प्रभाव topऔर अन्य भौतिक ऑफसेट गुण।

लेकिन तत्व writing-modeको कुछ की तरह बदलें vertical-rlऔर शुरुआती बढ़त को ऊर्ध्वाधर दिशा में घुमाया जाता है, leftसंपत्ति की तरह अधिक कार्य करता है।

वाक्य - विन्यास

inset-block-start: ;
  • प्रारंभिक मूल्य: auto
  • इस पर लागू होता है: तत्वों को तैनात किया जाता है
  • इन्हेरिट किया: नहीं
  • प्रतिशत: इसी भौतिक संपत्ति के लिए
  • संगणित मूल्य: समान topसंपत्ति के समान
  • एनीमेशन प्रकार: गणना मूल्य प्रकार से

मूल्यों

inset-block-startलंबाई मान लेता है और वैश्विक कीवर्ड का समर्थन करता है। इसका डिफ़ॉल्ट मान है auto।

/* Length values */ inset-block-start: 50px; inset-block-start: 4em; inset-block-start: 3.5rem inset-block-start: 25vh; /* Percentage values */ inset-block-start: 50%; /* Keyword values */ inset-block-start: auto; /* initial value */ /* Global values */ inset-block-start: initial inset-block-start: inherit; inset-block-start: unset;

ब्राउज़र का समर्थन

अर्थात एज फ़ायर्फ़ॉक्स क्रोम सफारी ओपेरा
नहीं न नहीं न 63+ नहीं न नहीं न नहीं न
Android क्रोम Android फ़ायरफ़ॉक्स Android ब्राउज़र iOS सफारी ऑपेरा मिनी
नहीं न 79+ नहीं न नहीं न नहीं न
स्रोत: कैनुएज़

डेमो

अग्रिम पठन

  • सीएसएस तार्किक गुण और मूल्य स्तर 1 विनिर्देश (संपादक का मसौदा)
  • MDN प्रलेखन
  • लॉजिकल प्रॉपर्टीज़ एंड वैल्यूज़ (स्मैशिंग मैगज़ीन) को समझना
  • सीएसएस तार्किक गुण (एड्रियन रोजेली)
  • CSS (हुसैन अल हम्माद) में अप्रत्यक्ष क्षैतिज नियम