সিএসএস(৩) ইউজার ইন্টারফেস
সিএসএস(৩) ইউজার ইন্টারফেস ব্যবহৃত যেকোনো এলিমেন্টকে একজন ইউজার তার নিজের ইচ্ছামত পরিবর্তন করতে পারবে। সিএসএস(৩) তে অনেক ধরণের ইউজার ইন্টারফেস প্রোপার্টি রয়েছে। যেমন- resize, appearance, box-sizing, icon, outline-offset, nav-up, nav-down, nav-left, nav-right ইত্যাদি।
এই অধ্যায়ে আমরা ইউজার ইন্টারফেসের resize এবং outline-offset প্রোপার্টিগুলো নিয়ে আলোচনা করবোঃ
এক নজরে ইউজার ইন্টারফেস প্রোপার্টি
এটি দ্বারা ব্যবহারকারী একটি এলিমেন্টের আকার পরিবর্তন করতে পারে।
এলিমেন্টের মোট প্রস্থ এবং উচ্চতার সাথে প্যাডিং এবং বর্ডার যুক্ত করার সম্মতি দেয়।
ব্যবহারকারী কী-বোর্ডে arrow-down কী চাপলে কোথায় যাবে তা নির্ধারণ করে।
একটি এলিমেন্টের ট্যাব এর ক্রম(order) নির্ধারণ করে।
ব্যবহারকারী কী-বোর্ডে arrow-left কী চাপলে কোথায় যাবে তা নির্ধারণ করে।
ব্যবহারকারী কী-বোর্ডে arrow-right কী চাপলে কোথায় যাবে তা নির্ধারণ করে।
ব্যবহারকারী কী-বোর্ডে arrow-up কী চাপলে কোথায় যাবে তা নির্ধারণ করে।
এলিমেন্টের বর্ডার এবং আউটলাইনের মাঝে দূরত্ব তৈরি করে।
সিএসএস(৩) resize প্রোপার্টি
আপনার পেজের কোনো এলিমেন্টের আকার ব্যবহারকারী পরিবর্তন করতে পারবে কিনা তা নির্ধারণ করতে resize প্রোপার্টি ব্যবহার করুন।
নিম্নের উদাহরণে একজন ব্যবহারকারী <div> এলিমেন্টটির শুধুমাত্র প্রস্থ পরিবর্তন করতে পারবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>resize property</title>
<style>
div {
border: 2px dotted teal;
background-color: lightgreen;
padding: 10px;
width: 250px;
resize: horizontal;
overflow: auto;
}
</style>
</head>
<body>
<p><b>নোট:</b> ইন্টারনেট এক্সপ্লোরার এ resize প্রোপার্টি সাপোর্ট করে না।</p>
<div>ব্যবহারকারী div এলিমেন্টের প্রশস্ততাকে রিসাইজ করতে পারে।</div>
</body>
</html>
ফলাফল
নিম্নের উদাহরণে একজন ব্যবহারকারী <div> এলিমেন্টটির শুধুমাত্র উচ্চতা পরিবর্তন করতে পারবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>resize property</title>
<style>
div {
border: 2px dotted teal;
background-color: lightgreen;
padding: 10px;
width: 250px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body>
<div>ব্যবহারকারী div এলিমেন্টের উচ্চতাকে রিসাইজ করতে পারে।</div>
</body>
</html>
ফলাফল
নিম্নের উদাহরণে একজন ব্যবহারকারী <div> এলিমেন্টটির উচ্চতা এবং প্রস্থ উভয়ই পরিবর্তন করতে পারবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>resize property</title>
<style>
div {
border: 2px dotted teal;
padding: 10px;
background-color: lightgreen;
width: 250px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<div>ব্যবহারকারী div এলিমেন্টের প্রশস্ততা ও উচ্চতা উভয়ই রিসাইজ করতে পারে।</div>
</body>
</html>
ফলাফল
সিএসএস(৩) আউটলাইন অফসেট
একটি এলিমেন্টের বর্ডার এবং আউটলাইনের মধ্যে দূরত্ব নির্ধারণ করতে outline-offset প্রোপার্টি ব্যবহার করা হয়।
আউটলাইন বর্ডার থেকে তিনটি কারণে ভিন্ন হয়ঃ
- আউটলাইন হচ্ছে এলিমেন্টের চারপাশে একটি লাইন যা বর্ডারের বাইরে অবস্থান করে।
- আউটলাইন জায়গা দখল করে না।
- আউটলাইন সর্বদা চতুর্ভুজ আকৃতির হয় না।
নিম্নের উদাহরণে বর্ডার এবং আউটলাইনের মাঝে ২০ পিক্সেল দূরত্ব তৈরি করার জন্য outline-offset প্রোপার্টি ব্যবহার করা হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>outine property</title>
<style>
div {
margin: 20px;
background-color: lightgreen;
padding: 10px;
width: 250px;
height: auto;
border: 1px dotted orangered;
outline: 1px dotted teal;
outline-offset: 20px;
}
</style>
</head>
<body><br>
<div>এই div এর বাইরের অংশে ২০ পিক্সেল বর্ডার দেওয়া হয়েছে।</div>
</body>
</html>
ফলাফল
ব্রাউজার সাপোর্ট
| প্রোপার্টি | Google Chrome | Edge/IE | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| resize | ৪.০ | সাপোর্ট করে না | ৫.০ ৪.০ -moz- |
৪.০ | ১৫.০ |
| outline-offset | ৪.০ | সাপোর্ট করে না | ৫.০ ৪.০ -moz- |
৪.০ | ৯.৫ |