CSS ইউজার ইন্টারফেস

CSS ইউজার ইন্টারফেস

চ্যাপ্টারে আপনি নিচের কার্যকারী CSS ইউজার ইন্টারফেস প্রক্রিয়াগুলি শিখবেন:

  • resize
  • outline-offset

ব্রাউজার সমর্থন

টেবিলের সংখ্যা এলাকাটির প্রথম ব্রাউজার সংস্করণটি যা এই প্রক্রিয়াটি পূর্ণাত্মকভাবে সমর্থন করে নির্দেশ করে。

এট্রিবিউট Chrome IE Firefox Safari Opera
resize 4.0 সমর্থন না করে 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS মাপ

resize প্রক্রিয়াটি নির্দেশ করে যে এলাকা ব্যবহারকারীর দ্বারা মাপা হবে (এবং কিভাবে)।

এই div এলাকা ব্যবহারকারীর দ্বারা মাপা হতে পারে!

মাপ করুন: এই div এলাকাটির ডান নিচের কোণটি ক্লিক করে এবং খিসে নিচে আনুন。

মনোনীতি:Internet Explorer resize প্রক্রিয়াটি সমর্থন করে না。

নিচের উদাহরণটিতে <div> এলাকাটির প্রশস্ততা মাপানোর জন্য ব্যবহারকারীকে অনুমতি দেওয়া হয়:

উদাহরণ

div {
  resize: horizontal;
  overflow: auto;
}

আপনার নিজেই চেষ্টা করুন

নিচের উদাহরণটিতে <div> এলাকাটির উচ্চতা মাপানোর জন্য ব্যবহারকারীকে অনুমতি দেওয়া হয়:

উদাহরণ

div {
  resize: vertical;
  overflow: auto;
}

আপনার নিজেই চেষ্টা করুন

নিচের উদাহরণটিতে <div> এলাকাটির উচ্চতা এবং প্রশস্ততা মাপানোর জন্য ব্যবহারকারীকে অনুমতি দেওয়া হয়:

উদাহরণ

div {
  resize: both;
  overflow: auto;
}

আপনার নিজেই চেষ্টা করুন

অনেক ব্রাউজারে <textarea> ডিফল্টভাবে মাপানো হয়। এখানে আমরা resize প্রক্রিয়াটি ব্যবহার করে এই মাপানোকে নিষ্ক্রিয় করেছি:

উদাহরণ

textarea {
  resize: none;
}

আপনার নিজেই চেষ্টা করুন

CSS হোল অফসেট

outline-offset প্রক্রিয়াটি outline এবং এলাকার border-এর মধ্যে জায়গা যোগ করে。

এই div-এর border-এর বাইরে 15px এর outline আছে。

মনোনীতি:outline এবং border ভিন্ন! border-এর থেকে ভিন্ন, outline লাইন এলাকার border-এর বাইরে আঁকা হয় এবং অন্যান্য কনটেন্ট-এর সাথে মিশ্রিত হতে পারে। একইসঙ্গে, outline-এও এলাকার মাপের অংশ নয়: এলাকার মোট প্রশস্ততা এবং উচ্চতা outline লাইন প্রশস্ততার প্রভাবে থাকে না。

নিচের উদাহরণটিতে outline-offset প্রক্রিয়াটি ব্যবহার করে কিনারা এবং outline মধ্যে জায়গা যোগ করা হয়:

উদাহরণ

div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
} 
div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}

আপনার নিজেই চেষ্টা করুন

CSS ইউজার ইন্টারফেস এট্রিবিউট

নিচের টাবলে সমস্ত ইউজার ইন্টারফেস এট্রিবিউটগুলি উপস্থাপিত হয়েছে:

এট্রিবিউট বর্ণনা
outline-offset আউটলাইন এবং উপাদানের বর্তনী হোল্ডিং সার্ফেসের মধ্যে জায়গা যোগ করুন
resize উপাদানটি কি ব্যবহারকারীর দ্বারা মাপার যেতে পারে বা না