👩🏾‍⚖️ ☪️ 👨🏼‍🎨 وظائف CSS دقيقة () و max () و clamp () 🤢 👐🏻 👨🏾‍🎓

دعم لCSS مقارنة وظائف min()، max()و clamp()ظهرت في فايرفوكس على 8 أبريل 2020. هذا يعني أن هذه الميزات مدعومة الآن في جميع المتصفحات الرئيسية. تعمل ميزات CSS هذه على توسيع قدرتنا على إنشاء تخطيطات ديناميكية وتصميم مكونات أكثر مرونة من ذي قبل. يمكن استخدامها لضبط حجم عناصر الحاوية والخطوط والمسافات البادئة والمزيد. صحيح أن مصمم الويب الذي يقوم بإنشاء تخطيطات الصفحة مع مراعاة إمكانية استخدام هذه الوظائف المدهشة قد يحتاج إلى تعلم التفكير بطريقة جديدة. أريد اليوم أن أتحدث عن ميزات هذه الوظائف ، وأن أشرح كل شيء قد يكون غير مفهوم فيها ، وأن أعطي أمثلة عملية على استخدامها.

دعم المتصفح

أولا ، أود أن أتطرق إلى دعم المتصفح للوظائف min()، max()و clamp(). ومع ذلك ، ظهرت مؤخرا نسبيا. وتجدر الإشارة إلى أن وظائف min()و max()تستخدم نفس المستوى من الدعم المتصفح.

دعم وظيفة min () (تبدو معلومات الدعم max () أيضًا)

فيما يلي معلومات حول دعم الوظيفةclamp().

وظيفة دعم المشبك ()

وظائف مقارنة CSS

مواصفات CSS يخبرنا أن هناك مقارنة وظائف min()، max()و clamp()تسمح لنا لمقارنة القيم من التعبيرات وتمثل واحدة منهم. تعتمد القيمة التي يتم إرجاعها بواسطة دالة على ميزاتها. استكشف هذه الميزات.

دالة Min ()

min()تأخذ الدالة قيمة واحدة أو أكثر ، مفصولة بفاصلة ، وترجع أصغرها. تُستخدم هذه الوظيفة للحد من قيم خصائص CSS إلى أقصى مستوى محدد بدقة.

خذ بعين الاعتبار المثال التالي. نحتاج إلى أقصى عرض للعنصر حتى لا يتجاوز 500px.

.element {
    width: min(50%, 500px);
}

بعرض إطار العرض 1150 بكسل ، وهو أكبر من 1000 بكسل ، سيكون للعنصر عرض 500 بكسل.

وسيحتاج المتصفح إلى تحديد أصغر قيمة من50%و500px. يؤثر عرض إطار العرض على نتيجة التحديد. إذا كان 50٪ من عرض إطار العرض أكبر من500px، فسيتم تجاهل هذه القيمة وستعود الوظيفة500px.

وبخلاف ذلك ، إذا كان 50٪ من عرض إطار العرض أقل500px، فسيتم استخدام القيمة الناتجة لضبط عرض العنصر. ما رأيك ، في أي عرض من مساحة العرض لن يتجاوز 50 ٪ من عرضه500px؟ هذا واضح1000px. مع هذا العرض ، ستكون كلتا القيمتين اللتين تم تمريرهما إلى الدالة هي نفسها. إذا كان عرض إطار العرض أقل1000px، ثم سيتم استخدامه لضبط عرض العنصر.

إذا كان عرض إطار العرض أقل من 1000 بكسل ، فسيتم استخدام 50٪ من هذا العرض لضبط عرض العنصر.

آمل أن أتمكن من شرح كل ذلك بوضوح. فكرت في الوظيفة لفترة طويلةmin()، أحاول اختراق جوهرها. لذلك ، أود أن أتحدث بوضوح عن ذلك. إليك مقطع فيديو يوضح نتائج استخدام هذه الميزة.

يقتصر عرض العنصر على 500 بكسل. في ما

يلي مثال تفاعلي يُستخدم لتسجيل الفيديو أعلاه. لرؤية الوظيفةmin()في العمل ، حاول تغيير حجم نافذة المتصفح.

الدالة max ()

max()تأخذ الدالة قيمة واحدة أو أكثر ، مفصولة بفواصل ، وترجع أكبرها. تُستخدم هذه الوظيفة لإصلاح القيمة الدنيا التي يمكن أن تأخذها خاصية CSS.

في المثال التالي ، نحتاج إلى أن يكون عرض العنصر على الأقل 500px.

.element {
    width: max(50%, 500px);
}

إذا كان 50٪ من عرض إطار العرض أكبر من 500 بكسل - سيتم استخدام هذه القيمة لضبط عرض العنصر.

يحتاج المستعرض إلى تحديد القيمة القصوى من50%و500px. يعتمد الاختيار على عرض إطار العرض. إذا كان 50٪ من عرض إطار العرض أقل من500px، فسوف يتجاهل المتصفح هذه القيمة ويستخدم القيمة500px.

إذا كان 50٪ من عرض إطار العرض أكبر500px، فسيتم تعيين عرض العنصر مساوياً لهذه القيمة. كما ترى ، الوظيفةmax()هي عكس الوظيفةmin().

لفهم هذا بشكل أفضل ، ألق نظرة على هذا العرض التفاعلي.

وظيفة المشبك ()

clamp()تسمح لك الوظيفة بتحديد نطاق التباين لقيمة معينة من خلال تعيين حدودها الدنيا والعليا. يستغرق ثلاث معلمات: القيمة الدنيا ، والقيمة المحسوبة (الموصى بها) ، والقيمة القصوى. إذا كانت القيمة المحسوبة لا تتجاوز الحدود المحددة بالحد الأدنى والحد الأقصى للقيم التي تم تمريرها إلى الدالة ، فسوف تُرجع هذه القيمة.

هنا مثال.

.element {
    width: clamp(200px, 50%, 1000px);
}

هنا نقوم بتعديل عرض العنصر ، والذي لا ينبغي أن يكون أقل 200pxوأكثر 1000px. إذا 50%لم تتجاوز القيمة في هذه الحدود ، يتم استخدام هذه القيمة. هنا هو كيف يبدو.

إذا كان 50٪ من عرض إطار العرض يقع في نطاق 200 بكسل -1000 بكسل - سيتم استخدام هذه القيمة لتعيين عرض العنصر. في هذه الحالة ، يبلغ حجمها 575 بكسل.

دعونا نفحص هذا المثال:

لن يكون عرض العنصر أصغر أبدًا 200px.
سيتم استخدام المعلمة الثانية للدالة ، المعينة كـ 50%، فقط إذا كان عرض إطار العرض أكبر 400pxوأصغر 2000px.
عرض العنصر لن يتجاوز 1000px.

ونتيجة لذلك ، يمكننا القول أن الوظيفة clamp()تتيح لك تحديد النطاق الذي يمكن أن تتغير فيه القيمة المحسوبة المرسلة إليها.

هنا يمكنك تجربة الصفحة المصممة باستخدام هذه الوظيفة.

are كيف يتم حساب نتائج وظيفة المشبك ()؟

يمكنك أن تجد معلومات عن MDN أنه عندما يتم استخدام وظيفة حيث بلغت قيمة خاصية CSS clamp()، وهو ما يعادل بناء فيها max()و تطبق وظائف min(). نلقي نظرة على المثال التالي:

.element {
    width: clamp(200px, 50%, 1000px);
    /*  -    */
    width: max(200px, min(50%, 1000px));
}

50%تعتمد القيمة على عرض منطقة عرض المستعرض. تخيل أن عرض إطار العرض هو 1150px.

.element {
    width: max(200px, min(50%, 1000px));
    /* ,      1150px */
    width: max(200px, min(575px, 1000px));
    /*   */
    width: max(200px, 575px);
    /*   */
    width: 575px;
}

ontالسياق مهم

تعتمد القيمة المحسوبة على السياق. إذا حددت قيمة محسوبة ، فيمكنك استخدام وحدات قياس مختلفة: %، em، rem، vw/vh. حتى إذا تم التعبير عن القيمة كنسبة مئوية ، عند حسابها ، يمكن استخدام عرض إطار العرض - إذا كان العنصر في العلامة <body>، أو عرض عنصر آخر هو حاوية العنصر.

ionsتعابير الرياضيات

تجدر الإشارة إلى أنه عند استخدام دالة ، clamp()يمكنك تمرير تعبيرات رياضية إليها ، مما يحفظنا من الاضطرار إلى استخدام دالة calc(). تخبرنا المواصفات أنه clamp()يمكن استخدام التعبيرات الرياضية الكاملة في كل من الحجج . لذلك ، ليست هناك حاجة لوظائف متداخلة calc(). بالإضافة إلى ذلك ، إذا كنت بحاجة إلى تطبيق العديد من القيود على القيمة النهائية ، فيمكنك تمرير أكثر من وسيطتين إلى الدالة.

نلقي نظرة على المثال التالي:

.type {
  /*  font-size ,   12px  100px */
  font-size: clamp(12px, 10 * (1vw + 1vh) / 2, 100px);
}

ماذا ستتغير وظائف مقارنة CSS في طريقة تصميم تخطيطات الصفحة؟

غالبًا ما يحدث أن المصمم ، الذي يصمم صفحة ، يركز على كل من الأجهزة المحمولة وأجهزة سطح المكتب ، معتمداً على سيناريوهين لاستخدامها. وعند العمل في بعض المشاريع ، يجب مراعاة المزيد من السيناريوهات.

أرى هذا الموقف كما هو موضح أدناه.

الطابق العلوي هو كيفية تصميم الصفحات اليوم. فيما يلي ما يمكنك توقعه في المستقبل. الجزء

العلوي من الرسم التوضيحي هو كيفية تصميم الصفحات هذه الأيام. هنا يمكنك رؤية عدة خطوات تمثل مناطق عرض مختلفة يجب تصميم الصفحة عليها. قد تمثل هذه الخطوات ، على سبيل المثال ، قيمة خاصية. يُظهر الجزء السفلي من الرسم التوضيحي نطاقًا مستمرًا من القيم التي يمكن الحصول عليها عن طريق تحديد هذه القيمة بحد أدنى وحد أقصى معين. أعتقد أنه في المستقبل ، على سبيل المثال ، عند تعيين حجم الخط ، سيقوم المصممون بشيء مماثل للخط الموضح أدناه.

القيم الدنيا والموصى بها والحد الأقصى للعقار

بالنسبة لي ، هذا رائع. أنا معجب بفكرة العمل على المشاريع التي تحتاج مكوناتها إلى بعض المرونة. بالطبع ، لا يجب أن تكون جميع المكونات ديناميكية ، ولكن قد يكون بعضها جيدًا.

استخدم حالات

bar الشريط الجانبي ومنطقة الصفحة الرئيسية

على اليسار توجد اللوحة الجانبية. توجد في الجانب الأيمن الصفحة الرئيسية للصفحة ،

وعادةً ما تكون اللوحات الجانبية للصفحات ذات عرض ثابت ، ويتم ضبط عرض المناطق الرئيسية بمرونة على منطقة العرض. يمكننا توسيع إمكانيات الشريط الجانبي وجعله أكثر ديناميكية ، وجعله ، مع مساحة عرض كبيرة بما فيه الكفاية ، يشغل مساحة أكبر. لتحقيق ذلك ، تحتاج إلى تحديد حجم الحد الأدنى لعرض الشريط الجانبي باستخدام الوظيفةmax().

خذ بعين الاعتبار المثال التالي.

.wrapper {
    display: flex;
}

aside {
  flex-basis: max(30vw, 150px);
}

main {
  flex-grow: 1;
}

عرض الحد الأدنى من العنصر asideسيكون 150px. سوف يستغرق الحجم 30vwإذا كان عرض إطار العرض أكبر 500px(500 * 30٪ = 150).

→ هنا مثال

font حجم خط الرأس

تعديل حجم خط الرأس المرن

يعد البرنامج النصي الممتاز لاستخدام الوظيفةclamp()هو تعديل حجم خط الرأس المرن. تخيل أننا نحتاج إلى الحد الأدنى لحجم خط الرأس16px، والحد الأقصى -50px. بفضل استخدام الوظيفة ،clamp()يمكننا أن نجعل حجم الخط ضمن هذه القيم دون أن يكون أقل أو أعلى.

.title {
    font-size: clamp(16px, 5vw, 50px);
}

الوظيفة clamp()هي الحل الأمثل للمشكلة المذكورة أعلاه. يسمح لك بتعيين حجم الخط بحيث يبقى النص سهل الوصول إليه وسهل القراءة بأحجام مختلفة من منطقة العرض. إذا كنت هنا ، على سبيل المثال ، تستخدم الوظيفة min()، فسوف نفقد السيطرة على حجم الخط على الصفحة المعروضة في مناطق العرض الصغيرة.

.title {
    font-size: min(3vw, 24px); /*  ,     */
}

فيما يلي توضيح لهذه الفكرة.

يؤدي استخدام الدالة min () إلى جعل النص يبدو صغيرًا جدًا على الشاشة الصغيرة.

على شاشة الجهاز المحمول ، يكون حجم الخط صغيرًا جدًا. لذلك ، لا يوصى باستخدام دالة فقط لإعداد أحجام الخطوطmin(). بالطبع ، يمكن إعادة تكوين حجم الخط باستخدام استعلام وسائط ، ولكن بعد ذلك يتم فقدان معنى استخدام وظائف مقارنة CSS تمامًا.

كما سبق ذكره ،min()يمكن استخدام دالة داخل دالةmax(). هذا يسمح لك بإعادة إنتاج ميزات الوظيفةclamp().

.title {
    font-size: max(16px, min(10vw, 50px));
}

هنا يمكنك تجربة مثال.

أود أن أشير إلى أنه بعد المناقشة على تويتر تبين أنه ليس من الصحيح تمامًا استخدام 10vwحجم الخط كقيمة محسوبة. وبالتحديد ، نتحدث عن حقيقة أن هذا سيسبب مشاكل في إمكانية الوصول إذا قام المستخدم بتكبير المتصفح.

لذلك ، من الأفضل القيام بذلك:

.title {
    font-size: clamp(16px, (1rem + 5vw), 50px);
}

هنا ، يتم تحديد التعبير بحجم الخط المحسوب (1rem + 5vw). هذا يحل المشكلة.

ers رؤوس زخرفية

يتم عرض العنوان الشفاف الزخرفي باستخدام خط كبير جدًا.

هل ترى نصًا نصف شفافًا كبيرًا أسفل العنوان؟ هذا عنوان زخرفي ، يجب أن تتوافق أبعاده مع حجم إطار العرض. لتكوين مثل هذا الرأس ، يمكنك استخدام الدالةmax()بقيمة معبر عنها بوحدات القياس التي تم تمريرها إليهاvw. سيجعل ذلك من الممكن التأكد من أن حجم الخط لا يقل عن القيمة المحددة.

.section-title:before {
  content: attr(data-test);
  font-size: max(13vw, 50px);
}

→ هنا مثال عملي

▍ إخراج التدرجات على نحو سلس في مناطق العرض المختلفة

عند ضبط التدرجات باستخدام CSS ، قد تحتاج إلى تعديلها ديناميكيًا لجعل التدرجات المعروضة على شاشات الجوال أكثر سلاسة. نلقي نظرة على المثال التالي. هناك مثل هذا التدرج:

.element {
    background: linear-gradient(135deg, #2c3e50, #2c3e50 60%, #3498db);
}

يتميز التدرج اللوني

على شاشة الجوال بانتقال حاد للغاية بين الألوان. يرجى ملاحظة أنه على شاشة الجوال ، فإن حدود فصل الألوان مرئية بوضوح. هذا سيء. يمكنك تصحيح الوضع بمساعدة تحقيق إعلامي قديم جيد. (عفوًا ، يبدو أنني أعتبر بالفعل استعلامات الوسائط "تقنية قديمة جيدة.")

@media (max-width: 700px) {
    .element {
        background: linear-gradient(135deg, #2c3e50, #2c3e50 25%, #3498db)
    }
}

على الرغم من أن هذه طريقة طبيعية لحل المشكلة ، في موقف مماثل ، يمكننا استخدام وظيفة CSS min().

.element {
    background: linear-gradient(135deg, #2c3e50, #2c3e50 min(20vw, 60%), #3498db);
}

والنتيجة هي ما هو مبين أدناه.

يبدو التدرج سلسًا عند عرضه على أي شاشة

← إليك توضيحًا لهذه الفكرة

grad التدرج الشفاف

عندما تحتاج إلى وضع نص أعلى الصورة ، يجب تحته وضع "تدرج" تحته. سيؤدي ذلك إلى تسهيل قراءة النص. كما في المثال السابق ، يجب أن تعتمد معلمات التدرج على حجم إطار العرض. نلقي نظرة على الشكل التالي.

إعدادات التدرج المرنة على الشاشات بأحجام مختلفة

.element {
    background: linear-gradient(to top, #000 0, transparent max(20%, 20vw));
}

بفضل هذا التحسن البسيط ، سيبدو التدرج على الأجهزة المحمولة أفضل بكثير من ذي قبل. إذا كان حجم التدرج يساوي ، على شاشة سطح المكتب ، 50النسبة المئوية للعنصر الرئيسي ، فيجب أن يكون بالفعل على الجهاز المحمول في منطقة 30٪. يمكنك ضبط القيمة الدنيا لحجم التدرج باستخدام الوظيفة max().

→ هنا مثال

marg هوامش خارجية ديناميكية

تخصيص المسافة البادئة

يمكنك استخدام الوحدات المرتبطة بخصائص إطار العرض لضبط المسافة البادئة الديناميكية للعناصر. ومع ذلك ، فإن هذا النهج لا يظهر دائمًا نفسه جيدًا. والحقيقة هي أنه يمكن للمستخدم عرض الصفحة على شاشة مستديرة لجهاز محمول بارتفاع عمودي كبير جدًا. إليك كيفية حل هذه المشكلة باستخدام استعلامات الوسائط:

h1, h2, h3, h4, h5 {
    margin: 7vh 0 1.05rem;
}

@media (max-height: 2000px) {
    h1, h2, h3, h4, h5 {
        margin: 2.75rem 0 1.05rem;
    }
}

على الرغم من أن هذا الرمز يعمل بشكل صحيح ، يمكن تحقيق نفس التأثير من خلال سطر واحد فقط من التعليمات البرمجية:

h1, h2, h3, h4, h5 {
    margin: min(7vh, 2.75rem) 0 1.05rem;
}

باستخدام الدالة ، min()قمنا بتعيين الحد الأقصى لقيمة المسافة البادئة إلى 2.75rem. كما ترون ، إنه بسيط ومريح للغاية.

→ هنا مثال عملي

▍ عرض الحاوية

ضبط عرض الحاوية ديناميكيًا

افترض أننا بحاجة إلى عنصر حاوية يجب أن يكون عرضه 80٪ من عرض العنصر الأصلي. يجب ألا يتجاوز عرض الحاوية780px. كيفية إنشاء حاوية مماثلة؟ عادة في هذه الحالة ، يفعلون شيئًا كهذا:

.container {
    max-width: 780px;
    width: 80%;
}

لكن استخدام الوظيفة min()يسمح لك بتحديد الحد الأقصى لعرض الحاوية على النحو التالي:

.container {
    max-width: min(80%, 780px);
}

→ هنا مثال عملي

ent مسافة بادئة عمودية

clamp()تعجبني الوظيفة في أنها مثالية للحد من حجم المسافة البادئة لأقسام الصفحة. ألق نظرة على المثال التالي ، الذي يوضح تكوين أعلى الصفحة (قسم البطل).

تحديد المسافة البادئة للقسم الموجود في أعلى الصفحة يمكنك

ضبط المسافة البادئة لهذا القسم بمرونة باستخدام سطر واحد فقط من كود CSS.

.hero {
    padding: clamp(2rem, 10vmax, 10rem) 1rem;
}

→ هنا مثال

▍ الحدود والظلال

في ما يلي مقطع فيديو يعرض عنصرًا له حدود واسعة.

عنصر ذو حدود عريضة

في بعض الحالات ، يستخدم تصميم الصفحات عناصر ذات حدود عريضة ونصف قطرها كبير. عند عرض هذه العناصر على شاشات الجوال ، يجب تصغير حدودها. وينطبق الشيء نفسه على نصف قطر الزاوية. clamp()يسمح لكاستخدام الوظيفةبتعديل معلمات الحدود بشكل ديناميكي ، وربطها بعرض منطقة العرض.

.element {
    box-shadow: 0 3px 10px 0 red;
    border: min(1vw, 10px) solid #468eef;
    border-radius: clamp(7px, 2vw, 20px);
    box-shadow: 0 3px clamp(5px, 4vw, 50px) 0 rgba(0, 0, 0, 0.2);
}

هنا يمكنك تجربة مثال عملي.

istanceالمسافة بين خلايا تخطيط الشبكة

تخطيط الشبكة

طريقة مثيرة للاهتمام لاستخدام الوظيفةclamp()هي تعيين الخاصيةgrid-gapفي تخطيطات الشبكة. على وجه الخصوص ، نحن نتحدث عن حقيقة أن المسافة بين خلايا الشبكة ستكون أقل على شاشات الكمبيوتر المحمولة من سطح المكتب.

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: clamp(1rem, 2vw, 24px);
}

إذا كنت مهتمًا باستخدام وظائف مقارنة CSS عند تصميم تخطيطات الشبكة ، فألق نظرة على هذه المقالة الجيدة.

→ هنا مثال لهذا القسم

in استخدم في وظائف CSS لمقارنة القيم بدون وحدات

أثناء تجربة وظائف CSS ، قررت معرفة ما يحدث إذا قمت بتمرير الوظائف clamp()كحد أدنى للقيمة 0. إليك ما يبدو في الكود:

.element {
    width: clamp(0, 10vmax, 10rem);
}

هذا CSS سيئ. أعتقد أن الحقيقة هي أنه لا يجب استخدام الأرقام التي لا تحتوي على وحدات قياس هنا.

mechanisms آليات زائدة للمتصفحات التي لا تدعم min () و max () و clamp ()

كما هو الحال مع أي ميزات CSS أخرى جديدة، وتطبيق وظائف min()، max()و clamp()، تحتاج لرعاية من آليات احتياطية. لإنشاء هذه الآليات ، يمكنك استخدام أحد الأساليب التالية.

1. التكوين اليدوي لآلية النسخ الاحتياطي

هنا ، يُفهم التكوين اليدوي على أنه إضافة إلى رمز خاصية تتمتع بدعم متصفح واسع. يجب وضع هذه الخاصية أمام الخاصية التي تستخدم دالات مقارنة CSS. إليك ما قد يبدو عليه:

.hero {
    padding: 4rem 1rem;
    padding: clamp(2rem, 10vmax, 10rem) 1rem;
}

هنا clamp()سيتجاهل دعم المتصفحات التعبير الأول. وسيستخدم أولئك الذين لا يدعمون هذه الوظيفة الطريقة الأولى لضبط المسافة البادئة.

2. استخدام توجيه CSS يدعم

يمكن استخدام توجيه @supportsمصمم لاختبار دعم المستعرض لتقنيات متنوعة لاكتشاف ما إذا كان المستعرض يمكنه العمل مع وظائف مقارنة CSS. أفضل استخدام هذا الحل بدلاً من الحل اليدوي الموضح في الفقرة الأولى. والحقيقة هي أن أي متصفح يدعم وظائف المقارنة يجب أن يدعم التوجيه أيضًا @supports.

.hero {
    /*     ,   min() */
    padding: 4rem 1rem;
}

@supports (width: min(10px, 5vw)) {
   /*   ,   min() */
  .hero {
    padding: clamp(2rem, 10vmax, 10rem) 1rem;
  }
}

availability حول توفر المحتوى

بينما تعطينا ميزات مقارنة CSS طريقة جديدة لإنشاء صفحات ويب أكثر مرونة باستخدامها ، يجب توخي الحذر. على سبيل المثال ، استخدام وظيفة وحدها min()لتعيين خاصية font-sizeليست كافية. والحقيقة هي أنه على الأجهزة المحمولة ، قد يكون حجم الخط الذي تم تعيينه باستخدام هذه الوظيفة فقط صغيرًا جدًا. عند إعداد محتوى صفحة مهم بشكل خاص ، تذكر تحديد الحد الأدنى والحد الأقصى للإعدادات. وإلا ، فقد يؤدي ذلك إلى تفاقم تجربة المستخدم في العمل مع المشروع.

هل تستخدم وظائف CSS min()، max()و clamp()؟

وظائف CSS دقيقة () و max () و clamp ()