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

विषय - सूची:

Anonim

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

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

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

तो, उदाहरण के लिए, यदि लेखन मोड पर सेट किया जाता है संपत्ति सिर्फ सेटिंग की तरह कार्य करेगा और और तत्व के निचले किनारे से ऑफसेट की स्थापना की। यहां तक ​​कि आपको भौतिक ऑफसेट गुणों की तरह, इसे प्रभावी करने के लिए एक ही तत्व पर एक स्पष्ट निर्दिष्ट करने की आवश्यकता है ।horizontal-lrinset-blocktopbottomposition

लेकिन तत्व writing-modeको कुछ इस तरह बदलें vertical-lrऔर "नीचे" किनारे को ऊर्ध्वाधर दिशा में घुमाया जाए, और जैसे गुणों को leftऔर अधिक अभिनय करें right।

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

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

मूल्यों

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

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

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

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

डेमो

अग्रिम पठन

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