ম্যানুয়েল মাতুজুভিচ: max() চালাকি

উপায় দ্বারা a ম্যানুয়েল মাতুজোভিচের পোস্ট যা দ্বারা একটি ডেমো উপায় দ্বারা হয় তেমানি আফিফ.

.wrapper {
  margin-inline: max(0px, ((100% - 64rem) / 2)); 
}

আপনি এখানে যা ঘটছে তার সমস্ত ম্যানুয়ালের ভাঙ্গন পড়ার জন্য আপনি নিজের পক্ষে কাজ করবেন, তবে এটি মূলত এই দীর্ঘ সিনট্যাক্সের সমতুল্য কাজ করে:

.wrapper {
  max-width: 64rem;
  margin: 0 auto;
  width: 100%;
}

…কোথায়:

• সর্বোচ্চ() সিএসএস সাংখ্যিক মানের একটি কমা দ্বারা পৃথক করা তালিকা গ্রহণ করে, যেখানে প্রয়োগ করা মানটি সবচেয়ে বড় (বা হিসাবে MDN এটা রাখে, "সবচেয়ে ইতিবাচক") সেটের মধ্যে একটি।
• 0px সেটের প্রথম মান, এটি নিশ্চিত করে যে ক্ষুদ্রতম মানটি সর্বদা শূন্য পিক্সেলের চেয়ে বড় হবে।
• (100% - 64rem) এটি সেটের দ্বিতীয় "মান", তবে এটি একটি গণনা হিসাবে প্রকাশ করা হয় (মনে রাখবেন যে calc() অপ্রয়োজনীয়) যা বিয়োগ করে max-width উপাদানের (64rem) এর সম্পূর্ণ উপলব্ধ থেকে width (100%) কি বাকি আছে উপাদান দ্বারা নেওয়া হয় না স্থান.
• ((100% - 64rem) / 2)) সেই অবশিষ্ট স্থানটিকে সমানভাবে ভাগ করে যেহেতু আমরা এটিকে উপাদানের ইনলাইন সীমানার মধ্যে ভাগ করছি।
• max(0px, ((100% - 64rem) / 2)) তুলনা 0px এবং (100% - 64rem) / 2). সবচেয়ে বড় মান ব্যবহার করা হয়। যে অধিকাংশ ক্ষেত্রে সমীকরণের ফলাফল হবে, কিন্তু যদি 64rem উপাদানটির পূর্ণের গণনাকৃত মানের চেয়ে কখনও বেশি 100% প্রস্থ, এটি সেই মানটিকে শূন্যে লক করবে যাতে এটি কখনই নেতিবাচক মান না দেয়।
• margin-inline সেই সম্পত্তি যা বিজয়ী মান সেট করে, যা উপাদানের ইনলাইন দিকগুলিতে মার্জিন প্রয়োগ করে — এটি একই মান সেট করার সমতুল্য লজিক্যাল শর্টহ্যান্ড margin-left এবং margin-right শারীরিক বৈশিষ্ট্য।

এটা ধারণা একই সাজানোর ক্রিস কিছুক্ষণ আগে শেয়ার করেছেন যে CSS ব্যবহার করে max()সমাধান করার জন্য ফাংশন "অভ্যন্তরীণ সমস্যা" — একটি ধারক যা একটি ফুল-ব্লিড ব্যাকগ্রাউন্ড কালার সমর্থন করে যখন এর ভিতরের বিষয়বস্তুকে সীমাবদ্ধ করে padding.

max(), calc(), margin-inline… এটা অনেক নতুন CSS! আর ম্যানুয়েল ঠিক মাঝখানে স্ম্যাক ড্যাব এইগুলি এবং অন্যান্য আধুনিক CSS বৈশিষ্ট্যগুলি 100 দিনেরও বেশি সময় ধরে লেখা.

সরাসরি লিঙ্ক →