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

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

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

  • resize
  • outline-offset

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

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

अट्रिब्यूट Chrome IE Firefox Safari Opera
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 एलिमेंट के दायाँ नीचे को क्लिक करके और खींचकर।

ध्यान:Internet Explorer resize विशेषता को समर्थन नहीं करता है。

निम्नलिखित उदाहरण में उपयोगकर्ता को केवल <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 विशेषता outline और एलिमेंट के किनारा border के बीच जगह जोड़ती है。

इस div में 15px का outline किनारा बाहर है。

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

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

उदाहरण

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 यह निर्धारित करता है कि एलिमेंट को यूजर द्वारा क्या साइज़ किया जा सकता है।