নতুন CSS ইউনিট যা গতিশীল টুলবার সহ মোবাইল ভিউপোর্টের জন্য অ্যাকাউন্ট করে।
ভিউপোর্ট এবং এর ইউনিট
ভিউপোর্টের মতো লম্বা কিছু আকার দিতে, আপনি vw এবং vh ইউনিট ব্যবহার করতে পারেন।
-
vw= ভিউপোর্ট সাইজের প্রস্থের 1%। -
vh= ভিউপোর্ট আকারের উচ্চতার 1%।
একটি উপাদানকে 100vw এর প্রস্থ এবং 100vh এর উচ্চতা দিন এবং এটি সম্পূর্ণরূপে ভিউপোর্টকে কভার করবে।
ভিউপোর্ট নিজেই একটি নীল ড্যাশ সীমানা ব্যবহার করে নির্দেশিত হয়।
vw এবং vh ইউনিটগুলি এই অতিরিক্ত ইউনিটগুলির সাথে ব্রাউজারে অবতরণ করেছে
-
vi= ভিউপোর্টের ইনলাইন অক্ষের আকারের 1%। -
vb= ভিউপোর্টের ব্লক অক্ষের আকারের 1%। -
vmin=vwবাvhএর ছোট। -
vmax=vwবাvhএর বড়।
এই ইউনিটগুলিতে ভাল ব্রাউজার সমর্থন রয়েছে।
ব্রাউজার সমর্থন
- 20
- 12
- 19
- 6
নতুন ভিউপোর্ট ইউনিটের প্রয়োজন
যদিও বিদ্যমান ইউনিটগুলি ডেস্কটপে ভাল কাজ করে, মোবাইল ডিভাইসে এটি একটি ভিন্ন গল্প। সেখানে, ভিউপোর্টের আকার গতিশীল টুলবারের উপস্থিতি বা অনুপস্থিতি দ্বারা প্রভাবিত হয়। এগুলি হল ইউজার ইন্টারফেস যেমন ঠিকানা বার এবং ট্যাব বার।
যদিও ভিউপোর্টের আকার পরিবর্তিত হতে পারে, তবে vw এবং vh আকার পরিবর্তন করে না। ফলস্বরূপ, 100vh লম্বা আকারের উপাদানগুলি ভিউপোর্ট থেকে রক্তপাত হবে।
নিচে স্ক্রোল করার সময় এই গতিশীল টুলবারগুলি প্রত্যাহার করবে। এই অবস্থায়, 100vh লম্বা আকারের উপাদানগুলি পুরো ভিউপোর্টকে কভার করবে।
এই সমস্যা সমাধানের জন্য, সিএসএস ওয়ার্কিং গ্রুপে ভিউপোর্টের বিভিন্ন রাজ্য নির্দিষ্ট করা হয়েছে।
- বড় ভিউপোর্ট : ভিউপোর্ট আকারের যে কোনো UA ইন্টারফেস ধরে নেওয়া হয় যা গতিশীলভাবে প্রসারিত হয় এবং প্রত্যাহার করা হয়।
- ছোট ভিউপোর্ট : যে কোনো UA ইন্টারফেস ধরে নিয়ে যে ভিউপোর্টের আকার গতিশীলভাবে প্রসারিত এবং প্রসারিত করার জন্য প্রত্যাহার করা হয়।
নতুন ভিউপোর্টগুলিতেও তাদের নির্দিষ্ট ইউনিট রয়েছে:
- বৃহৎ ভিউপোর্টের প্রতিনিধিত্বকারী ইউনিটগুলিতে
lvউপসর্গ থাকে। ইউনিটগুলি হলlvw,lvh,lvi,lvb,lvmin, এবংlvmax. - ছোট ভিউপোর্টের প্রতিনিধিত্বকারী ইউনিটগুলিতে
svউপসর্গ থাকে। ইউনিটগুলি হলsvw,svh,svi,svb,svmin, এবংsvmax.
এই ভিউপোর্ট-শতাংশ ইউনিটের মাপ স্থির (এবং তাই স্থিতিশীল) যদি না ভিউপোর্ট নিজেই আকার পরিবর্তন করা হয়।
একটিতে 100svh এবং অন্যটির 100lvh আকারের একটি উপাদান রয়েছে।
বড় এবং ছোট ভিউপোর্ট ছাড়াও, একটি ডায়নামিক ভিউপোর্ট রয়েছে যা UA UI এর গতিশীল বিবেচনা করে:
- যখন ডায়নামিক টুলবার প্রসারিত হয়, তখন ডাইনামিক ভিউপোর্ট ছোট ভিউপোর্টের আকারের সমান হয়।
- যখন গতিশীল টুলবারগুলি প্রত্যাহার করা হয়, তখন গতিশীল ভিউপোর্ট বড় ভিউপোর্টের আকারের সমান হয়।
এর সাথে যুক্ত ইউনিটগুলির dv উপসর্গ রয়েছে: dvw , dvh , dvi , dvb , dvmin , এবং dvmax । তাদের মাপ তাদের lv* এবং sv* প্রতিরূপের মধ্যে আটকে আছে।
এই ইউনিটগুলি ক্রোম 108-এ পাঠানো হয়, সাফারি এবং ফায়ারফক্সে যোগদান করে যা ইতিমধ্যেই সমর্থন রয়েছে৷
ব্রাউজার সমর্থন
- 108
- 108
- 101
- 15.4
সতর্কতা
ভিউপোর্ট ইউনিট সম্পর্কে জানার জন্য কয়েকটি সতর্কতা রয়েছে:
কোনো ভিউপোর্ট ইউনিট স্ক্রলবারের আকার বিবেচনা করে না। ক্লাসিক স্ক্রলবার সক্রিয় থাকা সিস্টেমগুলিতে,
100vwআকারের একটি উপাদান তাই একটু বেশি প্রশস্ত হবে। এটি স্পেসিফিকেশন অনুযায়ী।ডায়নামিক ভিউপোর্টের মান 60fps এ আপডেট হয় না। UA UI প্রসারিত বা প্রত্যাহার করার সাথে সাথে সমস্ত ব্রাউজারে আপডেট থ্রোটল করা হয়। কিছু ব্রাউজার এমনকি সম্পূর্ণরূপে ব্যবহৃত অঙ্গভঙ্গির (একটি ধীর স্ক্রোল বনাম একটি সোয়াইপ) উপর নির্ভর করে আপডেট করা ডিবাউন্স করে।
অন-স্ক্রীন কীবোর্ড (ভার্চুয়াল কীবোর্ড নামেও পরিচিত) UA UI এর অংশ হিসেবে বিবেচিত হয় না। তাই এটি ভিউপোর্ট ইউনিটের আকারকে প্রভাবিত করে না। ক্রোমে আপনি এমন একটি আচরণে অপ্ট-ইন করতে পারেন যেখানে ভার্চুয়াল কীবোর্ডের উপস্থিতি ভিউপোর্ট ইউনিটগুলিকে প্রভাবিত করে ৷
অতিরিক্ত সম্পদ
ভিউপোর্ট এবং এই ইউনিটগুলি সম্পর্কে আরও জানতে HTTP 203-এর এই পর্বটি দেখুন। এটিতে, ব্রামাস জ্যাককে বিভিন্ন ভিউপোর্ট সম্পর্কে সব বলে এবং ব্যাখ্যা করে যে এই ইউনিটগুলির আকার ঠিক কীভাবে নির্ধারণ করা হয়।
অতিরিক্ত পড়ার উপাদান: