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

विषय - सूची:

Anonim

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

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

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

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

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

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

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

मूल्यों

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

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

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

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

डेमो

अग्रिम पठन

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