सेटिंग कॉम्पोनेंट बनाना

स्लाइडर और चेकबॉक्स का सेटिंग कॉम्पोनेंट बनाने के तरीके के बारे में बुनियादी जानकारी.

Adam Argyle

इस पोस्ट में मैं, ऐसा वेब जो रिस्पॉन्सिव है, कई डिवाइस इनपुट के साथ काम करता है, और सभी के लिए काम करता है ब्राउज़र खोलें. डेमो आज़माएं.

डेमो

अगर आपको वीडियो पसंद है या हम जो प्रॉडक्ट बना रहे हैं उसकी यूज़र इंटरफ़ेस (यूआई)/UX की झलक देखने के लिए, यहां सिलसिलेवार तरीके से निर्देश देने वाले YouTube के वीडियो:

खास जानकारी

मैंने इस कॉम्पोनेंट के बारे में ये सेक्शन बताए हैं:

  1. लेआउट
  2. रंग
  3. कस्टम रेंज का इनपुट
  4. पसंद के मुताबिक चेकबॉक्स इनपुट
  5. सुलभता से जुड़ी ज़रूरी बातें
  6. JavaScript

लेआउट

सभी सीएसएस ग्रिड के तौर पर शामिल होने के लिए यह पहला जीयूआई चैलेंज डेमो है! यहाँ हर ग्रिड की जानकारी दी गई है इसे ग्रिड के लिए Chrome DevTools से हाइलाइट किया गया है:

रंग-बिरंगी आउटलाइन और गैप स्पेसिंग ओवरले, जो सेटिंग लेआउट को बनाने वाले सभी बॉक्स को दिखाने में मदद करते हैं

गैप के लिए

सबसे सामान्य लेआउट:

foo {
  display: grid;
  gap: var(--something);
}

मेरे हिसाब से इस लेआउट को "सिर्फ़ गैप की वजह से" कहते हैं क्योंकि यह ब्लॉक के बीच सिर्फ़ खाली जगह को जोड़ने के लिए ग्रिड का इस्तेमाल करता है.

पांच लेआउट इस कार्यनीति का उपयोग करते हैं, यहां वे सभी प्रदर्शित किए गए हैं:

वर्टिकल ग्रिड लेआउट को आउटलाइन के साथ हाइलाइट किया गया है और बीच में खाली जगह दी गई है

fieldset एलिमेंट में हर इनपुट ग्रुप (.fieldset-item) शामिल है. यह एलिमेंट gap: 1px का इस्तेमाल करके तत्वों के बीच हेयरलाइन बॉर्डर बनाएं. कोई जटिल बॉर्डर समाधान नहीं!

भरा हुआ गैप
.grid {
  display: grid;
  gap: 1px;
  background: var(--bg-surface-1);

  & > .fieldset-item {
    background: var(--bg-surface-2);
  }
}
बॉर्डर ट्रिक
.grid {
  display: grid;

  & > .fieldset-item {
    background: var(--bg-surface-2);

    &:not(:last-child) {
      border-bottom: 1px solid var(--bg-surface-1);
    }
  }
}

नैचुरल ग्रिड रैपिंग

सबसे जटिल लेआउट था मैक्रो लेआउट, लॉजिकल लेआउट <main> और <form> के बीच सिस्टम.

रैपिंग कॉन्टेंट को सेंटर में लाएं

फ़्लेक्सबॉक्स और ग्रिड, दोनों की मदद से align-items या align-content और रैपिंग एलिमेंट के साथ काम करते समय, content लेआउट अलाइनमेंट की मदद से, बच्चों के बीच ग्रुप में एक जगह तय हो जाएगी.

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
}

मुख्य एलिमेंट, place-content: center अलाइनमेंट का इस्तेमाल कर रहा है शॉर्टहैंड की मदद से कि बच्चे एक और दो कॉलम वाले लेआउट में वर्टिकल और हॉरिज़ॉन्टल तौर पर सेंटर किए गए हों.

ऊपर दिए गए वीडियो में देखें कि कैसे "कॉन्टेंट" लपेटने के बावजूद केंद्र में रहता है आ गया है.

अपने-आप फ़िट होने वाला कम से कम मान दोहराएं

<form> में हर सेक्शन के लिए, अडैप्टिव ग्रिड लेआउट का इस्तेमाल किया जाता है. यह लेआउट, उपलब्ध जगह के हिसाब से एक से दो कॉलम पर स्विच करता है.

form {
  display: grid;
  gap: var(--space-xl) var(--space-xxl);
  grid-template-columns: repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
  align-items: flex-start;
  max-width: 89vw;
}

