CSS यूजर इंटरफेस

CSS यूजर इंटरफेस

इस चापरे में, आपको निम्नलिखित CSS यूज़र इंटरफ़ेस गुण सीखने होंगे:

  • resize
  • outline-offset

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

तालिका में नंबरों के द्वारा पूर्णता से समर्थन देने वाले पहले ब्राउज़र का संस्करण निर्दिष्ट किया गया है。

अट्रिब्यूट च्रोम आईई फ़ायरफॉक्स सफारी ऑपेरा
resize 4.0 असमर्थित 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS समायोजित करना

resize गुण एलिमेंट को उपयोगकर्ता द्वारा समायोजित करने के लिए (और कैसे) निर्धारित करता है。

इस div एलिमेंट को उपयोगकर्ता समायोजित कर सकता है!

आकार समायोजित करें: इस div एलिमेंट के दायाँ नीचे को क्लिक करके और खींचकर。

ध्यान दें:इंटरनेट एक्सप्लोरर रिजाइज़ गुण का समर्थन नहीं करता。

निम्नलिखित उदाहरण में उपयोगकर्ता को केवल <div> एलिमेंट की चौड़ाई को समायोजित करने की अनुमति देता है:

उदाहरण

div {
  resize: horizontal;
  overflow: auto;
}

अपने आप प्रयोग करें

निम्नलिखित उदाहरण में उपयोगकर्ता को केवल <div> एलिमेंट की ऊंचाई को समायोजित करने की अनुमति देता है:

उदाहरण

div {
  resize: vertical;
  overflow: auto;
}

अपने आप प्रयोग करें

निम्नलिखित उदाहरण में उपयोगकर्ता को <div> एलिमेंट की ऊंचाई और चौड़ाई को समायोजित करने की अनुमति देता है:

उदाहरण

div {
  resize: both;
  overflow: auto;
}

अपने आप प्रयोग करें

कई ब्राउज़रों में <textarea> डिफ़ॉल्ट में एडजस्टेबल है। यहाँ, हमने resize गुण के द्वारा इसकी एडजस्टेबिलिटी को निष्क्रिय कर दिया है:

उदाहरण

textarea {
  resize: none;
}

अपने आप प्रयोग करें

सीएसएस कंटूर ऑफसेट

outline-offset गुण आयतन और एलिमेंट के बॉर्डर के बीच की जगह जोड़ता है。

इस div में 15px का कंटॉर है बॉर्डर के बाहर。

ध्यान दें:कंटॉर का बॉर्डर से अलग है! बॉर्डर से अलग, कंटॉर लाइन एलिमेंट के बॉर्डर के बाहर चित्रित होती है और अन्य सामग्री से ओवरलैप हो सकती है। साथ ही, कंटॉर भी एलिमेंट के आकार का हिस्सा नहीं है: एलिमेंट का कुल चौड़ाई और ऊंचाई कंटॉर लाइन चौड़ाई के प्रभाव से प्रभावित नहीं होती है。

निम्नलिखित उदाहरण में outline-offset गुण के द्वारा बॉर्डर और आयतन के बीच की जगह जोड़ी गई है:

उदाहरण

div.ex1 {
  margin: 20px;
  border: 1px सॉलिड ब्लू;
  outline: 4px सॉलिड रेड;
  outline-offset: 15px;
} 
div.ex2 {
  margin: 10px;
  border: 1px सॉलिड ब्लू;
  outline: 5px डैशेड ब्लू;
  outline-offset: 5px;
}

अपने आप प्रयोग करें

CSS यूजर इंटरफेस अट्रिब्यूट

नीचे दिए गए तालिका में सभी यूजर इंटरफेस अट्रिब्यूट दिए गए हैं:

अट्रिब्यूट वर्णन
outline-offset कंटॉर्न और एलिमेंट के बॉर्डर किनारे के बीच अंतर जोड़ता है
resize एलिमेंट को उपयोगकर्ता द्वारा साइज़ करने की अनुमति देता है