সিএসএস প্রস্থের দশমিক স্থানগুলি কি শ্রদ্ধা হয়?

Question

সিএসএস ডিজাইন করার সময় আমি কিছুক্ষণের জন্য ভাবছিলাম।

সিএসএস প্রস্থে দশমিক স্থান সম্মান করা হয়? নাকি সেগুলি বৃত্তাকার?

.percentage {
  width: 49.5%;
}

অথবা

.pixel {
  width: 122.5px;
}

Answer 1

এটি যদি শতাংশের প্রস্থ হয়, তবে হ্যাঁ, এটি শ্রদ্ধা হয় । মার্টিন যেমন উল্লেখ করেছেন, আপনি যখন ভগ্নাংশ পিক্সেল পাবেন তখন জিনিসগুলি ভেঙে যায়, তবে যদি আপনার শতাংশের মানগুলি পূর্ণসংখ্যার পিক্সেল মান দেয় (উদাহরণস্বরূপ, উদাহরণস্বরূপ 200px এর 50.5%) আপনি বুদ্ধিমান, প্রত্যাশিত আচরণ পাবেন।

সম্পাদনা: ভগ্নাংশের পিক্সেলগুলিতে কী ঘটে তা প্রদর্শন করার জন্য আমি উদাহরণটি আপডেট করেছি (ক্রোমে মানগুলি কেটে ফেলা হয়, সুতরাং 50, 50.5 এবং 50.6 সমস্ত একই প্রস্থ দেখায়)।

Comments

শতাংশের মানগুলি নিজেরাই গোল না করা সম্পর্কে আপনি সঠিক, তবে দশমিক জায়গাগুলি সহ পিক্সেল প্রস্থ এবং শতাংশ গণনার চূড়ান্ত ফলাফল সর্বদা পুরো পিক্সেলকে গোল করা হবে :)

— মার্টিনোডএফ

@ মার্টিনোডএফ স্পষ্টির জন্য ধন্যবাদ। হ্যাঁ, পিক্সেলগুলি বৃত্তাকার, তবে এটি নির্ধারিত নয় যে সেগুলি আসলে নিকটতম, তল বা সিলিং (যা "জিনিসগুলি ভেঙে ফেলা" বলতে বোঝায়) থেকে গোল হয় কিনা defined

— স্কিলড্রিক

@ স্কিলড্রিক আপনার কৌতূহলের জন্য কিছু ব্রাউজারে আপনার ডেমোতে ভগ্নাংশ পিক্সেল চেষ্টা করেছি: আইই 9 পি 7 এবং এফএফ 4 বি 7 উভয়ই নিকটতম পিক্সেল পর্যন্ত, যখন অপেরা 11 বি, ক্রোম 9.0.587.0 এবং সাফারি 5.0.3 মান কেটে গেছে। @ এন্ড্রাস কেবল স্পষ্ট করে বলার জন্য: আমি বলছি না যে অভ্যন্তরীণ মানগুলি বৃত্তাকার, কেবল চূড়ান্ত রেন্ডার মানগুলি। আপনি যদি জুম করেন, বা কিছু উপাদান বৈশিষ্ট্যগুলিতে উত্তরাধিকার সূত্রে প্রাপ্ত হয় এবং এই জাতীয় দশমিক স্থানগুলি গণনা করা হয়।

— মার্টিনোডএফ

আধুনিক আপডেট: আমার Chrome সংস্করণ 24 আসলে আপ চক্রের ভগ্নাংশ পিক্সেল। 50px ডিভের চেয়ে 1 পিক্সেল প্রশস্ত হয়ে 51px অবধি 50s এবং 50.6 টি উভয়ই jsFiddle দেখুন Viewing

— মাইকেল বাটলার

