এই নতুন সিনট্যাক্স কীভাবে মিডিয়া প্রশ্নগুলিকে স্ট্রিমলাইন করতে পারে তা খুঁজে বের করুন৷
মিডিয়া কোয়েরি সক্রিয় প্রতিক্রিয়াশীল ডিজাইন , এবং পরিসর বৈশিষ্ট্যগুলি যা ভিউপোর্টের সর্বনিম্ন এবং সর্বাধিক আকার পরীক্ষা করতে সক্ষম করে সেগুলি প্রায় 80% সাইট দ্বারা ব্যবহৃত হয় যা মিডিয়া কোয়েরি ব্যবহার করে। মিডিয়া ক্যোয়ারি লেভেল 4 স্পেসিফিকেশন এই রেঞ্জ কোয়েরির জন্য একটি উন্নত সিনট্যাক্স অন্তর্ভুক্ত করে।
নিম্নলিখিত উদাহরণগুলি দেখায় যে এটি কীভাবে আপনার প্রশ্নগুলিকে প্রবাহিত করতে পারে৷
ন্যূনতম ভিউপোর্ট প্রস্থের জন্য একটি সাধারণ মিডিয়া ক্যোয়ারী টেস্টিং, নিম্নরূপ লেখা হবে:
@media (min-width: 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
নতুন সিনট্যাক্স একটি তুলনা অপারেটর ব্যবহারের জন্য অনুমতি দেয়:
@media (width >= 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
সর্বাধিক প্রস্থের জন্য পরীক্ষা করা হচ্ছে:
@media (max-width: 30em) {
// Styles for viewports with a width of 30em or less.
}
এবং, স্তর 4 সিনট্যাক্স ব্যবহার করে সংস্করণ:
@media (width <= 30em) {
// Styles for viewports with a width of 30em or less.
}
এই সিনট্যাক্সে প্রশ্নগুলিকে স্ট্রিমলাইন করার সম্ভাবনা রয়েছে, বিশেষ করে যখন দুটি প্রস্থের মধ্যে পরীক্ষা করা হয়। নিম্নলিখিত উদাহরণে, মিডিয়া ক্যোয়ারী ন্যূনতম 400px প্রস্থ এবং সর্বাধিক 600px প্রস্থ সহ একটি ভিউপোর্টের জন্য পরীক্ষা করে৷
@media (min-width: 400px) and (max-width: 600px) {
// Styles for viewports between 400px and 600px.
}
এটি নতুন সিনট্যাক্সে এইভাবে পুনরায় লেখা যেতে পারে:
@media (400px <= width <= 600px ) {
// Styles for viewports between 400px and 600px.
}
আপনি যে বৈশিষ্ট্যটি পরীক্ষা করছেন, এই ক্ষেত্রে width , দুটি মানের মধ্যে যায়।
মিডিয়া ক্যোয়ারীগুলিকে কম ভার্বোস করার পাশাপাশি, নতুন সিনট্যাক্সে নির্ভুলতার সুবিধা রয়েছে। min- এবং max- কোয়েরিগুলি নির্দিষ্ট মানগুলির অন্তর্ভুক্ত, উদাহরণস্বরূপ min-width: 400px পরীক্ষা। নতুন সিনট্যাক্স আপনাকে আপনি কি বোঝাতে চাইছেন সে সম্পর্কে আরও স্পষ্ট হতে দেয় এবং প্রশ্নগুলির সংঘর্ষের সম্ভাবনা এড়াতে দেয়।
যে ব্রাউজারগুলি এখনও এটি প্রয়োগ করেনি তাদের জন্য অ্যাকাউন্টিং করার সময় নতুন পরিসরের সিনট্যাক্স ব্যবহার করতে, একটি পোস্টসিএসএস প্লাগইন রয়েছে যা আপনার স্টাইলশীটে নতুন সিনট্যাক্সকে পুরানোটিতে পুনরায় লিখবে৷