रंग-समायोजित - सीएसएस-ट्रिक्स

Anonim

color-adjustसंपत्ति के रूप में कल्पना द्वारा वर्णित है "अलग-क्षमता उपकरणों में संरक्षण रंग।" आप जानते हैं कि रेटिना-गुणवत्ता वाली स्क्रीन के बिना फोन, टैबलेट और अन्य डिवाइस कैसे हैं? खैर, यह गुण उस गुणवत्ता के आधार पर रंगों को संभालने के बारे में निर्णय लेने के लिए एक संकेत के साथ ब्राउज़र प्रदान करता है।

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

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

मुद्रित शैलियाँ

दिलचस्प रूप से पर्याप्त है, युक्ति संपूर्ण परिभाषा में मुद्रण वेबपृष्ठों के उदाहरण का उपयोग करती है color-adjust। हालांकि, कोई वास्तविक दस्तावेज नहीं है कि यह मुद्रण के लिए अभिप्रेत है। क्रोम और सफारी को नाम के एक उपसर्ग संस्करण को लागू करने से नहीं रोका गया है webkit-print-color-adjust, जो एक मजबूत संकेत है कि यह मुद्रण उद्देश्यों के लिए है।

यह बात क्यों है? युक्ति एक उपयोग के मामले का वर्णन करती है जहां एक मुद्रित पृष्ठ पर स्टाइल टेबल की ज़ेबरा स्ट्रिपिंग को बनाए रखने में मदद मिल सकती है:

उदाहरण के लिए, मुद्रित दिशाओं की पेशकश करने वाली एक मैपिंग वेबसाइट, दिशाओं में चरणों को "ज़ेबरा-स्ट्राइप" कर सकती है, जो सफेद और हल्के भूरे रंग की पृष्ठभूमि के बीच बारी-बारी से होती है। इस ज़ेबरा-स्ट्रिपिंग को खोने और एक शुद्ध-सफेद पृष्ठभूमि होने से कार में विचलित होने पर त्वरित नज़र के साथ पढ़ने के लिए दिशाओं को कठिन बना दिया जाएगा।

घोषित और मुद्रित शैलियों के बीच का अंतर जब color-adjustसेट किया जाता है economy

वाक्य - विन्यास

.my-element ( color-adjust: (economy | exact); )

मूल्यों

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

ध्यान दें कि economyसंपत्ति कहा जाता है या नहीं इसका डिफ़ॉल्ट उपयोग color-adjustउन ब्राउज़रों को संकेत प्रदान करने के लिए डिज़ाइन किया गया है जो उन शैलियों को इंगित करते हैं जो संरक्षित करने के लिए पर्याप्त हैं।

विशिष्टता स्थिति

color-adjustसंपत्ति सीएसएस रंग मॉड्यूल स्तर 4, जो इस लेखन के समय पहली बार सार्वजनिक काम मसौदा स्थिति में है में परिभाषित किया गया है। इसका मतलब यह है कि W3C द्वारा इसका समर्थन किया जाना बाकी है और बाद के संशोधनों में इसे अद्यतन, परिवर्तित या यहां तक ​​कि गिराया जा सकता है। जैसे, यह संपत्ति उत्पादन-तैयार नहीं है और इसे प्रयोगात्मक माना जाता है।

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

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम फ़ायर्फ़ॉक्स अर्थात एज सफारी
19 * ४ 48 नहीं न 79 * 6 *

मोबाइल / टेबलेट

Android क्रोम Android फ़ायरफ़ॉक्स एंड्रॉयड iOS सफारी
88 .५ 81 14.0-14.4

अधिक जानकारी

  • सीएसएस कलर मॉड्यूल लेवल 4 फर्स्ट पब्लिक वर्किंग ड्राफ्ट
  • Microsoft एज उपयोग के आँकड़े
  • MDN प्रलेखन
  • रंग-समायोजित संपत्ति की संभावनाएँ