الدوال

بودكاست 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 تستخدم خصائص CSS الأشكال لاقتصاص الصندوق بصريًا أو توفير شكل يتدفق من خلاله المحتوى.

هناك دوال شكل يمكن استخدامها مع هاتين السمتين. تُعد الأشكال البسيطة مثل 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() أربعة وسيطات.

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

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

مقياس

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

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

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

ترجمة

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

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

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

إمالة

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

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

المنظور

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

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

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

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

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

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