इस ग्रिड में row-gap (--space-xl) के लिए column-gap (--space-xxl) से अलग मान है उसका इस्तेमाल करके, रिस्पॉन्सिव लेआउट इस्तेमाल किया जा सकता है. जब कॉलम स्टैक में हो जाते हैं, तो हम लेकिन उतना बड़ा नहीं, जितना कि हम बड़ी स्क्रीन पर हों.

grid-template-columns प्रॉपर्टी में तीन सीएसएस फ़ंक्शन इस्तेमाल किए जाते हैं: repeat(), minmax(), और min(). ऊना क्रेवेट्स का शानदार लेआउट ब्लॉग है इस बारे में पोस्ट करें और कॉल करें रैम.

अगर आप इसकी तुलना Una के लेआउट से करें, तो हमारे लेआउट में 3 खास जोड़ियां हैं:

  • हम एक अतिरिक्त min() फ़ंक्शन पास करते हैं.
  • हम align-items: flex-start की जानकारी देते हैं.
  • यह max-width: 89vw की एक स्टाइल है.

अतिरिक्त min() फ़ंक्शन का विवरण इवान मिंटो ने अपने ब्लॉग में अच्छी तरह से किया है पोस्ट minmax() के साथ पूरी तरह से रिस्पॉन्सिव सीएसएस ग्रिड min() के अंदर इस्तेमाल किया जाना चाहिए. मेरा सुझाव है कि आप इसे एक बार पढ़ लें. flex-start संरेखण सुधार यह है डिफ़ॉल्ट स्ट्रेचिंग इफ़ेक्ट को हटा दें, ताकि इस लेआउट के चिल्ड्रन ऊंचाई समान होनी चाहिए, प्राकृतिक ऊंचाई हो सकती है. कॉन्टेंट बनाने YouTube वीडियो में इस अलाइनमेंट को विस्तार से बताया गया है.

इस पोस्ट में, max-width: 89vw के बारे में थोड़ी-बहुत जानकारी देना फ़ायदेमंद है. चलिए, मैं आपको लागू की गई स्टाइल के साथ और उसके बिना लेआउट दिखाता हूं:

क्या हो रहा है? जब max-width के बारे में बताया जाता है, तो यह संदर्भ देता है, स्पष्ट आकार या निश्चित auto-fit के लिए साइज़ लेआउट एल्गोरिदम का इस्तेमाल करके उसे कई बार दोहराना है, जो स्पेस में फ़िट हो सकता है. हालांकि, यह साफ़ तौर पर लगता है कि सीएसएस ग्रिड स्पेसिफ़िकेशन के मुताबिक, स्पेस "पूरी चौड़ाई" है. वैल्यू के लिए कोई तय साइज़ या ज़्यादा से ज़्यादा साइज़ होना ज़रूरी है जानकारी दी जाएगी. मैंने ज़्यादा से ज़्यादा साइज़ उपलब्ध कराया है.

89vw ही क्यों? क्योंकि "यह काम कर रहा था" मेरे लेआउट के लिए. मैं और Chrome के कुछ अन्य लोग इस बात का पता लगा रहे हैं कि लोग जैसे 100vw काफ़ी नहीं है. अगर वाकई में यह एक गड़बड़ी है, तो

स्पेसिंग

इस लेआउट की ज़्यादातर खासियतें 7 स्पेसिंग की सीमित पैलेट से है सटीक जानकारी देनी होगी.

:root {
  --space-xxs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-xxl: 6rem;
}

ग्रिड, CSS @nest, और लेवल 5 सिंटैक्स के साथ-साथ इन फ़्लो का अच्छी तरह से इस्तेमाल किया गया है @media है. यहां एक उदाहरण दिया गया है, जो स्टाइल का पूरी तरह से <main> लेआउट सेट है.

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
  padding: var(--space-sm);

  @media (width >= 540px) {
    & {
      padding: var(--space-lg);
    }
  }

  @media (width >= 800px) {
    & {
      padding: var(--space-xl);
    }
  }
}

बीच में कॉन्टेंट वाला ग्रिड, जिसमें डिफ़ॉल्ट रूप से कुछ हद तक पैड किया हुआ होता है. जैसे, मोबाइल पर. लेकिन व्यूपोर्ट स्पेस के ज़्यादा उपलब्ध होने पर, पैडिंग बढ़ाने से यह फैल जाता है. सीएसएस 2021 काफ़ी अच्छा दिख रहा है!

