مواضيع متقدمة في CSS

الدوال (Functions)

الدالة ()calc

تسمح الدالة ()calc بإجراء عمليات حسابية على قيم خاصيات CSS، ويمكن استخدامها في أي موضع يُسمَح فيه باستخدام أنواع البيانات <length> و <percentage> و <angle> و <time> و <number> و <integer>.

استخدام دالة ()calc لحساب عرض الحاوية

#div1 {
    position: absolute;
    left: 50px;
    width: calc(100% - 100px);
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    text-align: center
}

استخدام الدالة ()calc لتحديد موضع صورة الخلفية

background-position: calc(50% + 17px) calc(50% + 10px), 50% 50%;

استخدام الدالة ()calc لحساب ارتفاع العنصر

height: calc(100% - 20px);

لمزيد من المعلومات انظر توثيق calc.

الدالة ()attr

تستخدم الدالة ()attr للحصول على قيمة إحدى خاصيات العنصر المُحدَّد واستخدامها في أنماط CSS، ويمكن استعمالها أيضًا على العناصر الزائفة (pseudo-elements) وفي هذه الحالة ستُستخدَم قيمة خاصية العنصر الأصل.

مثال

ملف HTML

  <blockquote data-mark='"'></blockquote>

ملف CSS

  blockquote[data-mark]::before,
  blockquote[data-mark]::after {
      content: attr(data-mark);
  }

لمزيد من المعلومات انظر توثيق attr.

الدالة ()var

تستخدم الدالة ()var للوصول لمتغيرات CSS.

مثال

:root {
    --primary-color: blue;
}

selector {
    color: var(--primary-color);
}

لمزيد من المعلومات انظر توثيق var.

الدالة radial-gradient()‎

تستخدم الدالة radial-gradient()‎ لإنشاء تدرج لوني بين لونين أو أكثر على شكل أشعة تبدأ من المركز، ويمكن أن يكون شكلها دائريًا أو على شكل قطع ناقص.

مثال

radial-gradient(red, orange, yellow);

لمزيد من المعلومات انظر توثيق radial-gradient.

الدالة linear-gradient

تستخدم الدالة linear-gradient()‎ لإنشاء تدرج لوني بين لونين أو أكثر على امتداد خط مستقيم،

مثال

linear-gradient( 0deg, red, yellow 50%, blue);

لمزيد من المعلومات انظر توثيق linear-gradient.

المتغيرات: الخاصيات المُخصصة في CSS

أسماء الخاصيات التي تُسبَق بشرطتين --، مثل ‎--example-name، تُمثِّل الخاصيات المخصصة (custom properties) التي تُسنَد لها قيمةٌ يمكن إعادة استخدامها في المستند عبر الدالة var()‎.

مثال

من الشائع إعادة استخدام نفس اللون في عدة أماكن في الصفحة، لذلك من الأفضل إنشاء متغير يحمل قيمة هذا اللون واستخدامه مما يُسهِّل البحث عنه وتعديله في المستقبل.

:root {
    --red: #b00;
    --blue: #4679bd;
    --grey: #ddd;
}

.Bx1 {
    color: var(--red);
    background-color: var(--grey);
    border: 1px solid var(--red);
}

مثال

:root {
    --W200: 200px;
    --W100: 10px;
}

.Bx2 {
    width: var(--W200);
    height: var(--W200);
    margin: var(--W10);
}

إعادة تعريف قيم المتغيرات

ملف HTML

  <a class="button">Button Green</a>
  <a class="button button_red">Button Red</a>
  <a class="button">Button Hovered On</a>

ملف CSS

  .button {
      --color: green;
      padding: .5rem;
      border: 1px solid var(--color);
      color: var(--color);
  }

  .button:hover {
      --color: blue;
  }

  .button-red {
      --color: red;
  }

النتيجة

قواعد استخدام المتغيرات في CSS

يجب أن تحتوي أسماء المتغيرات على الحروف وعلامة (-) فقط.

  /* Invalid variables names */
  --123color: blue;
  --#color: red;
  --bg_color: yellow
  --$width: 100px;

  /* Valid variable names */
  --color: red;
  --bg-color: yellow
  --width: 100px

اسماء المتغيرات حساسة لحالة الأحرف

  /* The variable names below are all different variables */
  --pcolor: ;
  --Pcolor: ;
  --pColor: ;

يجب أن يكون لكل متغير قيمة (حرف المسافة (space) قيمة صالحة للمتغير).

  /* Invalid */
  --color:;

  /* Valid */
  --color: ; /* space is assigned */

متغيرات CSS لا تدعم التسلسل، أي لا يمكن استخدام الدالة var()‎ داخل دالة أخرى.

  /* Invalid */
  .logo{
      --logo-url: 'logo';
      background: url('assets/img/' var(--logo-url) '.png');
  }

  /* Invalid */
  .logo{
      --logo-url: 'assets/img/logo.png';
      background: url(var(--logo-url));
  }

  /* Valid */
  .logo{
      --logo-url: url('assets/img/logo.png');
      background: var(--logo-url);
  }

