বিভিন্ন ডিভাইসের সাথে কম্প্যাটিবল (compatible) ওয়েবসাইট ডিজাইন করা একটি ওয়েবসাইটকে যতটা সম্ভব অনেক ভিন্ন ব্যবহারকারীর জন্য অ্যাক্সেসিবল (accessible) बनाने এর একটি গুরুত্বপূর্ণ ধাপ।
এখানেই মিডিয়া কোয়ারি (media queries) কাজে আসে। CSS মিডিয়া কোয়ারি আপনাকে একটি CSS রুল শুধু তখন প্রযোজ্য করতে দেয় যখন ব্রাউজার আপনার সংজ্ঞায়িত একটি রুলের সাথে মেলে। সুতরাং, আপনি একটি রুল সংজ্ঞায়িত করতে পারেন যা শুধু তখন প্রযোজ্য হবে যখন একজন ব্যবহারকারী একটি স্মার্টফোনে একটি ওয়েব পেজ দেখছে।
এই টিউটোরিয়ালে উদাহরণসহ রেসপন্সিভ ওয়েব ডিজাইনের বেসিক, মিডিয়া কোয়ারি কীভাবে কাজ করে, এবং আপনি আপনার নিজস্ব CSS মিডিয়া কোয়ারি কীভাবে ডিজাইন করতে পারেন তা আলোচনা করা হয়েছে। এই টিউটোরিয়াল পড়া শেষে আপনি CSS-এ মিডিয়া কোয়ারি ডিজাইন করতে এক্সপার্ট হবেন।
রেসপন্সিভ ওয়েব ডিজাইন এবং মিডিয়া কোয়ারি (Responsive Web Design and Media Queries)
রেসপন্সিভ ওয়েব ডিজাইন (Responsive web design) অনুশীলনের একটি সেটকে বোঝায় যেখানে একটি ডেভেলপার একটি সাইটের স্টাইলশীট অপ্টিমাইজ করে যাতে সাইটটি সঠিকভাবে রেন্ডার (render) हो পারে একটি বিস্তৃত রেঞ্জের ভিন্ন ডিভাইস এবং স্ক্রিন আকারে।
রেসপন্সিভ ওয়েব ডিজাইন এতটাই গুরুত্বপূর্ণ কারণ একটি দর্শক যা আউটপুট ডিভাইস ব্যবহার করে একটি ওয়েব পেজ দেখতে সেটি—এবং এর ব্রাউজার উইন্ডো এবং স্ক্রিন আকার—ওয়েব পেজ কীভাবে লোড হবে তা প্রভাবিত করবে। যদি একটি ওয়েবসাইট ভিন্ন ডিভাইস এবং স্ক্রিন আকার ধরে রেখে ডিজাইন না করা হয়, তবে কিছু ব্যবহারকারী ওয়েবসাইটে উপস্থাপিত সকল কন্টেন্ট দেখতে কষ্ট পেতে পারে।
যদিও রেসপন্সিভ ওয়েব ডিজাইন অনুশীলনের একটি বিস্তৃত রেঞ্জকে সমেটে—ফ্লেক্সবক্স (flexbox) ব্যবহার থেকে রিলেটিভ স্টাইল পর্যন্ত—মিডিয়া কোয়ারি যেকোনো ওয়েবসাইটের জন্য একটি অত্যন্ত গুরুত্বপূর্ণ অংশ যা ওয়েব রেসপন্সিভনেস (web responsiveness) ধরে রেখে ডিজাইন করা হয়েছে।
মিডিয়া কোয়ারি আপনাকে একটি ওয়েব পেজে স্টাইল কীভাবে দেখাবে তা সমন্বয় করতে দেয় ব্যবহার করা ডিভাইসের টাইপ, একটি ডিভাইসের অরিয়েন্টেশন (orientation), এবং ভিউপোর্ট আকার (viewport size) এর উপর ভিত্তি করে।
মিডিয়া কোয়ারি ব্যবহার করে, আপনি এলিমেন্টগুলিকে আপনার ওয়েবসাইটে ভিন্নভাবে দেখাতে পারেন ভিন্ন স্ক্রিন এবং ডিভাইসের উপর ভিত্তি করে যেগুলির মাধ্যমে একজন ব্যবহারকারী আপনার সাইট দেখছে।
মিডিয়া কোয়ারি সিনট্যাক্স (Media Query Syntax)
CSS-এ একটি মিডিয়া কোয়ারি ডিক্লেয়ার (declare) করতে, আপনাকে @media রুল ব্যবহার করতে হবে। এই রুল আপনাকে একটি CSS প্রোপার্টির ব্লক এক্সিকিউট করতে দেয় শুধু তখন যখন একটি নির্দিষ্ট শর্ত true (সত্য) হয়।
এখানে একটি CSS মিডিয়া কোয়ারির বেসিক সিনট্যাক্স:
@media media-type and (media-rule) { // CSS styles }এই মিডিয়া কোয়ারির প্রধান উপাদানগুলো হলো:
- @media ব্রাউজারকে একটি মিডিয়া কোয়ারি তৈরি করতে নির্দেশ করে।
- media-type হলো মিডিয়ার টাইপ যেটি কোডটি ব্যবহার করা হবে (যেমন: screen বা print)।
- and হলো একটি লজিক্যাল অপারেটর (logical operator) যা আমাদের ব্যবহার করতে হয় যখন আমরা একসাথে একটি মিডিয়া টাইপ এবং একটি মিডিয়া রুল নির্দিষ্ট করি।
- media-rule হলো वो স্টেটমেন্ট যা true হলে অবশ্যই CSS মিডিয়া কোয়ারিতে এক্সিকিউট হবে।
- CSS styles হলো সেসব রুল যা একটি ওয়েব এলিমেন্টে প্রযোজ্য হবে যদি media-rule true হয়।
মিডিয়া কোয়ারির সাথে চারটি মিডিয়া টাইপ ব্যবহার করা যেতে পারে। সেগুলি হলো all, print, screen, এবং speech। ডিফল্টভাবে, all মানটি ব্যবহৃত হয়, এবং একাধিক মিডিয়া টাইপ কমা (comma) দিয়ে পৃথক করে নির্দিষ্ট করা যেতে পারে।
CSS মিডিয়া রুলস (CSS Media Rules)
একটি মিডিয়া কোয়ারির সাথে প্রযোজ্য করা যেতে পারে কিছু রুল টাইপ। চলুন প্রতিটিকে আলাদা আলাদা ভাঙে দেখি।
প্রস্থ এবং উচ্চতা (Width and Height)
CSS মিডিয়া রুলসের সাথে ব্যবহৃত প্রধান রুল টাইপগুলো হলো ডিভাইস প্রস্থ এবং উচ্চতা। এই রুলগুলো আমাদের একটি ওয়েব এলিমেন্টে স্টাইল প্রযোজ্য করতে দেয় ভিউপোর্ট কন্টেইনার (viewport container) এর আকারের উপর ভিত্তি করে। viewport container পদটি একটি ওয়েব পেজের সেই এলাকাকে বোঝায় যা একজন ব্যবহারকারীর কাছে দৃশ্যমান।
width এবং height রুলগুলো একটি স্টাইল প্রযোজ্য করতে ব্যবহৃত হয় যদি ভিউপোর্ট সঠিকভাবে একটি নির্দিষ্ট আকারের সমান হয়। সুতরাং, আপনি যদি একটি ওয়েব পেজের সকল <p> ট্যাগের টেক্সট রঙ নীল করতে চান যদি ভিউপোর্ট 500px উচ্চতা থাকে, তবে আপনি নিচের রুল ব্যবহার করে এটি করতে পারেন:
@media screen and (width: 500px) { p { color: blue; } }এই রুল সকল <p> ট্যাগের টেক্সট রঙ blue সেট করে যদি ভিউপোর্টের প্রস্থ সঠিকভাবে 500px হয়।
বেশিরভাগ কেসে, যাইহোক, আপনি একটি রেঞ্জ (range) ব্যবহার করে মিডিয়া কোয়ারি প্রযোজ্য করতে চাবেন। সুতরাং, উদাহরণস্বরূপ, আপনি একটি ওয়েব পেজের ফন্ট আকার পরিবর্তন করতে চাইতে পারেন যদি ভিউপোর্ট আকার 500px এর সমান বা অধিক হয়। এখানেই min-width এবং min-height স্টাইলগুলো কাজে আসে।
আমরা যদি সকল <p> এলিমেন্টের টেক্সট রঙ নীল করতে চাই যদি ভিউপোর্ট প্রস্থ 500px এর সমান বা অধিক হয়, তবে আমরা নিচের রুল ব্যবহার করতে পারি:
@media screen and (min-width: 500px) { p { color: blue; } }এই রুল সকল <p> এলিমেন্টের টেক্সট রঙ নীল সেট করে, কিন্তু শুধু তখন যখন ভিউপোর্ট প্রস্থ 500px এর সমান বা অধিক হয়। এই মিডিয়া কোয়ারি কীভাবে কাজ করে তার পদ্ধতিটি হলো min-width: 500px কন্ডিশনটি ইভ্যালুয়েট (evaluate) করা, যা চেক করে ভিউপোর্ট প্রস্থ 500px এর সমান বা অধিক কিনা। যদি এই কন্ডিশন true হয়, তবে আমাদের p স্টাইলে থাকা রুলগুলো ওয়েব পেজে প্রযোজ্য হয়।
অরিয়েন্টেশন (Orientation)
অতিরিক্তভাবে, মিডিয়া কোয়ারি ব্যবহার করা যেতে পারে একটি ওয়েব পেজে স্টাইল প্রযোজ্য করতে একটি ডিভাইসের অরিয়েন্টেশনের উপর ভিত্তি করে।
মান লইজिए আমরা সকল h2 এলিমেন্টের টেক্সট আকার 20px সেট করতে চাই যদি ব্যবহারকারী আমাদের ওয়েব পেজটি ল্যান্ডস্কেপ মোড (landscape mode) এ দেখে। আমরা নিচের কোড ব্যবহার করে এটি করতে পারি:
@media (orientation: landscape) { h2 { font-size: 20px; } }এই রুল চেক করে ব্যবহারকারী ওয়েব পেজটি ল্যান্ডস্কেপ মোডে দেখছে কিনা, এবং সেটি true হলে সকল <h2> এলিমেন্টের ফন্ট আকার 20px সেট করে।
ডিফল্টভাবে, ডেস্কটপগুলো ল্যান্ডস্কেপ অরিয়েন্টেশন ব্যবহার করে।
CSS মিডিয়া কোয়ারি উদাহরণ (CSS Media Query Examples)
চলুন দুটি উদাহরণ মিডিয়া কোয়ারির মাধ্যমে আপনি আপনার নিজস্ব মিডিয়া কোয়ারি কীভাবে লিখতে পারেন তা ব্যাখ্যা করি।
বেসিক মিডিয়া কোয়ারি উদাহরণ: এলিমেন্ট লুকানো (Hide Element)
মান লইজिए আমরা একটি ওয়েবসাইট ডিজাইন করছি এবং আমরা একটি বক্স থাকতে চাই যা This site is in beta দেখাবে সকল মোবাইল ডিভাইসে। এই বক্সটি শুধু মোবাইল ডিভাইসে দেখাবে কারণ আমরা এখনো আমাদের মোবাইল এক্সপেরিয়েন্স টেস্ট করছি।
আমরা নিচের কোড ব্যবহার করে এই বক্সটি তৈরি করতে পারি:
<html>
<p class="betaBox">This site is in beta.</p>
</html>
<style>
.betaBox { background-color: orange; padding: 10px; }
</style>
<style>
@media screen and (max-width: 600px) {
.betaBox { display: none; }
}
</style>আমাদের কোডের আউটপুট:
আমাদের কোড ব্রেক ডাউন করা যাক। আমাদের HTML ফাইলে, আমরা একটি <p> ট্যাগ সংজ্ঞায়িত করেছি যাতে This site is in beta টেক্সট থাকে। <p> ট্যাগকে অ্যাসাইন করা ক্লাস হলো betaBox।
আমাদের CSS ফাইলে, আমরা দুটি স্টাইল নির্দিষ্ট করেছি। .betaBox স্টাইল যেকোনো এলিমেন্টের ব্যাকগ্রাউন্ড রঙ যেটার ক্লাস নাম betaBox সেটিকে অরেঞ্জ (orange) সেট করে এবং এলিমেন্টের কন্টেন্ট এবং এর বর্ডারগুলির মধ্যে 10px প্যাডিং স্পেস তৈরি করে।
পরবর্তী রুল একটি মিডিয়া কোয়ারি ব্যবহার করে। আমাদের মিডিয়া কোয়ারিতে, max-width: 600px আমাদের ব্রাউজারকে বলে যে স্টাইল রুলটি শুধু তখন প্রযোজ্য হবে যদি ভিউপোর্ট 600px থেকে সংকীর্ণ (narrower) হয়। সুতরাং, যদি একজন ব্যবহারকারী আমাদের সাইটটি একটি মোবাইল ডিভাইসে দেখে, এই স্টাইলটি ইনভোক (invoke) হবে।
আমাদের মিডিয়া কোয়ারি এক্সিকিউট হলে, display: none রুল প্রযোজ্য হয় প্রতিটি এলিমেন্টে যাদের ক্লাস নাম .betaBox।
মাল্টিপল মিডিয়া কোয়ারি উদাহরণ: ফন্ট আকার (Multiple Media Queries Example: Font Size)
আমাদের আগের উদাহরণে, আমরা শুধু একটি মিডিয়া কোয়ারি নির্দিষ্ট করেছি। যাইহোক, আপনি একটি CSS ফাইলে একাধিক মিডিয়া কোয়ারি নির্দিষ্ট করতে পারেন, যার মানে আপনি একটি ওয়েব পেজের একটি এলিমেন্টে নির্দিষ্ট স্টাইল প্রযোজ্য করতে পারেন এই बातের উপর নির্ভর করে যে একাধিক শর্তের중에 যেকোনো একটি মেট হয় কিনা।
মান লইজिए আমরা একটি ওয়েবসাইট ডিজাইন করছি এবং আমরা চাই আমাদের <h1> হেডারগুলোর ফন্ট আকার স্ক্রিন আকার অনুযায়ী পরিবর্তন হবে। এখানে वो রুলগুলো যা আমরা আমাদের সাইটে প্রযোজ্য করতে চাই:
- যদি স্ক্রিনের প্রস্থ 480px এর সমান বা কম হয়, হেডারগুলোর ফন্ট আকার 16px হবে।
- যদি স্ক্রিনের প্রস্থ 481px এর সমান এবং 600px এর সমান বা কম হয়, হেডার ফন্ট আকার 20px হবে।
- যদি স্ক্রিনের প্রস্থ 601px এর সমান বা অধিক হয়, হেডার ফন্ট আকার 24px হবে।
আমরা নিচের তিনটি মিডিয়া কোয়ারি ব্যবহার করতে পারি আমাদের ওয়েব পেজের ফন্ট আকার পরিবর্তন করতে ব্যবহারকারীর স্ক্রিন আকারের উপর ভিত্তি করে:
<html>
<h1>This is an example header.</h1>
</html>
<style>
@media screen and (max-width: 480px) { h1 { font-size: 16px; } }
@media screen and (min-width: 481px) and (max-width: 600px) { h1 { font-size: 20px; } }
@media screen and (min-width: 601px) { h1 { font-size: 24px; } }
</style>
কোড এডিটরের উপরের বাটনে ক্লিক করুন আমাদের HTML/CSS কোডের আউটপুট দেখতে।
আমাদের কোড কীভাবে কাজ করে তা ব্রেক ডাউন করা যাক। আমাদের HTML ফাইলে, আমরা একটি উদাহরণ হেডার সংজ্ঞায়িত করেছি <h1> ট্যাগ ব্যবহার করে যা This is an example header টেক্সট দেখায়।
তারপর, আমাদের CSS ফাইলে, আমরা তিনটি মিডিয়া কোয়ারি সংজ্ঞায়িত করেছি।
প্রথম মিডিয়া কোয়ারি চেক করে ব্রাউজার ভিউপোর্টের আকার 480px এর সমান বা কম কিনা (max-width: 480px ব্যবহার করে), এবং সকল <h1> এলিমেন্টের ফন্ট আকার 16px সেট করে যদি এই স্টেটমেন্ট true হয়।
দ্বিতীয় মিডিয়া কোয়ারি চেক করে ভিউপোর্টের আকার 481px এর সমান বা অধিক কিনা (min-width: 481px ব্যবহার করে) এবং 600px এর সমান বা কম কিনা (max-width: 600px ব্যবহার করে)। যদি এটি true হয়, তবে সকল <h1> এলিমেন্টের জন্য ফন্ট আকার 20px সেট করা হয়।
তৃতীয় মিডিয়া কোয়ারি চেক করে ভিউপোর্টের আকার 601px এর চেয়ে বড় কিনা (min-width: 601px ব্যবহার করে)। যদি এই রুল true হয়, তবে সকল <h1> এলিমেন্টের ফন্ট আকার 24px এ পরিবর্তন করা হয়।
মিডিয়া কোয়ারি ব্রেকপয়েন্টস (Media Query Breakpoints)
ব্রেকপয়েন্টস (Breakpoints) ব্যবহার করা হয় সেই পয়েন্টগুলো সেট করতে যেখানে একটি ওয়েবসাইট একটি মিডিয়া কোয়ারি প্রযোজ্য করবে।
যখন আপনি একটি মিডিয়া কোয়ারি ডিজাইন করছেন, তখন আপনি আপনাকে প্রশ্ন করতে পারেন: আমি আমার মিডিয়া কোয়ারির জন্য কী আকারগুলো ব্যবহার করব? এটি একটি যুক্তিসঙ্গত প্রশ্ন, কারণ আপনি যখন রেসপন্সিভ ওয়েব ডিজাইন শুরুর পর্যায়ে থাকেন, আপনি কঠিন পেতে পারেন যেসব ডিভাইসে আপনার ওয়েবসাইট রেন্ডার হওয়া উচিত সেগুলোর আকার নির্ধারণ করতে।
ইন্টারনেটে তালিকা রয়েছে যা নির্দিষ্ট স্ক্রিন আকার টার্গেট করে, যা আপনার মিডিয়া কোয়ারির ব্রেকপয়েন্টস সেট করার জন্য উপকারী হতে পারে। যাইহোক, বাহিরে যে বিস্তৃত রেঞ্জের ডিভাইস রয়েছে—যেগুলোর সবার নিজস্ব স্ক্রিন আকার এবং স্পেসিফিকেশন আছে—এই তালিকাগুলো সাধারণত সকল মূল পয়েন্ট কভার করে না।
একটি মিডিয়া কোয়ারি কখন ট্রিগার হওয়া উচিত সেটি বেছে নেওয়ার সেরা উপায় হলো আপনার ওয়েবসাইটের মাধ্যমে দেখা যে কোথায় এলিমেন্টগুলো স্কুয়াশড (squashed) বা ট্রিমড (trimmed) হয়ে যাচ্ছে। সুতরাং, আপনি যদি একটি এলিমেন্ট দেখেন যা একটি মোবাইল ডিভাইসে সম্পূর্ণরূপে দৃশ্যমান নয়, তবে আপনি জানেন যে আপনাকে একটি ব্রেকপয়েন্ট যোগ করতে হতে পারে।
তারপর, একবার আপনি এই পয়েন্টগুলো শনাক্ত করলে, আপনি কাস্টম মিডিয়া রুলস লিখতে পারেন। উদাহরণস্বরূপ, আপনি বুঝতে পারেন যে একটি <div> ট্যাগ সঠিকভাবে রেন্ডার হয় না যেসব ডিভাইসের প্রস্থ 500px থেকে কম। সেই কেসে, আপনি এই রেজোলিউশনের জন্য কাস্টম স্টাইল ডিজাইন করতে একটি মিডিয়া কোয়ারি লিখতে চাবেন।
যাইহোক, আপনাকে শুরু করতে সাহায্য করার জন্য, এখানে একটি ব্রেকপয়েন্টের তালিকা দেওয়া হলো যা আপনাকে আপনার ওয়েবসাইট ভিজিট করতে পারে এমন প্রধান ডিভাইসগুলো টার্গেট করতে সাহায্য করবে:
- অধিকাংশ ফোন:
@media screen and (max-width: 600px) {} - পোর্ট্রেট ট্যাবলেট এবং বড় ফোন:
@media screen and (min-width: 600px) {} - ল্যান্ডস্কেপ ট্যাবলেট:
@media screen and (min-width: 768px) {} - ল্যাপটপ এবং ডেস্কটপ মেশিন:
@media screen (min-width: 992px) {} - বড় ল্যাপটপ এবং ডেস্কটপ মেশিন:
@media screen (min-width: 1200px) {}
এই রুলগুলো আপনাকে আপনার মিডিয়া কোয়ারির ব্রেকপয়েন্টস নির্ধারণ করতে শুরু করতে সাহায্য করবে, কিন্তু আপনি আপনার ওয়েবসাইটের নির্দিষ্ট প্রয়োজন অনুযায়ী কিছু পরিবর্তন করতে পারেন।
উপসংহার (Conclusion)
মিডিয়া কোয়ারি CSS-এ ব্যবহার করা হয় একটি ওয়েব পেজে রেসপন্সিভ ডিজাইন যোগ করতে। মিডিয়া কোয়ারি আপনাকে একটি নির্দিষ্ট স্টাইল প্রযোজ্য করতে দেয় যখন একটি শর্ত বা শর্তের সেট মেট (met) হয়। উদাহরণস্বরূপ, একটি মিডিয়া কোয়ারি ব্যবহার করা যেতে পারে একটি ওয়েব পেজের ফন্ট আকার পরিবর্তন করতে যখন ওয়েব পেজের প্রস্থ 750px থেকে বেশি হয়।
এই টিউটোরিয়ালে, উদাহরণের রেফারেন্স নিয়ে, রেসপন্সিভ ওয়েব ডিজাইনের বেসিক, মিডিয়া কোয়ারি কীভাবে কাজ করে, এবং আপনি একটি মিডিয়া কোয়ারি কীভাবে লিখতে পারেন তা আলোচনা করা হয়েছে। এখন আপনি CSS-এ মিডিয়া কোয়ারি পেশাদার ওয়েব ডিজাইনারের মত কাজ করার জন্য প্রস্তুত।
