الدوال

bookmark_border تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

The CSS Podcast - 020: Functions

حتى الآن في هذه الدورة التدريبية، تعرّفت على العديد من دوال CSS. في وحدة الشبكة، تمّ تعريفك على minmax() وfit-content()، اللذَين يساعدانك في تحديد حجم العناصر. في وحدة اللون، تعرّفت على 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() مَعلمة واحدة مطلوبة: السمة المخصّصة التي تحاول عرضها كقيمة.

في المقتطف السابق، تم تمرير --base-color كدالة var() كوسيطة. إذا تمّ تحديد --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() أيّ محتوى.

وظائف الألوان

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

تشمل بعض دوال الألوان المتاحة في CSS: rgb() وhsl() وlab() وlch() وoklab() وoklch() وcolor(). ولكل هذه الدوال شكل مشابه يتم فيه تمرير وسيطات الإعدادات وعرض لون.

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

مثل العديد من لغات البرمجة الأخرى، توفّر لغة 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()‎ في هذه المقالة حول هذه الدوالّ.

الدوال المثلثية

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

لمزيد من المعلومات والأمثلة، اطّلِع على مقالتنا حول الدوالّ المثلثية.

sin() وcos() وtan()

تأخذ الدوالّ sin() وcos() وtan() وسيطة زاوية وتعرض جيب الزاوية وجيب التمام وظل الزاوية على التوالي. تعرض الدالتان sin() وcos() رقمًا بين -1 و1. تعرض الدالة tan() عددًا بين -Infinity و+Infinity. يمكن أن تكون وسيطة الزاوية أي وحدة قياس زاوية متوافقة.

:root {
  --sine-degrees: sin(45deg);     /* returns 0.7071 */
  --sine-radians: sin(0.7853rad); /* returns 0.7071 */
}

في المثال السابق، لهما القيمة نفسها (0.7071 في هذه الحالة).--sine-degrees--sine-radians

في المثال السابق، يتم استخدام الدالتَين sin() وcos() لإنشاء رسوم متحركة متذبذبة على محورَي x وy من خلال ضرب النتيجة في نصف القطر المحدّد. يتيح استخدام كلتا الدالتَين في الوقت نفسه إنشاء صورة متحركة تدور حول محور معيّن. نستخدم سمة مخصّصة، --angle، لتحريك الزاوية بسلاسة لجميع طلبات الدالة.

asin() وacos() وatan()

الدوالّ asin() وacos() وatan() هي الدوالّ العكسية لدوالّ sin() وcos() وtan()، حيث تأخذ رقمًا كوسيطة وتعرض قيمة ∡ بين -90deg و90deg. تقبل الدالتان asin() وacos() رقمًا بين -1 و1، بينما تقبل الدالة atan() رقمًا بين -Infinity و+Infinity.

:root {
  --degrees: asin(0.7071); /* returns 45deg */
}

atan2()

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

في المثال أعلاه، يتم استخدام الدالة atan2() لتحديد الزاوية بين مركز مساحة العرض وموضع الماوس الحالي. يُرجى العِلم أنّ قيمة y هي الوسيطة الأولى، وقيمة x هي الوسيطة الثانية. ثم يتم استخدام الزاوية لتحديد موضع "الحدقتَين" بالنسبة إلى مركز "العيون"، كي تتمكّن من اتّباع الماوس.

hypot()

تأخذ الدالة hypot() وسيطتَي طول تمثّلان جانبَي مثلثٍ قائم وتُعرِض طول الوتر. يمكنك استخدام هذا الإجراء كأحد الاختصارات لحساب ذلك باستخدام الدوالّ الأسية. يجب أن تكون كلتا الوسيطتين من النوع نفسه، وسيعرض hypot() النوع نفسه.

:root {
  --use-ems: hypot(3em, 4em);   /* returns 5em */
  --use-px:  hypot(30px, 40px); /* returns 50px */
}

الدوال الأسية

pow() وexp()

تستخدِم الدالة pow() وسيطتَين عدديتين، وهما الأساس والأس، وتفترض قاعدة الرفع إلى قوة الأس. يجب أن تكون كلتا الوسيطتين رقمين بدون وحدات. تستخدِم الدالة exp() وسيطة واحدة وتكافئ استدعاء الدالة pow() مع قاعدة e.

.my-element {
  width: calc(10px * pow(4, 2); /* 10px * (4 * 4) == 160px */
}

sqrt()

تأخذ الدالة sqrt() وسيطة رقمية وتعرض الجذر التربيعي لها. لا يمكن أن تتضمّن الوسيطة وحدات.

:root {
  --root: sqrt(25); /* returns 5 */
}

log()

تعرِض الدالة log() اللوغاريتم لقيمة رقمية. في حال تم تمرير argued واحدة، ستعرض الدالة اللوغاريتم الطبيعي. في حال تم تمرير وسيطة ثانية، ستستخدم الدالة log() الوسيطة الثانية ك الأساس للوغاريتم.

:root {
  --log2: log(16, 2); /* returns 4      */
  --logn: log(16);    /* returns 2.7725 */
}

الدوالّ ذات الصلة بالإشارة

abs()

تأخذ الدالة abs() وسيطة رقمية وتُرجع القيمة المطلقة (الموجبة) لقيمة الوسيطة.

.my-element {
  color: rgba(0, 0, 0, abs(-1));
}

في المثال السابق، ستؤدي قيمة alpha التي تبلغ -1 إلى ظهور نص شفاف، ولكن تعرِض الدالة abs() القيمة المطلقة لـ 1، ما يؤدي إلى ظهور نصّ غير شفاف تمامًا.

sign()

تأخذ الدالة sign() وسيطة رقمية وتعرض علامة الوسيطة. تعرِض القيم الموجبة الرمز 1 والقيم السالبة الرمز -1. تؤدي القيم الصفرية إلى عرض 0.

.my-element {
  top: calc(50vh + 25vh * sign(var(--value));
}

في الأمثلة السابقة، إذا كانت --value موجبة، ستكون القيمة الأعلى هي 75vh. إذا كانت سالبة، ستكون القيمة العليا هي 25vh. وإذا كانت القيمة صفرًا، ستكون القيمة الأكثر أهمية هي 50vh.

الأشكال

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

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

.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 بالطريقة نفسها، ويكون تحديد كليهما اختصارًا لـ X وY. تمامًا مثل rotate()، تتوفّر الدوالّ scaleX() و scaleY() و scaleZ() لتكبير عنصر على محور معيّن بدلاً من ذلك.

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

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

ترجمة

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

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

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

التواء

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

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

المنظور

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

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

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

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

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

اختبار معلوماتك حول الدوالّ