क्या आपको पिछला लेआउट, "सिर्फ़ गैप के लिए" याद है? यहां इसका पूरा वर्शन दिया गया है इस कॉम्पोनेंट में वे कैसे दिखते हैं:

header {
  display: grid;
  gap: var(--space-xxs);
}

section {
  display: grid;
  gap: var(--space-md);
}

रंग

रंगों का सही इस्तेमाल करने की वजह से, यह डिज़ाइन कुछ खास पहचान बनाने में कामयाब रहा मिनिमल. मैं इसे इस तरह करता/करती हूं:

:root {
  --surface1: lch(10 0 0);
  --surface2: lch(15 0 0);
  --surface3: lch(20 0 0);
  --surface4: lch(25 0 0);

  --text1: lch(95 0 0);
  --text2: lch(75 0 0);
}

मैं अपने प्लैटफ़ॉर्म और टेक्स्ट के रंगों को नंबर के साथ नाम देता/देती हूं, जबकि ये नाम न हों surface-dark और surface-darker क्योंकि मीडिया क्वेरी में, मैं फ़्लिप करूँगी साथ ही, रोशनी और अंधेरा कोई मायने नहीं रखता.

मैं उन्हें इस तरह पसंदीदा मीडिया क्वेरी में फ़्लिप करता हूं:

:root {
  ...

  @media (prefers-color-scheme: light) {
    & {
      --surface1: lch(90 0 0);
      --surface2: lch(100 0 0);
      --surface3: lch(98 0 0);
      --surface4: lch(85 0 0);

      --text1: lch(20 0 0);
      --text2: lch(40 0 0);
    }
  }
}

यह ज़रूरी है कि वीडियो बनाने से पहले, पूरी तस्वीर और रणनीति की एक झलक देख ली जाए हम कलर सिंटैक्स की जानकारी देते हैं. लेकिन, जब से मैं अपने आप से थोड़ा आगे निकल चुकी हूं, मैं थोड़ी देर पूछता हूं.

एलसीएच?

कलर थ्योरी की बुनियादी बातों पर ज़्यादा ध्यान दिए बिना एलसीएच, इंसानों के हिसाब से बनाया गया सिंटैक्स होता है. इससे यह पता चलता है कि हम रंग को कैसे देखते हैं, न कि गणित की मदद से रंग को कैसे मापते हैं (जैसे 255) के तौर पर बदल दिया जाता है. इससे इसका एक अलग फ़ायदा मिलता है, क्योंकि इंसान इसे ज़्यादा आसानी से लिख सकते हैं और दूसरे तरीके से इन बदलावों के हिसाब से लोग मैन्युअल तौर पर ज़िम्मेदार होंगे.

pod.link/csspodcast वेबपेज का स्क्रीनशॉट, जिसमें रंग 2: पर्सेप्शन एपिसोड दिखाया गया है
सीएसएस पॉडकास्ट पर, पर्सेप्चुअल कलर (और बहुत कुछ!) के बारे में जानें

आज हम इस डेमो में, सिंटैक्स और फ़्लिप की जा रही वैल्यू पर फ़ोकस करते हैं ताकि सब कुछ उजाले. आइए, एक सतह और एक टेक्स्ट रंग देखते हैं:

:root {
  --surface1: lch(10 0 0);
  --text1:    lch(95 0 0);

  @media (prefers-color-scheme: light) {
    & {
      --surface1: lch(90 0 0);
      --text1:    lch(40 0 0);
    }
  }
}

--surface1: lch(10 0 0) का मतलब 10% हल्कापन, 0 क्रोमा, और 0 ह्यू होता है: a गहरा रंगहीन स्लेटी. इसके बाद, हल्के रंग वाले मोड के लिए मीडिया क्वेरी में, हल्के रंग का --surface1: lch(90 0 0); के साथ 90% में बदल दिया गया है. और यह सार वह है रणनीति. शुरू करने के लिए, बस दो थीम के बीच के लाइट को बदलें. ऐसा करते समय, कंट्रास्ट अनुपात की मदद से, डिज़ाइन के लिए और सुलभता को बनाए रखने के लिए क्या किया जा सकता है.

यहां lch() के साथ बोनस यह है कि हल्कापन इंसानों के लिए है और हम महसूस कर सकते हैं % में हुए बदलाव के बारे में अच्छी बात है. यह महसूस करने पर और लगातार होगा और वह % अलग है. उदाहरण के लिए hsl() इस रूप में नहीं है भरोसेमंद.

यहां और भी बहुत कुछ है इसके बारे में जानें रंग स्पेस और lch() का इस्तेमाल करें. यह आ रहा है!

