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

विषय - सूची:

Anonim

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

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

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

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

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

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

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

मूल्यों

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

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

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

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

डेमो

अग्रिम पठन

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