استخدام الدوال في تصميم واجهات المواقع

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

في هذا الدرس سنحاول الإسهاب في شرح أهم وبعض هذه الدوال وليس كلها ، مع الإشارة باقتضاب إلى البقية ، بعض هذه الدوال موجودة منذ إصدار css2 وتشتغل على المتصفحات القديمة والجديدة ، وبعضها الآخر صدر مع css3 وسنشير إلى المتصفحات التي تدعمها ، مع العلم أن موضوع المتصفحات لم يعد مشكلة كبيرة في 2023 وغالبية المصممين ماعادوا يكترثون للإصدارات القديمة منها التي اندثرت تقريبا.

وصيغة كتابة أي دالة في css هي كتابة إسم الدالة مع قوسين ، وداخل القوسين يتم كتابة قيمة أو أكثر مفصولة بفاصلة أجنبية.

الدالة var

تستخدم الدالة var في css لتعريف متغير أو استخدام قيمته إن كان متغير عام تم تعريفه من قبل ، الدالة var تقبل إثنان Arguments أو Parameters ، الأولى إجبارية وهي إسم المتغير ، والثانية اختيارية إن أردت وضع قيمة للمتغير لا تحتاجها إن كان معرفا من قبل.

الدالة var تحدثنا عنها بإسهاب في تدوينة مستقلة لأهميتها ، فلا داعي لإعادة نفس الشرح ، ادخل على الرابط واقرأ المقالة جيدا :

رابط التدوينة

الدالة attr

تستخدم الدالة attr لاستخراج قيمة خاصية attribute تابعة لعنصر في صفحة html ، سواء كانت هذه الخاصية موجودة في html مثل value أو placeholder وغيرهما ، أو custom attribute ابتكرناها من عندنا وقد تعود مصمموا الويب على استخدام أسماء مثل data-text و data-value و غيرها.

صيغة الكتابة هي attr(attribute-name) ، تكتب إسم الخاصية فيأخذ قيمتها تستخدمها كما تريد ، وهذا يغنيك عن استخدام الجافاسكريبت لفعل ذلك كما في الماضي.

تعود الدالة attr إلى الإصدار الثاني من لغة css ، وهي مدعومة في كل المتصفحات حاليا ولا تحتاج إلى Prefixes ، وقد تم تعميمها بدءا من الإصدارات التالية :

ليكن كود html التالي :

وكود css التالي:

وكما ترى في a::after قمنا باستخراج قيمة الخاصية href باستخدام الدالة attr ، وسنطبع هذه الروابط بشكل مستقل بجانب القائمة ، والنتيجة كالتالي:

يمكن إخفاؤها ب opacity:0 وإعادة إظهارها في حالة الهوفر على كل رابط فيظهر url بجانبه مع عمل transition ، ستكون أجمل ولكن اختصارا للوقت قمت بطبع كل urls .

الدالة calc

يمكنك استخدام الدالة calc لإجراء أي عملية حسابية تريد استعمال ناتجها كقيمة لخاصية من خصائص css ، ولأهميتها يستخدمها مطوروا الويب من أجل المزيد من الدقة في تموضع العناصر وحجمها.

صيغة الكتابة هي calc(expression) ، في العبارة يمكنك كتابة جمع أو ضرب أو طرح أو قسمة بين قيمتين ، باستخدام إحدى العلامات + - * / للحصول على الناتج الذي تريد ، وسنرى مثالا بعد قليل .

الدالة calc تعود للإصدار css3 غير مدعومة على المتصفحات القديمة وتحتاج إلى Prefixes من أجل تعميمها، وهذه هي الإصدارات التي بدأ منها دعم هذه الدالة :

مثال عملي في كود css التالي وقمنا فيه بتنسيق ديف :

وهذه هي النتيجة:

وكما ترى الدالة calc قامت بإنقاص 100px من عرض الشاشة وأخذ الديف الناتج كقيمة للعرض.

الدالة min

الدالة min تستخدم لاختيار أقل قيمة بين قيمتين أو مجموعة من القيم .

صيغة الكتابة هي min(value1,value2,...) ، عندما تعطى لعنصر فسيختار أقل قيمة من هذه القيم .

الدالة min تعود لإصدار css3 ويبدأ دعمها من الإصدارات التالية :

نفس المثال السابق مع تعديل الكود :

والنتيجة :

وكما ترى الديف أخذ 300px من عرض الشاشة كأقل قيمة بين القيمتين ، ولو قمنا بتصغير عرض الشاشة وأصبحت 50% أقل من 300px فسيأخذ 50% ،كأنك كتبت max-width: 300px ، يمكن عمل تصماميم متجاوبة باستخدام هذه الدالة ونظيرتها القادمة في العنوان الموالي.

الدالة max

كل ما قلناه عن الدالة min ينطبق على الدالة max ولكن بالعكس ، فالدالة max تختار أعلى قيمة من قيمتين أو أكثر.

صيغة الكتابة هي max(value1,value2,...) ، عندما تعطى لعنصر فسيختار أكبر قيمة من هذه القيم .

الدالة max تعود لإصدار css3 ويبدأ دعمها من الإصدارات الواضحة من الجدول أعلاه التابع للدالة min .

نفس المثال السابق مع تعديل الكود :

والنتيجة :

وكما ترى الديف هذه المرة أخذ ب 50% من عرض الشاشة لأنها أكبر من 300px ، ولو قمنا بتكبير الشاشة أكثر سيكبر أكثر ولو قمنا بالتصغير سيصغر حتى يصل إلى 300px ولن يقل عنها بعد ذلك ، كأنك كتبت min-width: 300px .

الدالة rgb

الدالة rgb تستخدم لتعريف اللون ، وصيغة كتابتها هي rgb(red,green,blue) تبدأ القيمة من 0 وتنتهي عند 255 وتتغير الألوان بتغيير القيم الثلاثة للألوان الثلاثة . هذه الدالة قديمة وتعود لإصدار css2 ، ودعمها يبدأ من إصدارات المتصفحات التالية :

وتطبيقها سهل جدا ، لتكن ثلاث فقرات p بكلاسات مختلفة بالتنسيق التالي :

وهذه هي النتيجة :

الدالة rgba

هي نفسها الدالة السابقة مع إضافة Parameter آخر وهو opacity ، أي نسبة الشفافية ، نحدد نسبة شفافية اللون التي تبدأ من 0 إلى 1 ، وجاءت هذه الدالة مع إصدار css3 ، ويبدأ دعمها من المتصفحات التالية :