Html5-boilerplate: :: चयन पृष्ठभूमि रंग डिफ़ॉल्ट

मुझे वेबसाइट पर टेक्स्ट का चयन करना और इसे गर्म गुलाबी देखना पसंद है और यह जानकर कि उन्होंने बॉयलरप्लेट का उपयोग किया है।

मैं वोट देता हूं यह गर्म गुलाबी रहता है; अगर कुछ ऐसा है जो लोगों को इसे बदलने के लिए प्रोत्साहित करता है, अगर यह सिर्फ डिफ़ॉल्ट नीला था तो हर कोई इसे नोटिस नहीं करेगा और इसे छोड़ दें तो हमारे पास एक बार फिर उबाऊ साइटें होंगी।

निकोलस को इस मुद्दे को दर्ज करने के लिए धन्यवाद।

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

मुझे लगता है कि यह बॉयलरप्लेट की सामग्री का अध्ययन नहीं करने और अनुकूलन के बिना थोक का उपयोग करने वाले लोगों के अंतर्निहित मुद्दे से संबंधित है। इसकी सीमाएँ हो सकती हैं कि आप लोगों को कम आलसी होने के लिए कितना प्रोत्साहित कर सकते हैं (और शायद यह बॉयलरप्लेट के लोकाचार के विरुद्ध है) लेकिन मैं फ़ाइलों को अनुकूलित और अनुकूलित करने के बारे में अधिक संचार देखना चाहता हूँ। शायद इसे एक अलग मुद्दे में दायर करने की जरूरत है ;-)

अंत में, मैंने सुना है कि कुछ लोग बेन के समान ही गर्म गुलाबी रंग का उपयोग करने का कारण बताते हैं। मैं यह पूछकर इस तर्क का विरोध करूंगा कि आप अपनी वेबसाइट किसके लिए विकसित कर रहे हैं? क्या यह अन्य डेवलपर्स या आपकी वेबसाइट के उपयोगकर्ताओं के लिए है? मुझे यकीन है कि ज्यादातर लोगों के लिए टेक्स्ट चयन पर एक चमकदार गुलाबी रंग देखना उनका मनोरंजन करने के बजाय भ्रमित करेगा।

क्या कोई समझा सकता है कि ::selection पृष्ठभूमि रंग को भी पहले स्थान पर ओवरराइड करने की आवश्यकता क्यों है?

@abitgone क्योंकि आप मौजूदा ब्राउज़र के बिना हाइलाइट पर text-shadow को आसानी से हटा नहीं सकते हैं, डिफ़ॉल्ट हाइलाइट पृष्ठभूमि रंग को भी मारते हैं।

मैं यहां पॉल के साथ हूं, मुझे अभी तक ऐसी वेबसाइट नहीं दिखी है जहां हॉट पिंक टेक्स्ट चयन डिजाइन के साथ फिट बैठता है और चौंकाने वाला नहीं दिखता है। क्या कोई विशेष कारण है कि इसे ब्राउज़र/ओएस डिफ़ॉल्ट से बदल दिया गया है जिसकी उपयोगकर्ता अपेक्षा करेंगे?

तो ::selection { text-shadow: none } काम नहीं करता है? यहां तक ​​कि अगर ऐसा है, तो निश्चित रूप से यह डिफ़ॉल्ट चयन पृष्ठभूमि रंग बदलने के लिए पर्याप्त मजबूत कारण नहीं है?

क्या डिफ़ॉल्ट रंग ब्राउज़र/प्लेटफ़ॉर्म पर अलग-अलग होता है? इस मामले में, पृष्ठभूमि रंग प्रदान करने के लिए एक मामला हो सकता है, लेकिन वह डिफ़ॉल्ट एक तटस्थ, सुविचारित विकल्प होना चाहिए।

मुझे यह भी यकीन नहीं है कि यह एक मुद्दा क्यों है।

