css সাব-পিক্সেলগুলি ব্রাউজারগুলির মধ্যে পৃথকভাবে গণনা করা এবং রেন্ডার করা হয়




css3 cross-browser (2)

উদ্দেশ্য:

আমি কোনও উপাদান তৈরি করতে এর অনুরূপ কোডে কাজ করছি যেখানে কোনও ইনপুট ক্ষেত্রে এম্বেড করা বোতাম রয়েছে :

http://codepen.io/anon/pen/pgwbWG?editors=110

আপনি দেখতে পাচ্ছেন, 100% উচ্চতার উপাদানটি অর্জন করতে বোতামটি top এবং bottom 0 সেট করে একেবারে অবস্থান করে।

এছাড়াও লক্ষণীয় বিষয় হচ্ছে পাঠ্য-ইনপুটটির সীমানা অবশ্যই দৃশ্যমান থাকবে এবং বোতামটি মোড়তে হবে। এটি অর্জনের জন্য আমি একটি margin: 1px বোতামটিতে margin: 1px যাতে পার্শ্ববর্তী পাঠ্য-ইনপুট লাল বর্ডারটি প্রদর্শন করার জন্য জায়গা থাকতে হবে (সাধারণত যখন ইনপুট ফিল্ডের সামগ্রীটি অবৈধ থাকে)।

সমস্যাটি:

ফায়ারফক্সে এটি (বেশিরভাগই) সঠিকভাবে রেন্ডার করা হয়েছে, যখন ক্রোমে (এবং সম্ভবত নতুন সাফারিটিতে) এটিতে বোতামটির নীচে 1px ফাঁক থাকবে।

সিএসএস ঠিক আছে বলে মনে হচ্ছে তবে এটি রেন্ডারিংয়ে একটি গণনা / গোল করার সমস্যা হিসাবে উপস্থিত হয়েছে, যেখানে বোতামটির নীচের বা শীর্ষ প্রান্তটি আসলে 1px নয় (এটি উপাদানটি পর্যবেক্ষণ করতে পারে) see এবং ইনপুট প্যাডিং যে প্রভাবিত বলে মনে হচ্ছে।

বিভিন্ন জুম-রেটে এটি বোতামের উপরের বা নীচে 1px মার্জিন যুক্ত বা সরিয়ে ফেলবে, ফলস্বরূপ 1px-ব্যবধান বা একটি .াকা-সীমানায় পরিণত হবে

আমি বোতামের মার্জিনটি 0 0px সেট করে নিচের নীচের মার্জিনটি স্থির করে নিলেও আমি টেক্সট-ইনপুটটির লাল সীমানাটি শেষ করে শীর্ষে 1px মার্জিনটি শিথিল করে রেখেছি।

উদাহরণ:

সম্ভবত এটি ব্যাখ্যা করার ক্ষেত্রে আমি পরিষ্কার বা খুব ভার্জোজ নেই, তাই ক্রমের বিভিন্ন জুম থেকে বাগের কয়েকটি স্ক্রিনশট এখানে দেওয়া হয়েছে (সিএসএস সর্বদা একরকম থাকে মনে রাখবেন):

সমাধান:

আমি কোনও ক্রস ব্রাউজার সমাধান খুঁজে পাচ্ছিলাম না। কীভাবে এটি মোকাবেলা এবং একটি সামঞ্জস্যপূর্ণ উপাদান পেতে? (দয়া করে জাভাস্ক্রিপ্ট নেই)


আপনি ইতিমধ্যে জানেন যে সমস্যাটি ব্রাউজারগুলির মধ্যে সাবপিক্সেল ক্যালকুলাসের ভিন্ন পদ্ধতির থেকে উদ্ভূত হয়েছিল

উদাহরণস্বরূপ, ক্রোমে, সীমানাগুলির একটি ভগ্নাংশ আকার থাকতে পারে তবে মার্জিনগুলি আলাদাভাবে পরিচালনা করা হয় (পূর্ণসংখ্যা হিসাবে)।

আমার কাছে ক্রোম টিম এর কাছ থেকে ডকুমেন্টেশন নেই, তবে এটিই ডিভাইসগুলিতে দেখা যায়:

আফাইক, এটি পরিবর্তন করার কোনও উপায় নেই।

পরিবর্তে, আপনি বোতামের মার্জিনের ব্যবহারটি একটি সীমানায় স্থানান্তর করতে পারেন।