फ़िलहाल, सीएसएस इन रंगों को ऐक्सेस नहीं कर सकती. मुझे एक बार फिर से बताना होगा: हमारे पास ज़्यादातर मॉडर्न कलर में मौजूद एक तिहाई कलर का ऐक्सेस नहीं है मॉनिटर करते हैं. और ये सिर्फ़ कोई भी रंग नहीं हैं, बल्कि सबसे चमकीले रंग स्क्रीन दिखाई जा सकती है. हमारी वेबसाइट इसलिए बर्बाद हो गई हैं, क्योंकि मॉनिटर हार्डवेयर पहले से ही बेहतर हो गया है यह CSS विनिर्देशों और ब्राउज़र कार्यान्वयन की तुलना में ज़्यादा तेज़ है.

ली वेरो

कलर-स्कीम के साथ अडैप्टिव फ़ॉर्म कंट्रोल

कई ब्राउज़र पर गहरे रंग वाली थीम कंट्रोल उपलब्ध होते हैं. फ़िलहाल, Safari और Chromium में इस सुविधा का इस्तेमाल किया जाता है. को सीएसएस या एचटीएमएल में यह बताना होगा कि आपका डिज़ाइन उनका इस्तेमाल करता है.

ऊपर दिया गया तरीका, इसके स्टाइल पैनल से प्रॉपर्टी के असर को दिखाता है DevTools. डेमो में एचटीएमएल टैग का इस्तेमाल किया गया है, जो मेरी राय में आम तौर पर ऐसा है एक बेहतर स्थान:

<meta name="color-scheme" content="dark light">

इस color-scheme में इसके बारे में सब कुछ जानें लेख थॉमस स्टाइनर. अभी बहुत कुछ हासिल करना बाकी है कम रोशनी वाले चेकबॉक्स इनपुट से ज़्यादा!

सीएसएस accent-color

हाल ही में आस-पास की गतिविधि फ़ॉर्म एलीमेंट पर accent-color, जो एकल CSS शैली होने के कारण ब्राउज़र इनपुट एलिमेंट में इस्तेमाल किया गया टिंट रंग. इसके बारे में ज़्यादा जानने के लिए, यहां क्लिक करें GitHub. मैंने इसे अपने स्टाइल. जैसे-जैसे ब्राउज़र इसका समर्थन करते हैं, वैसे-वैसे मेरे चेकबॉक्स गुलाबी और बैंगनी रंग की थीम के साथ और भी बहुत कुछ.

input[type="checkbox"] {
  accent-color: var(--brand);
}

Linux पर गुलाबी चेकबॉक्स वाले Chromium से लिया गया स्क्रीनशॉट

फ़िक्स्ड ग्रेडिएंट और फ़ोकस-इन-द के साथ कलर पॉप

रंगों का सबसे ज़्यादा इस्तेमाल तब किया जाता है, जब इसका इस्तेमाल बहुत कम किया जाता है. यह भी एक ऐसा तरीका है जिससे मुझे अपने दर्शकों की संख्या बढ़ाने में मदद मिलती है जो रंग-बिरंगे यूज़र इंटरफ़ेस (यूआई) इंटरैक्शन के ज़रिए होती हैं.

ऊपर दिए गए वीडियो में, यूज़र इंटरफ़ेस (यूआई) से जुड़े सुझाव और इंटरैक्शन की कई लेयर हैं. इनसे इंटरैक्शन को बेहतर बनाने में मदद मिलती है. इसके लिए:

  • कॉन्टेक्स्ट हाइलाइट किया जा रहा है.
  • "कितना भरा है" के यूज़र इंटरफ़ेस (यूआई) के बारे में सुझाव/राय देना या शिकायत करना मान सीमा में है.
  • यूज़र इंटरफ़ेस (यूआई) से यह सुझाव देना कि फ़ील्ड में इनपुट स्वीकार किया जा रहा है.

किसी एलिमेंट के साथ इंटरैक्ट करते समय, सुझाव देने के लिए सीएसएस :focus-within अलग-अलग एलिमेंट के लुक में बदलाव करने के लिए, pseudo क्लास का इस्तेमाल किया जा रहा है. आइए, .fieldset-item, यह बहुत दिलचस्प है:

.fieldset-item {
  ...

  &:focus-within {
    background: var(--surface2);

    & svg {
      fill: white;
    }

    & picture {
      clip-path: circle(50%);
      background: var(--brand-bg-gradient) fixed;
    }
  }
}

