Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

আপনি হয়তো জানেন না এমন ৭ টি CSS একক

by
Length:MediumLanguages:

Bengali (বাংলা) translation by Shakila Humaira (you can also view the original English article)

জানা CSS কৌশলগুলো দিয়ে কাজ করা খুবই সহজ, কিন্তু নতুন ধরনের কোন সমস্যায় পরলেই পরিস্থিতি কঠিন হয়ে যায়।

যেহেতু ওয়েব বিস্তৃত হচ্ছে তাই প্রতিদিন নতুন নতুন সমাধানের চাহিদা তৈরি  হচ্ছে। সুতরাং, একজন ওয়েব ডিজাইনার এবং ফ্রন্টএন্ড ডেভলপার হিসেবে, আমাদের টুলগুলো সম্পর্কে জানা ব্যাতীত কোন উপায় নেই আমাদের।

এটার অর্থ এমনকিছু বিশেষ টুলগুলো সম্পর্কে জানা যেগুলো সবসময় ব্যাবহার হয় না, কিন্তু যখন প্রয়োজন হয় তখন এগুলা একেবারে কাজের জন্য অপরিহার্য জিনিস হয়ে দাড়ায়।

আজ, আমি আপনাকে কিছু CSS টুল এর সাথে পরিচয় করিয়ে দিবো যেগুলো সম্পর্কে হয়তো আপনি জানেন না। এই টুলগুলো একেকটি পরিমাপের একক, pixel অথবা em এর মত, কিন্তু আপনি খুব সম্ভবত এগুলো সম্পর্কে আগে শোনেননি। চলুন দেখা যাক।

rem

আপনার জানা জিনিসগুলোর মত কিছু জিনিস দিয়ে আমরা শুরু করবো em এককটি বর্তমান font-size অনুসারে কাজ করে সুতরাং, উদাহারনের জন্য, আপনি যদি body তে ফন্ট সাইজ সেট করেন, তাহলে চাইল্ড এলিমেন্টের জন্য em সেই font size এর সমান হবে।

এখানে, আমরা বলেছি যে div টির font-size হবে 1.2em এখানে font-size হবে যা inheried হয়েছে, মানে 14px, তার ১.২ গুন এর ফলাফল হবে 16.8px

এখন কেমন হবে যদি আপনি em একক দিয়ে ফন্ট সাইজ সেট করা এলিমেন্টের মধ্যে আরেকটি এলিমেন্টে em দিয়েই ফন্ট সাইজ সেট করেন? এই স্নিপেটে আমরা উপরের মত একই CSS এর প্রয়োগ করবো। এখানে প্রতিটি div ফন্ট সাইজ পাচ্ছে তার প্যারেন্ট এর কাছ থেকে এবং ভেতরের div গুলোতে ক্রমশ ফন্ট সাইজ বারছে।

কখনও কোন পরিস্থিতে এটা দরকার হতে পারে, হয়তো আপনি একটি মাপকে কোনকিছুর গুনিতকে ব্যবহার করতে চান। এই পরিস্থিতিতে, আপনার ব্যবহার করা উচিত rem rem এর "r" এর অর্থ "root"; এটা root এলিমেন্টের এর ফন্ট সাইজের এর সমান; বেশিরভাগ ক্ষেত্র এটা html  হয়।

আগের উদাহারনের তিনটি নেস্টেড div এর ফন্ট সাইজ হবে 16.8px.

এটা কলামভিত্তিক ডিজাইন এর জন্য ভাল

Rems শুধু ফন্ট সাইজ এর জন্যই নয়। উদাহারস্বরুপ, আপনি হয়তো rem ব্যবহার করে আপনার পুরো গ্রিড সিস্টেম বা ইউজার ইন্টারফেস স্টাইল লাইব্রেরীকে কে root HTML ফন্ট সাইজ এর সাথে তুলনা করে ব্যবহার করতে পারেন এবং নির্দিষ্টক্ষেত্র em কে বিভিন্ন গুনিতকে কাজে লাগাতে পারেন। এটা আপনাকে আরও কার্যকরী ফন্ট সাইজ এবং বিভিন্ন গুনিতকে ব্যবহারযোগ্য মান দিবে।

