CSS

ব্রাউজার CSS নিয়মের নির্দিষ্টতার উপর নির্ভর করে একটি উপাদানে কোন শৈলীগুলি দেখাবে তা নির্ধারণ করে। আমরা ধরে নিই যে ব্রাউজার ইতিমধ্যেই একটি নির্দিষ্ট উপাদানের সাথে মেলে এমন নিয়মগুলি নির্ধারণ করেছে। ম্যাচিং নিয়মগুলির মধ্যে, a, b, c, d এই চারটি কমা-বিচ্ছিন্ন মান প্রতিটি নিয়মের জন্য নিম্নলিখিতগুলির উপর ভিত্তি করে গণনা করা হয়:

1. a হল ইনলাইন শৈলী ব্যবহার করা হচ্ছে কিনা। যদি বৈশিষ্ট্য ঘোষণাটি উপাদানের একটি ইনলাইন শৈলী হয়, তবে a হল 1, অন্যথায় 0।
2. b হল ID নির্বাচকের সংখ্যা।
3. c হল ক্লাস, বৈশিষ্ট্য এবং ছদ্ম-ক্লাস নির্বাচকের সংখ্যা।
4. d হল ট্যাগ এবং ছদ্ম-উপাদান নির্বাচকের সংখ্যা।

ফলাফলস্বরূপ নির্দিষ্টতা একটি স্কোর নয়, তবে মানগুলির একটি ম্যাট্রিক্স যা কলাম বাই কলাম তুলনা করা যেতে পারে। কোনটির উচ্চতর নির্দিষ্টতা আছে তা নির্ধারণ করতে নির্বাচকদের তুলনা করার সময়, বাম থেকে ডানে দেখুন এবং প্রতিটি কলামে সর্বোচ্চ মান তুলনা করুন। সুতরাং কলাম b-এর একটি মান কলাম c এবং d-এর মানগুলিকে ওভাররাইড করবে, তারা যাই হোক না কেন। যেমন, 0,1,0,0-এর নির্দিষ্টতা 0,0,10,10-এর চেয়ে বেশি হবে।

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

আমি কম নির্দিষ্টতা সহ CSS নিয়ম লিখব যাতে প্রয়োজনে সেগুলিকে সহজেই ওভাররাইড করা যায়। CSS UI কম্পোনেন্ট লাইব্রেরি কোড লেখার সময়, তাদের কম নির্দিষ্টতা থাকা গুরুত্বপূর্ণ যাতে লাইব্রেরির ব্যবহারকারীরা কেবল নির্দিষ্টতা বাড়ানোর জন্য বা !important ব্যবহার না করেই তাদের ওভাররাইড করতে পারে।

• রিসেটিং - রিসেটিং মানে উপাদানগুলির উপর সমস্ত ডিফল্ট ব্রাউজার স্টাইলিং বাতিল করা। উদাহরণস্বরূপ, সমস্ত উপাদানের margin, padding, font-size একই করা হয়। আপনাকে সাধারণ টাইপোগ্রাফিক উপাদানগুলির জন্য স্টাইলিং পুনরায় ঘোষণা করতে হবে।
• নর্মালাইজিং - নর্মালাইজিং সবকিছুকে 'আনস্টাইল' না করে দরকারী ডিফল্ট শৈলীগুলি সংরক্ষণ করে। এটি সাধারণ ব্রাউজার নির্ভরতাগুলির জন্য বাগগুলিও সংশোধন করে।

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

ফ্লোট একটি CSS পজিশনিং বৈশিষ্ট্য। ফ্লোটেড উপাদানগুলি পৃষ্ঠার প্রবাহের অংশ থাকে এবং অন্যান্য উপাদানের (যেমন, পাঠ্য ফ্লোটেড উপাদানগুলির চারপাশে প্রবাহিত হবে) পজিশনিংকে প্রভাবিত করবে, position: absolute উপাদানগুলির থেকে ভিন্ন, যা পৃষ্ঠার প্রবাহ থেকে সরানো হয়।

CSS clear বৈশিষ্ট্যটি left/right/both ফ্লোটেড উপাদানগুলির নীচে স্থাপন করতে ব্যবহার করা যেতে পারে।

যদি একটি প্যারেন্ট উপাদানে শুধুমাত্র ফ্লোটেড উপাদান থাকে, তবে এর উচ্চতা শূন্যে সঙ্কুচিত হবে। কন্টেইনারে ফ্লোটেড উপাদানগুলির পরে কিন্তু কন্টেইনার বন্ধ করার আগে ফ্লোট পরিষ্কার করে এটি ঠিক করা যেতে পারে।

.clearfix হ্যাক একটি চতুর CSS ছদ্ম নির্বাচক (::after) ব্যবহার করে ফ্লোটগুলি পরিষ্কার করে। প্যারেন্টে ওভারফ্লো সেট করার পরিবর্তে, আপনি এতে একটি অতিরিক্ত ক্লাস clearfix প্রয়োগ করেন। তারপর এই CSS প্রয়োগ করুন:

