ক্রোম দুটি এপিআই, ডিভাইস ভঙ্গি এপিআই এবং ভিউপোর্ট বিভাগগুলি গণনা এপিআই পরীক্ষা করছে, যা ক্রোম 125 থেকে একটি উত্স পরীক্ষা হিসাবে উপলব্ধ। এগুলি সম্মিলিতভাবে ফোল্ডেবল এপিআই হিসাবে পরিচিত, যা বিকাশকারীদের ফোল্ডেবল ডিভাইসগুলিকে লক্ষ্য করতে সহায়তা করার জন্য ডিজাইন করা হয়েছে। এই পোস্টটি এই APIগুলিকে পরিচয় করিয়ে দেয়, এবং কীভাবে তাদের পরীক্ষা শুরু করতে হয় সে সম্পর্কে তথ্য প্রদান করে৷
মূলত দুটি পৃথক শারীরিক ফর্মের কারণ রয়েছে: একটি একক নমনীয় স্ক্রিন (বিরামবিহীন) সহ ডিভাইস এবং দুটি স্ক্রিন সহ ডিভাইসগুলি (সিম সহ, ডুয়াল স্ক্রিন ডিভাইস নামেও পরিচিত)।
এই ডিভাইসগুলি ডেভেলপারদের চ্যালেঞ্জ এবং সুযোগ উপস্থাপন করে। তারা অতিরিক্ত উপায় প্রদান করে যাতে বিষয়বস্তু দেখা যায়। উদাহরণস্বরূপ, একজন ব্যবহারকারী একটি বইয়ের মতো একটি বিরামবিহীন ডিভাইস ধরে রাখতে পারে এবং তারপর এটিকে একটি ফ্ল্যাট স্ক্রীন সহ ট্যাবলেটের মতো ব্যবহার করতে পারে৷ দুটি স্ক্রীন সহ ডিভাইসগুলির স্ক্রীনগুলির মধ্যে একটি শারীরিক যোগ রয়েছে যার জন্য অ্যাকাউন্ট করা প্রয়োজন হতে পারে।
এই নতুন APIগুলি বিকাশকারীদের এই ডিভাইসগুলির জন্য আরও ভাল ব্যবহারকারীর অভিজ্ঞতা প্রদানের উপায় সরবরাহ করে। প্রতিটি API সিএসএস এবং জাভাস্ক্রিপ্টের মাধ্যমে দুটি উপায়ে প্রয়োজনীয় ওয়েব প্ল্যাটফর্মের আদিম বিষয়গুলিকে প্রকাশ করে।
ডিভাইস ভঙ্গি API
ভাঁজযোগ্য ডিভাইসগুলির এমন ক্ষমতা রয়েছে যা তাদের_ ভঙ্গি_ বা ডিভাইসের শারীরিক অবস্থা পরিবর্তন করতে দেয়। তারা তাদের ফর্ম ফ্যাক্টরটি পরিবর্তন করতে পারে যা সামগ্রী লেখকদের একটি পৃথক ব্যবহারকারীর অভিজ্ঞতা সরবরাহ করতে দেয় এবং এই নতুন এপিআইগুলি নিশ্চিত করে যে ওয়েব সামগ্রী বিভিন্ন ভাঁজ রাজ্যে প্রতিক্রিয়া জানাতে পারে।
একটি ডিভাইস থাকতে পারে এমন দুটি ভঙ্গি আছে:
-
folded: ল্যাপটপ বা বইয়ের ভঙ্গি।
-
continuous: ফ্ল্যাট, ট্যাবলেট, বা এমনকি বিজোড় বাঁকা ডিসপ্লে।
সিএসএস
ডিভাইস ভঙ্গি API স্পেসিফিকেশন একটি নতুন CSS মিডিয়া-ফিচার- ডিভাইস-ভঙ্গি নির্ধারণ করে। এই মিডিয়া বৈশিষ্ট্য নির্দিষ্ট ভঙ্গি একটি সেট সমাধান. এই অঙ্গবিন্যাসগুলি বেশ কয়েকটি পূর্বনির্ধারিত মান নিয়ে গঠিত যা প্রতিটি ডিভাইসের একটি শারীরিক অবস্থাকে অন্তর্ভুক্ত করে।
device-posture বৈশিষ্ট্যের মান সম্ভাব্য ভঙ্গিগুলির পূর্ববর্তী বর্ণনার সাথে মেলে:
-
folded -
continuous
নতুন ডিভাইস বাজারে এলে ভবিষ্যতে নতুন ভঙ্গি যোগ করা যেতে পারে।
উদাহরণ:
/* Using the device in a 'book' posture. */
@media (device-posture: folded) { ... }
/* Using the device in a 'flat' posture, or any typical device like a laptop or
desktop device. */
@media (device-posture: continuous) { ... }
জাভাস্ক্রিপ্ট
একটি ডিভাইসের ভঙ্গি জিজ্ঞাসা করতে, একটি নতুন DevicePosture অবজেক্ট উপলব্ধ।
const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);
ডিভাইস ভঙ্গির পরিবর্তনের প্রতিক্রিয়া জানাতে, যেমন কোনও ব্যবহারকারী পুরোপুরি কোনও ডিভাইস খোলার এবং তাই folded থেকে continuous দিকে সরানো, ইভেন্টগুলি change করতে সাবস্ক্রাইব করুন।
navigator.devicePosture.addEventListener('change', (e) => {
console.log(`The device posture changed to type ${e.type}`);
});
ভিউপোর্ট সেগমেন্ট API
ভিউপোর্ট সেগমেন্ট হল CSS এনভায়রনমেন্ট ভেরিয়েবল যা ভিউপোর্টের যৌক্তিকভাবে পৃথক অঞ্চলের অবস্থান এবং মাত্রা নির্ধারণ করে। ভিউপোর্ট বিভাগগুলি তৈরি করা হয় যখন ভিউপোর্টটি এক বা একাধিক হার্ডওয়্যার বৈশিষ্ট্য দ্বারা বিভক্ত হয় (যেমন একটি ভাঁজ বা পৃথক ডিসপ্লেগুলির মধ্যে একটি কব্জা) যা বিভাজক হিসাবে কাজ করে। সেগমেন্টগুলি হল ভিউপোর্টের অঞ্চল যেগুলি লেখক দ্বারা যৌক্তিকভাবে স্বতন্ত্র হিসাবে বিবেচনা করা যেতে পারে৷
সিএসএস
যৌক্তিক বিভাগের সংখ্যা দুটি নতুন মিডিয়া বৈশিষ্ট্যের মাধ্যমে প্রকাশ করা হয়েছে, CSS মিডিয়া কোয়েরি লেভেল 5 স্পেসিফিকেশনে সংজ্ঞায়িত করা হয়েছে: vertical-viewport-segments এবং horizontal-viewport-segments । তারা ভিউপোর্টকে বিভক্ত করা অংশের সংখ্যা নির্ধারণ করে।
এছাড়াও প্রতিটি লজিক্যাল ডিভিশনের মাত্রা অনুসন্ধানের জন্য নতুন পরিবেশ ভেরিয়েবল যোগ করা হয়েছে। এই ভেরিয়েবল হল:
-
env(viewport-segment-width xy) -
env(viewport-segment-height xy) -
env(viewport-segment-top xy) -
env(viewport-segment-left xy) -
env(viewport-segment-bottom xy) -
env(viewport-segment-right xy)
প্রতিটি ভেরিয়েবলের দুটি মাত্রা রয়েছে, যা বিভাগগুলিকে আলাদা করে হার্ডওয়্যার বৈশিষ্ট্য দ্বারা তৈরি দ্বি-মাত্রিক গ্রিডে যথাক্রমে x এবং y অবস্থানের প্রতিনিধিত্ব করে।
নিম্নলিখিত কোড স্নিপেট হল একটি বিভক্ত UX তৈরির একটি সরলীকৃত উদাহরণ যেখানে আমাদের ভাঁজের প্রতিটি পাশে দুটি বিষয়বস্তু বিভাগ (col1 এবং col2) রয়েছে।
<style>
/* Segments are laid out horizontally. */
@media (horizontal-viewport-segments: 2) {
#segment-css-container {
flex-direction: row;
}
#col1 {
display: flex;
flex: 0 0 env(viewport-segment-right 0 0);
background-color: steelblue;
}
#fold {
width: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
background-color: black;
height: 100%;
}
#col2 {
display: flex;
background-color: green;
}
}
/* Segments are laid out vertically. */
@media (vertical-viewport-segments: 2) {
#segment-css-container {
flex-direction: column;
}
#col1 {
display: flex;
flex: 0 0 env(viewport-segment-bottom 0 0);
background-color: pink;
}
#fold {
width: 100%;
height: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0));
background-color: black;
}
#col2 {
display: flex;
background-color: seagreen;
}
}
</style>
<div id="segment-css-container">
<div id="col1"></div>
<div id="fold"></div>
<div id="col2"></div>
</div>
নিম্নলিখিত ফটোগুলি দেখায় যে অভিজ্ঞতাটি একটি শারীরিক ডিভাইসে কেমন দেখায়৷
জাভাস্ক্রিপ্ট
ভিউপোর্ট সেগমেন্টের সংখ্যা পেতে, visualViewport segments এন্ট্রি পরীক্ষা করুন।
const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);
segments অ্যারের প্রতিটি এন্ট্রি স্থানাঙ্ক এবং আকার বর্ণনা করে একটি DOMArray সহ ভিউপোর্টের প্রতিটি লজিক্যাল সেগমেন্টকে উপস্থাপন করে। segments ক্ষেত্র হল প্রদত্ত অবস্থার একটি স্ন্যাপশট যখন জিজ্ঞাসা করা হয়, আপডেট করা মানগুলি পাওয়ার জন্য আপনাকে ভঙ্গি পরিবর্তন শুনতে বা ইভেন্টের আকার পরিবর্তন করতে হবে এবং segments সম্পত্তির জন্য অনুরোধ করতে হবে।
Foldable APIs চেষ্টা করুন
ফোল্ডেবল এপিআইগুলি Chrome 125 থেকে Chrome 128 এর মাধ্যমে একটি অরিজিন ট্রায়ালে পাওয়া যায়৷ মূল ট্রায়ালগুলির পটভূমির তথ্যের জন্য অরিজিন ট্রায়ালের সাথে শুরু করুন দেখুন৷
স্থানীয় পরীক্ষার জন্য, chrome://flags/#enable-experimental-web-platform-features এ এক্সপেরিমেন্টাল ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যের পতাকা দিয়ে ফোল্ডেবল APIগুলি সক্ষম করা যেতে পারে। কমান্ড লাইন থেকে Chrome-কে --enable-experimental-web-platform-features দিয়ে চালিয়েও এটি সক্ষম করা যেতে পারে।
ডেমো
ডেমোর জন্য, ডেমো রিপোজিটরি দেখুন। আপনার কাছে পরীক্ষা করার মতো কোনো শারীরিক ডিভাইস না থাকলে, আপনি Chrome DevTools-এ Galaxy Z Fold 5 বা Asus Zenbook Fold এমুলেটেড ডিভাইস বেছে নিতে পারেন এবং Continuous এবং Folded-এর মধ্যে ফ্লিপ করতে পারেন। প্রযোজ্য হলে আপনি কব্জাটি কল্পনা করতে পারেন।
সম্পর্কিত লিঙ্ক
- ডিভাইস ভঙ্গি API
- ভিউপোর্ট সেগমেন্ট API