CSS ম্যাথ ফাংশন লেভেল ৪ দিয়ে শুরু করা

ফাংশনাল নোটেশনসমূহ হচ্ছে সিএসএস ভ্যালু এবং ইউনিট মডিউলের একটি অংশ, যাতে দরকারি ম্যাথ ফাংশন calc() এবং লেবেল ৪ এর min() এবং max() অন্তর্ভুক্ত আছে। এই শক্তিশালী ফাংশনগুলো সিএসএস অথর দের জন্য সিএসএস ম্যাথ লজিক ব্যবহার করার সামর্থ্য প্রদান করে। এই আর্টিকেলে আমরা   calc(), min() এবং max()  কি এবং কিভাবে এগুলো ব্যবহার করা যাবে তা নিয়ে আলোচনা করবো। চলুন শুরু করি!

ফাংশনাল নোটেশন বলতে আসলে কি বোঝায়?

ফাংশনাল নোটেশন হচ্ছে W3C CSS Values and Units Module এর নয়টি মূল সেকশনের একটি (সঠিকভাবে বলতে গেলে এটা হচ্ছে সেকশন আট)। লেভেল ৪ এর সম্পাদকের ভাষ্য অনুযায়ী,ফাংশনাল নোটেশন এখন toggle() এর মত সাবসেকশন সাপোর্ট করে যা attr() ব্যবহার করে বিভিন্ন ভ্যালু এবং এট্রিবিউট রেফারেন্সের মধ্যে টগল করার অনুমতি দিয়ে থাকে।  এখানে আরও একটি আকর্ষণীয় সাবসেকশন আছে যাকে “ম্যাথম্যাটিকাল এক্সপ্রেশন” বা “গানিতিক অভিব্যাক্তি” বলা হয় যা আমাদের প্রিয় ম্যাথ ফাংশন calc(), min() এবং max() এর ক্ষেত্রে দেখা যায়।

আসুন, এবার আমরা W3C এর সংজ্ঞায় ফিরে যাই যা আমাদেরকে ফাংশনাল নোটেশন কি তা বুঝতে সাহায্য করবে:

“ফাংশনাল নোটেশন হচ্ছে এমন এক ধরণের কম্পোনেন্ট ভ্যালু যা জটিল বিষয় উপস্থাপন অথবা বিশেষ ধরণের প্রক্রিয়া চালাতে পারে। এই সিন্টেক্সটটি শুরু হয়, ফাংশনের নামের পর বামপাশের প্রথম বন্ধনীর দ্বারা তারপর এর অনুকূলে নির্দিষ্ট আর্গুমেন্ট ও তারপর ডানপাশের প্রথম বন্ধনীর দ্বারা তা শেষ হয়।"

লেপারসনের শর্তমতে, এটা হচ্ছে একটি ফাংশনের নাম, যেমন calc তারপর শুরুর ( ও শেষের ) বন্ধনী। কিন্তু এই দুটির মাঝে কি হবে?

ম্যাথম্যাটিকাল এক্সপ্রেশন বা গানিতিক অভিব্যক্তির সঙ্গে পরিচয়

উপরের বর্ণনা অনুযায়ী, ম্যাথম্যাটিকাল এক্সপ্রেশন বা গানিতিক অভিব্যক্তি হচ্ছে ফাংশনাল নোটেশনের একটি সাবসেকশন, কিন্তু এটা কি এবং কি করে? আবারও W3C তে ফিরে যাই, যেখানে এ সম্পর্কে বলা হয়েছে:

“ম্যাথ ফাংশন calc(), min(), এবং max(), দিয়ে বিভিন্ন ম্যাথম্যাটিকাল এক্সপ্রেশন যেমন যোগ (+), বিয়োগ (-), গুন (*) এবং ভাগ (/) কে কম্পোনেন্ট ভ্যালু হিসেবে ব্যবহার করা হয়।"