এটার ধারনা এসেছে কন্টেন্ট এর ফন্ট সাইজ তুলনাগতভাবে ব্যবহারের জন্য। যদিও, এটা হয়তো সব ক্ষেত্রে কাজের না।

আমি কি এটা ব্যবহার করতে পারবো?

Feature: rem (root em) এককগুলো দেখুন caniuse.com সাইটে

vh এবং vw

রেসপন্সিভ ওয়েব ডিজইন কৌশলগুলো বেশিরভাগ ক্ষেত্রেই পার্সেন্টেজ এর উপরে ভিত্তি করে হয়। কিন্তু CSS পার্সেন্টেজ সবসময় সঠিক সমাধান না। CSS এর দৈর্ঘ্য তার উপরে থাকা প্যারেন্ট এলিমেন্ট এর সাপেক্ষে থাকে। যদি এমন হয় যে আপনাকে প্যারেন্ট এলিমেন্টের উচ্চতা এবং দৈর্ঘ্যের পরিবর্তে পুরো viewport এর উচ্চতা এবং দৈর্ঘ্যের ভিত্তিতে পরিমাপ করতে হবে, তখন কি করবেন? ঠিক এটার জন্যই vh এবং vw একক ব্যবহার হয়।

vh element পুরো viewport এর 1/100  উদাহারনস্বরুপ, একটি ব্রাউজারের উচ্চতা যদি হয় 900px, 1vh হবে 9px. একইভাবে, যদি viewport এর দৈর্ঘ্য হয় 750px, 1vw হবে 7.5px.

এই নিয়মগুলোর প্রচুর ব্যবহার রয়েছে। উদাহারনস্বরুপ, খুব সহজেই এখন একটি full-height অথবা full-height এর কাছাকাছি স্লাইড তৈরি করা যাবে মাত্র এক লাইন CSS এর মাধ্যমে।

ধরি আপনার একটি শিরোনাম দরকার যার দৈর্ঘ্য হবে স্ক্রীনের সমান। এটা করার জন্য, আপনার প্রয়োজন vw দিয়ে একটা ফন্ট সাইজ সেট করা এই সাইজ ব্রাউজারের দৈর্ঘ্য অনুসারে হবে।

এটাকি ব্যবহার করতে পারি?

Feature: Viewport এককগুলো: vw, vh caniuse.com এ দেখুন

vmin এবং vmax

যখন vh এবং vm সবসময় viewport এর সাপেক্ষে, তখন vmin এবং vmax যথাক্রমে minimum এবং maximum দৈর্ঘ্য এবং উচ্চতা এর সাথে সম্পর্কিত, নির্ভর করছে কোনটি ছোট এবং বড়। উদাহারনস্বরুপ, যদি ব্রাউজার এর দৈর্ঘ্য 1100px এবং উচ্চতা 700px হয়, 1vmin হবে 7px এবং 1vmax হবে 11px. তবে, যদি দৈর্ঘ্য 800px এবং উচ্চতা 1080px হয়, vmin হবে 8px এর সমান যদিও vmax হবে 10.8px.

তাহলে, কখন আপনি এগুলো ব্যবহার করবেন?

ধরুন আপনার এমন একটি এলিমেন্ট দরকার যা সবসময় স্ক্রীনে দেখাবে। vmin এর মান 100 এর নীচে সেট করে এটা এটা করতে পারেন। উদাহারনস্বরুপ বলা যায়, একটা বর্গাকৃতি এলিমেন্ট যা সর্বনিম্ন স্ক্রীনের দুপাশে স্পর্শ করে থাকবে।

যদি আপনার বর্গাকৃতি বাক্সের মত কিছু প্রয়োজন হয় যা সবসময় পুরো দৃশ্যমান viewport কে পুরন করে রাখবে (স্ক্রীনের চারটি অংশকেই স্পর্শ করে রাখবে সবসময়), তাহলে vmax বাদে একই নিয়ম অনুসরন করুন।

এই নিয়মগুলোর সমষ্টি viewport এর সাপেক্ষে মান নির্ধারনে একটি দারুন এবং কার্যকরী সমাধান দেয়।

আমি কি এটা ব্যবহার করতে পারি?

Feature: Viewport units: vmin, vmax caniuse.com  এ দেখুন

ex এবং ch