.clearfix::after {
  content: ' ';
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

বিকল্পভাবে, প্যারেন্ট উপাদানে overflow: auto অথবা overflow: hidden বৈশিষ্ট্য দিন যা শিশুদের মধ্যে একটি নতুন ব্লক ফরম্যাটিং কনটেক্সট স্থাপন করবে এবং এটি তার শিশুদের ধারণ করার জন্য প্রসারিত হবে।

CSS-এ z-index বৈশিষ্ট্যটি ওভারল্যাপ করা উপাদানগুলির উল্লম্ব স্ট্যাকিং অর্ডার নিয়ন্ত্রণ করে। z-index শুধুমাত্র সেই উপাদানগুলিকে প্রভাবিত করে যাদের position মান static নয়।

কোনো z-index মান ছাড়া, DOM-এ যে ক্রমে উপাদানগুলি প্রদর্শিত হয় সেই ক্রমে স্ট্যাক হয় (একই হায়ারার্কি স্তরে সবচেয়ে নিচেরটি উপরে প্রদর্শিত হয়)। অ-স্ট্যাটিক পজিশনিং (এবং তাদের সন্তান) সহ উপাদানগুলি ডিফল্ট স্ট্যাটিক পজিশনিং সহ উপাদানগুলির উপরে সর্বদা প্রদর্শিত হবে, HTML হায়ারার্কি নির্বিশেষে।

একটি স্ট্যাকিং কনটেক্সট হল একটি উপাদান যা স্তরগুলির একটি সেট ধারণ করে। একটি স্থানীয় স্ট্যাকিং কনটেক্সটের মধ্যে, এর শিশুদের z-index মানগুলি ডকুমেন্ট রুট-এর পরিবর্তে সেই উপাদানের সাথে সম্পর্কিতভাবে সেট করা হয়। সেই কনটেক্সটের বাইরের স্তরগুলি - অর্থাৎ, একটি স্থানীয় স্ট্যাকিং কনটেক্সটের ভাইবোন উপাদানগুলি - এর ভিতরের স্তরগুলির মধ্যে বসতে পারে না। যদি একটি উপাদান B একটি উপাদান A-এর উপরে থাকে, তবে উপাদান A-এর একটি শিশু উপাদান C, উপাদান B-এর চেয়ে উচ্চতর হতে পারে না এমনকি যদি উপাদান C-এর উপাদান B-এর চেয়ে উচ্চতর z-index থাকে।

প্রতিটি স্ট্যাকিং কনটেক্সট স্ব-নিহিত - উপাদানটির বিষয়বস্তু স্ট্যাক করার পরে, পুরো উপাদানটিকে প্যারেন্ট স্ট্যাকিং কনটেক্সটের স্ট্যাকিং অর্ডারে বিবেচনা করা হয়। কয়েকটি CSS বৈশিষ্ট্য একটি নতুন স্ট্যাকিং কনটেক্সট ট্রিগার করে, যেমন 1 এর কম opacity, none নয় এমন filter, এবং none নয় এমন transform।

_দ্রষ্টব্য: ঠিক কী একটি উপাদানকে স্ট্যাকিং কনটেক্সট তৈরি করার জন্য যোগ্য করে তোলে তা [নিয়মগুলির] এই দীর্ঘ সেটে তালিকাভুক্ত করা হয়েছে।

একটি ব্লক ফরম্যাটিং কনটেক্সট (BFC) হল একটি ওয়েব পৃষ্ঠার ভিজ্যুয়াল CSS রেন্ডারিংয়ের অংশ যেখানে ব্লক বক্সগুলি স্থাপন করা হয়। ফ্লোটস, পরমভাবে অবস্থান করা উপাদান, inline-blocks, table-cells, table-captions, এবং visible ছাড়া অন্য overflow সহ উপাদান (যখন সেই মানটি ভিউপোর্টে প্রচারিত না হয়) নতুন ব্লক ফরম্যাটিং কনটেক্সট স্থাপন করে।

একটি ব্লক ফরম্যাটিং কনটেক্সট কীভাবে স্থাপন করতে হয় তা জানা গুরুত্বপূর্ণ, কারণ এটি না করলে, ধারণকারী বক্সটি [ফ্লোটেড শিশুদের ধারণ করবে না]। এটি মার্জিনগুলির সঙ্কুচিত হওয়ার অনুরূপ, তবে আরও জটিল কারণ আপনি সম্পূর্ণ বক্সগুলিকে অদ্ভুত উপায়ে সঙ্কুচিত হতে দেখতে পাবেন।

একটি BFC হল একটি HTML বক্স যা নিম্নলিখিত শর্তগুলির মধ্যে অন্তত একটি পূরণ করে:

• float-এর মান none নয়।
• position-এর মান static বা relative নয়।
• display-এর মান table-cell, table-caption, inline-block, flex, বা inline-flex, grid, অথবা inline-grid।
• overflow-এর মান visible নয়।

একটি BFC-তে, প্রতিটি বক্সের বাম বাইরের প্রান্ত ধারণকারী ব্লকের বাম প্রান্তকে স্পর্শ করে (ডান-থেকে-বাম বিন্যাসের জন্য, ডান প্রান্তগুলি স্পর্শ করে)।

একটি BFC-তে সংলগ্ন ব্লক-স্তরের বক্সগুলির মধ্যে উল্লম্ব মার্জিনগুলি সঙ্কুচিত হয়। [collapsing margins]-এ আরও পড়ুন।

• খালি div পদ্ধতি - <div style="clear:both;"></div>।
• ক্লিয়ারফিক্স পদ্ধতি - উপরে .clearfix ক্লাসটি দেখুন।
• overflow: auto অথবা overflow: hidden পদ্ধতি - প্যারেন্ট একটি নতুন ব্লক ফরম্যাটিং কনটেক্সট স্থাপন করবে এবং তার ফ্লোটেড শিশুদের ধারণ করার জন্য প্রসারিত হবে।

বড় প্রোজেক্টে, আমি একটি ইউটিলিটি .clearfix ক্লাস লিখব এবং যেখানে আমার প্রয়োজন সেখানে সেগুলি ব্যবহার করব। overflow: hidden যদি শিশু প্যারেন্টের চেয়ে লম্বা হয় তবে শিশুদের ক্লিপ করতে পারে এবং এটি খুব আদর্শ নয়।

CSS স্প্রাইটগুলি একাধিক চিত্রকে একটি একক বৃহৎ চিত্রে একত্রিত করে। এটি আইকনগুলির জন্য একটি সাধারণভাবে ব্যবহৃত কৌশল (Gmail এটি ব্যবহার করে)। এটি কীভাবে প্রয়োগ করবেন:

1. একটি স্প্রাইট জেনারেটর ব্যবহার করুন যা একাধিক চিত্রকে একটিতে প্যাক করে এবং এর জন্য উপযুক্ত CSS তৈরি করে।
2. প্রতিটি চিত্রের background-image, background-position এবং background-size বৈশিষ্ট্যগুলি সংজ্ঞায়িত একটি সংশ্লিষ্ট CSS ক্লাস থাকবে।
3. সেই চিত্রটি ব্যবহার করতে, আপনার উপাদানে সংশ্লিষ্ট ক্লাসটি যোগ করুন।

সুবিধা:

• একাধিক চিত্রের জন্য HTTP অনুরোধের সংখ্যা হ্রাস করে (প্রতি স্প্রাইটশীটে শুধুমাত্র একটি একক অনুরোধের প্রয়োজন)। কিন্তু HTTP2 এর সাথে, একাধিক চিত্র লোড করা আর তেমন সমস্যা নয়।
• এমন সম্পদের অগ্রিম ডাউনলোড যা প্রয়োজন না হওয়া পর্যন্ত ডাউনলোড হবে না, যেমন চিত্র যা শুধুমাত্র :hover ছদ্ম-অবস্থায় প্রদর্শিত হয়। ঝলকানি দেখা যাবে না।

• সমস্যা এবং সমস্যাযুক্ত ব্রাউজার সনাক্ত করার পর, একটি পৃথক স্টাইল শীট ব্যবহার করুন যা শুধুমাত্র সেই নির্দিষ্ট ব্রাউজার ব্যবহার করার সময় লোড হয়। এই কৌশলের জন্য যদিও সার্ভার-সাইড রেন্ডারিং প্রয়োজন।
• Bootstrap-এর মতো লাইব্রেরি ব্যবহার করুন যা ইতিমধ্যেই আপনার জন্য এই স্টাইলিং সমস্যাগুলি সমাধান করে।
• আপনার কোডে স্বয়ংক্রিয়ভাবে বিক্রেতা উপসর্গ যোগ করতে autoprefixer ব্যবহার করুন।
• Reset CSS বা Normalize.css ব্যবহার করুন।
• আপনি যদি Postcss (বা অনুরূপ একটি ট্রান্সপাইলিং লাইব্রেরি) ব্যবহার করেন, তাহলে এমন প্লাগইন থাকতে পারে যা আপনাকে আধুনিক CSS সিনট্যাক্স (এবং এমনকি W3C প্রস্তাবনা) ব্যবহারের জন্য অপ্ট ইন করতে দেয় যা আপনার কোডের সেই বিভাগগুলিকে সংশ্লিষ্ট নিরাপদ কোডে রূপান্তরিত করবে যা আপনার ব্যবহৃত লক্ষ্যগুলিতে কাজ করবে।

• গ্রেসফুল ডিগ্রেডেশন - আধুনিক ব্রাউজারগুলির জন্য একটি অ্যাপ্লিকেশন তৈরি করার অভ্যাস যখন এটি পুরানো ব্রাউজারগুলিতেও কার্যকরী থাকে তা নিশ্চিত করা।
• প্রগ্রেসিভ এনহ্যান্সমেন্ট - ব্যবহারকারীর অভিজ্ঞতার একটি বেস স্তরের জন্য একটি অ্যাপ্লিকেশন তৈরি করার অভ্যাস, তবে একটি ব্রাউজার এটি সমর্থন করলে কার্যকারিতা বাড়ানো।
• ফিচার সমর্থন পরীক্ষা করতে [caniuse.com] ব্যবহার করুন।
• স্বয়ংক্রিয় বিক্রেতা উপসর্গ সন্নিবেশের জন্য Autoprefixer।
• [Modernizr] ব্যবহার করে ফিচার ডিটেকশন।
• CSS ফিচার ক্যোয়ারী ব্যবহার করুন [@support]

এই কৌশলগুলি অ্যাক্সেসিবিলিটির (a11y) সাথে সম্পর্কিত।

• width: 0; height: 0। উপাদানটিকে স্ক্রিনে কোনও স্থান না নিতে দিন, যার ফলে এটি প্রদর্শিত হবে না।
• position: absolute; left: -99999px। এটিকে স্ক্রিনের বাইরে অবস্থান করুন।
• text-indent: -9999px। এটি শুধুমাত্র block উপাদানগুলির মধ্যে পাঠ্যে কাজ করে। এটি একটি বহুল ব্যবহৃত এবং বিখ্যাত কৌশল, তবে এটি [কিছু অসুবিধা] নিয়ে আসে যেমন পারফরম্যান্স সমস্যা সৃষ্টি করা, তাই আপনি পরিবর্তে text-indent: 100% ব্যবহার করার কথা বিবেচনা করতে পারেন।
• মেটা ট্যাগ। উদাহরণস্বরূপ Schema.org, RDF, এবং JSON-LD ব্যবহার করে।
• WAI-ARIA। একটি W3C প্রযুক্তিগত স্পেসিফিকেশন যা ওয়েব পৃষ্ঠাগুলির অ্যাক্সেসিবিলিটি কীভাবে বাড়ানো যায় তা নির্দিষ্ট করে।

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

ফ্লেক্স জনপ্রিয় হওয়ার আগে (২০১৪ সালের দিকে), float-ভিত্তিক গ্রিড সিস্টেমটি সবচেয়ে নির্ভরযোগ্য ছিল কারণ এটি বিকল্প বিদ্যমান সিস্টেমগুলির (ফ্লেক্স, গ্রিড) মধ্যে সবচেয়ে বেশি ব্রাউজার সমর্থন ছিল। Bootstrap 4 float পদ্ধতি ব্যবহার করত যা flex-ভিত্তিক পদ্ধতিতে পরিবর্তিত হয়েছিল। বর্তমানে (২০২০), গ্রিড সিস্টেম তৈরির জন্য flex একটি প্রস্তাবিত পদ্ধতি এবং এটির [যথেষ্ট ব্রাউজার সমর্থন] রয়েছে।

সাহসী ব্যক্তিরা [CSS Grid Layout] দেখতে পারেন, যা নতুন grid বৈশিষ্ট্য ব্যবহার করে; এটি গ্রিড লেআউট তৈরির জন্য flex-এর চেয়েও ভাল এবং ভবিষ্যতে এটি ডি ফ্যাক্টো উপায় হবে।

হ্যাঁ। একটি উদাহরণ হবে একটি স্তুপীকৃত পিল নেভিগেশনকে একটি নির্দিষ্ট ব্রেকপয়েন্টের বাইরে একটি স্থির-নিচের ট্যাব নেভিগেশনে রূপান্তর করা।

হ্যাঁ, ইনলাইন CSS, একটি এম্বেডেড CSS সেকশন, বা একটি বাহ্যিক CSS ফাইল ব্যবহার করে আকারগুলিকে রঙ করার বেশ কয়েকটি উপায় রয়েছে (অবজেক্টে বৈশিষ্ট্য নির্দিষ্ট করা সহ)। ওয়েবে আপনি বেশিরভাগ SVG-তে ইনলাইন CSS ব্যবহার করতে দেখবেন, তবে প্রতিটি প্রকারের সাথে সুবিধা এবং অসুবিধা রয়েছে।

বেসিক কালারিং দুটি অ্যাট্রিবিউট সেট করে করা যেতে পারে: fill এবং stroke। fill অবজেক্টের ভিতরের রঙ সেট করে এবং stroke অবজেক্টের চারপাশে আঁকা লাইনের রঙ সেট করে। আপনি HTML-এ যে একই CSS রঙের নাম ব্যবহার করেন তা ব্যবহার করতে পারেন, সেটি রঙের নাম (যেমন red), RGB মান (যেমন rgb(255,0,0)), হেক্স মান, RGBA মান, ইত্যাদি।

<rect
  x="10"
  y="10"
  width="100"
  height="100"
  stroke="blue"
  fill="purple"
  fill-opacity="0.5"
  stroke-opacity="0.8" />

উপরের fill="purple" একটি প্রেজেন্টেশনাল অ্যাট্রিবিউট এর উদাহরণ। মজার বিষয় হল, এবং style="fill: purple" এর মতো ইনলাইন স্টাইলগুলির থেকে ভিন্ন যা একটি অ্যাট্রিবিউটও বটে, প্রেজেন্টেশনাল অ্যাট্রিবিউটগুলি একটি স্টাইলশীটে সংজ্ঞায়িত CSS স্টাইল দ্বারা [ওভাররাইড করা যেতে পারে]। সুতরাং, যদি আপনি svg { fill: blue; } এর মতো কিছু করেন তবে এটি আমাদের সংজ্ঞায়িত বেগুনি ফিলকে ওভাররাইড করবে।

হ্যাঁ, @media বৈশিষ্ট্যগুলির চারটি প্রকার রয়েছে (স্ক্রিন সহ):

• all - সমস্ত মিডিয়া টাইপ ডিভাইসের জন্য
• print - প্রিন্টারগুলির জন্য
• speech - স্ক্রিনরিডারগুলির জন্য যা পৃষ্ঠাটি উচ্চস্বরে 'পড়ে'
• screen - কম্পিউটার স্ক্রিন, ট্যাবলেট, স্মার্টফোন ইত্যাদির জন্য

এখানে print মিডিয়া টাইপের ব্যবহারের একটি উদাহরণ দেওয়া হল:

@media print {
  body {
    color: black;
  }
}

প্রথমত, ব্রাউজারগুলি নির্বাচকদের ডানদিক থেকে (মূল নির্বাচক) বাম দিকে মেলাতে বোঝে। ব্রাউজারগুলি মূল নির্বাচক অনুসারে DOM-এ উপাদানগুলিকে ফিল্টার করে এবং ম্যাচগুলি নির্ধারণ করতে তার প্যারেন্ট উপাদানগুলিতে উপরে ট্র্যাভার্স করে। নির্বাচক চেইনের দৈর্ঘ্য যত কম হবে, ব্রাউজার তত দ্রুত নির্ধারণ করতে পারবে যে সেই উপাদানটি নির্বাচকের সাথে মেলে কিনা। তাই ট্যাগ এবং ইউনিভার্সাল নির্বাচকগুলি মূল নির্বাচক হিসাবে ব্যবহার করা এড়িয়ে চলুন। তারা প্রচুর সংখ্যক উপাদানের সাথে মেলে এবং প্যারেন্টগুলি মেলে কিনা তা নির্ধারণ করতে ব্রাউজারগুলিকে আরও বেশি কাজ করতে হবে।

[BEM (Block Element Modifier)] পদ্ধতি সুপারিশ করে যে সবকিছুর একটি একক ক্লাস থাকবে, এবং যেখানে আপনার হায়ারার্কি প্রয়োজন, সেখানে ক্লাস নামের মধ্যেও তা অন্তর্ভুক্ত করা হবে, এটি স্বাভাবিকভাবেই নির্বাচককে দক্ষ এবং ওভাররাইড করা সহজ করে তোলে।

কোন CSS বৈশিষ্ট্যগুলি রিফ্লো, রিপেইন্ট এবং কম্পোজিটিং [ট্রিগার] করে সে সম্পর্কে সচেতন থাকুন। যেখানে সম্ভব লেআউট পরিবর্তন করে এমন শৈলী লেখা এড়িয়ে চলুন।

সুবিধা:

• CSS কে আরও রক্ষণাবেক্ষণযোগ্য করে তোলা হয়েছে।
• নেস্টেড নির্বাচক লেখা সহজ।
• সামঞ্জস্যপূর্ণ থিমিংয়ের জন্য ভেরিয়েবল। বিভিন্ন প্রকল্পের মধ্যে থিম ফাইল শেয়ার করা যায়।
• পুনরাবৃত্তি CSS তৈরি করতে মিক্সিন।
• Sass-এর বৈশিষ্ট্য যেমন লুপ, তালিকা এবং ম্যাপ কনফিগারেশনকে সহজ এবং কম দীর্ঘ করতে পারে।
• আপনার কোড একাধিক ফাইলে বিভক্ত করা। CSS ফাইলগুলিও বিভক্ত করা যেতে পারে তবে প্রতিটি CSS ফাইল ডাউনলোড করার জন্য একটি HTTP অনুরোধের প্রয়োজন হবে।

অসুবিধা:

• প্রিপ্রোসেসিংয়ের জন্য সরঞ্জাম প্রয়োজন। পুনরায় সংকলন সময় ধীর হতে পারে।
• বর্তমানে এবং সম্ভাব্য ব্যবহারযোগ্য CSS লেখা নয়। উদাহরণস্বরূপ, [webpack] সহ [postcss-loader]-এর মতো কিছু ব্যবহার করে, আপনি সম্ভাব্য ভবিষ্যত-সামঞ্জস্যপূর্ণ CSS লিখতে পারেন, যা আপনাকে Sass ভেরিয়েবলের পরিবর্তে CSS ভেরিয়েবলের মতো জিনিসগুলি ব্যবহার করার অনুমতি দেয়। সুতরাং, আপনি নতুন দক্ষতা শিখছেন যা ভবিষ্যতে মানসম্মত হলে কাজে লাগতে পারে।

পছন্দ:

• বেশিরভাগই উপরে উল্লিখিত সুবিধাগুলি।
• JavaScript-এ কম লেখা হয়, যা Node-এর সাথে ভাল কাজ করে।

অপছন্দ:

• আমি node-sass এর মাধ্যমে Sass ব্যবহার করি, যা C++ এ লেখা LibSass-এর জন্য একটি বাইন্ডিং। নোড সংস্করণগুলির মধ্যে স্যুইচ করার সময় আমাকে এটি ঘন ঘন পুনরায় কম্পাইল করতে হয়।
• Less-এ, ভেরিয়েবলের নাম @ দিয়ে উপসর্গযুক্ত হয়, যা @media, @import এবং @font-face নিয়মের মতো নেটিভ CSS কীওয়ার্ডগুলির সাথে বিভ্রান্ত হতে পারে।

@font-face ব্যবহার করুন এবং বিভিন্ন font-weight-এর জন্য font-family সংজ্ঞায়িত করুন।

এই অংশটি writing efficient CSS-এর উপরের অংশের সাথে সম্পর্কিত। ব্রাউজারগুলি নির্বাচকদের ডানদিক থেকে (মূল নির্বাচক) বাম দিকে মেলাতে বোঝে। ব্রাউজারগুলি মূল নির্বাচক অনুসারে DOM-এ উপাদানগুলিকে ফিল্টার করে এবং ম্যাচগুলি নির্ধারণ করতে তার প্যারেন্ট উপাদানগুলিতে উপরে ট্র্যাভার্স করে। নির্বাচক চেইনের দৈর্ঘ্য যত কম হবে, ব্রাউজার তত দ্রুত নির্ধারণ করতে পারবে যে সেই উপাদানটি নির্বাচকের সাথে মেলে কিনা।

উদাহরণস্বরূপ এই নির্বাচক p span এর সাথে, ব্রাউজারগুলি প্রথমে সমস্ত <span> উপাদান খুঁজে পায় এবং তার প্যারেন্টের সমস্ত পথ রুট পর্যন্ত ট্র্যাভার্স করে <p> উপাদানটি খুঁজে বের করে। একটি নির্দিষ্ট <span> এর জন্য, যত তাড়াতাড়ি এটি একটি <p> খুঁজে পায়, এটি জানে যে <span> মেলে এবং তার মিলানো বন্ধ করতে পারে।

একটি CSS ছদ্ম-উপাদান হল একটি নির্বাচকের সাথে যোগ করা একটি কীওয়ার্ড যা আপনাকে নির্বাচিত উপাদানগুলির একটি নির্দিষ্ট অংশ স্টাইল করতে দেয়। এগুলি সাজসজ্জার জন্য (:first-line, :first-letter) বা মার্কআপে উপাদান যোগ করার জন্য (content: ... এর সাথে সংযুক্ত) মার্কআপ পরিবর্তন না করেই (:before, :after) ব্যবহার করা যেতে পারে।

• :first-line এবং :first-letter পাঠ্য সাজাতে ব্যবহার করা যেতে পারে।
• উপরে দেখানো .clearfix হ্যাক-এ একটি জিরো-স্পেস উপাদান clear: both সহ যোগ করতে ব্যবহৃত হয়।
• টুলটিপের ত্রিভুজাকার তীরগুলি :before এবং :after ব্যবহার করে। এটি উদ্বেগের বিচ্ছেদকে উৎসাহিত করে কারণ ত্রিভুজটিকে স্টাইলিংয়ের অংশ হিসাবে বিবেচনা করা হয় এবং DOM-এর অংশ হিসাবে নয়।

CSS বক্স মডেল ডকুমেন্ট ট্রিতে উপাদানগুলির জন্য তৈরি আয়তক্ষেত্রাকার বক্সগুলি বর্ণনা করে এবং ভিজ্যুয়াল ফরম্যাটিং মডেল অনুসারে স্থাপন করা হয়। প্রতিটি বক্সের একটি কন্টেন্ট এরিয়া (যেমন টেক্সট, একটি ছবি ইত্যাদি) এবং ঐচ্ছিক চারপাশে padding, border এবং margin এরিয়া থাকে।

CSS বক্স মডেল নিম্নলিখিতগুলি গণনার জন্য দায়ী:

• একটি ব্লক উপাদান কতটা জায়গা নেয়।
• সীমানা এবং/অথবা মার্জিনগুলি ওভারল্যাপ করে, বা সঙ্কুচিত হয় কিনা।
• একটি বক্সের মাত্রা।

বক্স মডেলের নিম্নলিখিত নিয়মগুলি রয়েছে:

• একটি ব্লক উপাদানের মাত্রা width, height, padding, border এবং margin দ্বারা গণনা করা হয়।
• যদি কোনও height নির্দিষ্ট না করা হয়, তবে একটি ব্লক উপাদান এতে থাকা বিষয়বস্তুর উচ্চতা + padding এর সমান হবে (ফ্লোট না থাকলে, যার জন্য নিচে দেখুন)।
• যদি কোনও width নির্দিষ্ট না করা হয়, তবে একটি অ-ফ্লোটেড ব্লক উপাদান তার প্যারেন্টের প্রস্থের সাথে padding বাদ দিয়ে প্রসারিত হবে।
• একটি উপাদানের height কন্টেন্টের height দ্বারা গণনা করা হয়।
• একটি উপাদানের width কন্টেন্টের width দ্বারা গণনা করা হয়।
• ডিফল্টরূপে, padding এবং border একটি উপাদানের width এবং height এর অংশ নয়।

• ডিফল্টরূপে, উপাদানগুলিতে box-sizing: content-box প্রয়োগ করা হয়, এবং শুধুমাত্র বিষয়বস্তুর আকারই বিবেচনা করা হয়।
• box-sizing: border-box উপাদানগুলির width এবং height কীভাবে গণনা করা হয় তা পরিবর্তন করে, border এবং paddingও গণনায় অন্তর্ভুক্ত করা হয়।
• একটি উপাদানের height এখন বিষয়বস্তুর height + উল্লম্ব padding + উল্লম্ব border প্রস্থ দ্বারা গণনা করা হয়।
• একটি উপাদানের width এখন বিষয়বস্তুর width + অনুভূমিক padding + অনুভূমিক border প্রস্থ দ্বারা গণনা করা হয়।
• আমাদের বক্স মডেলের অংশ হিসাবে padding এবং border বিবেচনা করা ডিজাইনাররা গ্রিডে বিষয়বস্তু কীভাবে কল্পনা করে তার সাথে আরও ভালভাবে মিলে যায়।

• none, block, inline, inline-block, flex, grid, table, table-row, table-cell, list-item।

| display | বর্ণনা | | :-- | :-- | | none | একটি উপাদান প্রদর্শন করে না (উপাদানটি আর ডকুমেন্টের লেআউটকে প্রভাবিত করে না)। সমস্ত শিশু উপাদানও আর প্রদর্শিত হয় না। ডকুমেন্টটি এমনভাবে রেন্ডার করা হয় যেন ডকুমেন্ট ট্রিতে উপাদানটি বিদ্যমান ছিল না | | block | উপাদানটি ব্লক দিকের (যা সাধারণত অনুভূমিক) পুরো লাইনটি ব্যবহার করে | | inline | উপাদানগুলি একে অপরের পাশাপাশি স্থাপন করা যেতে পারে | | inline-block | inline-এর মতো, তবে block বৈশিষ্ট্যগুলি যেমন width এবং height সেট করার অনুমতি দেয় | | table | <table> উপাদানের মতো আচরণ করে | | table-row | <tr> উপাদানের মতো আচরণ করে | | table-cell | <td> উপাদানের মতো আচরণ করে | | list-item | <li> উপাদানের মতো আচরণ করে যা এটিকে list-style-type এবং list-style-position সংজ্ঞায়িত করার অনুমতি দেয় |

আমি একটি ভাল পরিমাপের জন্য block এর সাথে একটি তুলনা করব।

| | block | inline-block | inline | | --- | --- | --- | --- | | আকার | তার প্যারেন্ট কন্টেইনারের প্রস্থ পূরণ করে। | বিষয়বস্তুর উপর নির্ভর করে। | বিষয়বস্তুর উপর নির্ভর করে। | | পজিশনিং | একটি নতুন লাইনে শুরু হয় এবং এর পাশে কোনো HTML উপাদান সহ্য করে না (যদি না আপনি float যোগ করেন) | অন্যান্য বিষয়বস্তুর সাথে প্রবাহিত হয় এবং এর পাশে অন্যান্য উপাদানগুলির অনুমতি দেয়। | অন্যান্য বিষয়বস্তুর সাথে প্রবাহিত হয় এবং এর পাশে অন্যান্য উপাদানগুলির অনুমতি দেয়। | | width এবং height নির্দিষ্ট করা যায় | হ্যাঁ | হ্যাঁ | না। সেট করা হলে উপেক্ষা করা হবে। | | vertical-align দিয়ে সারিবদ্ধ করা যায় | না | হ্যাঁ | হ্যাঁ | | মার্জিন এবং প্যাডিং | সমস্ত দিক সম্মানিত। | সমস্ত দিক সম্মানিত। | শুধুমাত্র অনুভূমিক দিক সম্মানিত। উল্লম্ব দিক, নির্দিষ্ট করা হলে, লেআউটকে প্রভাবিত করে না। উল্লম্ব স্থান যা এটি নেয় তা line-height এর উপর নির্ভর করে, যদিও border এবং padding দৃশ্যত বিষয়বস্তুর চারপাশে প্রদর্শিত হয়। | | ফ্লোট | - | - | একটি block উপাদানের মতো হয়ে যায় যেখানে আপনি উল্লম্ব মার্জিন এবং প্যাডিং সেট করতে পারেন। |

একটি পজিশনড উপাদান হল একটি উপাদান যার কম্পিউটেড position বৈশিষ্ট্য হয় relative, absolute, fixed অথবা sticky।

• static - ডিফল্ট পজিশন; উপাদানটি স্বাভাবিকভাবে পৃষ্ঠায় প্রবাহিত হবে। top, right, bottom, left এবং z-index বৈশিষ্ট্যগুলি প্রযোজ্য নয়।
• relative - উপাদানটির পজিশন তার নিজের সাপেক্ষে সামঞ্জস্য করা হয়, লেআউট পরিবর্তন না করে (এবং এইভাবে উপাদানটির জন্য একটি ফাঁক রেখে যেখানে এটি পজিশন না হলে থাকত)।
• absolute - উপাদানটি পৃষ্ঠার প্রবাহ থেকে সরানো হয় এবং তার নিকটতম পজিশনড অ্যান্সেস্টরের সাপেক্ষে একটি নির্দিষ্ট পজিশনে স্থাপন করা হয় যদি থাকে, অথবা অন্যথায় প্রাথমিক কন্টেইনিং ব্লকের সাপেক্ষে। পরমভাবে পজিশনড বক্সগুলির মার্জিন থাকতে পারে এবং তারা অন্য কোনও মার্জিনের সাথে সঙ্কুচিত হয় না। এই উপাদানগুলি অন্যান্য উপাদানগুলির পজিশনকে প্রভাবিত করে না।
• fixed - উপাদানটি পৃষ্ঠার প্রবাহ থেকে সরানো হয় এবং ভিউপোর্টের সাপেক্ষে একটি নির্দিষ্ট পজিশনে স্থাপন করা হয় এবং স্ক্রল করার সময় নড়ে না।
• sticky - স্টিকি পজিশনিং হল রিলেটিভ এবং ফিক্সড পজিশনিংয়ের একটি হাইব্রিড। উপাদানটিকে relative পজিশনড হিসাবে গণ্য করা হয় যতক্ষণ না এটি একটি নির্দিষ্ট থ্রেশহোল্ড অতিক্রম করে, সেই মুহুর্তে এটি fixed পজিশনড হিসাবে গণ্য করা হয়।

• বুটস্ট্র্যাপ - ধীর রিলিজ চক্র। বুটস্ট্র্যাপ 4 প্রায় 2 বছর ধরে আলফাতে ছিল। একটি স্পিনার বোতাম কম্পোনেন্ট যোগ করুন, কারণ এটি বহুল ব্যবহৃত।
• সিমান্টিক UI - সোর্স কোড কাঠামো থিম কাস্টমাইজেশনকে বোঝা অত্যন্ত কঠিন করে তোলে। এর অপ্রচলিত থিমিং সিস্টেম কাস্টমাইজ করা একটি যন্ত্রণা। বিক্রেতা লাইব্রেরির মধ্যে হার্ডকোড করা কনফিগারেশন পাথ। বুটস্ট্র্যাপের মতো ভেরিয়েবল ওভাররাইড করার জন্য ভালোভাবে ডিজাইন করা হয়নি।
• বুলমা - অনেক অ-সিমান্টিক এবং অপ্রয়োজনীয় ক্লাস এবং মার্কআপ প্রয়োজন। পশ্চাৎপদ সামঞ্জস্যপূর্ণ নয়। সংস্করণ আপগ্রেড করলে অ্যাপটি সূক্ষ্মভাবে ভেঙে যায়।

হ্যাঁ। ফ্লেক্সবক্স প্রধানত 1-মাত্রিক লেআউটের জন্য এবং গ্রিড 2-মাত্রিক লেআউটের জন্য।

ফ্লেক্সবক্স CSS-এ অনেক সাধারণ সমস্যার সমাধান করে, যেমন একটি কন্টেইনারের মধ্যে উপাদানগুলির উল্লম্ব কেন্দ্রিকতা, স্টিকি ফুটার ইত্যাদি। বুটস্ট্র্যাপ এবং বুলমা ফ্লেক্সবক্সের উপর ভিত্তি করে তৈরি, এবং এটি সম্ভবত আজকাল লেআউট তৈরির জন্য প্রস্তাবিত উপায়। আগে ফ্লেক্সবক্স চেষ্টা করেছিলাম কিন্তু flex-grow ব্যবহার করে কিছু ব্রাউজার অসঙ্গতি সমস্যার (সাফারি) মুখোমুখি হয়েছিলাম, এবং আমাকে inline-blocks এবং শতাংশে প্রস্থ গণনা করার জন্য গণিত ব্যবহার করে আমার কোডটি পুনরায় লিখতে হয়েছিল, এটি একটি ভাল অভিজ্ঞতা ছিল না।

গ্রিড-ভিত্তিক লেআউট তৈরির জন্য গ্রিড এখন পর্যন্ত সবচেয়ে স্বজ্ঞাত পদ্ধতি (এটি আরও ভাল হবে!) তবে বর্তমানে ব্রাউজার সমর্থন ব্যাপক নয়।

মনে রাখবেন যে এই দুটি পদ্ধতি একচেটিয়া নয়।

একটি ওয়েবসাইটকে রেসপনসিভ করা মানে কিছু উপাদান ডিভাইসের স্ক্রিনের আকার অনুযায়ী তার আকার বা অন্যান্য কার্যকারিতা সামঞ্জস্য করে প্রতিক্রিয়া জানাবে, সাধারণত CSS মিডিয়া ক্যোয়ারীর মাধ্যমে ভিউপোর্ট প্রস্থ, উদাহরণস্বরূপ, ছোট ডিভাইসে ফন্টের আকার ছোট করা।

@media (min-width: 601px) {
  .my-class {
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  .my-class {
    font-size: 12px;
  }
}

একটি মোবাইল-ফার্স্ট কৌশলও রেসপনসিভ, তবে এটি সম্মত হয় যে আমাদের মোবাইল ডিভাইসের জন্য সমস্ত শৈলী ডিফল্ট এবং সংজ্ঞায়িত করা উচিত, এবং পরে অন্যান্য ডিভাইসের জন্য নির্দিষ্ট রেসপনসিভ নিয়ম যোগ করা উচিত। পূর্ববর্তী উদাহরণ অনুসরণ করে:

.my-class {
  font-size: 12px;
}

@media (min-width: 600px) {
  .my-class {
    font-size: 24px;
  }
}

একটি মোবাইল-ফার্স্ট কৌশলের ২টি প্রধান সুবিধা রয়েছে:

• এটি মোবাইল ডিভাইসে আরও কার্যক্ষম, কারণ তাদের জন্য প্রয়োগ করা সমস্ত নিয়ম কোনও মিডিয়া ক্যোয়ারীর বিরুদ্ধে যাচাই করতে হয় না।
• এটি রেসপনসিভ CSS নিয়মগুলির ক্ষেত্রে পরিষ্কার কোড লিখতে বাধ্য করে।

রেসপনসিভ এবং অভিযোজিত উভয় ডিজাইনই বিভিন্ন ডিভাইসে ব্যবহারকারীর অভিজ্ঞতা অপ্টিমাইজ করার চেষ্টা করে, বিভিন্ন ভিউপোর্ট আকার, রেজোলিউশন, ব্যবহারের প্রসঙ্গ, নিয়ন্ত্রণ প্রক্রিয়া ইত্যাদির জন্য সামঞ্জস্য করে।

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

অভিযোজিত ডিজাইন প্রগ্রেসিভ এনহ্যান্সমেন্টের আধুনিক সংজ্ঞার মতো। একটি নমনীয় ডিজাইনের পরিবর্তে, অভিযোজিত ডিজাইন ডিভাইস এবং অন্যান্য বৈশিষ্ট্যগুলি সনাক্ত করে এবং তারপর পূর্বে সংজ্ঞায়িত ভিউপোর্ট আকার এবং অন্যান্য বৈশিষ্ট্যগুলির উপর ভিত্তি করে উপযুক্ত বৈশিষ্ট্য এবং লেআউট সরবরাহ করে। সাইটটি ব্যবহৃত ডিভাইসের ধরন সনাক্ত করে এবং সেই ডিভাইসের জন্য পূর্ব-নির্ধারিত লেআউট সরবরাহ করে। বিভিন্ন আকারের hoops-এর মধ্যে দিয়ে একটি একক বল যাওয়ার পরিবর্তে, আপনার hoops-এর আকারের উপর নির্ভর করে ব্যবহার করার জন্য বিভিন্ন বল থাকবে।

এই উভয় পদ্ধতির কিছু সমস্যা রয়েছে যা বিবেচনা করা দরকার:

• রেসপনসিভ ডিজাইন বেশ চ্যালেঞ্জিং হতে পারে, কারণ আপনি মূলত একটি একক, যদিও রেসপনসিভ লেআউট ব্যবহার করে সমস্ত পরিস্থিতিতে ফিট করার চেষ্টা করছেন। মিডিয়া ক্যোয়ারী ব্রেকপয়েন্টগুলি কীভাবে সেট করবেন তা একটি চ্যালেঞ্জ। আপনি কি মানসম্মত ব্রেকপয়েন্ট মান ব্যবহার করবেন? অথবা, আপনার নির্দিষ্ট লেআউটের জন্য অর্থপূর্ণ ব্রেকপয়েন্ট ব্যবহার করবেন? যদি সেই লেআউট পরিবর্তন হয়?
• অভিযোজিত ডিজাইনের জন্য সাধারণত ব্যবহারকারী এজেন্ট স্নিফিং, বা DPI সনাক্তকরণ ইত্যাদি প্রয়োজন হয়, যার সবগুলিই অবিশ্বস্ত প্রমাণিত হতে পারে।

রেটিনা একটি বিপণন শব্দ যা 1 এর বেশি পিক্সেল অনুপাত সহ উচ্চ রেজোলিউশন স্ক্রিন বোঝাতে ব্যবহৃত হয়। মূল বিষয় হল, পিক্সেল অনুপাত ব্যবহার করার অর্থ হল এই ডিসপ্লেগুলি একই আকারের উপাদানগুলি দেখানোর জন্য একটি নিম্ন রেজোলিউশন স্ক্রিনকে অনুকরণ করছে। আজকাল আমরা সমস্ত মোবাইল ডিভাইসকে ডি-ফ্যাক্টো রেটিনা ডিসপ্লে হিসাবে বিবেচনা করি।

ব্রাউজারগুলি ডিফল্টরূপে ডিভাইস রেজোলিউশন অনুযায়ী DOM উপাদানগুলি রেন্ডার করে, তবে চিত্রগুলির ক্ষেত্রে ব্যতিক্রম।

রেটিনা ডিসপ্লেগুলির সেরা সুবিধা নিতে খাস্তা, সুন্দর গ্রাফিক্স পেতে আমাদের যেখানে সম্ভব উচ্চ রেজোলিউশনের চিত্র ব্যবহার করতে হবে। তবে সর্বদা সর্বোচ্চ রেজোলিউশনের চিত্র ব্যবহার করলে পারফরম্যান্সে প্রভাব পড়বে কারণ আরও বাইট তারের উপর দিয়ে পাঠাতে হবে।

এই সমস্যাটি কাটিয়ে উঠতে, আমরা HTML5-এ নির্দিষ্ট করা রেসপনসিভ চিত্র ব্যবহার করতে পারি। এর জন্য একই চিত্রের বিভিন্ন রেজোলিউশনের ফাইল ব্রাউজারে উপলব্ধ করতে হবে এবং ব্রাউজারকে কোনটি সেরা তা সিদ্ধান্ত নিতে দিতে হবে, যেমন srcset এবং ঐচ্ছিকভাবে sizes HTML অ্যাট্রিবিউট ব্যবহার করে:

<div responsive-background-image>
  <img
    src="/images/test-1600.jpg"
    sizes="
      (min-width: 768px) 50vw,
      (min-width: 1024px) 66vw,
      100vw"
    srcset="
      /images/test-400.jpg   400w,
      /images/test-800.jpg   800w,
      /images/test-1200.jpg 1200w
    " />
</div>

এটি লক্ষ্য করা গুরুত্বপূর্ণ যে HTML5 এর srcset সমর্থন করে না এমন ব্রাউজারগুলি (যেমন IE11) এটিকে উপেক্ষা করবে এবং পরিবর্তে src ব্যবহার করবে। যদি আমাদের সত্যিই IE11 সমর্থন করার প্রয়োজন হয় এবং আমরা পারফরম্যান্সের কারণে এই বৈশিষ্ট্যটি সরবরাহ করতে চাই, তবে আমরা একটি জাভাস্ক্রিপ্ট পলিফিল ব্যবহার করতে পারি, উদাহরণস্বরূপ:

আইকনগুলির জন্য, আমি যেখানে সম্ভব SVG এবং আইকন ফন্ট ব্যবহার করার কথা বিবেচনা করব, কারণ তারা রেজোলিউশন নির্বিশেষে খুব পরিষ্কারভাবে রেন্ডার করে।

translate() হল CSS transform এর একটি মান। transform বা opacity পরিবর্তন করলে ব্রাউজার রিফ্লো বা রিপেইন্ট ট্রিগার করে না কিন্তু কম্পোজিশন ট্রিগার করে; যখন অ্যাবসোলিউট পজিশনিং পরিবর্তন করলে reflow ট্রিগার করে। transform ব্রাউজারকে উপাদানের জন্য একটি GPU স্তর তৈরি করতে বাধ্য করে কিন্তু অ্যাবসোলিউট পজিশনিং বৈশিষ্ট্য পরিবর্তন করলে CPU ব্যবহার হয়। তাই translate() বেশি কার্যকর এবং মসৃণ অ্যানিমেশনের জন্য কম পেইন্ট সময় লাগবে।

translate() ব্যবহার করার সময়, উপাদানটি তার মূল স্থান দখল করে থাকে (এক ধরণের position: relative-এর মতো), অ্যাবসোলিউট পজিশনিং পরিবর্তন করার মতো নয়।