الدوال

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() وrgba() وhsl() وhsla() وhwb() وlab() وlch(). ولكلٍّ منها شكل مشابه يتم فيه تمرير وسيطات الإعدادات وعرض لون.

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

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

calc()‎

Browser Support

• 26
• 12
• 16
• 7

Source

تستخدِم الدالة 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()

Browser Support

• 79
• 79
• 75
• 11.1

Source

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

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

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

ملاحظة: نتناول وحدات مثل vw وvh في وحدة وحدات تحديد الحجم.

clamp()‎

Browser Support

• 79
• 79
• 75
• 13.1

Source

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

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

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

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

الأشكال

تستخدم خصائص 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.

تدوير

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

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

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

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

Browser Support

• 12
• 12
• 10
• 4

Source

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

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

مقياس

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

يمكنك تغيير نسبة تكبير عنصر باستخدام 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.

ترجمة

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

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

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

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

Skewing

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

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

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

المنظور

Browser Support

• 36
• 12
• 16
• 9

Source

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

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

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

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

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

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

ما هي الأحرف التي يمكن من خلالها تحديد دوال CSS؟

[]

هذه الأحرف مخصّصة للمصفوفات في JavaScript.

{}

تُستخدم هذه الأحرف لتغليف القواعد في CSS.

()

تستخدم الدوالّ هذه الأحرف لتغليف الوسيطات.

::

هذه الأحرف مخصّصة للعناصر الزائفة في CSS.

:

هذه الأحرف مخصّصة للفئات الزائفة في CSS.

هل تتضمّن CSS دوالّ رياضية مضمّنة؟

True

هناك الكثير من هذه التحسينات، ويتم إضافة المزيد منها إلى المواصفات والمتصفّحات.

خطأ

يُرجى إعادة المحاولة.

يمكن وضع دالة calc() داخل دالة calc() أخرى مثل font-size: calc(10px + calc(5px * 3));.

True

🎉

خطأ

يُرجى إعادة المحاولة.

أيّ مما يلي دوالّ أشكال CSS؟

ellipse()

🎉

square()

يُرجى إعادة المحاولة.

circle()

🎉

rect()

يُرجى إعادة المحاولة.

inset()

🎉

polygon()

🎉