এর মানে হচ্ছে, calc(), min() এবং max()  হচ্ছে “ম্যাথ ফাংশন” যা প্রথম বন্ধনী দ্বয়ের ভিতর “মান গননার” জন্য “গানিতিক অভিব্যাক্তি” প্রকাশের অনুমতি দিয়ে থাকে।  বেশ, এটা এখন খুব পরিষ্কার। “প্রথম বন্ধনীর ভিতর গানিতিক হিসাব নিকাশ করা যায়” তারই একটি পোশাকী নাম হচ্ছে “এক্সপ্রেশন” বা “অভিব্যক্তি”। 

লেভেল ৪ হচ্ছে আমাদের জানামতে এর পরিপূরক একটি হালনাগাদ সংজ্ঞা:

"ম্যাথ ফাংশনের উপাদানগুলো আক্ষরিক হতে পারে, কিন্তু অন্যান্য ম্যাথ ফাংশনসমূহ অথবা অন্যান্য এক্সপ্রেশন যেমন attr(), একটি ভেলিড আর্গুমেন্ট টাইপ (যেমন <length> ) মুল্যায়ন করতে পারে।"

আরও স্পষ্টভাবে বললে, এখানে উল্ল্যেখ্য অন্যান্য ম্যাথ ফাংশনগুলো হচ্ছে, calc(), min() এবং max(), কিন্তু এখানে আরও বর্ণিত আছে যে এগুলো একটি অপরটির ভিতর নেস্টেড বা প্রবেশ করানো যায়।  আপনি চাইলে এভাবেও লিখতে পারেন calc(min()), min(calc()), calc(max(min())), calc(min(attr())) ইত্যাদি, ইত্যাদি। তবে, আমার পরামর্শ হলো আপনি নেস্টিং করা থেকে বিরত থাকবেন, যদিও এমন করা সুযোগ থাকে তবুও বিজ্ঞজনদের মতে এটা করা ঠিক নয়। 

চলুন, এরকম কিছু অসাধারণ ম্যাথ ফাংশন আমরা আবারো দেখে নেই যা সিএসএস এ কাজে লাগার সম্ভাবনা খুবই কম।

min() এবং max()কে আবারও স্বাগতম

min() এবং max() হচ্ছে এমন দুটি ম্যাথ ফাংশন যা পরিচিত হয়েছে, কিন্তু সিএসএস ভ্যালু এবং ইউনিট লেভেল ৪ এর এডিটর ড্রাফট থেকে প্রায় মুছে যাওয়ার পরই কেবল এটা হয়েছে। লিয়া ভেরোকে ধন্যবাদ, যেভাবে এগুলোর ব্যবহারকে বদলে দেয়া হয়েছে তাতে আমি খুশি হতে পারিনি।

“সম্ভবত এখন ভ্যালু ৩ এর মেয়াদ প্রায় শেষ হয়ে এসেছে, তাই এখনই কি min() এবং max() কে ভ্যালু ৪ এ পুনরায় যোগ করার সময় নয়? 

অথররা font-size এবং line-height অনুকরন করতে calc() এর সাথে অদ্ভুত কিছু হ্যাক অবলম্বন করছে, যেগুলোকে তারা “CSS locks” বলে থাকে।  আপনি যদি CSS locks লিখে গুগলে সার্চ দেন, তাহলে দেখতে পাবেন এই ধরণের হ্যাক করার প্রবণতা কত ছড়িয়ে গেছে, যা অথরদের প্রয়োজনের দিকেই ইঙ্গিত প্রদান করে।

এছাড়াও, সিএসএস ভেরিয়েবলের ব্যবহার যত বেশি হবে, min() এবং  max() এর  প্রয়োজনও তত বাড়বে। আমি ছয় বছর আগের বেশ কিছু সমস্যার কথা মনে করতে পারি যা আমরা বৈধভাবে সমাধান করতে পারি নি কিন্তু এখন সেগুলো ভেরিয়েবলের মাধ্যমে বৈধভাবে গানিতিক মানের সাময়িক ধারনার দ্বারা সমাধান করা সম্ভব" – লিয়া ভেরো

