CSS यूज़र इंटरफ़ेस
Optional Advanced ने अभी एक फ़ोटो पर स्टेंसिल लगाया। यह सत्र दूसरा टूलकिट है: यूज़र इंटरफ़ेस। पॉइंटर, कैरेट और नेटिव विजेट क्रोम बदलते हैं। यहाँ हीरो में छेद नहीं काटते, और लेख को अख़बारी कॉलम में नहीं तोड़ते।
सीधा जवाब
CSS यूज़र-इंटरफ़ेस प्रॉपर्टी इंटरैक्शन का इशारा देती हैं। cursor माउस का आकार चुनता है (pointer, wait, help, not-allowed…)। resize कोना खींचने देता है — आमतौर पर textarea पर। outline और outline-offset फ़ोकस रिंग खींचते हैं जो लेआउट जगह नहीं लेती (बॉक्स मॉडल वाला outline आप देख चुके; यहाँ कीबोर्ड की आदत है)। user-select accidental हाइलाइट रोक सकता है। caret-color ब्लिंकिंग बार रंग देता है। appearance (और -webkit-appearance) नेटिव त्वचा उतारकर कंट्रोल फिर से स्टाइल करने देता है। फ़ोकस दिखता रहे। पूरी पेज को अनसेलेक्टेबल पोस्टर न बनाएँ।
यह मास्क या कॉलम क्यों नहीं
मास्क तय करता है कि एक बॉक्स के कौन से पिक्सल दिखें। मल्टी-कॉलम एक टेक्स्ट स्ट्रीम तोड़ता है। UI प्रॉपर्टी इनमें से कुछ नहीं करतीं। चौड़ाई-ऊँचाई वही रहती है जब तक resize न हो। फ़िल्टर और mask-image कला के हैं। यहाँ सवाल: «क्लिक जैसा दिखता है? टाइप हो सकता है? बॉक्स बड़ा हो सकता है? कीबोर्ड यूज़र देखे कि वह कहाँ है?»
cursor — सच बोलें
cursor एक वादा है। pointer मतलब «यह क्लिक हो सकता है।» असली बटन और लिंक पर लगाएँ। उस हेडिंग पर हाथ न रखें जो कुछ नहीं करती।
a.nav-link,
button.save {
cursor: pointer;
}
button[disabled] {
cursor: not-allowed;
}
.help-hint {
cursor: help;
}
.busy-panel {
cursor: wait;
}
default तीर है। text चयनयोग्य कॉपी पर I-बीम है। grab / grabbing ड्रैग हैंडल के लिए। कस्टम url(...) कर्सर छोटे रखें और फ़ॉलबैक कीवर्ड ज़रूर लिखें। झूठा कर्सर न होने से बदतर है: लोग स्लोगन क्लिक करते हैं और कुछ नहीं होता।
resize — बॉक्स बढ़ाएँ, लेआउट नहीं
resize overflow वाले बॉक्स पर चलता है। रोज़ का उपयोग नोट फ़ील्ड है:
textarea.notes {
min-height: 6rem;
min-width: 16rem;
max-width: 100%;
resize: vertical;
overflow: auto;
}
मान: none, both, horizontal, vertical। visible के अलावा overflow जोड़ें वरना हैंडल न दिखे। हर कार्ड पर resize: both न छिड़कें। min-height / max-width फ़ील्ड को सिकुड़ने या फटने से बचाते हैं।
फ़ोकस रिंग के रूप में outline
बॉक्स मॉडल में outline बॉर्डर के बाहर बैठता है और जगह नहीं लेता। UI टूलकिट में वही रिंग कीबोर्ड फ़ोकस के लिए रखें — अक्सर :focus-visible से ताकि माउस हर क्लिक पर बॉक्स न खींचे:
button.save:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 3px;
}
button.save:focus:not(:focus-visible) {
outline: none;
}
ग्लोबल *:focus { outline: none; } न भेजें जब तक हर कंट्रोल का उतना ही साफ़ विकल्प न हो। outline-offset रिंग को किनारे से दूर करता है बिना पड़ोसी हिलाए। यह border नहीं (साइज़ बदलता है) और बटन लेबल पर मास्क फ़ेड भी नहीं।
user-select — accidental हाइलाइट कम करें
चयन एक सुविधा है। सिर्फ वहाँ घटाएँ जहाँ डबल-क्लिक नीला न रंगे — टूलबार लेबल, ड्रैग चिप — लेख नहीं।
.toolbar-label {
user-select: none;
}
article.body {
user-select: text;
}
none हाइलाइट बंद करता है। text पढ़ने योग्य डिफ़ॉल्ट है। all एक क्लिक में पूरा एलिमेंट चुनता है। पुराने WebKit में प्रीफ़िक्स (-webkit-user-select) अभी दिखते हैं। कानूनी टेक्स्ट, कीमत या त्रुटि संदेश पर चयन बंद न करें जिन्हें कॉपी करना ज़रूरी हो।
caret-color — इंसर्शन बार रंगें
कैरेट फ़ील्ड में ब्लिंक करने वाली पट्टी है। ब्रांड से मिलाएँ बिना छिपाए:
input.email,
textarea.notes {
caret-color: #0f766e;
color: #0f172a;
}
caret-color: auto टेक्स्ट रंग का अनुसरण करता है। caret-color: transparent «साफ़ लुक» के लिए जाल है। यह पूरे पेज का color नहीं और ग्लिफ़ पर mask-image भी नहीं।
appearance — नेटिव विजेट फिर से पहनें
ब्राउज़र चेकबॉक्स और सर्च फ़ील्ड नेटिव क्रोम से रंगते हैं। appearance: none (ज़रूरत हो तो -webkit-appearance: none) वह त्वचा उतारता है:
input.search {
appearance: none;
-webkit-appearance: none;
border: 1px solid #94a3b8;
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
}
input[type="checkbox"].tick {
appearance: none;
-webkit-appearance: none;
width: 1.15rem;
height: 1.15rem;
border: 2px solid #334155;
border-radius: 0.25rem;
}
none के बाद आप बॉर्डर, चेक स्टेट और फ़ोकस रिंग के कर्ज़दार हैं। अदृश्य चेकबॉक्स कस्टम कंट्रोल नहीं। सपोर्ट प्रकार के हिसाब से बदलता है; असली विजेट टेस्ट करें। appearance मास्क ठीक नहीं करता और मल्टी-कॉलम की जगह नहीं लेता।
UI बनाम मास्क, कॉलम और बॉक्स-outline
📊 UI vs mask vs columns vs outline
| Tool | Job | Poor fit |
|---|---|---|
cursor / resize / caret-color / appearance |
Interaction chrome on controls | Stenciling a photo; newspaper columns |
user-select |
Limit highlight on chrome, not articles | Hiding copy people must paste |
outline + :focus-visible |
Keyboard focus ring (no layout space) | Replacing border math; fading labels with a mask |
mask-image |
Soft holes on one element’s pixels | Pointer shape; growing a textarea |
Multi-column (column-*) |
Fragment flowing text | Cursors, carets, native widget skin |
Optional Advanced ने कॉलम गद्य के लिए और मास्क तस्वीर के लिए रखा। यूज़र इंटरफ़ेस कंट्रोल परत है। सेटिंग फ़ॉर्म पर column-count या सबमिट बटन पर mask-image फ़ॉर्म को «ज़्यादा UI» नहीं बनाता।
क्या न मिटाएँ
हर नेटिव संकेत न हटाएँ। स्क्रोलबार, कैरेट और फ़ोकस रिंग ज़रूरत से हैं। कंट्रोल disabled हो तो cursor: not-allowed और असली disabled विशेषता उस मास्क से शांत है जो लेबल छिपा दे।
.ok-ui {
cursor: pointer;
outline-offset: 2px;
}
.not-a-stencil {
/* don't: mask-image on the submit label to “soften” the click */
}
.not-a-newspaper {
/* don't: column-count on a login form to look advanced */
}
फ़ोटो किनारा हो तो मास्क पर लौटें। लंबा लेख हो तो कॉलम या साधारण ब्लॉक फ्लो। «क्लिक जैसा नहीं लगता» तो cursor और असली कंट्रोल से शुरू करें, सजावटी फ़िल्टर से नहीं।
ख़ुद आज़माएँ
- असली
<button>परcursor: pointer,[disabled]परnot-allowed। textareaकोresize: vertical,min-height,overflow: autoदें।:focus-visibleoutline +outline-offset— Tab से जाएँ।user-select: noneसिर्फ़ टूलबार चिप पर; लेख चयनयोग्य रहे।- इनपुट में
caret-colorरंगें। फ़ील्ड मास्क न करें,column-countन लगाएँ।
आम गलतियाँ
- लिंक/बटन न होने वाले टेक्स्ट पर
cursor: pointer - लेआउट कार्ड और नेव बार पर
resize: both - बिना
:focus-visibleविकल्प के ग्लोबलoutline: none - पूरी पेज, कीमत या त्रुटि पर
user-select: none - «साफ़ लुक» के लिए
caret-color: transparent appearance: noneफिर बिना बॉर्डर, चेक स्टाइल, फ़ोकस रिंग- मास्क या मल्टी-कॉलम को UI पॉलिश समझना
सार
- यूज़र इंटरफ़ेस CSS इंटरैक्शन का इशारा: पॉइंटर, resize, कैरेट, नेटिव क्रोम
cursorसच बोले;resizeफ़ील्ड का है, पेज शेल का नहीं- दिखने वाली फ़ोकस रिंग रखें;
user-selectऔरcaret-colorहल्के हाथ से appearance: noneतभी जब पूरा विजेट फिर से स्टाइल करें- न मास्क स्टेंसिल, न अख़बारी कॉलम
- Optional Advanced आगे: 3D ट्रांसफ़ॉर्म (
transforms-3d)
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी