নতুন CSS মিডিয়া কোয়েরি রেঞ্জ সিনট্যাক্স

আমরা নির্ভর করি CSS মিডিয়া প্রশ্ন একটি লক্ষ্যযুক্ত অবস্থার উপর ভিত্তি করে উপাদান নির্বাচন এবং স্টাইল করার জন্য। এই অবস্থাটি সব ধরণের হতে পারে তবে সাধারণত দুটি শিবিরের মধ্যে পড়ে: (1) যে ধরনের মিডিয়া ব্যবহার করা হচ্ছে এবং (2) ব্রাউজার, ডিভাইস বা এমনকি ব্যবহারকারীর পরিবেশের একটি নির্দিষ্ট বৈশিষ্ট্য।

সুতরাং, বলুন আমরা একটি মুদ্রিত নথিতে নির্দিষ্ট CSS স্টাইলিং প্রয়োগ করতে চাই:

@media print {
  .element {
    /* Style away! */
  }
}

আমরা একটি নির্দিষ্ট ভিউপোর্ট প্রস্থে শৈলী প্রয়োগ করতে পারি তা ইথান মারকোটের পর থেকে CSS মিডিয়া কোয়েরিকে প্রতিক্রিয়াশীল ওয়েব ডিজাইনের একটি মূল উপাদানে পরিণত করেছে শব্দটি তৈরি. যদি ব্রাউজারের ভিউপোর্ট প্রস্থ একটি নির্দিষ্ট আকার হয়, তাহলে শৈলীর নিয়মগুলির একটি সেট প্রয়োগ করুন, যা আমাদেরকে এমন উপাদান ডিজাইন করতে দেয় যা ব্রাউজারের আকারের সাথে সাড়া দেয়।

/* When the viewport width is at least 30em... */
@media screen and (min-width: 30em) {
  .element {
    /* Style away! */
  }
}

লক্ষ্য করুন and সেখানে? এটি একটি অপারেটর যা আমাদের বিবৃতি একত্রিত করতে দেয়। সেই উদাহরণে, আমরা একটি শর্ত একত্রিত করেছি যে মিডিয়া টাইপ হল a screen এবং যে এটা min-width বৈশিষ্ট্য সেট করা হয় 30em (অথবা উপরে). আমরা ভিউপোর্ট আকারের একটি পরিসীমা লক্ষ্য করতে একই জিনিস করতে পারি:

/* When the viewport width is between 30em - 80em */
@media screen and (min-width: 30em) and (max-width: 80em) {
  .element {
    /* Style away! */
  }
}

এখন এই শৈলীগুলি একক প্রস্থের পরিবর্তে ভিউপোর্ট প্রস্থের একটি সুস্পষ্ট পরিসরে প্রযোজ্য!

কিন্তু মিডিয়া ক্যোয়ারি লেভেল 4 স্পেসিফিকেশন সাধারণ গাণিতিক তুলনা অপারেটর ব্যবহার করে ভিউপোর্ট প্রস্থের একটি পরিসীমা লক্ষ্য করার জন্য একটি নতুন সিনট্যাক্স প্রবর্তন করেছে - যেমন জিনিসগুলি <, >, এবং = - যা কম কোড লেখার সময় সিনট্যাক্টিকভাবে আরও বেশি অর্থবোধ করে।

চলুন যে কিভাবে কাজ করে খনন করা যাক.

নতুন তুলনা অপারেটর

এই শেষ উদাহরণটি হল একটি ভাল দৃষ্টান্ত যে আমরা কীভাবে "নকল" রেঞ্জগুলি ব্যবহার করে শর্তগুলিকে একত্রিত করে সাজিয়েছি and অপারেটর. মিডিয়া ক্যোয়ারি লেভেল 4 স্পেসিফিকেশনে বড় পরিবর্তন হল যে আমাদের কাছে নতুন অপারেটর রয়েছে যেগুলি মানগুলিকে একত্রিত করার পরিবর্তে তুলনা করে:

• < একটি মান থাকলে মূল্যায়ন করে কম তুলনায় অন্য মান
• > একটি মান থাকলে মূল্যায়ন করে অপেক্ষা বৃহত্তর অন্য মান
• = একটি মান থাকলে মূল্যায়ন করে সমান অন্য মান
• <= একটি মান থাকলে মূল্যায়ন করে কম বা সমান to অন্য মান
• >= একটি মান থাকলে মূল্যায়ন করে বড় বা সমান to অন্য মান

এখানে আমরা একটি মিডিয়া ক্যোয়ারী লিখতে পারি যা ব্রাউজার হলে শৈলী প্রয়োগ করে 600px প্রশস্ত বা বড়:

@media (min-width: 600px) {
  .element {
    /* Style away! */
  }
}

তুলনা অপারেটর ব্যবহার করে একই জিনিস লিখতে কেমন দেখায় তা এখানে:

@media (width >= 600px) {
  .element {
    /* Style away! */
  }
}