সবচেয়ে বেশি গুরুত্বপূর্ণ যেটি লক্ষ্য করা যায় তা হ'ল ভগ্নাংশ পিক্সেল মাত্রা সহ উপাদানগুলি একে অপরের পাশে কীভাবে স্ট্যাক করে। তারা যদিও না : নিজেরাই চাক্ষুষরূপে বৃত্তাকার আপ, তারাও আপ অতিরিক্ত স্থান অন্যান্য আংশিক dimensioned উপাদানের পাশে করা নিতে না cssdesk.com/8R2rB

— স্যান্ডী Gifford,

Answer 2

পৃষ্ঠাটি আঁকার সময় যখন সংখ্যাটি গোল করা হয় তখনও পুরো মানটি স্মৃতিতে সংরক্ষণ করা হয় এবং পরবর্তী শিশু গণনার জন্য ব্যবহৃত হয়। উদাহরণস্বরূপ, যদি আপনার 100.4999px এর বাক্সটি 100px এ রঙ করে তবে 50% প্রস্থের শিশুটি .5 * 100 এর পরিবর্তে .5 * 100.4999 হিসাবে গণনা করা হবে। এবং আরও গভীর স্তরে।

আমি গভীরভাবে নেস্টেড গ্রিড লেআউট সিস্টেম তৈরি করেছি যেখানে পিতামাতার প্রস্থগুলি এমএস হয়, এবং শিশুরা পার্সেন্ট হয় এবং চার দশমিক পয়েন্ট পর্যন্ত আপস্ট্রিমের একটি লক্ষণীয় প্রভাব পড়ে।

এজ কেস, নিশ্চিত, তবে কিছু মনে রাখবেন।

Comments

গৃহীত উত্তরটি এইটির চেয়ে আরও সম্পূর্ণ, তবে প্রযুক্তিগত প্রভাবগুলি কীভাবে নিজেরাই অনুভূত হবে তার জন্য এই একটি বিবরণটি আমাকে আরও ভাল অনুভূতি দেয়। এটি পোস্ট করার জন্য ধন্যবাদ।

— টম

Answer 3

যদিও ভগ্নাংশ পিক্সেলগুলি পৃথক উপাদানগুলির মধ্যে উপস্থিত হতে পারে (যেমন @ স্কিলড্রিক খুব ভালভাবে দেখায়) এটি জেনে রাখা গুরুত্বপূর্ণ যে ভগ্নাংশের পিক্সেলগুলি প্রকৃত বাক্সের মডেলটিতে আসলেই সম্মানিত ।

যখন উপাদানগুলি একে অপরের পাশে স্ট্যাক করা থাকে তখন এটি সর্বোত্তমভাবে দেখা যায়; অন্য কথায়, যদি আমি পাশাপাশি 400 0.5.০ পিক্সেল ডিভিএস রাখি, তবে তাদের একক 200 পিক্সেল ডিভের মতোই প্রস্থ থাকবে। যদি সেগুলি আসলে 1 পিএক্স অবধি হয় (স্বতন্ত্র উপাদানগুলির দিকে তাকানোই বোঝা যায়) আমরা 200px ডিভটি দীর্ঘ অর্ধেক আশা করব।

এটি এই চলমান কোড স্নিপেটে দেখা যায়:

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

রেন্ডারিং সম্পর্কিত: আপনার উদাহরণস্বরূপ, আপনার প্রতিটি পিক্সেলের জন্য প্রতিযোগিতামূলক দুটি ডিভ রয়েছে। এই ক্ষেত্রে, আপনার ব্রাউজার পুরো পিক্সেলটি রেন্ডার করতে তাদের মধ্যে একটি বেছে নেবে - অস্পষ্টতা এবং অন্যান্য অদ্ভুত শিল্পকর্মগুলি এড়ানোর জন্য। যদি আপনি অর্ধেক পিক্সেলকে নীল হতে ব্যবহার করেন :nth-child(even)বা ব্যবহার করে থাকেন তবে :nth-child(odd)আপনি লক্ষ্য করেছেন যে হয় পুরো জিনিসটি কমলা বা পুরো জিনিসটি নীল - নীল এবং কমলা রঙের মিশ্রণ নয় (যা কিছুটা অস্পষ্ট বেগুনি রঙের হবে))