जब इस एलिमेंट का कोई बच्चा फ़ोकस में हो:

  1. .fieldset-item बैकग्राउंड के लिए, ज़्यादा कंट्रास्ट रंग की ज़रूरत होती है.
  2. ज़्यादा कंट्रास्ट के लिए, नेस्ट किए गए svg को सफ़ेद रंग से भरा जाता है.
  3. नेस्ट किया गया <picture> clip-path एक पूरे सर्कल में बड़ा हो जाता है और बैकग्राउंड में चमकदार फ़िक्स्ड ग्रेडिएंट है.

पसंद के मुताबिक बनाई गई सीमा

नीचे दिए गए एचटीएमएल इनपुट एलिमेंट के आधार पर, मैं आपको बताऊँगा कि मैंने इसे CANNOT TRANSLATE

<input type="range">

इस एलिमेंट को तीन हिस्सों में कस्टमाइज़ करना होता है:

  1. रेंज एलिमेंट / कंटेनर
  2. ट्रैक करना
  3. थंब

रेंज एलिमेंट के स्टाइल

input[type="range"] {
  /* style setting variables */
  --track-height: .5ex;
  --track-fill: 0%;
  --thumb-size: 3ex;
  --thumb-offset: -1.25ex;
  --thumb-highlight-size: 0px;

  appearance: none;         /* clear styles, make way for mine */
  display: block;
  inline-size: 100%;        /* fill container */
  margin: 1ex 0;            /* ensure thumb isn't colliding with sibling content */
  background: transparent;  /* bg is in the track */
  outline-offset: 5px;      /* focus styles have space */
}

CSS की पहली कुछ पंक्तियां शैलियों के कस्टम भाग हैं और मैं आशा करता हूं कि लेबल लगाने से उन्हें मदद मिलती है. बाकी स्टाइल में ज़्यादातर स्टाइल रीसेट की जाती हैं, ताकि कॉम्पोनेंट के पेचीदा हिस्सों को बनाने की बुनियाद एक जैसी होनी चाहिए.

ट्रैक के स्टाइल

input[type="range"]::-webkit-slider-runnable-track {
  appearance: none; /* clear styles, make way for mine */
  block-size: var(--track-height);
  border-radius: 5ex;
  background:
    /* hard stop gradient:
        - half transparent (where colorful fill we be)
        - half dark track fill
        - 1st background image is on top
    */
    linear-gradient(
      to right,
      transparent var(--track-fill),
      var(--surface1) 0%
    ),
    /* colorful fill effect, behind track surface fill */
    var(--brand-bg-gradient) fixed;
}

इसकी तरकीब "दिखाना" है में आकर्षक रंग भरें. यह काम करने के लिए ऊपर हार्ड स्टॉप ग्रेडिएंट. ग्रेडिएंट, फ़िल प्रतिशत तक और बाद में पारदर्शी होता है जो खाली ट्रैक की सतह के रंग का इस्तेमाल करता है. इस खाली जगह के पीछे, पूरी चौड़ाई वाला रंग, इसे दिखाने के लिए पारदर्शिता का इंतज़ार किया जा रहा है.

ट्रैक को भरने का स्टाइल

मेरे डिज़ाइन में फ़िल स्टाइल को बनाए रखने के लिए, JavaScript की ज़रूरत है. यह लीजिए सिर्फ़ सीएसएस की रणनीतियां होती हैं. हालांकि, उनका थंब एलिमेंट एक जैसा होना चाहिए नहीं दिख रहा था, और मुझे उन सीमाओं में कोई समानता नहीं मिली.

/* grab sliders on page */
const sliders = document.querySelectorAll('input[type="range"]')

/* take a slider element, return a percentage string for use in CSS */
const rangeToPercent = slider => {
  const max = slider.getAttribute('max') || 10;
  const percent = slider.value / max * 100;

  return `${parseInt(percent)}%`;
};

/* on page load, set the fill amount */
sliders.forEach(slider => {
  slider.style.setProperty('--track-fill', rangeToPercent(slider));

  /* when a slider changes, update the fill prop */
  slider.addEventListener('input', e => {
    e.target.style.setProperty('--track-fill', rangeToPercent(e.target));
  })
})

हमें लगता है कि इसकी मदद से विज़ुअल अपग्रेड बेहतर होगा. स्लाइडर बिना किसी परेशानी के बढ़िया काम करता है JavaScript, --track-fill प्रॉप की ज़रूरत नहीं है, इसमें बस फ़िल स्टाइल. अगर JavaScript उपलब्ध है, तो प्रॉपर्टी में होने वाले किसी भी बदलाव को ध्यान में रखते हुए, वैल्यू.