ex এবং ch, em এবং rem এর মত, তবে এটা বর্তমান ফন্ট এবং ফন্ট সাইজ উভয়ের উপর নির্ভর করে। যাহোক, যেহেতু এগুলো ফন্ট ভিত্তিক তুলনার জন্য তৈরি তাই এই এককগুলো font-family এর উপরেও নির্ভর করে যা em এবং rem এর মত না।

ch বা character একটি উন্নত একক, যেখানে কোন ফন্টের 0 সংখ্যার দৈর্ঘ্যকে একক ধরা হয়। এই পরিমাপের একক নির্ধারনের ক্ষেত্রে কিছু মজার সিদ্ধান্ত নেয়া হয়েছে, যা সম্পর্কে এরিক মেয়ারের ব্লগে কিছু তথ্য আছে। তবে এই পরিমাপের বেসিকটা কিছুটা এমন যে, কোন মোনোস্পেস ফন্টের ক্ষেত্রে যদি কোন বক্সের width: 40ch হয়, তবে সেই বক্সে এক লাইনে ৪০টি অক্ষর থাকতে পারবে। এই রুলটা মূলত ব্যবহার করা হয় ব্রেইলের ইমপ্লিমেন্টেশনের জন্য, কিন্তু সম্ভাবনা এবং ক্রিয়েটিভিটি এইসব ছোটখাট জিনিস ছাড়িয়ে আরও অনেকদূর নিয়ে যেতে পারে।

"ex এককটি ফন্টের x-height নির্দেশ করে অন্যভাবে বলতে গেলে em এর অর্ধেক"। x-height হল একটি ফন্টের ছোটহাতের "x" অক্ষরের উচ্চতা। প্রায় সময়েই এটাকে একটি ফন্টের middle mark বলা হয়।

x-height; মুলত একটি ফন্টের ছোটহাতের "x" এর উচ্চতা (এ সম্পর্কে বিস্তারিত জানতে The Anatomy of Web Typography দেখতে পারেন)

এই ধরনের এককগুলোর অনেক ব্যবহার রয়েছে, বেশিরভাগই টাইপোগ্রাফি বা ছোটখাট সংশোধনের জন্য। উদাহারনস্বরুপ, sup এলিমেন্ট টি যা superscript অর্থবহন করে, তা কোনকিছুকে position: relative ব্যবহার করে লাইন থেকে 1ex উপরে নিয়ে যেতে পারে। একইভাবে subscript ব্যবহার করে কোন অংশকে নিচে নামিয়ে আনা যায়। ব্রাউজার প্রথম থেকেই superscript এবং subscript vertical-align নিয়ম সমর্থন করে, কিন্তু যদি আপনি আরও সঠিকভাবে নিয়ন্ত্রন করতে চান তাহলে এটি ব্যবহার করতে পারেন।

আমি কি এটা ব্যবহার করতে পারি?

ex এককটি CSS1 ভার্সন থেকে আছে, যদিও ch এর জন্য আপনি খুব ভাল সমর্থন পাবেন না। সমর্থনের বিষয়ে নির্দিষ্টভাবে জানার জন্য এরিক মেয়ারের ব্লগে CSS units and values পোস্টটি দেখতে পারেন

পরিশেষ

নিয়মিত ডেভেলপমেন্টে নজর রাখা এবং CSS এর সম্প্রসারন খুবই জরুরী এবং এখন এই এককগুলো আপনার ব্যবহারের উপযোগী জিনিস হিসেবে যুক্ত হল। সম্ভবত এখন থেকে আপনি বিশেষ কোন সমস্যা সামাল দিতে পারবেন যার জন্য হয়তো একটি আশ্চর্য্য সমাধান দরকার, হতে পারে সেটা এই এককগুলো ব্যবহার করে। সময় নিয়ে এই লিংকটি পরে দেখতে পারেন new specifications. cssweekly তে নিবন্ধন করে নতুন খবর এবং ব্যবহারযোগ্য ভাল জিনিস পেতে পারেন। আর এখানে নিবন্ধন করে সাপ্তাহিক আপডেট, কোর্স, এ পোষ্টের মত ফ্রি টিউটোরিয়াল পেতে ভুলবেন না।

আরও পরতে চাইলে

আরও CSS একক

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.