ভিউপোর্ট প্রস্থের একটি পরিসীমা লক্ষ্য করা

প্রায়শই যখন আমরা CSS মিডিয়া কোয়েরি লিখি, তখন আমরা তৈরি করি যাকে বলা হয় a ব্রেকপয়েন্ট — একটি শর্ত যেখানে নকশা "ব্রেক" এবং শৈলীর একটি সেট এটি ঠিক করতে প্রয়োগ করা হয়৷ একটি নকশা ব্রেকপয়েন্ট একটি গুচ্ছ থাকতে পারে! এবং সেগুলি সাধারণত দুই প্রস্থের মধ্যে থাকা ভিউপোর্টের উপর ভিত্তি করে: যেখানে ব্রেকপয়েন্ট শুরু হয় এবং যেখানে ব্রেকপয়েন্ট শেষ হয়।

এখানে আমরা ব্যবহার করে যে কাজ করেছি কিভাবে and দুটি ব্রেকপয়েন্ট মান একত্রিত করতে অপারেটর:

/* When the browser is between 400px - 1000px */
@media (min-width: 400px) and (max-width: 1000px) {
  /* etc. */
}

যখন আমরা বুলিয়ানকে খালি করি তখন আপনি একটি মিডিয়া কোয়েরি লেখা কতটা সংক্ষিপ্ত এবং সহজ তা সম্পর্কে ভাল ধারণা পেতে শুরু করেন and নতুন পরিসর তুলনা সিনট্যাক্সের পক্ষে অপারেটর:

@media (400px <= width <= 1000px) {
  /* etc. */
}

অনেক সহজ, তাই না? এবং এই মিডিয়া ক্যোয়ারীটি ঠিক কি করছে তা স্পষ্ট।

ব্রাউজার সমর্থন

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

এর একটি উদাহরণ তাকান

ডেস্কটপের মতো বড় স্ক্রীনের জন্য সুন্দরভাবে উপযুক্ত এর জন্য এখানে একটি লেআউট রয়েছে:

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

কী ঘটছে তা দেখতে, দুটি ছোট ব্রেকপয়েন্টের মধ্যে লেআউটটি কীভাবে প্রতিক্রিয়া জানায় তা এখানে। লুকানো এনএভি তালিকা পাশাপাশি প্রদর্শিত হচ্ছে title মধ্যে main মধ্যে বৃদ্ধি পায় font-size.

সেই পরিবর্তনটি ট্রিগার হয় যখন ভিউপোর্টের পরিবর্তনগুলি একটি মিডিয়ার অবস্থার সাথে অন্য মিডিয়ার সাথে মিলে যায়:

/* Base styles (any screen size) */
header {
  display: flex;
  justify-content: center;
}

header ul {
  display: none;
}

.title p {
  font-size: 3.75rem;
}

/* When the media type is a screen with a width greater or equal to 768px */
@media screen and (width >= 768px) {
  header {
    justify-content: space-between;
  }

  header ul {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
  }

  .title p {
    font-size: 5.75rem;
  }
}

আমরা কভার করেছি এমন কয়েকটি ধারণাকে একত্রিত করেছি! আমরা একটি সঙ্গে ডিভাইস টার্গেট করছি screen মিডিয়া টাইপ, নতুন মিডিয়া বৈশিষ্ট্য পরিসরের সিনট্যাক্স ব্যবহার করে ভিউপোর্টের প্রস্থ একটি নির্দিষ্ট মানের চেয়ে বেশি বা সমান কিনা তা মূল্যায়ন করা এবং দুটি শর্তের সাথে একত্রিত করা and অপারেটর।

ঠিক আছে, তাই নীচের মোবাইল ডিভাইসগুলির জন্য এটি দুর্দান্ত৷ 768px এবং এর সমান বা তার বেশি অন্যান্য ডিভাইসের জন্য 768px. কিন্তু সেই ডেস্কটপ লেআউট সম্পর্কে কী... আমরা সেখানে কীভাবে যাব?

লেআউট যতদূর যায়:

• সার্জারির main উপাদান একটি 12-কলাম গ্রিড হয়ে যায়।
• ছবিতে একটি বোতাম প্রদর্শিত হয়।
• আকার .title উপাদানের ফন্ট বাড়ে এবং চিত্রটিকে ওভারল্যাপ করে।

ধরে নিই যে আমরা আমাদের হোমওয়ার্ক করেছি এবং ঠিক কোথায় সেই পরিবর্তনগুলি ঘটতে হবে তা নির্ধারণ করেছি, আমরা সেই শৈলীগুলি প্রয়োগ করতে পারি যখন ভিউপোর্টের সাথে মেলে width যে ব্রেকপয়েন্ট জন্য শর্ত. আমরা বলতে যাচ্ছি যে ব্রেকপয়েন্ট এ হয় 1000px:

/* When the media type is a screen with a width greater or equal to 1000px  */
@media screen and (width >= 1000px) {
  /* Becomes a 12-column grid */
  main {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 250px;
  }

  /* Places the .title on the grid */
  .title {
    grid-row: 1;
  }

  /* Bumps up the font-size */
  .title p {
    font-size: 7.75rem;
  }

  /* Places .images on the grid */
  .images {
    grid-row: 1 / span 2;
    align-self: end;
    position: relative;
  }

  /* Displays the button */
  .images .button {
    display: block;
    position: absolute;
    inset-block-end: 5rem;
    inset-inline-end: -1rem;
  }
}

এটির সাথে একটি খেলা করুন:

কেন নতুন সিনট্যাক্স বোঝা সহজ

নীচের লাইন: তুলনা অপারেটরকে আলাদা করা সহজ (যেমন width >= 320px) এর মধ্যে পার্থক্য বলতে হবে min-width এবং max-width ব্যবহার করে and অপারেটর. মধ্যে nuance অপসারণ দ্বারা min- এবং max-, আমাদের একক আছে width কাজ করার পরামিতি এবং অপারেটররা আমাদের বাকিটা বলে।

সেই সিনট্যাক্সগুলির চাক্ষুষ পার্থক্যের বাইরে, তারা কিছুটা ভিন্ন জিনিসও করছে। ব্যবহার min- এবং max- গাণিতিক তুলনা অপারেটর ব্যবহার করার সমতুল্য:

• max-width সমান <= অপারেটর (যেমন (max-width: 320px) হিসাবে একই (width <= 320px)).
• min-width সমান >= অপারেটর (যেমন (min-width: 320px) হিসাবে একই (width >= 320px)).

লক্ষ্য করুন যে কোনটিই এর সমতুল্য নয় > or < অপারেটর।

মিডিয়া কোয়েরি লেভেল 4 স্পেসিফিকেশন থেকে সরাসরি একটি উদাহরণ টানুন যেখানে আমরা ব্রেকপয়েন্টের উপর ভিত্তি করে বিভিন্ন শৈলী সংজ্ঞায়িত করি 320px ভিউপোর্ট প্রস্থ ব্যবহার করে min-width এবং max-width:

@media (max-width: 320px) { /* styles for viewports = 320px */ }

উভয় মিডিয়া ক্যোয়ারী একটি শর্তের সাথে মেলে যখন ভিউপোর্ট প্রস্থ সমান হয় 320px. আমরা যা চাই তা ঠিক নয়। আমরা চাই পারেন একই সময়ে উভয়ের পরিবর্তে সেই শর্তগুলির মধ্যে একটি। সেই অন্তর্নিহিত পরিবর্তনগুলি এড়াতে, আমরা এর উপর ভিত্তি করে ক্যোয়ারীতে একটি পিক্সেল যোগ করতে পারি min-width:

@media (max-width: 320px){ /* styles for viewports = 321px */ }

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

একটি সমাধান হল দ্বিতীয় তুলনামূলক স্কেল মান (দশমিক বিন্দুর পরে সংখ্যা) বৃদ্ধি করা 320.01px:

@media (max-width: 320px) { /* styles for viewports = 320.01px */ }

কিন্তু এটি নির্বোধ এবং অত্যধিক জটিল হয়ে উঠছে। এই কারণেই নতুন মিডিয়া বৈশিষ্ট্য পরিসীমা সিনট্যাক্স আরও উপযুক্ত পদ্ধতি:

@media (width <= 320px) { /* styles for viewports  320px) { /* styles for viewports > 320px */ }

মোড়ক উম্মচন

উফ, আমরা CSS মিডিয়া ক্যোয়ারীতে ভিউপোর্ট প্রস্থ পরিসীমা টার্গেট করার জন্য নতুন সিনট্যাক্সে অনেক জায়গা কভার করেছি। এখন যেহেতু মিডিয়া ক্যোয়ারি লেভেল 4 স্পেসিফিকেশন সিনট্যাক্সটি চালু করেছে এবং এটি ফায়ারফক্স এবং ক্রোমিয়াম ব্রাউজারে গৃহীত হয়েছে, আমরা নতুন তুলনা অপারেটরগুলি ব্যবহার করতে এবং এগুলি ছাড়াও অন্যান্য পরিসরের মিডিয়া বৈশিষ্ট্যগুলির সাথে একত্রিত করতে সক্ষম হয়েছি। width, ভালো মত height এবং aspect-ratio

এবং এটি লেভেল 4 স্পেসিফিকেশন প্রবর্তিত নতুন বৈশিষ্ট্যগুলির মধ্যে একটি, একটি বরাবর আমরা ব্যবহারকারীর পছন্দের উপর ভিত্তি করে একগুচ্ছ প্রশ্ন করতে পারি. এটা সেখানে শেষ হয় না! চেক আউট CSS মিডিয়া প্রশ্নের সম্পূর্ণ নির্দেশিকা একটি লুকোচুরি জন্য মিডিয়া কোয়েরি লেভেল 5-এ কী অন্তর্ভুক্ত করা যেতে পারে.