यह एक शानदार पोस्ट को चालू है Ana की CSS-Tricks Tudor, जो ट्रैक को भरना. मुझे यह भी मिला range एलिमेंट से बहुत प्रेरणा मिलती है.

थंब स्टाइल

input[type="range"]::-webkit-slider-thumb {
  appearance: none; /* clear styles, make way for mine */
  cursor: ew-resize; /* cursor style to support drag direction */
  border: 3px solid var(--surface3);
  block-size: var(--thumb-size);
  inline-size: var(--thumb-size);
  margin-top: var(--thumb-offset);
  border-radius: 50%;
  background: var(--brand-bg-gradient) fixed;
}

इनमें से ज़्यादातर स्टाइल, एक अच्छा सर्कल बनाने के लिए हैं. फिर से आपको वहां एक निश्चित बैकग्राउंड ग्रेडिएंट दिखेगा, जो पसंद के अंगूठों, ट्रैक, और उनसे जुड़े SVG एलिमेंट के डाइनैमिक रंग. box-shadow को अलग करने में मदद करने के लिए, मैंने इंटरैक्शन की स्टाइल अलग कर दी हैं तकनीक का इस्तेमाल करके होवर को हाइलाइट करें:

@custom-media --motionOK (prefers-reduced-motion: no-preference);

::-webkit-slider-thumb {
  …

  /* shadow spread is initally 0 */
  box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);

  /* if motion is OK, transition the box-shadow change */
  @media (--motionOK) {
    & {
      transition: box-shadow .1s ease;
    }
  }

  /* on hover/active state of parent, increase size prop */
  @nest input[type="range"]:is(:hover,:active) & {
    --thumb-highlight-size: 10px;
  }
}

लक्ष्य को मैनेज करना आसान था. साथ ही, उपयोगकर्ता के सुझाव, शिकायत या राय के लिए विज़ुअल हाइलाइट को ऐनिमेट किया गया था. बॉक्स शैडो का इस्तेमाल करके, मैं ट्रिगर करने की समस्या से बचा सकता हूं लेआउट इफ़ेक्ट चुनें. मैं यह करता/करती हूं ऐसी परछाई बना सकता है जो धुंधला न हो और जो थंब एलिमेंट. इसके बाद, कर्सर घुमाने पर इसके स्प्रेड साइज़ को बदलता है और उसे बदल देता है.

अगर चेकबॉक्स पर सिर्फ़ हाइलाइट इफ़ेक्ट देना बहुत आसान होता...

क्रॉस ब्राउज़र सिलेक्टर

मुझे पता चला कि क्रॉस ब्राउज़र का इस्तेमाल करने के लिए, मुझे इन -webkit- और -moz- सिलेक्टर की ज़रूरत है अनुकूलता:

input[type="range"] {
  &::-webkit-slider-runnable-track {}
  &::-moz-range-track {}
  &::-webkit-slider-thumb {}
  &::-moz-range-thumb {}
}

पसंद के मुताबिक चेकबॉक्स

नीचे दिए गए एचटीएमएल इनपुट एलिमेंट के आधार पर, मैं आपको बताऊँगा कि मैंने इसे CANNOT TRANSLATE

<input type="checkbox">

इस एलिमेंट को तीन हिस्सों में कस्टमाइज़ करना होता है:

  1. चेकबॉक्स एलिमेंट
  2. किसी प्रॉडक्ट से जुड़े लेबल
  3. हाइलाइट इफ़ेक्ट

चेकबॉक्स एलिमेंट

input[type="checkbox"] {
  inline-size: var(--space-sm);   /* increase width */
  block-size: var(--space-sm);    /* increase height */
  outline-offset: 5px;            /* focus style enhancement */
  accent-color: var(--brand);     /* tint the input */
  position: relative;             /* prepare for an absolute pseudo element */
  transform-style: preserve-3d;   /* create a 3d z-space stacking context */
  margin: 0;
  cursor: pointer;
}

transform-style और position स्टाइल, छद्म एलिमेंट के लिए तैयार किए गए हैं, जिन्हें हम बाद में शामिल करेंगे ताकि हाइलाइट को स्टाइल किया जा सके. नहीं तो, यह ज़्यादातर मेरी तरफ़ से छोटी-छोटी बातों पर आधारित कॉन्टेंट. मुझे कर्सर का पॉइंटर पसंद है, मुझे पसंद है आउटलाइन ऑफ़सेट, डिफ़ॉल्ट चेकबॉक्स बहुत छोटे होते हैं, और अगर accent-color का इस्तेमाल किया जा सकता है, तो इन्हें चेकबॉक्स का इस्तेमाल करें.