লিয়ার পরামর্শ অনুযায়ী গিটহাবে, সিএসএস লেভেল ৪ ভ্যালু ও ইউনিটে min() এবং max()  পুনরায় অন্তর্ভুক্ত করা হয়েছে। এছাড়াও ওয়েবকিটেও তা প্রাথমিকভাবে গৃহীত হয়েছে। ডেভেলপাররা ব্যক্তিগতভাবে এই বিষয়টি ওয়েবকিট নাইটলি (10/24/17 তারিখ অনুযায়ী) দিয়ে পরীক্ষা করে দেখতে পারেন। যারা জানেন না তাদের জন্য এখানে একটি একক ওয়েবকিট কমিট দেয়া আছে যাতে min() এবং max() এর প্রতি জাদুকরী সমর্থন দেয়া হয়েছে। 

এক নজরে clamp()

লিয়া ভেরোর একই গিটহাব সুত্রে আমরা আরও একটি মজার আড্ডা দেখতে পাই যেখানে ট্যাব এটকিন আসলে clamp()  ফাংশনের পরামর্শ দিয়েছেন। clamp()  হচ্ছে আক্ষরিক অর্থে “clamp”  যা দুটি বাউন্ডারী মানের ভিতরের একটি মান।

“...আমি মনে করি clamp(), যদিও টেকনিক্যালি অনাবশ্যক, তবুও অনেক সময় দরকারী হতে পারে তাই সম্ভবত থেকে যাওয়াই ভালো।“

এটা দিয়ে সম্ভবত ম্যাথম্যাটিকাল এক্সপ্রেশন ছাড়াও আরও কিছু বোঝানো হয়েছে। clamp() এর মত একটি ফাংশন রেস্পন্সিভ ডিজাইনের ক্ষেত্রে বেশ দরকারী এবং এটা এইচটিএমএল এর ক্ষেত্রেও বেশ কাজে লাগে।

clamp(minN, midN, maxN)

বর্তমান আলোচনার সমর্থনে উপরের সিনট্যাক্স তৈরি এবং আমি এর সাথে সম্পূর্ণ একমত; এটা যৌক্তিকভাবে উপলব্ধি ও পড়া সম্ভব। আমি কেবল ভাবছি ভবিষ্যতে যদি clamp() ব্যবহার করা হয় তবে min() এবং max() এর ক্ষেত্রে কি ঘটবে।

অন্য সব কথা বাদ দিয়ে চলুন এবার আমরা মূল ফাংশনের দিকে মনোযোগ দেই যে বিষয়ে আমরা আলোচনা করছি; calc(), min() এবং max()। 

এবার calc() এর সাথে পরিচিত হোন

এটা হচ্ছে আমার কাছে সবচেয়ে প্রিয় একটি সিএসএস ম্যাথ ফাংশন যা দিয়ে সব ধরনের ভেল্কিবাজী করা যায়।  সিনট্যাক্সটি খুব বেশি কঠিন নয়, ব্যবহার করার পর সাপোর্ট কেমন তা দেখে নিন। 

.my-element {
    width: calc(50% - 10rem);
}

এই উদাহরণে আমরা (calc) নামের ফাংশন ব্যবহার করেছি যার পরে প্রথম বন্ধনীর ভিতর “অভিব্যক্তি” রাখবো, অন্য কথায়...গানিতিক যুক্তি।

“calc() ফাংশন বিভিন্ন গানিতিক অভিব্যাক্তি যেমন যোগ(+), বিয়োগ(-), গুন(*), এবং ভাগ(/) কম্পোনেন্ট ভ্যালু হিসেবে ব্যবহার করার অনুমতি প্রদান করে।” - W3C

Again, this is fancy speak for saying “you can do math in the parentheses”.

এক্সপ্রেশনের ক্ষেত্রে, অথোররা বিভিন্ন জেনেরিক মান পাস করতে পারেন যেমন, 50%, 2em, 40,  এবং  calc()  ব্যবহার করতে পারেন যেখানে <length>, <frequency>, <angle>, <time>, <percentage>, <number>, অথবা <integer> ভ্যালুর অনুমতি আছে। কাজের সময় ব্যবহার ও পরীক্ষা করার জন্য আমার প্রিয় ভিউপোর্ট ইউনিটসমূহ হচ্ছে (vh,vw, vmin,vmax)। এগুলো হচ্ছে স্ক্রিন বা পর্দার মাত্রা নির্ধারক মান যা বিশেষ করে টাইপোগ্রাফি এবং লেআউটের ক্ষেত্রে কাজে লাগে যেমনটি আমরা এখানে দেখতে যাচ্ছি।

