সিএসএস লিফট: মেঝে নেভিগেশন সহ একটি খাঁটি সিএসএস স্টেট মেশিন

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

এই নিবন্ধে, আমি কীভাবে আধুনিক সিএসএস বৈশিষ্ট্যগুলি ব্যবহার করেছি – এর মাধ্যমে আমি আপনাকে হাঁটব কাস্টম বৈশিষ্ট্য, কাউন্টারদ্য :has() সিউডো-ক্লাস, এবং @property – একটি সম্পূর্ণ কার্যকরী, ইন্টারেক্টিভ লিফট তৈরি করতে যা জানে যে এটি কোথায় রয়েছে, এটি কোথায় রয়েছে এবং সেখানে যেতে কত সময় লাগবে। কোনও জাভাস্ক্রিপ্টের প্রয়োজন নেই।

সিএসএস ভেরিয়েবলগুলির সাথে রাষ্ট্রকে সংজ্ঞায়িত করা

এই লিফট সিস্টেমের মেরুদণ্ডটি হ’ল সিএসএস কাস্টম বৈশিষ্ট্যগুলির ব্যবহার তার অবস্থাটি ট্র্যাক করতে। নীচে, আমি বেশ কয়েকটি সংজ্ঞায়িত @property ট্রানজিশন এবং টাইপ করা মানগুলির অনুমতি দেওয়ার নিয়ম:

@property --current-floor {
  syntax: "<integer>";
  initial-value: 1;
  inherits: true;
}