हम हर वेब डेवलपर का हाथ नहीं पकड़ सकते हैं और उन्हें हर चीज की डिफ़ॉल्ट शैलियों को बदलने के लिए कह सकते हैं। मुझे लगता है कि गुलाबी आपको याद दिलाने के लिए एक अच्छा रंग है, ओह हाँ, आपको शायद इसे बदलना चाहिए।

फिर भी, लोग इसे नहीं बदल रहे हैं, इसलिए एक अनुस्मारक के रूप में यह विफल हो जाता है। इस शैली का प्रभाव तुरंत स्पष्ट नहीं होता है, इसे ध्यान में रखें। एक समझदार डिफ़ॉल्ट होना बेहतर है, निश्चित रूप से?

+1 इसे वैसे ही छोड़ने के लिए। अगर गुलाबी रंग आपको ठेस पहुँचाता है तो इसे बदल दें, अगर ऐसा नहीं है तो इसे अकेला छोड़ दें।

मामला समाप्त।

यदि इरादा गर्म गुलाबी से दूर जाने का है तो शिक्षा + डिफ़ॉल्ट नीला शायद सबसे अच्छा दांव है। कोई जादुई रंग पसंद नहीं है जो हर साइट के लिए "काम" करने वाला हो। एक अधिक तटस्थ रंग कुछ साइटों पर गर्म गुलाबी के रूप में उतना बुरा नहीं लग सकता है, लेकिन हम व्यावसायिक रंगों के जितने करीब आते हैं, उतनी ही अधिक संभावना है कि हम :: चयन पर गायब होने वाला टेक्स्ट बनाएंगे।

(जोड़ना भूल गए :)
व्यक्तिगत रूप से मैं इसे छोड़ने के लिए हूं और लोगों को एक डिजाइन तत्व के रूप में शिक्षित करने का कोई तरीका ढूंढ रहा हूं, जिस पर उन्हें साइट बनाते समय विचार करने की आवश्यकता होती है। लोगों को इसे प्रति-साइट के आधार पर डिज़ाइन करने के लिए उन्हें कम-खराब डिफ़ॉल्ट देने से बेहतर है।

स्टाइलशीट केवल पढ़ने के लिए नहीं है। इसे बदलें अगर यह आपको ठेस पहुंचाता है। व्यक्तिगत रूप से, मुझे गुलाबी पसंद है।

+1 इसे वैसे ही छोड़ने के लिए। संपूर्ण बॉयलरप्लेट की-फ्रेंडली डिलीट है। यदि आप गुलाबी पाठ चयन पसंद नहीं करते हैं, तो एक अलग रंग चुनें, या बस नियम (नियमों) को पूरी तरह से हटा दें।

यह इस बारे में नहीं है कि आप क्या 'पसंद' करते हैं, निश्चित रूप से। यह बॉयलरप्लेट में उपयोग किए जा रहे समझदार चूक के बारे में है।

मुझे गुलाबी हाइलाइट देखना पसंद नहीं है क्योंकि 90% बार यह एक गलती है कि इसे वहीं छोड़ दिया गया है, या डेवलपर को यह नहीं पता कि इसे कैसे बदला जाए। बॉयलरप्लेट कोड अधिक उपयुक्त और तटस्थ डिफ़ॉल्ट का उपयोग करके इसके प्रभाव को कम करने में मदद कर सकता है, जो दृश्य डिजाइन को कमजोर नहीं करता है।

गंभीरता से? यदि आप यह नहीं समझ पा रहे हैं कि इसे गुलाबी से कैसे बदला जाए... शायद सीएसएस के बारे में अधिक जानने से पहले आपको इसका उपयोग नहीं करना चाहिए?

गुलाबी दुष्ट गर्म है।

हाँ, यह आपको आरंभ करने के लिए एक बॉयलरप्लेट है; क्यों न तौलिये को अंदर फेंकें और इसके साथ एक संपूर्ण टेम्पलेट शामिल करें!

