مانويل ماتوزوفيتش: ماكس () خداع

عن طريق أ بعد مانويل ماتوزوفيتش وهو عن طريق عرض توضيحي تماني عفيف.

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

ستقدم لنفسك معروفًا لقراءة تحليل مانويل لكل ما يحدث هنا ، لكنه يعمل بشكل أساسي بما يعادل هذا النحو الأطول:

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

…أين:

• ماكس () يقبل قائمة مفصولة بفواصل لقيم CSS الرقمية ، حيث تكون القيمة المطبقة هي الأكبر (أو بتنسيق يضعها MDN، "الأكثر إيجابية") في المجموعة.
• 0px هي القيمة الأولى في المجموعة ، مما يضمن أن أصغر قيمة ستكون دائمًا أكبر من صفر بكسل.
• (100% - 64rem) هي "القيمة" الثانية في المجموعة ، ولكن يتم التعبير عنها كعملية حسابية (لاحظ ذلك calc() غير ضروري) الذي يطرح ال max-width العنصر (64rem) من كل ما هو متاح width (100%). ما تبقى هو المساحة التي لم يشغلها العنصر.
• ((100% - 64rem) / 2)) يقسم تلك المساحة المتبقية بالتساوي لأننا نقسمها بين الحدود المضمنة للعنصر.
• max(0px, ((100% - 64rem) / 2)) يقارن 0px و (100% - 64rem) / 2). تم استخدام أكبر قيمة. ستكون هذه نتيجة المعادلة في معظم الحالات ، ولكن إذا 64rem أكبر من القيمة المحسوبة لممتلئ العنصر 100% width ، فسيتم قفل هذه القيمة عند الصفر للتأكد من أنها لن تؤدي أبدًا إلى قيمة سالبة.
• margin-inline هي الخاصية التي تعينها القيمة الفائزة ، والتي تطبق الهامش على الجوانب المضمنة من العنصر - وهذا هو الاختصار المنطقي المكافئ لتعيين نفس القيمة إلى margin-left و margin-right الخصائص الفيزيائية.

إنها نفس نوع الفكرة شارك كريس منذ فترة يستخدم CSS max()وظيفة لحل "مشكلة داخلية" - حاوية تدعم لون خلفية به تجاوز الهوامش الكامل مع تقييد المحتوى الموجود بداخلها padding.

max(), calc(), margin-inline... هناك الكثير من CSS الحديثة! ومانويل على حق في منتصف الطريق الكتابة عن هذه الميزات وغيرها من ميزات CSS الحديثة على مدار 100 يوم.

رابط مباشر →