স্বাভাবিকভাবে calc() এর ব্যবহার

উপরের উদাহরণটি হচ্ছে রেস্পন্সিভ টাইপোগ্রাফি হ্যান্ডেল করার মাত্র একটি উপায়। মিডিয়া কুয়েরি, Sass, calc() এবং ভিউপোর্ট ইউনিটসমূহ একত্র করে মাইক প্রমান করেছে যে কীভাবে রেস্পন্সিভ টাইপোগ্রাফি নির্দিষ্ট পিক্সেল মান অনুযায়ী পরিমাপ করা সম্ভব হতে পারে। 

এখানে calc() এবং ভিউপোর্ট ইউনিট ব্যবহার করে টিম ব্রাউণের আরেকটি টাইপোগ্রাফি ডেমো দেয়া হলো। এই ডেমোটি তার সিএসএস লক সম্পর্কিত তার এক রচনায় ব্যবহৃত হয়েছে যা আমি আপনাকে পড়তে বলবো যদি আপনি টাইপোগ্রাফির উপর বিশেষ গুরুত্ব দিয়ে থাকেন। 

ভিউপোর্ট ইউনিট এবং calc() এর সাহায্যে আমরা আমাদের সর্বাধিক প্রিয় কিছু লেআউট প্যাটার্ন তৈরি করতে পারি।   ডেমোতে, calc() ব্যবহার করে ফুটারের উচ্চতা ভিউপোর্টের (vh) উচ্চতা থেকে বিয়োগ করতে ব্যবহার করা হয়েছে।  ক্রিস কয়েইয়ার এটা দিয়ে আমাদের পুরাতন বন্ধু “The Sticky Footer” তৈরি করার পদ্ধতিও দেখিয়েছেন। এই ডেমোটি সিএসএস ভেরিয়েবলের সাথে মিলিত হয়েও খুব সুন্দরভাবে কাজ করে।

ডেভিড খুরশিদের এই ডেমোতে অ্যাপ্লিকেশন এবং ডাইনামিক অবস্থার ক্ষেত্রে অবশ্য বেশ কিছু ব্যতিক্রম বিষয় আছে।  ডেভিড এখানে ব্যাকগ্রাউন্ড, অফসেট ভ্যালু, ট্রান্সফরম, ফিল্টার, অপাসিটি এবং এমনকি প্রস্থের ক্ষেত্রেও calc() ব্যবহার করেছেন। যারা সিএসএস ভেরিয়েবলের সাথে রিঅ্যাক্ট ব্যবহার করতে চান তাদের জন্য এটা একটি অসাধারণ ডেমো।  

এবার চলুন আরও দুটি অতিরিক্ত ম্যাথ ফাংশন দেখি যা আপনি অবশ্যই পরখ করে দেখবেন, বর্তমানে যে দুটি min() এবং max() পরিচিত।

min() এবং max(): কন্সট্রেইন্ট বা বাধা সংজ্ঞায়িত করা

আগেই উল্লেখ করা হয়েছে, এই ফাংশনগুলো এখনও তাদের শৈশবেই আছে, তাই ডেমোগুলো কিছুটা অস্পষ্টভাবে প্রদর্শিত হয়েছে, কিন্তু এ কারণে আপনি পরীক্ষানিরীক্ষা করতে ভয় পাবেন না। min() এবং max() নিয়ে পরীক্ষানিরীক্ষা করার জন্য আপনাকে ওয়েবকিট নাইটলি ডাউনলোড করতে হবে। ডাউনলোড করা হয়ে গেলে, আপনি নাইটলি খুলে (কালো আইকন) অনায়াসে কাজ শুরু করতে পারেন।

min(expression, [expression])
max(expression, [expression])