मुझे लगता है कि गर्म गुलाबी कुछ चरित्र और एक 'ईस्टर अंडे' जोड़ता है जो डेवलपर्स को हाइलाइट करता है जो उनकी साइट का ठीक से परीक्षण नहीं करते हैं।

जैसा कि मैंने पहले उल्लेख किया है, मौजूदा ब्राउज़र आपको रीसेट न दें सिर्फ text-shadow में ::selection (यह कुछ उन्हें करना चाहिए शायद ठीक है)। हाइलाइट किया गया टेक्स्ट गड़बड़ दिख सकता है अगर उसमें कुछ रंगों या आकारों की टेक्स्ट शैडो भी हों। इसलिए यदि आप टेक्स्ट-शैडो-जब-हाइलाइट की गई समस्या से बचना चाहते हैं तो आपको ::selection पृष्ठभूमि और रंग घोषित करना होगा।

अगर जो लोग सोचते हैं कि यह एक मुद्दा है, तो परीक्षण मामलों को पेश करने और विकल्प (कोड के रूप में) प्रस्तावित करने की ओर बढ़ सकते हैं, यह बहुत अच्छा होगा। फिलहाल, हमारे पास गर्म गुलाबी का उपयोग करने के बजाय डिफ़ॉल्ट नीले रंग को फिर से घोषित करने के अलावा और कुछ भी ठोस नहीं है क्योंकि गुलाबी को पर्याप्त "तटस्थ" नहीं माना जाता है।

व्यक्तिगत रूप से मुझे नीला एक आक्रामक डिफ़ॉल्ट लगता है। हमेशा के लिए गुलाबी।

Hot Pink++

गुलाबी छोड़ दें, h5bp को सिर्फ इसलिए नहीं बदला जाना चाहिए क्योंकि कुछ लोग चयन रंग को अपडेट नहीं करना चुनते हैं

गर्म गुलाबी एफटीडब्ल्यू।

शायद किसी को बॉयलरप्लेट को फोर्क करना चाहिए, केवल एक ही परिवर्तन डिफ़ॉल्ट चयन रंग है?

ऐसा लगता है कि ये लोग असहमत हैं, चयन का रंग बदला जाना चाहिए:

अच्छा... यह तय है

मैं निश्चित रूप से नीला पसंद करूंगा... -1 गर्म गुलाबी के लिए। यह कभी भी किसी भी चीज़ के साथ नहीं जाता है, ठीक है जब तक आप स्क्रॉलिंग टेक्स्ट वाली साइट नहीं बनाते, पीले रंग की पृष्ठभूमि पर गुलाबी टेक्स्ट, एनिमेटेड जिफ ब्लिंक करते हैं .... ओह रुको अब एचटीएमएल 4/3 का उपयोग नहीं कर रहे थे और न ही हम 1 99 0 के दशक में हैं।

जैसे आप चाहते हैं कि हम विश्वास करें कि आप लाइमब्लैक पसंद नहीं करते हैं?

पिछली बार मैंने जाँच की थी कि लाइमब्लैक रंग नहीं है। अगर ऐसा है, तो यह स्वर्ग और अजीबता के बीच एक क्रॉस होगा। :डी

मुझे नहीं पता कि ऐसा लगता है जैसे हम रंगीन अतीत से एक व्यक्तिगत स्पर्श छोड़ने की कोशिश कर रहे हैं। मेरा मतलब है कि एक दुर्घटना होने के अलावा, कोई गुलाबी क्यों चाहेगा?

