क्या सीएसएस चौड़ाई में दशमलव स्थान सम्मानित हैं?

Question

सीएसएस डिजाइन करते समय कुछ समय के लिए मैं सोच रहा था।

क्या सीएसएस चौड़ाई में दशमलव स्थान सम्मानित हैं? या वे गोल हैं?

.percentage {
  width: 49.5%;
}

या

.pixel {
  width: 122.5px;
}

Answer 1

यदि यह प्रतिशत की चौड़ाई है, तो हाँ, इसका सम्मान किया जाता है । जैसा कि मार्टिन ने कहा है कि जब आप भिन्नात्मक पिक्सेल प्राप्त करते हैं तो चीजें टूट जाती हैं, लेकिन यदि आपके प्रतिशत मान पूर्णांक पिक्सेल मान (उदाहरण में 200px का 50.5%) प्राप्त करते हैं, तो आप समझदार, अपेक्षित व्यवहार प्राप्त करेंगे।

संपादित करें: मैंने यह दिखाने के लिए उदाहरण प्रस्तुत किया है कि भिन्नात्मक पिक्सल्स का क्या होता है (क्रोम में मानों को छोटा कर दिया जाता है, इसलिए 50, 50.5 और 50.6 सभी एक ही चौड़ाई दिखाते हैं)।

Comments

आप प्रतिशत मूल्यों के बारे में सही नहीं हैं, लेकिन दशमलव स्थानों के साथ पिक्सेल की चौड़ाई और प्रतिशत गणना का अंतिम परिणाम हमेशा पूरे पिक्सेल पर गोल होगा :)

— मार्टिनोड

@MartinodF स्पष्टीकरण के लिए धन्यवाद। हां, पिक्सेल गोल हैं, लेकिन यह परिभाषित नहीं है कि क्या वे वास्तव में निकटतम, फर्श या छत पर गोल हैं (जो कि "मेरा मतलब है कि चीजें टूट जाती हैं")।

— Skilldrick

@Skilldrick मैंने जिज्ञासा के लिए कुछ ब्राउज़रों पर आपके डेमो में आंशिक पिक्सेल की कोशिश की: IE9p7 और FF4b7 दोनों निकटतम पिक्सेल के लिए, जबकि ओपेरा 11b, क्रोम 9.0.587.0 और Safari 3.3 मूल्य को छोटा करते हैं। @andras केवल स्पष्ट करने के लिए: मैं यह नहीं कह रहा हूं कि आंतरिक मूल्य गोल हैं, बस अंतिम रेंडर मान हैं। यदि आप ज़ूम करते हैं, या कुछ तत्व गुण वगैरह लेते हैं, तो वह दशमलव स्थान गिना जाएगा।

— मार्टिनडॉफ़

आधुनिक अपडेट: मेरा Chrome संस्करण 24 वास्तव में आंशिक पिक्सेल को गोल करता है। JsFiddle, 50.5 और 50.6 दोनों को 51px तक गोल करते हुए, 50 पिक्सेल div से 1 पिक्सेल व्यापक होना।

— माइकल बटलर

यह नोट करना सबसे महत्वपूर्ण हो सकता है कि एक दूसरे के बगल में आंशिक पिक्सेल आयामों वाले तत्व कैसे हैं। जब वे नेत्रहीन अपने आप को गोल करते हैं, तो वे अतिरिक्त स्थान नहीं लेते हैं जब उन्हें अन्य भिन्नात्मक आयामों के बगल में रखा जाता है: cssdesk.com/8R2rB

— Sandy Gifford

Answer 2

जब पृष्ठ को चित्रित किया जाता है तब भी संख्या को गोल किया जाता है, पूर्ण मूल्य को मेमोरी में संरक्षित किया जाता है और बाद में बच्चे की गणना के लिए उपयोग किया जाता है। उदाहरण के लिए, यदि आपका बॉक्स 100.4999px का पेंट 100px का है, तो 50% की चौड़ाई वाले बच्चे की गणना .5 * 100 के बजाय .5 * 100.4999 के रूप में की जाएगी। और इतने पर गहरे स्तर तक।

मैंने गहराई से नेस्टेड ग्रिड लेआउट सिस्टम बनाया है जहां माता-पिता की चौड़ाई ईएमएस है, और बच्चे पेरेसेंट हैं, और ऊपर तक चार दशमलव बिंदुओं सहित ध्यान देने योग्य प्रभाव था।

किनारे का मामला, निश्चित, लेकिन कुछ ध्यान में रखना।

Comments

स्वीकृत उत्तर इस एक से अधिक पूर्ण है, लेकिन इसमें एक किस्सा मुझे एक बेहतर एहसास देता है कि तकनीकी निहितार्थ कैसे खुद को महसूस करेंगे। इसे पोस्ट करने के लिए धन्यवाद।

— टॉम

Answer 3

हालाँकि, भिन्नात्मक पिक्सेल व्यक्तिगत तत्वों पर गोल दिखाई दे सकते हैं (जैसा कि @SkillDrick बहुत अच्छी तरह से प्रदर्शित करता है) यह जानना महत्वपूर्ण है कि वास्तविक बॉक्स मॉडल में आंशिक पिक्सेल वास्तव में सम्मानित हैं ।