— উইলমার

Answer 4

প্রস্থটি পূর্ণসংখ্যার পিক্সেলের সংখ্যায় গোল করা হবে ।

যদিও আমি জানি না যে প্রতিটি ব্রাউজার একইভাবে এটির চারপাশে কাজ করবে কিনা। সাব-পিক্সেল শতাংশকে গোল করার সময় তাদের সবার আলাদা কৌশল রয়েছে বলে মনে হয়। আপনি যদি বিভিন্ন ব্রাউজারে সাব-পিক্সেল রাউন্ডিংয়ের বিবরণে আগ্রহী হন তবে এলাসটিকএসএস-এ একটি দুর্দান্ত নিবন্ধ রয়েছে ।

সম্পাদনা : কৌতূহলের জন্য আমি কিছু ব্রাউজারে @ স্কিলড্রিকের ডেমো পরীক্ষা করেছি। ভগ্নাংশ পিক্সেল মানগুলি ব্যবহার করার সময় (শতাংশ নয়, তারা আমার লিঙ্কিত নিবন্ধে প্রস্তাবিত হিসাবে কাজ করে) IE9p7 এবং FF4b7 নিকটতম পিক্সেলের সাথে মিলবে বলে মনে হয়, অপেরা 11 বি, ক্রোম 9.0.587.0 এবং সাফারি 5.0.3 দশমিক স্থানগুলি কেটে ফেলেছে। এমন নয় যে আমি আশা করি যে তাদের কিছু মিল রয়েছে ...

Answer 5

এগুলি মানগুলি নিকটতম পূর্ণসংখ্যার সাথে মিলিয়ে যায় বলে মনে হয়; তবে ক্রোম, সাফারি এবং ফায়ারফক্সে অসামঞ্জস্যতা দেখছে আইএম।

যেমন 33.3% 420.945px এ রূপান্তর করে

ক্রোম এবং ফায়ার ফক্স এটি 421px হিসাবে দেখায়। যখন সাফারি এটিকে 420 পিক্স হিসাবে দেখায়।

এটি ক্রোম এবং ফায়ারফক্সের মতো মনে হয় মেঝে এবং সিল যুক্তি অনুসরণ করে যখন সাফারি না করে। এই পৃষ্ঠাটি একই সমস্যা নিয়ে আলোচনা বলে মনে হচ্ছে

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

Answer 6

উপাদানগুলিকে পিক্সেলের একটি সংখ্যার অঙ্ক করতে হয় এবং অন্যান্য উত্তরগুলি কভার করা হিসাবে, শতাংশ অবশ্যই সম্মানিত হয়।

একটি গুরুত্বপূর্ণ নোট যে পিক্সেল এই ক্ষেত্রে অর্থ হলো CSS পিক্সেল তাই একটি 50,7499% সন্তানের সঙ্গে একটি 200px ধারক 101px বৃত্তাকার করা হবে, না পর্দা পিক্সেল CSS পিক্সেল , যা একটি অক্ষিপট পর্দায় 202px সম্মুখের অনুষ্ঠিত পেতে, এবং না 400 *। 507499। = 203px।

এই গণনায় স্ক্রিনের ঘনত্ব উপেক্ষা করা হয় এবং নির্দিষ্ট রেটিনা সাবপিক্সেল আকারের জন্য কোনও উপাদান আঁকার কোনও উপায় নেই। স্যান্ডি গিফফোর্ড যেমন দেখিয়েছিলেন আসল উপাদানটির আকার 1 সিএসএস পিক্সেলের চেয়েও কম হতে পারে, তবুও আপনার উপাদানগুলির ব্যাকগ্রাউন্ড বা 1 সিসি পিক্সেলের চেয়ে কম আকারে সীমানা থাকতে পারে না।

*

Comments

দুর্দান্ত পর্যবেক্ষণ

— শে