::-moz-selection { background: #000; color: #0F0; text-shadow: none; }
::selection { background: #000; color: #0F0; text-shadow: none; }

मैं केवल यही चाहता हूं कि यह काम करे ...

::selection { background: linear-gradient(left, #0f0 0%,#000 100%); color: #fff; text-shadow: none; }

तब हमारे पास चूना काला होता

दूसरा व्यक्ति होने के नाते जिसने पॉल के साथ इस मुद्दे को उठाया है। मैं अंत में अपनी टिप्पणियों को छोड़ने के लिए तैयार हो गया हूं।

मेरा मुद्दा रंग पसंद नहीं है। मेरा मुद्दा उन लोगों का आलस्य है जो बॉयलरप्लेट का उपयोग करते हैं और रंग को संपादित नहीं करते हैं ताकि यह बाकी साइट के साथ फिट हो। निश्चित रूप से आप चाहते हैं कि यह आपकी बाकी साइट के साथ जुड़ जाए, है ना?

मेरा अनुरोध सरल है। सीएसएस की इस पंक्ति के ऊपर/नीचे एक टिप्पणी जोड़ें जो लोगों को यह याद दिलाती है कि साइट के 'डिज़ाइन' में फिट होने के लिए इसे बदला जाना चाहिए/बदला जा सकता है। जैसे 'आउटलाइन को फिर से परिभाषित करना न भूलें' की तरह आपको एक सीएसएस रीसेट फ़ाइल मिलेगी।

यह उम्मीद है कि डिजाइनर/डेवलपर आलसी होने और कोड शब्दशः काटने और चिपकाने से रोक देगा।

धन्यवाद स्टू, मुझे लगता है कि यह एक बिल्कुल उचित विचार है।

दरअसल, एरिक मेयर रीसेट के बाद के संस्करण वास्तव में एक टिप्पणी जोड़ने से _just_ से दूर चले गए। :फोकस नियम के लिए डिफ़ॉल्ट मान छोड़ने पर एरिक के विचार यहां दिए गए हैं:

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

रीसेट के नवीनतम संस्करण में, एरिक निम्नलिखित संकेतन का उपयोग करता है, पूरे नियम पर टिप्पणी करता है और ????? का उपयोग करता है एक प्लेसहोल्डर के रूप में जिसे बदला जा सकता है:

/* remember to define visible focus styles! 
:focus {
    outline: ?????;
} */

हो सकता है कि वही दृष्टिकोण यहां इस्तेमाल किया जा सके?

एरिक मेयर के रीसेट में मूल outline हटाना विनाशकारी था क्योंकि इसने महत्वपूर्ण पहुंच समस्याओं (डिफ़ॉल्ट रीसेट की विफलता) को पेश किया। ::selection पृष्ठभूमि के लिए किसी भिन्न रंग का उपयोग करने से वह समस्या नहीं होती है।

:: चयन रंग घोषणा आईएमओ से बचा जाना चाहिए। यह विंडो निष्क्रिय स्टाइल (http://css-tricks.com/9288-window-inactive-styling/) को मारता है, जो पहले से ही अपने आप में एक कारण है।

हाँ हम यह जानते हैं। लेकिन यह काफी संभावना है कि हाइलाइटिंग में टेक्स्ट-शैडो का मुद्दा निष्क्रिय चयन स्टाइल की तुलना में उपयोगकर्ताओं के लिए एक बड़ी समस्या है। मेरे लिए, मुद्दा यह है कि संतुलन डिफ़ॉल्ट रूप से इसे शामिल करने के बीच है, भले ही साइट में कोई text-shadow उपयोग न हो (किसी साइट पर टेक्स्ट-छाया होने पर उपयोगकर्ताओं को बचाने के लिए), या चल रहा है इसे 'बेहतर बनाने' के लिए।

यह ध्यान देने योग्य है कि यह कुछ समय के लिए बॉयलरप्लेट (और जंगली में) में रहा है और एकमात्र कारण एक समस्या मौजूद है क्योंकि मैंने इसे बनाया है। तो, यह शायद किसी भी तरह से एक बड़ा सौदा नहीं है।

"हाइलाइट किया गया टेक्स्ट गड़बड़ दिख सकता है यदि इसमें कुछ रंगों या आकारों की टेक्स्ट शैडो भी है। इसलिए यदि आप टेक्स्ट-शैडो-व्हेन-हाइलाइटेड समस्या से बचना चाहते हैं तो आपको :: चयन पृष्ठभूमि और रंग घोषित करना होगा।"

ठीक है, हम लोगों को खराब डिज़ाइन निर्णय लेने से नहीं रोक सकते। text-shadow , अधिकांश समय, बॉडी कॉपी के लिए उपयोग नहीं किया जाना चाहिए।

हालाँकि, यदि आप अभी भी उस मार्ग पर जाना चाहते हैं, तो मेरा सुझाव है कि ब्राउज़र डिफ़ॉल्ट रंग का उपयोग करें।

जैसा कि पहले उल्लेख किया गया है, सीएसएस में मेरी सोच कुछ इस तरह दिखाई देगी

/_-- अपने डिजाइन के अनुरूप इस रंग को बदलने के लिए याद रखें ---/

पहला: इसे अंदर छोड़ने के लिए +1।

मेरी बाकी टिप्पणी मुख्य रूप से उन लोगों के लिए है जिन्होंने इस मुद्दे को उठाया (ताकि @necolas और @sturobson हो):

चयन हाइलाइट के लिए सही रंग कौन सा है, कोई भी न्याय नहीं कर सकता है। यदि यह चर्चा मान्य है, तो कोई बहस कर सकता है कि हमें एंकर टैग (कीड़े का एक अलग कैन) के लिए "आदर्श" रंग पर भी चर्चा करनी चाहिए।

मुद्दा यह है: यह पूरी तरह से डिज़ाइन पर निर्भर चीज़ है और _चाहिए_ को एंकर टैग की तरह ही डिज़ाइनर द्वारा बनाए रखा/अपडेट किया जाना चाहिए।

मुझे गर्म गुलाबी पसंद है! लेकिन जो कोई भी इससे नफरत करता है, उसके लिए कृपया अपनी सीएसएस फ़ाइल के नीचे इन नियमों को जोड़ें और अपडेट करें:

::-moz-selection { background: #fe57a1; color: #fff; }
::selection { background: #fe57a1; color: #fff; }

मैंने केवल पॉल लॉयड की ओर से इस मुद्दे को लॉग किया है।

लेकिन चर्चा बिल्कुल जायज है। डिफ़ॉल्ट बॉयलरप्लेट लिंक रंग _have_ वास्तव में आधुनिक ब्राउज़र डिफ़ॉल्ट से मेल खाने के लिए सामान्यीकृत किया गया है।

@sturobson मैंने उन पंक्तियों के साथ एक टिप्पणी जोड़ी है: https://github.com/paulirish/html5-boilerplate/blob/master/css/style.css#L42

मुझे उम्मीद है कि उस टिप्पणी को जोड़ने से शून्य प्रभाव पड़ेगा, लेकिन कम से कम यह सही दिशा में एक कदम है। इस मुद्दे पर निकोलस का अनुसरण करने के लिए धन्यवाद।

डिफ़ॉल्ट बॉयलरप्लेट लिंक रंग वास्तव में आधुनिक ब्राउज़र डिफ़ॉल्ट से मेल खाने के लिए सामान्यीकृत किए गए हैं।

जो सवाल पूछता है, उसी तरह चयन रंग को सामान्य क्यों नहीं किया जाता? जिस तरह से हॉट पिंक को 'बैज ऑफ ऑनर' के रूप में पहना जा रहा है, वह काफी दुखद स्थिति है।

और.... दृश्य!

मैंने शायद अपने जीवन के 80 घंटे खो दिए हैं और इसे वापस गर्म गुलाबी रंग में बदल दिया है।

रंग कोड प्राप्त करने के लिए हर बार मुझे यह धागा ढूंढना पड़ता है।

मुझे परवाह नहीं है कि मुझे इसे सेट क्यों नहीं करना चाहिए, चयन हमेशा गुलाबी लानत होगा!

@innovandrew अंगूठे ऊपर!