يجب وضع الوحدات داخل تعريف المتغير

  /* Invalid */
  --width: 10;
  width: var(--width)px;

  /* Valid */
  --width: 10px;
  width: var(--width);

  /* Valid */
  --width: 10;
  width: calc(1px * var(--width)); /* multiply by 1 unit to convert */
  width: calc(1em * var(--width));

استخدام المتغيرات مع استعلامات الوسائط

يُمكن إعادة تعريف قيم المتغيرات في استعلامات الوسائط للحصول على صفحات متجاوبة.

مثال

ملف HTML

  <div></div>
  <div></div>
  <div></div>
  <div></div>

ملف CSS

  :root{
      --width: 25%;
      --content: 'This is desktop';
  }

  @media only screen and (max-width: 767px){
      :root{
      --width:50%;
      --content: 'This is mobile';
      }
  }

  @media only screen and (max-width: 480px){
      :root{
      --width:100%;
      }
  }

  div{
      width: calc(var(--width) - 20px);
      height: 100px;
  }
  div:before{
      content: var(--content);
  }

  /* Other Styles */
  body {
      padding: 10px;
  }
  div{
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight:bold;
      float:left;
      margin: 10px;
      border: 4px solid black;
      background: red;
  }

النتيجة

اطَّلع على تجربة حيَّة لهذا المثال على CodePen.

نموذج الكائنات (CSS Object Model - CSSOM)

يحدد المتصفح جميع الرموز في ملف CSS ويحولها إلى عُقد مرتبطة في شكل بنية شجرية، وتُكَوِّن مجموعة هذه العقد ما يُعرف بنموذج كائنات CSS.

لعرض أي صفحة ويب، ينفذ المتصفح الخطوات التالية:

يفحص المتصفح وثيقة HTML ويبني DOM.
يفحص المتصفح وثيقة CSS ويبني نموذج الكائنات CSSOM.
يدمج المتصفح بين DOM و CSSOM لإنشاء شجرة العرض التي تُمثل الصفحة.

مثال

إليك المثال التالي حول إضافة صورة الخلفية background-image باستخدام نموذج الكائنات CSSOM

أولُا يجب الحصول على نقاط مرجعية تمثل بداية ونهاية القواعد في وثيقة CSS.

var stylesheet = document.stylesheet[0].cssRules;
var end = stylesheet.length - 1;

ومن ثم تُضاف القاعدة background-image للعنصر body في نهاية وثيقة CSS.

stylesheet.insertRule("body { background-image:
url('http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico'); }", end);

أنماط التصميم (CSS Design Patterns)

أنماط التصميم (Design Patterns) هي أساليب نموذجية تحل المشاكل التي تتكرر كثيرًا في تصميم البرمجيات، ويمكن تشبيهها بالمخططات التي تستخدمها -وتُعدَّلها أيضًا- من أجل إصلاح مشكلة بعينها في شيفرتك.

بعض أنماط التصميم الشائعة في CSS

نمط BEM

هي منهجة صُممت من قبل شركة التكنولوجيا الروسية Yandex، ومن ثم اكتسبت شعبية كبيرة بين مبرمجين الويب في الولايات المتحدة و أوروبا الغربية ومنها إلى بقية العالم، وتُشير BEM إلى الكلمات Block، وElements وModifiers على التوالي.

Blocks: أو الكتل، وهي العناصر أو الكيانات المُستقلة ولها معنى محدد، مثل العناصر header، و container، وmenu، وغيرها.
Elements: أو العناصر، وهي أجزاء من الكُتل والتي ليس لها معنى محدد، مثل menu item، وlist item، وغيرها.
Modifiers: أو الصفات التعريفية، وتستخدم لتغيير طريقة عرض أو سلوك العنصر، مثل الخواص disabled، وhighlighted، وchecked، وغيرها.

هناك بعض القواعد لتطبيق منهجية أو نمط BEM وهي:

أنماط الكتل لا تعتمد بأي شكل من الأشكال على بقية العناصر في الصفحة.
يجب أن تكون أسماء الكُتل قصيرة، مع تجنب استخدام المحارف (-) و (_).
يجب أن تأخذ أسماء مُحددات العناصر الشكل blockname__elementname.
يجب أن تأخذ أسماء مُحددات الصفات التعريفية الشكل blockname--modifiername أو blockname__element-name--modifiername.

مثال

<style>
form { } // Block
.form--theme-xmas { } // Block + modifier
.form--simple { } // Block + modifier
.form__input { } // Block > element
.form__submit { } // Block > element
.form__submit--disabled { } // Block > element + modifier
</style>

<form class="form form--theme-xmas form--simple">
    <input class="form__input" type="text" />
    <input class="form__submit form__submit--disabled" type="submit" />
</form

للتفصيل أكثر حول BEM، ننصحك بالإطلاع على مقال «دليلك إلى منهجية BEM».

ترجمة -وبتصرف- للفصول Functions - Custom Properties (Variables)‎ - Counters- CSS Object Model (CSSOM)‎ - CSS design patterns من كتاب CSS Notes for Professionals