এক্সপ্রেশন কি তা শেখার কথা কি মনে আছে? এটা “গানিতিক যুক্তি”র একটি পোশাকী নাম। যেমনঃ

min(1 * 10vw, 2 / 50vw)
max(1 * 10vw, 2 / 50vw)

প্রতিটি এক্সপ্রেশনকে তার পরের অতিরিক্ত এক্সপ্রেশন থেকে কমা দ্বারা পৃথক করা হয়েছে। এছাড়াও আমরা আগের সংজ্ঞায় ফিরে যেতে পারি যেখানে একই নিয়ম স্পষ্টভাবে বিবৃত করা হয়েছেঃ

“একটি min() অথবা max() এর গানিতিক মান হচ্ছে কমা দ্বারা পৃথক করা এক্সপ্রেশনের একটি তালিকা”– W3C

যদি না আপনি এই ব্যাখ্যাটির গুরুত্বপূর্ণ অংশ বাদ না দেন এই সংজ্ঞাতে বলা হয়েছে কমা দ্বারা বিভক্ত একটি এক্সপ্রেশনের তালিকা” ঠিক যেভাবে আমরা আগের কোড স্নিপেটে করেছি।   

“একটি min() অথবা max() ফাংশন একেবারে ছোট (সর্বাধিক ঋণাত্মক) অথবা একেবারে বড় (সর্বাধিক ধনাত্মক) সংখ্যা একইসঙ্গে তার কমা দ্বারা পৃথক অংকে বিবৃত করতে পারে” - W3C

আপনি কি বিষয়টি বুঝতে পারছেন? এখানে বলা হয়েছে একেবারে ছোট (সর্বাধিক ঋণাত্মক) অথবা একেবারে বড় (সর্বাধিক ধনাত্মক)। মানে W3C আমাদেরকে এক্সপ্রেশনের অংশ হিসেবে ঋণাত্মক সংখ্যা লেখার অনুমতি প্রদান করে। 

চলুন এবার আমরা দেখি কীভাবে min() এবং max()  একটি কার্যক্ষম ডেমোতে তাদেরকে প্রমানিত করে, মনোযোগ সহকারে দেখুন।

বাস্তবে min() এবং max()  

এখানে একটি ডেমো তুলে ধরা হলো যাতে একটি উপাদানের width এবংfont-size ব্যবহার করে min() এবং max() এর কয়েকটি ব্যবহার দেখানো হয়েছে। width এর জন্য একটি মিনিমাম সীমারেখা এবং ম্যাক্সিমাম সীমারেখা আছে যখন আমাদের কম্পোনেণ্ট বা ঊপাদানের font-size  এর ক্ষেত্রেও মিনিমাম এবং ম্যাক্সিমাম মান ব্যবহার করা হয়েছে। মনে রাখবেন এখানে যেভাবে লেখা হয়েছে তা শুধু ওয়েবকিট নাইটলিতেই কাজ করবে; আপনি যদি বাস্তবে কোনও অ্যানিমেশন দেখতে চান তাহলে এই  GIF টি দেখুন (যা স্বভাবতই কোনও পেইজে এম্বেড করা বেশ কঠিন মনে হবে)।

উপরের উদাহরণে আমি width এর ক্ষেত্রে সীমারেখা বা কন্সট্রেইন্ট করার মাধ্যমে শুরু করেছি এবং এক লাইনেই তা সম্পন্ন করেছি।  

width: min(max(100px * 2, 70vw), 500px);

উপরের পদ্ধতিতে আমি মধ্যভাগে কন্সট্রেইন যুক্ত করতে সমর্থ হয়েছি যা কেবল মিনিমাম এবং ম্যাক্সিমাম। উপরের কোড দিয়ে ব্রাউজারকে বলা হয়েছে “ প্রস্থ 70vw সেট করতে চেষ্টা করুন, কিন্তু এটা যাতে কোনক্রমেই 200px (100px * 2) এর নিচে না যায়, অথবা 500px এর উপরেও না যায়।” একইরকম ফলাফল অর্জন করার জন্য আরেকটি পন্থা আছে।

min(max(minN, midN), maxN)

