الدوال

بودكاست CSS - 020: الدوال

لقد تعرفت حتى الآن في هذه الدورة التدريبية على العديد من دوال CSS. في وحدة الشبكة، تعرّفت على minmax() وfit-content() اللذَين يساعدان في تحديد حجم العناصر. في وحدة color، تعرّفت على rgb() وhsl() اللتين تساعدكان في تحديد الألوان.

على غرار العديد من لغات البرمجة الأخرى، تحتوي خدمة CSS على الكثير من الوظائف المضمّنة التي يمكنك الوصول إليها وقتما تشاء.

لكل دالة من وظائف CSS غرض محدد، وفي هذا الدرس، ستحصل على نظرة عامة عالية المستوى تمنحك فهمًا أفضل عن مكان وكيفية استخدامها.

ما هي الدالة؟

الدالة هي جزء من التعليمات البرمجية المسماة والمستقلة بذاتها التي تكمل مهمة محددة. تتم تسمية الدالة بحيث يمكنك استدعائها داخل التعليمة البرمجية ويمكنك تمرير البيانات إلى الدالة. يُعرف هذا باسم تمرير الوسيطات.

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

في CSS، يمكنك استخدام الدوال المتوفرة فقط، بدلاً من كتابة الدوال الخاصة بك، ولكن يمكن دمج الدوال داخل بعضها البعض في بعض السياقات، مما يمنحها مزيدًا من المرونة. سنتناول ذلك بمزيد من التفصيل، لاحقًا في هذه الوحدة.

أدوات الاختيار الوظيفية

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

لقد تعرفت على أدوات الاختيار الوظيفية في وحدة الفئات الزائفة التي تتضمن دوالّ مفصّلة، مثل :is() و:not(). إنّ الوسيطات التي يتم تمريرها إلى هذه الدوال هي أدوات اختيار لغة CSS، التي يتم تقييمها بعد ذلك. وإذا كان هناك تطابق مع العناصر، ستنطبق باقي قاعدة CSS عليها.

السمات المخصّصة وvar()

:root {
    --base-color: #ff00ff;
}

.my-element {
    background: var(--base-color);
}

السمة المخصّصة هي متغيّر يتيح لك ترميز القيم في رمز CSS. تتأثر الخصائص المخصّصة أيضًا بالتسلسل مما يعني أنّه يمكن التلاعب بها أو إعادة تعريفها استنادًا إلى السياق. يجب أن تبدأ الخاصية المخصّصة بشَرطتين (--) وتكون حساسة لحالة الأحرف.

تستخدم الدالة var() وسيطة مطلوبة واحدة، وهي السمة المخصّصة التي تحاول عرضها كقيمة. في المقتطف أعلاه، تم ضبط الدالة var() على --base-color كوسيطة. إذا تم تحديد --base-color، ستعرض var() القيمة.

.my-element {
    background: var(--base-color, hotpink);
}

يمكنك أيضًا تمرير قيمة تعريف احتياطية إلى الدالة var(). هذا يعني أنّه في حال تعذّر العثور على --base-color، سيتم استخدام الإقرار الذي تم تمريره بدلاً من ذلك، وهو في حالة هذه العينة لون hotpink.

الدوال التي ترجع قيمة

الدالة var() هي إحدى دوال CSS التي تعرض قيمة. تتبع الدوال مثل attr() وurl() بنية مشابهة لـ var()، حيث يمكنك تمرير وسيطة واحدة أو أكثر واستخدامها على الجانب الأيسر من بيان CSS.

a::after {
  content: attr(href);
}

تأخذ الدالة attr() هنا محتوى السمة href الخاصة بالعنصر <a> وتضبطها على أنّها content للعنصر الزائف في ::after. إذا تغيّرت قيمة السمة href للعنصر <a>، سيظهر ذلك تلقائيًا في السمة content هذه.

.my-element {
    background-image: url('/path/to/image.jpg');
}

تأخذ الدالة url() عنوان URL سلسلة ويتم استخدامها لتحميل الصور والخطوط والمحتوى. إذا لم يتم تمرير عنوان URL صالح أو تعذّر العثور على المورد الذي يشير إليه عنوان URL، لن تعرض الدالة url() أي شيء.

دوال الألوان

لقد تعلّمت كل شيء عن دوال الألوان في وحدة color. إذا لم تكن قد قرأت هذا النص بعد، فننصحك بشدة بقراءته.

وتشمل بعض دوال الألوان المتاحة في CSS rgb() وrgba() وhsl() وhsla() وhwb() وlab() وlch(). جميع هذه الأدوات لها نموذج مشابه حيث يتم تمرير وسيطات الإعداد ويتم عرض لون مرة أخرى.

التعبيرات الحسابية

مثل العديد من لغات البرمجة الأخرى، توفر CSS دوال رياضية مفيدة للمساعدة في أنواع مختلفة من العمليات الحسابية.

calc()

تستخدم الدالة calc() تعبيرًا رياضيًا واحدًا كمَعلمة لها. يمكن أن يكون هذا التعبير الحسابي مزيجًا من الأنواع، مثل الطول والرقم والزاوية والتكرار. ويمكن مزج الوحدات أيضًا.

.my-element {
    width: calc(100% - 2rem);
}

في هذا المثال، يتم استخدام الدالة calc() لضبط حجم عرض عنصر ما بنسبة 100% من العنصر الرئيسي الذي يحتوي على العنصر الرئيسي، ثم إزالة 2rem من تلك القيمة المحسوبة.

:root {
  --root-height: 5rem;
}

.my-element {
  width: calc(calc(10% + 2rem) * 2);
  height: calc(var(--root-height) * 3);
}

