দৈর্ঘ্য বা length বা রৈখিক কোন সিএসএস প্রপার্টির দৈর্ঘ্য বা length নির্ধারণ করার জন্য সিএসএস এর বিভিন্ন একক বা Unit ব্যবহার করা যায়। বেশ কিছু সিএসএস প্রোপার্টি "length" নির্দিষ্ট করতে রৈখিক মান গ্রহন করে, যেমন - width, margin, padding, font-size, border-width ইত্যাদি।
দৈর্ঘ্য একটি সংখ্যা যা বিভিন্ন দৈর্ঘ্যের একক অনুসরন করে, যেমন 10px, 2em ইত্যাদি। ইউনিট ও সংখ্যার মধ্যে কোনো হোয়াইট স্পেস থাকবে না। যদি মান শূন্য হয় তাহলে ইউনিট এটিকে উপেক্ষা করতে পারে। কিছু সিএসএস প্রোপার্টির জন্য, ঋনাত্মক বা Negetive মানও গ্রহনযোগ্য হয়ে থাকে।
সিএসএস এ 2 ধরণের দৈর্ঘ্যের একক বা Unit রয়েছে -
Absolute একক অর্থাৎ দৈর্ঘ্যের ইউনিট গুলো হল নির্ধারিত এবং কোন দৈর্ঘ্য তার ঠিক প্রকৃত আকারেই হবে। Absolute দৈর্ঘ্য স্ক্রিনের জন্য ব্যবহার করতে সুপারিশ করা হয়না, কারন স্ক্রীনের আকার পরিবর্তনশীল। আউটপুট স্ক্রীন এর আকার জানা থাকলে এটি ব্যবহার করা যেতে পারে। যেমন প্রিন্ট layout এর জন্য ব্যবহার করা যায়।
ইউনিট | বর্ণনা |
---|---|
cm | সেন্টিমিটার |
mm | মিলিমিটার |
in | ইঞ্চি (1inch = 96px = 2.54cm) |
px * | পিক্সেল (1px = 1/96th of 1inch) |
pt | পয়েন্টস বা points (1pt = 1/72 of 1inch) |
pc | পিকাস বা picas (1pc = 12 pt) |
ডিভাইসের স্ক্রীন এর সাথে পিক্সেল সম্পর্কযুক্ত। low-dpi ডিভাইসের জন্য, 1px হলো ডিসপ্লের 1 ডিভাইস পিক্সেল (Dot)। প্রিন্টার ও উচ্চ রেজুলেশন স্ক্রিনের জন্য 1px বলতে মাল্টিপল ডিভাইস পিক্সেল বোঝায়।
Relative দৈর্ঘ্য বলতে এক দৈর্ঘ্যের সাথে অন্য দৈর্ঘ্য প্রোপার্টির মিল বোঝায়। Relative দৈর্ঘ্যের একক গুলো পরিমাপের বিভিন্ন রেন্ডারিং মাধ্যমের ক্ষেত্রে ভালো।
ইউনিট | বর্ণনা |
---|---|
em | এলিমেন্টের font-size এর সাথে সম্পর্কযুক্ত (2em অর্থ 2 বার বর্তমান ফন্টের আকার)। |
ex | বর্তমান ফন্ট x-height এর সাথে সম্পর্কযুক্ত (খুব কম ব্যবহৃত হয় এটি)। |
ch | "0" (শূন্য) প্রস্থের সাথে সম্পর্কযুক্ত। |
rem | মুল বা Root এলিমেন্টের font-size এর সাথে সম্পর্কযুক্ত। |
vw | ভিউপোর্ট*(viewport*) এর 1% প্রস্থের সাথে সম্পর্কযুক্ত। |
vh | ভিউপোর্ট*(viewport*) এর 1% উচ্চতার সাথে সম্পর্কযুক্ত। |
vmin | ভিউপোর্ট*(viewport*) এর 1% ছোট ডাইমেনসনের(dimension) সাথে সম্পর্কযুক্ত। |
vmax | ভিউপোর্ট*(viewport*) এর 1% বড় ডাইমেনসনের(dimension) সাথে সম্পর্কযুক্ত। |
% | parent এলিমেন্টের সাথে সম্পর্কিত। |
নোট - em এবং rem ইউনিট পুরোপুরি আকার পরিবর্তনযোগ্য layout তৈরিতে ব্যবহার হয়!
* Viewport = ব্রাউজার উইন্ডো সাইজ। যদি ভিউপোর্ট ৫০ সে.মি. প্রস্থ হয়, তবে 1vw = ০.৫ সে.মি. হবে।
নিচের টেবিলে দেয়া রো গুলোর প্রথম লাইন ব্রাউজারের সেই প্রথম ভার্সন নির্দেশ করে যেগুলো পুরোপুরি এই প্রপার্টি সাপোর্ট করে।
দৈর্ঘ্যের ইউনিট | |||||
---|---|---|---|---|---|
em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
vmin | 20.0 | 9.0* | 19.0 | 6.0 | 20.0 |
vmax | 26.0 | Not supported | 19.0 | 7.0 | 20.0 |
নোট - Internet Explorer 9, vmin প্রপার্টি সাপোর্ট করে একটি নন-স্ট্যান্ডার্ড নামে ( vm ).