স্ক্রলবার এবং ব্যবহারকারীর অভিজ্ঞতা
ব্যবহারকারীরা এখন ওয়েবসাইট নেভিগেশন করার সময় একটি নির্দিষ্ট অভিজ্ঞতার সাথে অভ্যস্ত। উদাহরণস্বরূপ, আপনি আশা করবেন যে কোনও সাইটের উপরের বাম কোণে একটি ব্যবসার লোগো আপনাকে হোমপেজে নিয়ে যাবে। কিন্তু তা না হলে কি হবে? কি হবে যদি সেই সাইটের সবকিছু বিপরীত করে আপনি কি ভেবেছিলেন এটা করবে?
শুধু কল্পনা করুন যদি একটি স্ক্রলবার বিদ্যমান ছিল, কিন্তু আপনি আপনার মাউসে আপনার স্ক্রোল বোতামটি সরান বা আপনি আপনার ডিভাইসের ট্র্যাকপ্যাডে আপনার আঙ্গুলগুলি টেনে আনলে, কিছুই ঘটেনি . এটি একটি ভয়ঙ্কর ব্যবহারকারীর অভিজ্ঞতা বলে বিবেচিত হবে৷ .
যা একটি ভাল ব্যবহারকারীর অভিজ্ঞতা তৈরি করে বা ভেঙে দেয় তা নিজেই একটি পোস্ট হতে পারে, তবে এর একটি অংশ অবশ্যই সঠিকভাবে কাজ করে স্ক্রলবার এবং নান্দনিকতার জন্য তাদের লুকিয়ে রাখার ক্ষমতা।
স্ক্রলবারগুলি একটি ওয়েবপেজে আমরা কী দেখার আশা করতে পারি তার খুব ভাল সূচক। যদি আমরা একটি স্ক্রলবার দেখতে পাই, তাহলে আমরা বিষয়বস্তু দেখতে নিচে স্ক্রোল করার প্রয়োজন আশা করি। যখন আমরা একটি স্ক্রলবার দেখতে পাই না, সাধারণত এটি দুটি কারণে হয়:
- আপনি যা দেখতে পান তা হল - আপনার ভিউপোর্টের উচ্চতা এবং প্রস্থ (আপনার স্ক্রীন) সাইটের উচ্চতা এবং প্রস্থের সাথে মেলে।
- সাইটের ডিজাইনে কিছু ধরণের অ্যানিমেটেড তীর বা বৈশিষ্ট্য রয়েছে যা নির্দেশ করে যে স্ক্রোলিং এর মাধ্যমে আরও সামগ্রী উপলব্ধ রয়েছে৷ আমরা যখন স্ক্রোল করতে শুরু করি তখনই স্ক্রল বারটি উপস্থিত হবে। ততক্ষণ পর্যন্ত লুকিয়ে থাকাটাই ডিফল্ট।
বিকাশকারী হিসাবে, শালীন স্ক্রলবার ব্যবহার প্রয়োগ করা একটি সাইটের ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করবে, যার ফলে ক্লায়েন্টদের সাইটে থাকবে।
সাইড নোট: আপনি যখন ইচ্ছাকৃতভাবে করেন তখন অনুভূমিক স্ক্রোল বার ব্যবহার করতে ভুলবেন না তাদের ব্যবহার করতে চান। যদি সেগুলি আপনার সাইটে অনিচ্ছাকৃতভাবে প্রদর্শিত হয়, তবে এটি সাধারণত কারণ আপনার উপাদানগুলির আকারের সাথে কিছু বন্ধ থাকে৷ উদ্দেশ্য অনুযায়ী অনুভূমিক স্ক্রলবারগুলি লুকাবেন না যখন সেগুলি সেখানে থাকা উচিত নয়৷
সিএসএস বাস্তবায়ন
এই বাস্তবায়ন সম্পর্কে লক্ষ্য করার প্রথম জিনিসটি হল যে সমস্ত প্রধান ব্রাউজার সমানভাবে তৈরি করা হয় না। ফায়ারফক্সের জন্য যা কাজ করে তা ক্রোম বা ইন্টারনেট এক্সপ্লোরারের জন্য কাজ করবে না এবং এর বিপরীতে। CSS নিয়োগ করে যাকে আমরা বলি বিক্রেতা উপসর্গ অথবা ব্রাউজার উপসর্গ আমাদের ক্রস-ব্রাউজার সমর্থন প্রদান করতে সাহায্য করতে। আমরা তাদের নীচে তালিকাভুক্ত করি:
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।
বিক্রেতা উপসর্গ চিট শীট
| বিক্রেতা উপসর্গ | এটি কভার করে এমন ব্রাউজারগুলি |
| -webkit- | Chrome, Safari, Opera এর নতুন সংস্করণ এবং iOS এর জন্য Firefox সহ বেশিরভাগ iOS ব্রাউজারগুলি |
| -moz- | Firefox (iOS নয়) |
| -o- | অপেরার পুরানো সংস্করণ |
| -ms- | ইন্টারনেট এক্সপ্লোরার এবং এমএস এজ |
URL: ক্রেডিট:MDN – CSS উপসর্গ
Alt Text:Mozilla Developer Network কোন উপসর্গ ব্যবহার করতে হবে তা মনে রাখার জন্য একটি সহজ চিট শীট তৈরি করেছে
ক্যাপশন: কোন ব্রাউজারের জন্য কোন উপসর্গ ব্যবহার করতে হবে তা মনে রাখার জন্য MDN একটি সহজ চিট শীট তৈরি করেছে
প্রশ্ন তখন হয়ে যায়, আমরা কীভাবে জানব কখন আমাদের উপসর্গের প্রয়োজন এবং কখন আমরা নেই? যারা CSS তৈরি করেন তারা সর্বদা নতুন বৈশিষ্ট্য এবং জিনিসগুলি করার নতুন উপায় নিয়ে পরীক্ষা-নিরীক্ষা করে থাকেন - যদি এমন কোনও সম্পত্তি থাকে যা মোটামুটি নতুন, তবে এটি এখনও সমস্ত ব্রাউজারে সামঞ্জস্যপূর্ণ নয়।
সৌভাগ্যক্রমে, এমন সরঞ্জাম উপলব্ধ রয়েছে যা আপনার সিএসএসের দিকে নজর দেবে এবং আপনার প্রয়োজনীয় উপসর্গগুলি যোগ করবে। আপনি নিজেও এটি করতে পারেন এবং ব্রাউজার সামঞ্জস্যতা নির্ধারণে আপনাকে সাহায্য করতে caniuse বা MDN ডক্সের মতো একটি সাইট ব্যবহার করতে পারেন৷
আসুন কোড করি!
<!DOCTYPE html>
<html>
<head>
<title>CSS: Hide the Scrollbar</title>
<style>
* {
box-sizing: border-box;
scrollbar-width: none; /* Firefox implementation */
}
body {
max-height: 500px;
}
h1 {
text-align: center;
}
.container, .sample-text {
max-height: 500px;
height: 500px;
}
.container {
width: 450px;
border: 2px solid #666666;
background: lightgrey;
overflow: scroll;
min-height: 520px;
margin: 0 auto;
}
.inner-container {
position: absolute;
left: 10;
overflow-x: hidden;
overflow-y: scroll;
}
.inner-container::-webkit-scrollbar {
display: none; /* webkit browsers implementation */
}
.sample-text {
width: 425px;
height: 475px;
margin: 0px 0px 10px 10px;
}
</style>
</head>
<!-- /* Sample Text From https://doctoripsum.com */ -->
<body>
<h1>CSS Hide Scrollbar</h1>
<div class="container">
<div class="inner-container">
<div class="sample-text">
<p>It is! It's the city of New New York! Strictly speaking,
it's the fifteenth New York since the original, so that
makes it
New-New-New-New-New-New-New-New-New-New-New-New-New-New-New
New York. River, you know my name. You whispered my name in
my ear! There's only one reason I would ever tell anyone my
name. There's only one time I could... New-new-Doctor. Don't
you think she looks tired? I'll tell you what, then:
don't...step on any butterflies. What have butterflies ever
done to you? Oh, yes. Harmless is just the word: that's why
I like it! Doesn't kill, doesn't wound, doesn't maim. But
I'll tell you what it does do: it is very good at opening
doors!</p>
<p>Aw, I wanted to be ginger! I've never been ginger!
And you, Rose Tyler! Fat lot of good you were! You gave up
on me! Ooh, that's rude. Is that the sort of man I am now?
Am I rude? Rude and not ginger. Sweet, maybe... Passionate,
I suppose... But don't ever mistake that for nice. Please,
when Torchwood comes to write my complete history, don't
tell people I travelled through time and space with her
mother! New-new-Doctor. Don't you think she looks tired? I'm
the Doctor, I can save the world with a kettle and some
string! And look! I'm wearing a vegetable! New-new-Doctor.
I'm sorry. I'm so sorry. It is! It's the city of New New
York! Strictly speaking, it's the fifteenth New York since
the original, so that makes it
New-New-New-New-New-New-New-New-New-New-New-New-New-New-New
New York.</p>
</div>
</div>
</div>
</body>
</html>
যখন আমরা এই কোডটি Chrome এ চালাই, তখন এটি একটি ধূসর div ব্যাকগ্রাউন্ড এবং কিছু পাঠ্য তৈরি করবে যা আপনি স্ক্রোল করতে পারেন। দুটি সর্বাধিক সাধারণ বাস্তবায়ন অন্তর্ভুক্ত করা হয়েছে - ফায়ারফক্স <style> কোডের শীর্ষে রয়েছে ট্যাগ অন্য সব কিছুই -ওয়েবকিট প্রিফিক্সড সম্পত্তিতে রয়েছে।
আপনার বাস্তবায়নে আপনি যা লক্ষ্য করবেন তা হল কোন স্ক্রল বার নেই, তবে এটিতে এখনও একটি স্ক্রল বারের কার্যকারিতা রয়েছে। এটি সিএসএস-এ আপনার স্ক্রলবার লুকানোর একাধিক উপায়। আর কি আপনার জন্য কাজ করেছে? আপনি একটি ভিন্ন উপায় খুঁজে পেতে পারেন কিনা তা দেখতে আমি আপনাকে আপনার কোডের সাথে খেলতে চ্যালেঞ্জ জানাই।