يمكن دمج الدالة calc() داخل دالة calc() أخرى. يمكنك أيضًا تمرير الخصائص المخصّصة في دالة var() كجزء من تعبير.

min() وmax()

تعرض الدالة min() أصغر قيمة محسوبة لوسيطة تم تمريرها أو أكثر. تقوم الدالة max() بالعكس: الحصول على أكبر قيمة للوسيطة التي تم تمريرها أو أكثر.

.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}

في هذا المثال، يجب أن يكون العرض أصغر قيمة بين 20vw، أي 20% من عرض إطار العرض، و30rem. يجب أن يكون الارتفاع القيمة الأكبر بين 20vh، أي 20% من ارتفاع إطار العرض، و20rem.

clamp()

تتطلّب الدالة clamp() ثلاث وسيطات: الحدّ الأدنى للحجم والحجم المثالي والحد الأقصى.

h1 {
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
}

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

يمكنك الاطّلاع على مزيد من المعلومات حول الدوال min() وmax() وclamp() في هذه المقالة.

أشكال

تستخدم خصائص clip-path وoffset-path وshape-outside أشكالاً لاقتصاص المربّع بشكل مرئي أو لتوفير شكل يتدفق حوله المحتوى.

هناك دوال شكل يمكن استخدامها مع كلتا الخاصيتين. تستخدم الأشكال البسيطة، مثل circle() وellipse() وinset()، وسيطات الضبط لتحديد حجمها. من خلال الأشكال الأكثر تعقيدًا، مثل polygon()، يمكنك استخدام أزواج من قيم المحور س وص مفصولة بفواصل لإنشاء أشكال مخصّصة.

.circle {
  clip-path: circle(50%);
}

.polygon {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

على غرار polygon()، هناك أيضًا الدالة path() التي تستخدم قاعدة تعبئة SVG كوسيطة. ويتيح ذلك إنشاء أشكال معقدة للغاية يمكن رسمها باستخدام أداة رسومات مثل Illustrator أو Inkscape ثم نسخها إلى CSS.

المحولات

أخيرًا في هذه النظرة العامة على دوال CSS هي دوال التحويل، التي تميل إلى الانحراف وتغيير الحجم وحتى تغيير عمق العنصر. يتم استخدام جميع الدوال التالية مع السمة transform.

تدوير

يمكنك تدوير عنصر باستخدام دالة rotate()، والتي ستعمل على تدوير عنصر على محوره المركزي. يمكنك بدلاً من ذلك استخدام الدوال rotateX() وrotateY() وrotateZ() لتدوير عنصر على محور معيّن. يمكنك تمرير وحدات الدرجة والدوران والراديان لتحديد مستوى الدوران.

.my-element {
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

تستخدم الدالة rotate3d() أربع وسيطات.

الوسيطات الثلاثة الأولى هي أرقام، تحدد الإحداثيات X وY وZ. الوسيطة الرابعة هي التدوير، الذي يقبل الدرجات والزاوية والدورانات، مثل دوال التدوير الأخرى.

.my-element {
  transform: rotate3d(1, 1, 1, 10deg);
}

المقياس

يمكنك تغيير حجم العنصر باستخدام transform والدالة scale(). تقبل الدالة رقمًا أو رقمين كقيمة تحدد مقياسًا موجبًا أو سالبًا. إذا حددت وسيطة رقم واحدة فقط، فسيتم تحجيم كل من المحور س وص بنفس الطريقة وتحديد كليهما اختصارًا لـ X وY. تمامًا مثل rotate()، هناك دوال scaleX() وscaleY() وscaleZ() لقياس عنصر على محور معين بدلاً من ذلك.

.my-element {
  transform: scaleX(1.2) scaleY(1.2);
}

توجد أيضًا دالة rotate، وهي دالة scale3d(). يشبه ذلك scale()، غير أنّه يتطلّب ثلاث وسيطات: عامل المقياس X وY وZ.

ترجمة

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

.my-element {
  transform: translatex(40px) translatey(25px);
}

يمكنك استخدام دوال معيّنة لمحور معيّن، تمامًا كما هو الحال مع دوال التحويل الأخرى، وذلك باستخدام translateX وtranslateY وtranslateZ. يمكنك أيضًا استخدام الترميز translate3d الذي يتيح لك تحديد الترجمة "س" و"ص" و"ع" في دالة واحدة.

الانحراف

يمكنك تحريف أي عنصر باستخدام دوال skew() التي تقبل الزوايا كوسيطات. تعمل الدالة skew() بطريقة مشابهة جدًا لدالة translate(). إذا حددت وسيطة واحدة فقط، فستؤثر فقط على المحور س وإذا حددت كليهما، فسيؤثر ذلك على المحور س والمحور ص. يمكنك أيضًا استخدام الترميزَين skewX وskewY للتأثير في كل محور بشكل مستقل.

.my-element {
  transform: skew(10deg);
}

المنظور

أخيرًا، يمكنك استخدام السمة perspective التي تشكّل جزءًا من مجموعة الخصائص المُحوّلة لتغيير المسافة بين المستخدم والمستوى Z. يمنح هذا الشعور بالمسافة ويمكن استخدامه لخلق عمق من المجال في تصميماتك.

يوضّح هذا المثال الذي أعدّه "ديفيد ديساندرو" في مقالته المفيدة كيفية استخدام هذه السمة إلى جانب السمتَين perspective-origin-x وperspective-origin-y لإنشاء تجارب ثلاثية الأبعاد بشكل حقيقي.

دوال الرسوم المتحركة والتدرجات والفلاتر

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

التحقق من فهمك

اختبر معلوماتك عن الدوال