चेकबॉक्स के लेबल

चेकबॉक्स के लिए लेबल देना, दो वजहों से ज़रूरी है. पहला है यह बताना कि चेकबॉक्स वैल्यू का इस्तेमाल किसलिए किया जाता है, "किसके लिए चालू या बंद करें?" दूसरा विकल्प उपयोगकर्ता अनुभव के लिए है. वेब उपयोगकर्ता, साइट या ऐप्लिकेशन पर इंटरैक्ट करने के आदी हो गए हैं चेकबॉक्स का इस्तेमाल करके लेबल से बदलाव कर सकते हैं.

इनपुट
<input
  type="checkbox"
  id="text-notifications"
  name="text-notifications"
>
लेबल
<label for="text-notifications">
  <h3>Text Messages</h3>
  <small>Get notified about all text messages sent to your device</small>
</label>

अपने लेबल पर, ऐसा for एट्रिब्यूट डालें जो आईडी: <label for="text-notifications"> के हिसाब से बने चेकबॉक्स पर ले जाता हो. अपने चेकबॉक्स पर, नाम और आईडी, दोनों को दो बार बनाएं पक्का करें कि यह अलग-अलग टूल और टेक्नोलॉजी की मदद से मिले. जैसे, माउस या स्क्रीनरीडर: <input type="checkbox" id="text-notifications" name="text-notifications">. :hover, :active वगैरह मुफ़्त में कनेक्शन के साथ आते हैं, जिससे फ़ॉर्म पर इंटरैक्ट करने के लिए,

चेकबॉक्स हाइलाइट

मैं अपने इंटरफ़ेस को एक जैसा रखना चाहता हूं, और स्लाइडर एलिमेंट में थंबनेल हाइलाइट करता है जिसे मैं चेकबॉक्स के साथ उपयोग करना चाहता/चाहती हूं. थंबनेल यह था box-shadow का इस्तेमाल कर पाएगा. साथ ही, यह spread प्रॉपर्टी है, ताकि गहरे हिस्सों को स्केल किया जा सके और नीचे. हालांकि, यह प्रभाव यहां काम नहीं करता है, क्योंकि हमारे चेकबॉक्स इस प्रकार हैं और आपको be, वर्ग.

मैंने एक सूडो एलिमेंट की मदद से, वैसा ही विज़ुअल इफ़ेक्ट हासिल किया और हालांकि, इतनी पेचीदा सीएसएस:

@custom-media --motionOK (prefers-reduced-motion: no-preference);

input[type="checkbox"]::before {
  --thumb-scale: .01;                        /* initial scale of highlight */
  --thumb-highlight-size: var(--space-xl);

  content: "";
  inline-size: var(--thumb-highlight-size);
  block-size: var(--thumb-highlight-size);
  clip-path: circle(50%);                     /* circle shape */
  position: absolute;                         /* this is why position relative on parent */
  top: 50%;                                   /* pop and plop technique (https://web.dev/centering-in-css#5-pop-and-plop) */
  left: 50%;
  background: var(--thumb-highlight-color);
  transform-origin: center center;            /* goal is a centered scaling circle */
  transform:                                  /* order here matters!! */
    translateX(-50%)                          /* counter balances left: 50% */
    translateY(-50%)                          /* counter balances top: 50% */
    translateZ(-1px)                          /* PUTS IT BEHIND THE CHECKBOX */
    scale(var(--thumb-scale))                 /* value we toggle for animation */
  ;
  will-change: transform;

  @media (--motionOK) {                       /* transition only if motion is OK */
    & {
      transition: transform .2s ease;
    }
  }
}

/* on hover, set scale custom property to "in" state */
input[type="checkbox"]:hover::before {
  --thumb-scale: 1;
}

वृत्त pseudo-element बनाना आसान काम है, लेकिन इसे रखना जिस एलिमेंट से यह जुड़ा हुआ है उसके पीछे काम करना आसान नहीं था. और यह रहा एक से पहले ठीक करने के बाद:

यह पूरी तरह से माइक्रो इंटरैक्शन है, लेकिन विज़ुअल को बनाए रखना मेरे लिए ज़रूरी है एक जैसा होना. ऐनिमेशन स्केलिंग तकनीक ठीक वैसी ही है, जैसी हम पुरानी तकनीक में इसका इस्तेमाल कर रहे हैं अन्य स्थानों पर. हम कस्टम प्रॉपर्टी को नई वैल्यू पर सेट करते हैं और सीएसएस को उसे ट्रांज़िशन करने देती है की सुविधा देता है. यहां मुख्य सुविधा translateZ(-1px) है. कॉन्टेंट बनाने माता-पिता ने एक 3D स्पेस बनाया और इस नकली एलिमेंट वाले बच्चे ने इसमें 3D में टैप किया खुद को z-स्पेस में थोड़ा पीछे ले जाकर.