यह सबसे अच्छा तब देखा जा सकता है जब तत्वों को एक दूसरे के बगल में (या शीर्ष पर) ढेर किया जाता है; दूसरे शब्दों में, अगर मैं 400 0.5 पिक्सेल divs को साथ-साथ रखूं, तो उनके पास एक ही 200 पिक्सेल div की चौड़ाई होगी। यदि वे सभी वास्तव में 1px तक गोल होते हैं (जैसा कि व्यक्तिगत तत्वों को देखते हुए) हम 200px div को लंबे समय तक आधा होने की उम्मीद करेंगे।

यह इस कोडनीय स्निपेट में देखा जा सकता है:

body {
  color:            white;
  font-family:      sans-serif;
  font-weight:      bold;
  background-color: #334;
}

.div_house div {
  height:           10px;
  background-color: orange;
  display:          inline-block;
}

div#small_divs div {
  width:            0.5px;
}

div#large_div div {
  width:            200px;
}

<div class="div_house" id="small_divs">
  <p>0.5px div x 400</p>
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<br>
<div class="div_house" id="large_div">
  <p>200px div x 1</p>
  <div></div>
</div>

Comments

प्रतिपादन के संबंध में: आपके उदाहरण में, आपके पास प्रत्येक पिक्सेल के लिए दो div प्रतिस्पर्धा है। इन मामलों में, आपका ब्राउज़र पूरे पिक्सेल को प्रस्तुत करने के लिए उनमें से एक को उठाएगा - धुंधला होने और अन्य अजीब कलाकृतियों से बचने के लिए। यदि आप आधे पिक्सेल को नीला होने के लिए सेट करते हैं , तो आप :nth-child(even)या :nth-child(odd), आप ध्यान दें कि या तो पूरी चीज़ नारंगी है या पूरी चीज़ नीले रंग की है - नीले और नारंगी का मिश्रण नहीं है (जो कुछ अस्पष्ट बैंगनी रंग होगा)।

— दान विल्मर Da

Answer 4

चौड़ाई को पूर्णांक संख्या के पिक्सेल पर ले जाया जाएगा ।

मैं नहीं जानता कि क्या हर ब्राउज़र इसे उसी तरह गोल करेगा, हालांकि। उप-पिक्सेल प्रतिशत को गोल करते समय वे सभी एक अलग रणनीति बनाते हैं। यदि आप विभिन्न ब्राउज़रों में उप-पिक्सेल गोलाई के विवरण में रुचि रखते हैं, तो ElastiCSS पर एक उत्कृष्ट लेख है ।

संपादित करें : मैंने जिज्ञासा के लिए कुछ ब्राउज़रों में @ Skilldrick के डेमो का परीक्षण किया। आंशिक पिक्सेल मानों का उपयोग करते समय (प्रतिशत में नहीं, वे मेरे द्वारा लिंक किए गए लेख में सुझाए गए अनुसार काम करते हैं) IE9p7 और FF4b7 निकटतम पिक्सेल के लिए गोल लगते हैं, जबकि ओपेरा 11 बी, क्रोम 9.0.587.0 और सफारी 5.0.3 दशमलव स्थानों को काटते हैं। ऐसा नहीं है कि मुझे उम्मीद है कि वे सब के बाद आम में कुछ था ...

Answer 5

वे मूल्यों को निकटतम पूर्णांक तक गोल करते हैं; लेकिन Iam क्रोम, सफारी और फ़ायरफ़ॉक्स में असंगति देख रहा है।

उदाहरण के लिए यदि 33.3% 420.945px में परिवर्तित हो जाता है

chrome और firexfox इसे 421px के रूप में दिखाते हैं। जबकि सफारी 420px के रूप में दिखाती है।

ऐसा लगता है जैसे क्रोम और फायरफॉक्स फर्श और छत के तर्क का पालन करते हैं जबकि सफारी नहीं करता है। यह पृष्ठ उसी समस्या पर चर्चा करता प्रतीत होता है

http://ejohn.org/blog/sub-pixel-problems-in-css/

Answer 6

तत्वों को एक पूर्णांक संख्या में पिक्सेल को पेंट करना पड़ता है, और जैसे ही अन्य उत्तर कवर होते हैं, प्रतिशत वास्तव में सम्मानित होते हैं।

एक महत्वपूर्ण नोट यह है कि इस मामले में पिक्सल का मतलब है सीएसएस पिक्सल , स्क्रीन पिक्सल नहीं, इसलिए 50.7499% बच्चे के साथ 200px कंटेनर को 101px सीएसएस पिक्सल पर गोल किया जाएगा , जो तब रेटिना स्क्रीन पर 202px पर मिलता है, और 400 * पर नहीं । 507499 ~ = 203px।

इस गणना में स्क्रीन घनत्व को अनदेखा किया गया है, और पेंट करने का कोई तरीका नहीं है * विशिष्ट रेटिना उप-आकार के लिए एक तत्व। आपके पास तत्वों की पृष्ठभूमि या सीमाएँ 1 से कम css पिक्सेल आकार में प्रदान नहीं की जा सकती हैं , भले ही वास्तविक तत्व का आकार 1 css पिक्सेल से कम हो सकता है जैसा कि सैंडी गिफोर्ड ने दिखाया था।

[*] आप कुछ तकनीकों का उपयोग कर सकते हैं जैसे ०.५ ऑफ़सेट बॉक्स-शैडो, इत्यादि, लेकिन वास्तविक बॉक्स मॉडल गुण एक पूर्ण सीएसएस पिक्सेल के लिए पेंट होंगे।

Comments

उत्कृष्ट अवलोकन

— अगस्त