Sheikh Mahfuzur Rahman
সিএসএস-থ্রি ইউজার ইন্টারফেস
সিএসএস-থ্রি এর কিছু নতুন ইউজার ইন্টারফেস ফিচার হলো এলিমেন্ট রিসাইজিং, বক্স রিসাইজিং এবং আউটলাইনিং। এই অধ্যায়ে নিচের ইউজার ইন্টারফেস প্রপার্টিগুলো সম্পর্কে জানতে পারবেনঃ
- resize
- box-sizing
- outline-offset
ব্রাউজার সাপোর্ট
নিচের তালিকায় প্রথম যে ব্রাউজার ভার্শনগুলো ইউজার ইন্টারফেস প্রপার্টিকে পুরোপুরিভাবে সাপোর্ট করে তা দেয়া হলো। -webkit-, -moz-, অথবা -o- এর সাথে যুক্ত ভার্শন নম্বরগুলো প্রিফিক্সসহ যেসব ভার্শন কাজ করে তার তালিকা প্রকাশ করে।
| Property |  |
 |
 |
 |
 |
 |
| resize |
4.0 |
Not supported |
Not supported |
5.0 |
4.0 |
15.0 |
| outline-offset |
4.0 |
Not supported |
Not supported |
5.0 |
4.0 |
9.5 |
সিএসএস-থ্রি রিসাইজিং
সিএসএস-থ্রি'তে resize প্রপার্টি ইউজারদের দ্বারা কোন এলিমেন্ট রিসাইজ করা যাবে কি যাবেনা তার নির্ধারণ করে। লক্ষ্যনীয়ঃ নিচের div এলিমেন্ট ইউজারদের দ্বারা রিসাইজ করা যায় (Chrome, Firefox, Safari and Opera 15+)।
রিসাইজের জন্য সিএসএস কোডঃ উদাহরণ
এর ফলে একটি <div> এলিমেন্ট ইউজারদের দ্বারা রিসাইজ করা যাবেঃ
div {
resize: horizontal;
overflow: auto;
}
সিএসএস-থ্রি বক্স সাইজিং
box-sizing প্রপার্টি ব্রাউজারকে কোন সাইজিং প্রপার্টি (width এবং height) ব্যবহার করা যাবে তা বলে দেয়। সেগুলো border-box নাকি শুধু content-box কে (এটিই সাধারণত উইড্থ ও হাইট প্রপার্টির ডিফল্ট ভ্যালু হিসেবে থাকে) এর ভিতরে অন্তর্ভূক্ত করবে তা ঠিক করে দেয়। উদাহরণস্বরূপ, আপনি যদি দু'টি বর্ডার বক্সকে পাশাপাশি রাখতে চান তাহলে "border-box" এ বক্স-সাইজিং সেটিং করে ঠিক করতে পারবেন। এটি ব্রাউজারকে নির্দিষ্ট প্রস্থ ও উচ্চতা দ্বারা বক্সটির আকার ঠিক করতে বলে এবং বর্ডার ও পেডিংকে বক্সের ভিতরে স্থাপন করে।
উদাহরণ
দুটি বর্ডার বক্সকে পাশাপাশি স্থাপন করেঃ
div {
-moz-box-sizing: border-box; /* Firefox */
box-sizing: border-box;
width: 50%;
float: left;
}
সিএসএস-থ্রি আউটলাইন অফসেট
outline-offset প্রপার্টি একটি আউটলাইনের বাইরে অবস্থান করে এবং এটিকে বর্ডারের এজের বাইরে টেনে নিয়ে যায়।
আউটলাইন এর সাথে বর্ডার এর দুই ধরণের পার্থক্য রয়েছেঃ
- আউটলাইন জায়গা দখল করেনা।
- আউটলাইন চারকোনাকৃতির নাও হতে পারে।
নিচের div টির বর্ডার এজের বাইরে ১৫ পিক্সেল আউটলাইন রয়েছে
এর জন্য যে সিএসএস কোড প্রয়োজন তা নিম্নরূপ।
উদাহরণ
বর্ডার এজের বাইরে ১৫ পিক্সেল আউটলাইন নির্ধারণ করেঃ
div {
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
সিএসএস-থ্রি ইউজার ইন্টারফেস প্রপার্টি
নিচে সবগুলো ইউজার ইন্টারফেস প্রপার্টির তালিকা দেয়া হলোঃ
| appearance - | একটি এলিমেন্টকে স্ট্যান্ডার্ড ইউজার ইন্টারফেস এলিমেন্ট হিসেবে দেখাতে ব্যবহৃত হয় |
| box-sizing - | একটি নির্দিষ্ট এলিমেন্টকে কোন এরিয়ায় একটি নির্দিষ্ট পদ্ধতিতে অবস্থান করতে বলে দেয় |
| icon - | পেজের অথর বা লেখককে আইকনিকভাবে একটি এলিমেন্ট স্টাইল করার সুযোগ করে দেয় |
| nav-down - | যখন arrow-down নেভিগেশন কি ব্যবহার করা হয় তখন কোন দিকে নেভিগেট করা হবে তা নির্ধারন করে দেয় |
| nav-index - | একটি এলিমেন্টের টেবিং অর্ডার ঠিক করে দেয় |
| nav-left - | যখন arrow-left নেভিগেশন কি ব্যবহার করা হবে তখন কোন দিকে নেভিগেট করা হবে তা ঠিক করে দেয় |
| nav-right - | যখন arrow-right নেভিগেশন কি ব্যবহার করা হবে তখন কোন দিকে নেভিগেট করা হবে তা ঠিক করে দেয় |
| nav-up - | যখন arrow-up নেভিগেশন কি ব্যবহার করা হবে তখন কোন দিকে নেভিগেট করা হবে তা ঠিক করে দেয় |
| outline-offset - | একটি আউটলাইনের অফসেট ঠিক করে এবং এটিকে বর্ডার এজের বাইরে টেনে নিয়ে যায় |
| resize - | কোন এলিমেন্ট ইউজারদের দ্বারা রিসাইজ করা যাবে কি যাবেনা তা নির্ধারণ করে |