सुलभता

YouTube वीडियो पर माउस, कीबोर्ड और इस सेटिंग कॉम्पोनेंट के लिए स्क्रीन रीडर के इंटरैक्शन की संख्या. मैं आपको बताऊँगा कि जानकारी यहां देखें.

एचटीएमएल एलिमेंट के विकल्प

<form>
<header>
<fieldset>
<picture>
<label>
<input>

इनमें से हर एक में उपयोगकर्ता के ब्राउज़िंग टूल से जुड़े संकेत और सलाह शामिल होती हैं. कुछ एलिमेंट हम इंटरैक्शन से जुड़े संकेत देते हैं, कुछ लोगों से बातचीत करते हैं, और कुछ लोगों की मदद करने के लिए, सुलभता ट्री जिसे स्क्रीन रीडर इस्तेमाल करता है.

एचटीएमएल एट्रिब्यूट

हम उन एलिमेंट को छिपा सकते हैं जिनकी स्क्रीनरीडर को ज़रूरत नहीं होती, इस मामले में, स्लाइडर के बगल में मौजूद आइकॉन पर क्लिक करें:

<picture aria-hidden="true">

ऊपर दिया गया वीडियो, Mac OS पर स्क्रीनरीडर फ़्लो दिखाता है. ध्यान दें कि कैसे फ़ोकस एक स्लाइडर से अगले स्लाइडर पर जाता है. ऐसा इसलिए है क्योंकि हमने छिपा दिया है आइकॉन जो शायद अगले स्लाइडर के रास्ते में एक स्टॉप है. इसके बिना विशेषता के आधार पर, उपयोगकर्ता को वह चित्र रोकना होगा, सुनना होगा और उसे पीछे ले जाना होगा शायद वे इसे न देख पाएं.

SVG इमेज का इस्तेमाल कई तरह के गणित में किया जाता है. माउस के कर्सर को मुफ़्त में घुमाने के लिए, <title> एलिमेंट जोड़ें गणित क्या बना रहा है, इसके बारे में पढ़ने लायक टिप्पणी और टाइटल:

<svg viewBox="0 0 24 24">
  <title>A note icon</title>
  <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
</svg>

इसके अलावा, हमने अच्छी तरह से चिह्नित HTML का उपयोग किया है, जिससे और स्क्रीनरीडर, कीबोर्ड, वीडियो गेम कंट्रोलर, और स्क्रीन रीडर का इस्तेमाल करते हैं.

JavaScript

मैंने पहले ही बता दिया है कि ट्रैक भरने का रंग JavaScript से कैसे मैनेज किया जाता था, इसलिए, आइए अब <form> से जुड़ी JavaScript पर नज़र डालते हैं:

const form = document.querySelector('form');

form.addEventListener('input', event => {
  const formData = Object.fromEntries(new FormData(form));
  console.table(formData);
})

हर बार फ़ॉर्म के साथ इंटरैक्ट करने और उसमें बदलाव करने पर, कंसोल फ़ॉर्म को इस तरह लॉग करता है किसी ऑब्जेक्ट को सर्वर पर सबमिट करने से पहले, आसानी से समीक्षा करने के लिए टेबल में रखें.

console.table() के नतीजों का स्क्रीनशॉट, जिसमें फ़ॉर्म का डेटा टेबल में दिखाया गया है

नतीजा

अब जब आपको पता है कि मैंने इसे कैसे किया, तो कैसे करेंगे?! यह थोड़ा मज़ेदार है कॉम्पोनेंट आर्किटेक्चर! गेम में स्लॉट के साथ पहला वर्शन कौन बनाने वाला है पसंदीदा फ़्रेमवर्क? 🙂

आइए, हम अलग-अलग तरह के काम करते हैं और वेब पर काम करने के सभी तरीके सीखते हैं. एक डेमो बनाएं, मुझे ट्वीट करें और मैं इसे जोड़ दूंगा कम्यूनिटी रीमिक्स सेक्शन पर जाएं!

कम्यूनिटी रीमिक्स

  • @tomayac चेकबॉक्स लेबल के लिए क्षेत्र पर कर्सर घुमाएं! इस वर्शन में कर्सर घुमाने पर एलिमेंट: डेमो और सोर्स.