CSS লেআউট calc() এর সাথে আরও স্মার্ট হয়ে ওঠে

একটি সুন্দর CSS লেআউট তৈরি করা শুরু হয় একটি ওয়েব অ্যাপ্লিকেশনে রাখা সমস্ত জিনিসের জন্য মাপ নির্ধারণের মাধ্যমে। একটি অত্যন্ত অনুরোধ করা বৈশিষ্ট্য সবসময় সাইজিং ইউনিটের মিশ্রণ ব্যবহার করে মাপ নির্দিষ্ট করার ক্ষমতা। উদাহরণস্বরূপ, 10px বলুন, একটি এলাকার 50% এবং একটি নির্দিষ্ট পরিমাণ স্থান সংরক্ষণ করতে সক্ষম হওয়া ভাল হবে৷ আচ্ছা আপনি calc() প্রপার্টি ব্যবহার করে এখনই তা করতে পারেন। আপনি এই বৈশিষ্ট্যটি যেখানে একটি দৈর্ঘ্য বা সংখ্যা ব্যবহার করা হয় সেখানে ব্যবহার করতে পারেন, যাতে আপনি এটিকে পজিশনিং জিনিসগুলির জন্য বা rgb() রঙের মানগুলিতেও ব্যবহার করতে পারেন, তাই এটির একটি স্টাইল শীটে প্রচুর ব্যবহার রয়েছে।

আপনি calc() দিয়ে কি করতে পারেন?

calc() প্রপার্টি আপনার স্টাইলশীটে একটি CSS দৈর্ঘ্য বা সংখ্যা যেখানেই ব্যবহার করা যেতে পারে।

লেআউটকে আরও নমনীয় করতে এটি আপনাকে দুটি প্রধান বৈশিষ্ট্য দেয়:

• শতাংশ এবং পরম মান মিশ্রিত করা।
• সাইজিং ইউনিট মিশ্রিত করা।

পরম এককের সাথে শতাংশের মিশ্রণ

আসুন পরম এককের সাথে শতাংশের মিশ্রণের একটি উদাহরণ দেখি। বলুন আমরা উপলব্ধ এলাকার 50% কম একটি নির্দিষ্ট পরিমাণ পিক্সেল বরাদ্দ করতে চাই, তারপর আমরা এটিকে এভাবে লিখতে পারি:

#foo {
    width: calc(50% - 100px);
}

<div id="foo">Always 100 pixels less than half the available area</div>

যদি এটির পটভূমির রঙ সবুজ থাকে তবে এটি দেখতে এরকম হবে:

এবং যদি আপনি পিতামাতার আকার সঙ্কুচিত করেন, তাহলে এটি দেখতে হবে:

এখানে চমৎকার জিনিস হল আমরা সবসময় জানি বিষয়বস্তুর ডান হাতের প্রান্ত থাকবে 100px ধারণ করা এলাকার মাঝখানের বাম দিকে। এইভাবে বিভিন্ন ধরনের মান একত্রিত করতে সক্ষম হওয়া আপনার ওয়েব অ্যাপ্লিকেশনকে আগের থেকে অনেক বেশি নিয়ন্ত্রণ সহ বিভিন্ন আকারের ডিভাইসে লেআউট পরিচালনা করতে দেয়।

মিক্সিং ইউনিট

আরেকটি দুর্দান্ত জিনিস হল একটি ফলাফল আকার পেতে বিভিন্ন পরিমাপের সাথে ইউনিটগুলিকে একত্রিত করার ক্ষমতা। উদাহরণস্বরূপ, আপনি 'em' এবং 'px' একক মিশ্রিত করে বর্তমান ফন্টের আকারের সাথে সম্পর্কিত আকার সেট করতে পারেন।

#bar {
    height: calc(10em + 3px);
}

আপনি এখানে এবং এখানে মানগুলিকে একত্রিত করার কিছু দুর্দান্ত উদাহরণ খুঁজে পেতে পারেন।

চেষ্টা করে দেখুন

calc() দিয়ে আপনি +, -, * এবং / মান যোগ, বিয়োগ, গুণ এবং ভাগ করতে ব্যবহার করতে পারেন, সব ধরণের সম্ভাবনার অনুমতি দেয়। আপনি calc() ব্যবহার করতে পারেন যেখানে একটি CSS দৈর্ঘ্য বা সংখ্যা ব্যবহার করা যেতে পারে। আমরা শীঘ্রই কোণ এবং ফ্রিকোয়েন্সি বৈশিষ্ট্যগুলির জন্য calc() যোগ করার জন্যও কাজ করছি। দৈর্ঘ্যের জন্য calc() প্রপার্টি এখন Chrome 19 (Dev channel build)-এ -webkit-calc প্রপার্টি ব্যবহার করে, Firefox-এ -moz-calc প্রপার্টি ব্যবহার করে 8 সংস্করণ থেকে এবং Internet Explorer-এ সংস্করণ 9 আনপ্রিফিক্সড থেকে পাওয়া যাচ্ছে। নীচে একটি মন্তব্য রেখে আপনি কি মনে করেন তা আমাদের জানান।