@property --previous {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

@property --relative-speed {
  syntax: "<number>";
  initial-value: 4;
  inherits: true;
}

@property --direction {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}

এই ভেরিয়েবলগুলি আমাকে লিফটের বর্তমান তলটির আগেরটির সাথে তুলনা করতে, চলাচলের গতি গণনা করতে এবং সেই অনুযায়ী অ্যানিমেশন এবং ট্রানজিশনগুলি ড্রাইভ করতে দেয়।

একটি নিয়মিত সিএসএস কাস্টম সম্পত্তি (--current-floor) চারপাশে মানগুলি পাস করার জন্য দুর্দান্ত, তবে ব্রাউজারটি স্ট্রিংয়ের মতো সমস্ত কিছু আচরণ করে: এটি জানে না যে 5 টি একটি সংখ্যা, রঙ বা আপনার বিড়ালের নাম কিনা। এবং যদি এটি না জানে তবে এটি এটিকে প্রাণবন্ত করতে পারে না।

এটাই @property ভেরিয়েবলটি “নিবন্ধকরণ” করে আসে, আমি ব্রাউজারটিকে ঠিক কী তা বলতে পারি (<number>, <length>ইত্যাদি), এটিকে একটি প্রারম্ভিক মান দিন এবং এটি ফ্রেমের মধ্যে মসৃণভাবে পরিচালনা করতে দিন। এটি ছাড়া, আমার লিফটটি কেবল মেঝে থেকে মেঝেতে স্ন্যাপ করবে, এবং এটি আমি যে রাইডের অভিজ্ঞতা যাচ্ছিলাম তা নয়।

একটি সাধারণ ইউআই: মেঝে জন্য রেডিও বোতাম

রেডিও বোতামগুলি রাজ্য ট্রিগার সরবরাহ করে। প্রতিটি তল একটি রেডিও ইনপুটের সাথে সম্পর্কিত এবং আমি ব্যবহার করি :has() কোনটি নির্বাচিত হয়েছে তা সনাক্ত করতে:

<input type="radio" id="floor1" name="floor" value="1" checked>
<input type="radio" id="floor2" name="floor" value="2">
<input type="radio" id="floor3" name="floor" value="3">
<input type="radio" id="floor4" name="floor" value="4">

.elevator-system:has(#floor1:checked) {
  --current-floor: 1;
  --previous: var(--current-floor);
}

.elevator-system:has(#floor2:checked) {
  --current-floor: 2;
  --previous: var(--current-floor);
}

এই সংমিশ্রণটি লিফট সিস্টেমটিকে একটি রাষ্ট্রীয় মেশিনে পরিণত করতে দেয়, যেখানে একটি রেডিও বোতাম নির্বাচন করে ট্রানজিশন এবং গণনাগুলি ট্রিগার করে।

গতিশীল ভেরিয়েবলের মাধ্যমে গতি

লিফট আন্দোলন অনুকরণ করতে, আমি ব্যবহার করি transform: translateY(...) এবং এটি দিয়ে গণনা করুন --current-floor মান:

.elevator {
  transform: translateY(calc((1 - var(--current-floor)) * var(--floor-height)));
  transition: transform calc(var(--relative-speed) * 1s);
}

ভ্রমণের সময়কাল লিফটটি কত তলা অবশ্যই অতিক্রম করতে হবে তার সমানুপাতিক:

--abs: calc(abs(var(--current-floor) - var(--previous)));
--relative-speed: calc(1 + var(--abs));

আসুন এটি ভেঙে দিন:

• --abs সরানোর জন্য নিখুঁত সংখ্যা দেয়।
• --relative-speed আরও মেঝে পেরিয়ে যাওয়ার সময় অ্যানিমেশনকে ধীর করে তোলে।

সুতরাং, যদি লিফটটি মেঝে 1 থেকে 4 থেকে লাফ দেয় তবে অ্যানিমেশনটি মেঝে 2 থেকে 3 থেকে যাওয়ার চেয়ে দীর্ঘস্থায়ী হয় These এই সমস্তগুলি সিএসএসে কেবল গণিতের অভিব্যক্তি ব্যবহার করে উত্পন্ন calc() ফাংশন।

দিকনির্দেশ এবং তীর আচরণ নির্ধারণ

লিফটের তীরটি মেঝেতে পরিবর্তনের উপর ভিত্তি করে উপরে বা নীচে নির্দেশ করে:

--direction: clamp(-1, calc(var(--current-floor) - var(--previous)), 1);

.arrow {
  scale: calc(var(--direction) * 2);
  opacity: abs(var(--direction));
  transition: all 0.15s ease-in-out;
}

যা ঘটছে তা এখানে:

• দ্য clamp() ফাংশন ফলাফলের মধ্যে সীমা সীমাবদ্ধ করে -1 এবং 1।
• 1 মানে ward র্ধ্বমুখী চলাচল, -1 নীচের দিকে, এবং 0 মানে স্থির।
• এই ফলাফলটি তীরটি স্কেল করতে, এটি উল্টানো এবং সেই অনুযায়ী এর অস্বচ্ছতা সামঞ্জস্য করতে ব্যবহৃত হয়।

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

সাথে মেমরি সিমুলেটিং --delay

সিএসএস পূর্ববর্তী রাজ্য স্থানীয়ভাবে সঞ্চয় করে না। আমি আপডেটগুলি বিলম্ব করে এটি অনুকরণ করি --previous সম্পত্তি:

.elevator-system {
  transition: --previous calc(var(--delay) * 1s);
  --delay: 1;
}

বিলম্ব চলাকালীন, --previous এর পিছনে মান পিছিয়ে যায় --current-floor। এটি আমাকে অ্যানিমেশন চলাকালীন দিক এবং গতি গণনা করতে দেয়। বিলম্ব শেষ হয়ে গেলে, --previous ক্যাচ আপ। এই বিলম্ব-ভিত্তিক মেমরি কৌশলটি সিএসএসকে সাধারণত জাভাস্ক্রিপ্টের সাথে সম্পন্ন রাষ্ট্রীয় ট্রানজিশনগুলিতে অনুমতি দেয়।

মেঝে কাউন্টার এবং ইউনিকোড স্টাইলিং

মেঝে সংখ্যা প্রদর্শন করা মার্জিতভাবে একটি আনন্দে পরিণত হয়েছে ধন্যবাদ সিএসএস কাউন্টার::

#floor-display:before {
  counter-reset: display var(--current-floor);
  content: counter(display, top-display);
}

আমি ইউনিকোড বৃত্তাকার সংখ্যাগুলি ব্যবহার করে একটি কাস্টম কাউন্টার স্টাইল সংজ্ঞায়িত করেছি:

@counter-style top-display {
  system: cyclic;
  symbols: "\278A" "\2781" "\2782" "\2783";
  suffix: "";
}

