في هذا الدرس 5تصفّح المواضيع
بينما تمنع max-width تمدد الصناديق المفرط في الشاشات الكبيرة، يظهر التحدي المعاكس حين تضيق العناصر أكثر من اللازم؛ فزر قصير يحمل كلمة «تم» أو OK يبدو ضئيلاً ومربكاً للمس بجوار الأزرار الأطول، والبطاقات ذات النسب المئوية قد تنضغط حتى تنكسر كل كلمة في سطر منفرد.
تضع خاصية min-width حداً أفقياً أدنى يحمي العنصر من هذا الانضغاط؛ فلا يقل عرضه أبداً عن القيمة المحددة، مع بقائه حراً تماماً للتمدد التلقائي متى زاد طول النص بداخله.
يمكنك ضبط قيمة min-width بوحدات الطول المطلقة أو النسبية للخط بحسب طبيعة العنصر الذي تنسقه:
- وحدة البكسل
px: يمنح التصريحmin-width: 120pxأزرار الإجراءات مساحة نقر مريحة ومتزنة حتى لو كان نص الزر من حرفين فقط. - وحدة الجذر
rem: يكبّر التصريحmin-width: 8remالحد الأدنى تناسبياً عندما يرفع الزائر حجم الخط الأساسي في متصفحه. - وحدة المحرف
ch: يضمن التصريحmin-width: 16chعلى حقل<input>مساحة مرئية كافية لكتابة الرموز أو أسماء المستخدمين بوضوح.
.action-btn {
min-width: 120px;
padding: 10px 16px;
background-color: #7750b2;
color: #ffffff;
border: 2px solid #5b3894;
}إلى جانب وحدات الطول الرقمية، تقبل خاصية min-width النسب المئوية المحسوبة من عرض العنصر الأب وكذلك كلمات التحجيم الذاتي المرتبطة بالمحتوى:
- النسبة المئوية
%: يضمن التصريحmin-width: 40%ألا يقل عرض اللوحة عن أربعين بالمئة من عرض حاويتها الأب. - الكلمة المفتاحية
min-content: تضبط الحد الأدنى عند عرض أطول كلمة غير قابلة للانقسام داخل الصندوق فلا تخرج الحروف عن حدود الإطار. - الكلمة المفتاحية
fit-content: تحتضن المحتوى القصير على قدر حجمه تماماً مع لف السطور الطويلة قبل تجاوز المساحة المتاحة في الأب.
.word-safe-box {
width: 90px;
min-width: min-content;
padding: 12px;
border: 2px solid teal;
}عندما تجتمع الخصائص الثلاث width و max-width و min-width على عنصر واحد بقيم متعارضة، يحسمها المتصفح وفق خوارزمية قياسية من خطوتين تمنح الكلمة الأخيرة دائماً لخاصية min-width:
- أولاً: إذا زادت قيمة
widthعنmax-width، تُخفَّض مبدئياً إلى سقفmax-width. - ثانياً: إذا كانت النتيجة أصغر من
min-width، تتفوقmin-widthعلى كل منwidthوmax-widthمعاً!
على سبيل المثال، عند اجتماع width: 200px مع max-width: 250px و min-width: 320px يصبح العرض النهائي المحسوب 320px. اختبر سلم الأولوية عملياً في المختبر التفاعلي والمثال التاليين:
.conflict-card {
width: 180px;
max-width: 220px;
min-width: 320px;
border: 2px solid #7750b2;
}متى ظهر عنصر بعرض أكبر أو أصغر من قيمة width المكتوبة له، افتح أدوات المطور DevTools بمفتاح F12 وحدد العنصر ثم انتقل إلى تبويب Computed؛ فهناك ستشاهد العرض النهائي بالبكسل وتكتشف فوراً ما إذا كانت min-width أو max-width قد حسمت القياس.
راجع الجدول الختامي المقارن الذي يجمع خصائص العرض الأفقية الثلاث جنباً إلى جنب:
| الخاصية | القيمة الافتراضية | الدور التخطيطي الرئيسي | مرتبة الأولوية عند التعارض |
|---|---|---|---|
width | auto | تحديد العرض المستهدف المفضل للصندوق | الثالثة — تخضع للسقف الأعلى والحد الأدنى |
max-width | none | وضع سقف أعلى يمنع التمدد والفيضان | الثانية — تقيد width وتخضع لـ min-width |
min-width | auto | حماية العنصر من الانضغاط المفرط | الأولى — تتفوق على max-width و width |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلّمت في ملخص الدرس حماية الأزرار والبطاقات بخاصية min-width بوحدات الطول والنسب المئوية وكلمة min-content، وتحققت من تفوقها القياسي عند تعارض الأبعاد. وفي الخطوة التالية ستنتقل إلى درس «دالة calc في لغة CSS» لدمج الوحدات المختلفة في معادلات رياضية مباشرة.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 min-width خاصية min-width
- خاصية تحجيم في CSS تفرض الحد الأفقي الأدنى المسموح لصندوق العنصر مع إبقائه حراً للتمدد عند زيادة محتواه.
- للمراجعة
- 02 min-content قيمة min-content
- كلمة تحجيم ذاتي في CSS تساوي أضيق عرض يستوعب أطول كلمة غير قابلة للانكسار داخل الصندوق دون خروجها عن الإطار.
- للمراجعة
- 03 fit-content قيمة fit-content
- كلمة تحجيم ذاتي تحتضن المحتوى القصير على قدر حجمه مع لف النصوص الطويلة قبل تجاوز المساحة المتاحة في الأب.
- للمراجعة
- 04 Sizing Priority Cascade سلم أولوية الأبعاد
- الترتيب القياسي لحسم التعارض في W3C حيث تتفوق min-width على max-width وتقيد الاثنتان معاً قيمة width الأساسية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 W3C W3C
- World Wide Web Consortium
- رابطة الويب العالمية التي تضع المواصفات الرسمية لقواعد تحجيم الصناديق وحسم تعارض الأبعاد في CSS.
- للمراجعة
- 02 UI UI
- User Interface
- واجهة المستخدم المكونة من الأزرار والحقول والبطاقات التي تحميها min-width في التصاميم العربية والإنجليزية.
- للمراجعة
- 03 CSSOM CSSOM
- CSS Object Model
- نموذج كائنات الأنماط الذي يعتمد عليه المتصفح لحساب العرض النهائي بالبكسل في لوحة Computed.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
نسّق ثلاثة أزرار تحمل نصوصاً قصيرة وطويلة باستخدام min-width بقيمة 120px وحشوة 10px 16px لضمان عدم انضغاط الأزرار القصيرة.
-
طبّق width بقيمة 180px و max-width بقيمة 220px و min-width بقيمة 320px على بطاقة واحدة وافحص تبويب Computed للتأكد من فوز 320px.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.