যেহেতু আপনাকে ইনপুটটির 1px সীমানার জন্য স্থান পেতে হবে, বোতামে একই করুন, একটি 1px সীমানা (মার্জিনের পরিবর্তে) সেট করুন এবং স্বচ্ছ সেট করুন।

অবশিষ্ট কৌশলটি প্যাডিং বাক্সে ব্যাকগ্রাউন্ড-ক্লিপ সম্পত্তি সেট করা, যাতে এই স্বচ্ছতা ব্যাকগ্রাউন্ড দ্বারা প্রভাবিত না হয়

ক্রোমে আরও একটি ত্রুটি রয়েছে, যখন ব্রাউজারটি জুম করা হয় তখন এমে প্রকাশিত প্যাডিং এই নির্ভুলতার এই স্তরে নির্ভরযোগ্য নয়। আমি স্নিপেটে এটি পরিবর্তন করেছি।

যেহেতু আমরা মাত্রা ঠিক করতে সীমানা বোতামটি ব্যবহার করছি, আমরা পরিবর্তে একটি ইনসেট ছায়া ব্যবহার করে সীমানাকে স্টাইল করতে পারি।

* {
  margin: 0; padding: 0; box-sizing: border-box;
}
button, input, wrapper {
  display: inline-block; border-radius: 3px;
}

.wrapper {
  position: relative;
  
  width: 60%;
  margin: 1em;
  background-color: #ccc;
}

input {
  border: 1px solid red;
  width: 100%;
  
  background-color: limegreen;
  line-height: 3em;
/*  padding: 0.75em; */
  padding: 10px;
}

button {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border: 1px solid transparent;
  width: 7em;
  margin: 0px;
  background-clip: padding-box;
  box-shadow:  inset 0px 0px 0px 2px  black;
}
<div class="wrapper">
  <input type="text">
  <button>Test</button>
</div>

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

* {
  margin: 0; padding: 0; box-sizing: border-box;
}
button, input, wrapper {
  display: inline-block; border-radius: 3px;
}

.wrapper {
  position: relative;
  
  width: 60%;
  margin: 1em;
  background-color: #ccc;
}

input {
  border: 1px solid red;
  width: 100%;
  
  background-color: limegreen;
  line-height: 3em;
/*  padding: 0.75em; */
  padding: 10px;
}

.buttonwrap {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border: 1px solid transparent;
  width: 7em;
  margin: 0px;
  background-clip: padding-box;
}
button {
  position: absolute;
  right: 0px;
  top: 0;
  bottom: 0;
  width: 100%;
  border: 2px solid blue;
  margin: 0px;
}
<div class="wrapper">
  <input type="text">
  <div class="buttonwrap">
      <button>Test</button>
  </div>
</div>


আপনার প্রদর্শনের জন্য প্রয়োজনীয় ক্রস ব্রাউজার সমর্থন পেতে http://autoprefixer.github.io/ ব্যবহার করুন: ফ্লেক্স;

button, input, wrapper {
  display: inline-block; <----- Remove "display: inline-block;"
  border-radius: 3px;
}

.wrapper {
  position: relative;
  display: -webkit-box;<----- Add "display: flex;"
  display: -webkit-flex;<----- Add "display: flex;"
  display: -ms-flexbox;<----- Add "display: flex;"
  display: flex;<----- Add "display: flex;"
  width: 60%;
  margin: 1em;
  background-color: #ccc;
}

অতিরিক্ত পড়া এবং শেখার উপাদান:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

http://flexbox.io/#/

https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

দ্রষ্টব্য: একটি নমনীয় নিয়মকে অতিক্রম করার জন্য আপনার বর্তমান ব্রাউজারের ঘাটতির কারণে নির্দিষ্ট ওভার রাইডের পরিবর্তে ফ্লেক্স শর্টহ্যান্ড ব্যবহার করতে হবে।

.item {
  flex: 0 0 300px;
}

/* overide for some reason */

.item {
  flex: 1 0 300px;
}

/* NOT */

.item {
  flex-grow: 1;
}

আপনাকে 11 এর জন্য একটি ওভার রাইড করতে হবে:

.ie11std .wrapper {
  display:table;
}

.ie11std .item {
  display:table-cell;
}

যদিও এটি প্রতিক্রিয়াশীল হবে না।