আরও বিস্তারিতভাবে ব্যাখ্যা করলে এটা দাড়ায়, একটি নুন্যতম, একটি মধ্যম এবং পরিশেষে একটি সর্বাধিক সীমাবদ্ধ মান বা কন্সট্রেইন্ট ভ্যালু। max()  এর ভিতর min() নেস্ট করা হলে কাঙ্ক্ষিত সীমাবদ্ধতা অর্জন করা সম্ভব। 

min-width: 200px
max-width: 500px

যদি আমরা min-width এবং max-width ব্যবহার করি তাহলে min() এবং max() এর মতই ফলাফল অর্জন করবো। আগামী বছর min() এবং max() এর মত ম্যাথ ফাংশন ব্যবহারের কারণে min-width  এর মত প্রপার্টি অপ্রচলিত হয়ে যায় কিনা তাই এখন দেখার বিষয়।

font-size এর ক্ষেত্রে রেস্পন্সিভ এবং লকিং টাইপোগ্রাফি তৈরি করতে আমি একই min/max পদ্ধতি ব্যবহার করেছি।

font-size: min(max(1rem, 4vw), 2rem);

এর মাধ্যমে আমি ব্রাউজারকে বলেছি, “ফন্ট সাইজ 4vw সেট করতে চেষ্টা করুন, কিন্তু এটা যেন কিছুতেই 1rem এর নিচে, অথবা 2rem এর উপরে না যায়” দুর্ভাগ্যজনকভাবে, এখানে min-font-size অথবা max-font-size  এর মত কোনও কিছু নেই যা প্রস্থের ক্ষেত্রে ছিলো, কিন্তু সিএসএস ফন্ট মডিউল লেভেল ৪ এর ক্ষেত্রে এটা বাস্তবে করা সম্ভব।

এটা বেশ মজার একটি খবর এবং এটা সিএসএসে মানসমূহ কন্সট্রেইন্ট বা সীমাবদ্ধ করার খবরে অথোররা যেমন খুশি হয়েছিলো, এক্ষেত্রেও তেমনি হয়েছে।

min() এবং max() থাকার মানে হচ্ছে “CSS Locks” এর আর দরকার নেই! এখন আপনি min(max()) নেস্টিং করেই বেশ কিছু নিয়ন্ত্রিত উপাদান তৈরি করতে পারবেন ☛ font-size: min(max(30px, 10vw), 60px); pic.twitter.com/hMxAt0iu2K

— Tommy H🎃dgins (@innovati) September 19, 2017>

যদি কোনও সার্চ ইঞ্জিনে সিএসএস লক লিখে খুঁজেন তাহলে আপনি অসংখ্য রচনা এবং ডেমোসমূহ পাবেন। CSS Locks লিখে খুঁজলে কোডপেনেও অসংখ্য পেনসমূহ প্রদর্শন করবে। যাদের কাছে CSS Locks একটি নতুন ধারণা, তাদের জন্য আমি বিষয়টি আরও বিস্তারিতভাবে ব্যাখ্যা করছি। .

“Flexible typography with CSS locks”  এটাকে সিএসএস লক বলেছেন, যদিও এই টেকনিকটি প্রথমে Mike Riethmuller এর রচনা “Precise control over responsive typography” এর মাধ্যমে প্রথম পরিচিত হয়ে উঠে।>

calc() এবং ভিউপোর্ট ইউনিটসমূহের মাধ্যমে হেডীং এবং বডি কপি স্ক্রিনের মাত্রা অনুযায়ী ছোট অথবা বড় করার ক্ষেত্রে এটা বেশ কাজে লাগবে। এই ধরনের কন্সট্রেইন্ট বা প্রতিবন্ধকতা তৈরি করাই “CSS Locks” নামে পরিচিত।.

• Viewport Unit Based Typography by Zell Lieww
  
• The math of CSS locks by Florens Verscheldee
  
• CSS “locks” by Chris Coyierr
  
• Fluid Typography by Geoff Grahamm
  
• Responsive And Fluid Typography With vh And vw Units by Michael Riethmullerr
• Fluid Responsive Typography With CSS Poly Fluid Sizing by Jake Wilsonn