দ্য \278A থেকে \2783 অক্ষরগুলি ➊, ➋, ➌, ➃ প্রতীকগুলির সাথে মিলে যায় এবং প্রদর্শনকে একটি অনন্য, ভিজ্যুয়াল কবজ দেয়। লিফটটি কেবল “3” বলে না তবে এটি টাইপোগ্রাফিক ফ্লেয়ারের সাথে প্রদর্শন করে। আপনি যখন কাঁচা অঙ্কের বাইরে যেতে চান এবং সিএসএস ব্যতীত কিছুই ব্যবহার না করে প্রতীকী বা ভিজ্যুয়াল অর্থ প্রয়োগ করতে চান তখন এই পদ্ধতির কার্যকর।

সাথে অ্যাক্সেসযোগ্যতা aria-live

অ্যাক্সেসযোগ্যতা বিষয়। যদিও সিএসএস ডিওএম পাঠ্য পরিবর্তন করতে পারে না, এটি এখনও স্ক্রিন রিডার-দৃশ্যমান সামগ্রী ব্যবহার করে আপডেট করতে পারে ::before এবং counter()।

<div class="sr-only" aria-live="polite" id="floor-announcer"></div>

#floor-announcer::before {
  counter-reset: floor var(--current-floor);
  content: "Now on floor " counter(floor);
}

যোগ করুন a .sr-only ক্লাস থেকে দৃশ্যত এটি লুকান তবে সহায়ক প্রযুক্তিতে এটি প্রকাশ করুন::

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

এটি অভিজ্ঞতা অন্তর্ভুক্ত করে এবং অ্যাক্সেসযোগ্যতার মানগুলির সাথে একত্রিত রাখে।

এই কৌশলগুলির ব্যবহারিক প্রয়োগ

এই লিফটটি খেলনার চেয়ে বেশি। এটি একটি নীলনকশা। এই বাস্তব-বিশ্বের ব্যবহারগুলি বিবেচনা করুন:

• জাভাস্ক্রিপ্ট ছাড়াই ইন্টারেক্টিভ প্রোটোটাইপগুলি
• লাইভ স্টেট ব্যবহার করে ফর্মগুলিতে অগ্রগতি সূচক
• ইনভেন্টরি বা স্ট্যাটাস মেকানিক্স সহ গেম ইউআইএস
• লজিক ধাঁধা বা শিক্ষামূলক সরঞ্জামগুলি (সিএসএস-কেবলমাত্র রাজ্য ট্র্যাকিং!)
• পারফরম্যান্স বা স্যান্ডবক্সযুক্ত পরিবেশের জন্য জাভাস্ক্রিপ্ট নির্ভরতা হ্রাস

এই কৌশলগুলি স্ট্যাটিক অ্যাপ্লিকেশন বা সীমাবদ্ধ স্ক্রিপ্টিং পরিবেশে (যেমন, ইমেলগুলি, নির্দিষ্ট সামগ্রী পরিচালনা সিস্টেমের উইজেট) বিশেষত কার্যকর।

চূড়ান্ত চিন্তা

একটি ছোট পরীক্ষা হিসাবে যা শুরু হয়েছিল তা কার্যকরী সিএসএস স্টেট মেশিনে রূপান্তরিত করে যা জাভাস্ক্রিপ্ট ছাড়াই সম্পূর্ণরূপে পরিবর্তন করে এবং পরিবর্তনের ঘোষণা দেয়। আধুনিক সিএসএস আমরা প্রায়শই এর ক্রেডিট দেওয়ার চেয়ে আরও বেশি কিছু করতে পারে। সঙ্গে :has(), @propertyকাউন্টারগুলি এবং কিছুটা চতুর গণিত, আপনি এমন সিস্টেমগুলি তৈরি করতে পারেন যা প্রতিক্রিয়াশীল, সুন্দর এবং এমনকি অ্যাক্সেসযোগ্য।

আপনি যদি এই কৌশলটি চেষ্টা করে দেখেন তবে আমি আপনার গ্রহণটি দেখতে পছন্দ করব। এবং যদি আপনি লিফটটি রিমিক্স করেন (সম্ভবত আরও মেঝে বা চ্যালেঞ্জ যুক্ত করুন?), এটি আমার পথে প্রেরণ করুন!