لكتابة تنسيقات CSS يمكن قراءتها بسهولة بإمكانك إضافة مسافات فارغة وتعليقات في ورقة الأنماط لجعلها أسهل قراءة. بالإمكان أيضًا جمع المُحدّدات معًا، عندما تريد تطبيق نفس القاعدة على أكثر من هدف.

هذا الدرس جزء من سلسلة تعلم CSS:

• مدخل إلى أوراق الأنماط المتتالية (CSS).
• آلية عمل تعليمات CSS داخل المتصفحات.
• المحددات (Selectors) في CSS.
• كيفية كتابة تعليمات CSS يسهل قراءتها. (هذا الدرس)
• تنسيق نصوص صفحات الويب باستخدام CSS.
• التعامل مع الألوان في CSS.
• إضافة محتوى إلى صفحة ويب باستخدام CSS.
• تنسيق القوائم (Lists) في CSS.
• تعرف على الصناديق (Boxes) في CSS.
• رصف العناصر (Layout) في CSS.
• الجداول (Tables) في CSS.
• التعامل مع أجهزة العرض المختلفة والمطبوعات في CSS.

المسافات الفارغة (Whitespace)

مصطلح مسافة فارغة (whitespace) يعني المسافة المعروفة وعلامات الجدولة (Tab) ومحرف السّطر الجديد. بإمكانك استخدام هذه المحارف لتسهيل قراءة ورقة الأنماط.

لاحظ أن مصطلح المسافة الفارغة قد يستخدم في سياق تخطيط الواجهات للإشارة إلى الجزء من الصفحة الّذي يُترك دون عناصر: كالحواف (margins) والحشوات (gutters) والمسافات بين الأعمدة والسّطور.

الملف الّذي تتدرّب عليه يحوي قاعدة واحدة في كلّ سطر، وأقل ما يمكن من المسافات الفارغة، وعندما تصبح ورقة الأنماط أكبر، فإنّ هذا الأسلوب سيجعل قراءة الورقة (ومن ثمّ صيانتها) أصعب.

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

أمثلة

يُفضّل بعض المُصمّمين أسلوبًا وجيزًا في الكتابة، بحيث لا يفصلون السّطر إلا عندما يصبح طويًلا للغاية:

.carrot {color: orange; text-decoration: underline; font-style: italic;}

ويُفضّل آخرون جعل كل زوج من الخواص وقيمها في سطر منفرد:

.carrot
{
color: orange;
text-decoration: underline;
font-style: italic;
}

وبعضهم يحاذي هذه السطور بمسافتين أو أربع أو بمحرف Tab:

.carrot {
  color: orange;
  text-decoration: underline;
  font-style: italic;
}

والبعض يحبّ محاذاة كلّ شيء شاقوليًّا (ولكن هذا صعب الصّيانة):

.carrot
    {
    color           : orange;
    text-decoration : underline;
    font-style      : italic;
    }

والبعض يفضّل استخدام عدد مختلف من المسافات في كلّ مرّة لتسهيل القراءة:

.vegetable         { color: green; min-height:  5px; min-width:  5px }
.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }

البعض يستخدم محارف Tab، والبعض يستخدم المسافات فقط.

التعليقات (Comments)

تبدأ التعليقات في CSS بـ‎/*‎ وتنتهي بـ‎*/‎.

بإمكانك استخدام التعليقات للشرح أو توضيح جزء معيّن في ورقة الأنماط، وأيضًا لحجب (comment out) أجزاء من الورقة مؤقّتًا بغاية تجريب التغيّرات.

لحجب جزء من الورقة، أحِط هذا الجزء بتعليق بحيث يتجاهله المتصفّح. توخَّ الحذر في موضعي بداية التّعليق ونهايته، إذ يجب أن تكون بقيّة الورقة سليمة الصّياغة:

/* style for initial letter C in first paragraph */
.carrot {
  color:            orange;
  text-decoration:  underline;
  font-style:       italic;
  }

تجميع المحددات

عندما تتشارك عدّة عناصر بقاعدة واحدة، يمكن تحديد مجموعة من المحدّدات مفصولة بفاصلة لاتينية ","، وعندها فإنّ القاعدة ستُطبّق على كلّ العناصر المعنيّة.

لتطبيق قواعد لكلّ عنصر من العناصر السّابقة على حدة، يمكن تعريف قاعدة منفصلة في موضع آخر من ورقة الأنماط تستهدف العناصر المنفردة.

مثال

تجعل هذه القاعدة لون <h1> و<h2> و<h3> واحدًا. وهذا يجعل من السّهل تغيير اللون من مكان واحد لكلّ العناصر مرّة واحدة:

/* color for headings */
h1, h2, h3 {color: navy;}

تمرين: إضافة التعليقات وتحسين هيئة ورقة الأنماط

حرّر ملف CSS الّذي تتدرّب عليه، وتأكد من احتوائه على هذه القواعد (بغضّ النظر عن الترتيب):

strong {color: red;}
.carrot {color: orange;}
.spinach {color: green;}
#first {font-style: italic;}
p {color: blue;}

اجعل قراءته أسهل بإعادة ترتيبه بطريقة تراها منطقيّة، وبإضافة مسافات فارغة وتعليقات في أماكن مناسبة.

احفظ الملفّ وحدّث الصّفحة في المتصفّح لتتأكّد من أن تعديلاتك لم تؤثّر على النّتيجة:

تمرين

احجب جزءًا من ورقة أنماطك، دون تعديل أيّ شيء آخر، بحيث تجعل الحرف الأوّل من المستند أحمر اللّون:

(هناك أكثر من طريقة لتحقيق هذه النّتيجة)

/*
.carrot {
  color: orange;
}
*/

ما التالي؟

استخدمنا تنسيقي الخطّ المائل والمُسطّر في ورقة أنماطنا. سنتعرّف على كيفية إضافة تنسيقات أخرى للنّصوص في الدرس القادم: تنسيق نصوص صفحات الويب باستخدام CSS

ترجمة -وبتصرف- للمقال Readable CSS من سلسلة Getting started with CSS على شبكة مطوّري Mozilla.

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

فهرس السلسلة:

• مدخل إلى أوراق الأنماط المتتالية (CSS).
• آلية عمل تعليمات CSS داخل المتصفحات.
• المحددات (Selectors) في CSS. (هذا الدرس)
• كيفية كتابة تعليمات CSS يسهل قراءتها.
• تنسيق نصوص صفحات الويب باستخدام CSS.
• التعامل مع الألوان في CSS.
• إضافة محتوى إلى صفحة ويب باستخدام CSS.
• تنسيق القوائم (Lists) في CSS.
• تعرف على الصناديق (Boxes) في CSS.
• رصف العناصر (Layout) في CSS.
• الجداول (Tables) في CSS.
• التعامل مع أجهزة العرض المختلفة والمطبوعات في CSS.

ما هي المحددات؟

لـCSS مجموعة من المصطلحات الخاصة الّتي تصف اللّغة. كنّا قد أنشأنا سطرًا في ورقة الأنماط محتواه:

strong { color: red; }

وفي مصطلحات CSS نقول عن هذا السّطر أنّه قاعدة (rule). تبدأ هذه القاعدة بالكلمة strong والّتي نُسمّيها المحدِّد (selector)، لأنّه يحدّد العناصر في DOM الّتي تُطبّق عليها القاعدة المعنيّة.

تفاصيل أكثر

• نُسمّي الجزء ضمن القوسين من القاعدة التّصريح (declaration).
• الكلمة color تُسمّى خاصّة (property)، وقيمتها (value) هي red.
• تفصل الفاصلة اللاتينية المنقوطة ; بين أزواجٍ من القيم والخواص ضمن التّصريح ذاته.
• سنطلق على المُحدّد strong في هذه السلسلة وصف محدّد لوسم (tag selector)، إلّا أنّه في مصطلحات CSS يُسمّى محدّد لنوع (type selector).

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

للخاصّتين class وid وضع خاصّ في CSS.

محددات الأصناف (Class selectors)

استخدم الخاصّة class في HTML لإسناد صنف إلى العنصر، بإمكانك اختيار أي اسم للصنف، ويمكن للصّنف الواحد أن يُسند إلى عدّة عناصر في الصّفحة.

لاستخدام محدّد الصنف في CSS اكتب اسم الصّنف مسبوقًا بنقطة (.).

محددات المعرفات (ID selectors)

استخدم الخاصّة id في عنصر لإسناد مُعرّف إلى هذا العنصر، بإمكانك اختيار أي اسم للمُعرّف، ولكن ينبغي أن لا يكون لعنصرين في الصّفحة المُعرّف ذاته.

لاستخدام مُحدّد المعرّف في CSS، اكتب اسم المُعرّف مسبوقًا برمز #.

مثال:

لوسم HTML التالي خاصّتا الصّنف والمعرّف معًا:

<p class="key" id="principal">

قيمة الخاصّة id، وهي principal يجب أن تكون فريدة لا تتكرّر في كامل المستند، ولكن يمكن استخدام الصّنف key لأي عدد من العناصر.

القاعدة التالية في CSS تجعل كل العناصر في المستند خضراء اللون، حتى وإن تكن جميعها عناصر <p>:

.key {
  color: green;
}

القاعدة التالية تجعل العنصر الوحيد ذا المعرّف principal عريض الخطّ:

#principal {
  font-weight: bolder;
}

محددات الخواص (Attribute Selectors)

لا تقتصر CSS على الخاصتين class وid، بل يمكنك تحديد خواصّ أخرى باستخدام الأقواس المربّعة []. ضع اسم الخاصة ضمن القوسين وأتبعه بعامل ثم قيمة (غير إلزاميّين). يمكن أيضًا جعل المطابقة غير حسّاسة لحالة الحروف اللّاتينية بإضافة "i" بعد القيمة، ولكن هذه الميزة غير مدعومة في معظم المتصفّحات. أمثلة:

• ‏‎[disabled]‎: تحدّد كل العناصر التي تملك الخاصّة "disabled".
• ‏‎[type='button']‎: تحدد كل العناصر من النوع "button".
• ‏‎[class~=key]‎: تحدّد العناص ذات الصّنف "key" بالضّبط وليس أي كلمة تحوي ضمنها "key" مثل "keyed" أو "monkey". تطابق من حيث الوظيفة المُحدّد .key.
• ‏‎:[lang|=es]‎ تحدّد العناصر المحدّدة على أنّها باللّغة الإسبانية. هذا يتضمن العناصر "es" و"es-MX" ولكن ليس "eu-ES".
• ‏‎[title*="example" i]‎ يحدّد العناصر التي يحوي عنوانها "example"، متجاهلًا حالة الحروف اللاتينيّة، قد لا يطابق هذا العنصر أي شيء في المتصفّحات الّتى لا تدعم الإشارة "i".
• ‏‎a[href^="https://"]‎ يحدّد الرّوابط الآمنة.
• ‏‎img[src$=".png"]‎ يحدّد الصور بصيغة PNG بطريقة غير مباشرة، إلّا أنه لا يحدد الصور بصيغة PNG إن كانت روابطها لا تنتهي بالحروف ".png".

محددات الأصناف الزائفة (pseudo-classes)

تعني كلمة "الصّنف الزائف" في CSS حالة خاصّة للعناصر التي يُراد تحديدها، فمثلًا إضافة ‎:hover‎ إلى المحدّد يؤدّي إلى تطبيق القاعدة عندما يُمرّر المستخدم مؤشّر الفأرة فوق العنصر الذي يستهدفه المُحدّد.

تسمح الأصناف الزائفة (والعناصر الزائفة) بتطبيق تنسيق على عنصر عندما يخضع لعوامل خارجيّة كتاريخ التّصفّح (‎:visited‎ مثلًا)، أو حالة محتواه (مثل ‎:checked‎)، أو موضع الفأرة (مثل ‎:hover‎)، يمكنك مراجعة القائمة الكاملة للمحدّدات على صفحة توصيف مُحدّدات CSS3.

الصيغة

selector:pseudo-class {
  property: value;
}

قائمة بالأصناف الزائفة

• :link
  :visited
  :active
  :hover
  :focus
  :first-child
  :last-child
  :nth-child
  :nth-last-child
  :nth-of-type
  :first-of-type
  :last-of-type
  :empty
  :target
  :checked
  :enabled
  :disabled

عمق التحديد (Specificity)

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

تفاصيل أكثر

يمكنك أيضًا جمع المُحدّدات، مُنشِئًا مُحدّدًا أكثر عمقًا، فمثلًا يحدّد key. كل العناصر من الصّنف key، والمُحدّد p.key يحدّد فقط العناصر <p> ذات الصّنف key.

إن تساوت المُحدّدات بدرجة العمق، كانت الأولوية للقاعدة الّتي ترد آخرًا في ورقة الأنماط.

التحديد تبعا للعلاقات بين العناصر

يمكن في CSS تحديد العناصر بناءً على علاقتها بعناصر أخرى، ويمكن بذلك إنشاء مُحدِّدات أكثر عمقًا.

المحددات الشائع استخدامها بناء على علاقة العناصر

يمكن أيضًا جمع أيّ من هذه المُحدّدات للتّعبير عن علاقات أكثر تعقيدًا.

يمكن استخدام الرّمز * للإشارة إلى "أي عنصر".

مثال

لجدول HTML التالي خاصّة id، ولكن ليس لسطوره وخلاياه أيّة مُعرّفات:

<table id="data-table-1">
...
<tr>
  <td>Prefix</td>
  <td>0001</td>
  <td>default</td>
</tr>
...

القواعد التالية تجعل الخليّة الأولى في كل سطر عريضة الخطّ، والثّانية ذات خطّ ثابت العرض، ولا تنطبق هذه القواعد إلا على الجدول السّابق المستند:

#data-table-1 td:first-child {text-decoration: underline;}
#data-table-1 td:first-child + td {text-decoration: line-through;}

هذه هي النّتيجة:

تفاصيل أكثر

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

لمزيد من الأمثلة عن الجداول، راجع صفحة الجداول في مرجع CSS.

تدريب: استخدام محددات الأصناف والمعرفات

1. حرّر ملفّ HTML الّذي تتدرّب عليه، كرّر الفقرة بنسخها ولصقها.
2. أضف الخاصّتين id وclass إلى النّسخة الأولى من الفقرة، وأضف id إلى الثّانية كما في المثال أدناه، أو يمكنك نسخ كامل المثال:

   <!doctype html>
   <html>
    <head>
    <meta charset="UTF-8">
    <title>Sample document</title>
    <link rel="stylesheet" href="style1.css">
    </head>
    <body>
      <p id="first">
        <strong class="carrot">C</strong>ascading
        <strong class="spinach">S</strong>tyle
        <strong class="spinach">S</strong>heets
      </p>
      <p id="second">
        <strong>C</strong>ascading
        <strong>S</strong>tyle
        <strong>S</strong>heets
      </p>
    </body>
   </html>

3. عدّل CSS مُستبدلًا كامل محتوى الملفّ:

   strong { color: red; }
   .carrot { color: orange; }
   .spinach { color: green; }
   #first { font-style: italic; }

4. احفظ الملفّات وحدّث المتصفّح لترى النّتيجة:

   

   بإمكانك تغير ترتيب الأسطر في CSS للتأكد من أن ترتيبها لا يؤثّر على النّتيجة، لأن مُحدّدات الأصناف carrot. و spinach. مُقدَّمَة على مُحدّد الوسم strong، ومُحدّد المُعرّف first# مُقدّم عليها جميعًا.

تمرين

1. بدون تعديل ملف HTML، أضف قاعدة وحيدة إلى CSS تبقي كل الحروف الأولى بنفس لونها الحالي، ولكن تجعل الحروف الأخرى في الفقرة الثّانية زرقاء:

   

2. عدّل القاعدة الّتي أضفتها للتوّ بحيث تجعل الفقرة الأولى زرقاء أيضًا (بدون تعديل أي شيء آخر):

   

#second { color: blue; }

p { color: blue; }

مثال عملي: استخدام محددات الأصناف الزائفة

1. أنشئ ملف HTML بالمحتوى التالي:

   <!doctype html>
   <html>
    <head>
    <meta charset="UTF-8">
    <title>Sample document</title>
    <link rel="stylesheet" href="style1.css">
    </head>
    <body>
      <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
    </body>
   </html>

2. عدّل ملف CSS مستبدلًا كلّ محتواه:

    a.homepage:link, a.homepage:visited {
      padding: 1px 10px 1px 10px;
      color: #fff;
      background: #555;
      border-radius: 3px;
      border: 1px outset rgba(50,50,50,.5);
      font-family: georgia, serif;
      font-size: 14px;
      font-style: italic;
      text-decoration: none;
    }
   
    a.homepage:hover, a.homepage:focus, a.homepage:active {
      background-color: #666;
    }

3. احفظ الملفّين وحدّث المتصفّح لمشاهدة النّتيجة (ضع مؤشر الفأرة فوق الرّابط لمشاهدة التأثير):

تدريب: استخدام المحددات بناء على العلاقات بين العناصر والأصناف الزائفة

بالإمكان الوصول إلى طرق معقدة لاستهداف العناصر بناء على العلاقات بين عناصرها والأصناف الزائفة، تشيع هذه التقنيات مثلًا بهدف إنشاء قوائم مُنسدلة باستخدام CSS فقط دون JavaScript. أساس هذه التقنية يعتمد على قواعد مشابهة لهذه:

div.menu-bar ul ul {
  display: none;
}

div.menu-bar li:hover > ul {
  display: block;
}

بحيث تطبّق على بنية HTML مثل هذه:

<div class="menu-bar">
  <ul>
    <li>
      <a href="example.html">Menu</a>
      <ul>
        <li>
          <a href="example.html">Link</a>
        </li>
        <li>
          <a class="menu-nav" href="example.html">Submenu</a>
          <ul>
            <li>
              <a class="menu-nav" href="example.html">Submenu</a>
              <ul>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
              </ul>
            </li>
            <li><a href="example.html">Link</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

اطّلع على مثالنا الكامل كمساعدة.

ما التالي؟

بدأت ورقة الأنماط تصبح معقّدة ومتشابكة، سنناقش كيف نُبسّطها ونجعلها سهلة القراءة في الدّرس القادم: كيفية كتابة تعليمات CSS يسهل قراءتها.

ترجمة -وبتصرّف- للمقال Selectors من سلسلة Getting started with CSS على شبكة مطوّري Mozilla.

 يشرح هذا الجزء من سلسلة تعليم CSS كيف تعمل CSS في المتصفّحات وما الهدف من وجود DOM. سنتعلّم أيضًا كيف نُحلّل مستندًا بسيطًا.

فهرس السلسلة:

• مدخل إلى أوراق الأنماط المتتالية (CSS).
• آلية عمل تعليمات CSS داخل المتصفحات. (هذا الدرس)
• المحددات (Selectors) في CSS.
• كيفية كتابة تعليمات CSS يسهل قراءتها.
• تنسيق نصوص صفحات الويب باستخدام CSS.
• التعامل مع الألوان في CSS.
• إضافة محتوى إلى صفحة ويب باستخدام CSS.
• تنسيق القوائم (Lists) في CSS.
• تعرف على الصناديق (Boxes) في CSS.
• رصف العناصر (Layout) في CSS.
• الجداول (Tables) في CSS.
• التعامل مع أجهزة العرض المختلفة والمطبوعات في CSS.

كيفية عمل CSS

عندما يعرض المتصفّح المستند، فإنّه يجمع محتواه مع معلومات التنسيق، ويُعالج المستند على مرحلتين:

1. يحوّل المتصفّح لغة الرّماز وCSS إلى DOM (اختصارًا لـDocument Object Model). يُمثّل DOM المستند في ذاكرة الحاسوب، ويجمع محتوى المستند مع تنسيقه.
2. يعرض المتصفّح محتويات DOM.

تستخدم لغات الرّماز عناصر (elements) لتعريف هيكل المستند. يُحدّد العنصر بوسم (tag)، وهو نص يبدأ بالرّمز ‎<‎ وينتهي بالرّمز ‎>‎. معظم العناصر لها زوجان من الوسوم، وسم في البداية وآخر في النهاية. لكتابة وسم البداية أدرج اسم العنصر بين ‎<>‎، أما وسم النّهاية فيكتب بإضافة ‎/‎ بعد ‎<‎ وقبل اسم العنصر.

قد يكون لبعض العناصر وسم بادئ فقط، أو وسم وحيد فيه تأتي ‎/‎ بعد اسم العنصر، وذلك تبعًا للغة الرّماز. قد يكون العنصر أيضًا حاويًا على عناصر آخرى ضمن وسْمَيه الأول والأخير. عليك التأكد من إغلاق الوسوم ضمن العنصر الحاوي.

لـDOM بنية تشبه الشجرة، حيث يصبح كل عنصر أو خاصّة أو سلسلة من النصوص في لغة الرماز عقدة (node) في البنية الشجريّة. تُحدّد العُقد بعلاقتها بالعقد الأخرى، فبعض العناصر هي آباء (parent nodes) لعناصر آخرى (children nodes)، وقد يكون للأبناء إخوة (sibling nodes).

يُعينك فهم DOM على تصميم وتنقيح وصيانة CSS، لأنّه يمثّل نقطة التقاء CSS مع محتوى المستند.

مثال

يُنشئ الوسم ‎<p>‎ ونظيره ‎</p>‎ عنصرًا حاويًا:

<p>
  <strong>C</strong>ascading
  <strong>S</strong>tyle
  <strong>S</strong>heets
</p>

في هيكل DOM، تُعتير العقدة P أبًا، أبناؤه هي العقد STRONG والعقد النصيّة، وبالمثل فإنّ العقد STRONG آباء للعقد النّصيّة.

├─STRONG
│ └─"C"
├─"ascading"
├─STRONG
│ └─"S"
├─"tyle"
├─STRONG
│ └─"S"
└─"heets"

تدريب: تحليل DOM باستخدام أداة فحص DOM

لتحليل هيكل DOM، نحتاج إلى برنامج خاصّ، بإمكانك استخدام إضافة DOM Inspector من Mozilla لتحقيق ذلك. ما عليك إلا تثبيت الإضافة (المزيد من التفاصيل أدناه).

1. استخدم متصفح Mozilla لفتح مستند HTML الذي أنشأته.
2. من قائمة المتصفّح اختر: أدوات > DOM Inspector أو أدوات > تطوير الويب > DOM Inspector. تفاصيل أكثر إن لم يحوِ متصفح Mozilla عندك على أداة فحص DOM، فبإمكانك تثبيت الإضافة من موقع الإضافات وإعادة تشغيل المتصفح ثم العودة لهذا الدّرس.
3. إن لم ترغب بتثبيت هذه الإضافة (أو لم تكن تستعمل متصفح من Mozilla)، بإمكانك استخدام Web X-Ray Goggles كما هو مشروح في القسم التالي. بإمكانك أيضًا تجاوز هذا القسم والمتابعة.
4. في أداة فحص DOM، وسّع عقد المستند بالنقر على الأسهم. ملاحظة: قد تؤدي المسافات في ملف HTML إلى عرض عقد نصية فارغة، يمكنك تجاهلها.

يبدو جزء من النتيجة مشابهًا لما يلي، تبعًا للعقد الّتي وسّعتها:

│ ▼╴P
│ │ │ ▼╴STRONG
│ │ └#text
│ ├╴#text
│ ►╴STRONG
│ │

عندما تختار أيّة عقدة، بإمكانك استخدام اللوحة على يمين DOM Inspector للاطّلاع على معلومات إضافية عنها، فمثلًا: يعرض DOM Inspector النص في اللوحة على اليمين عندما تحتار عقدة نصيّة.

عندما تختار عقدة تمثّل عنصرًا، تُحلّل الأداة هذه العقدة وتقدّم معلومات كثيرة في اللّوحة على اليمين، يكون من ضمنها معلومات التنسيق.

تمرين

انقر على عقدة من نوع STRONG في أداة فحص DOM، ثم استخدم اللوحة على اليمين لإيجاد الموضع الّذي يُعيّن فيه لون العقدة إلى أحمر، والموضع الّذي يُجعل فيه خطّها أعرض من النصّ العاديّ.

استخدام Web X-Ray Goggles

تعرض الأداة Web X-Ray Goggles معلومات أقل من DOM Inspector، ولكنّها أبسط في التثبيت والاستعمال:

1. اذهب إلى الصّفحة الرئيسيّة للأداة.
2. اسحب رابط العلامة المرجعيّة إلى شريط المتصفّح.
3. افتح مستند HTML الّذي أنشأته.
4. فعّل الأداة بالنقر على العلامة المرجعيّة في الشّريط.
5. اسحب مؤشّر الفأرة فوق العناصر المختلفة في المستند.

تتالي الأنماط ووراثتها

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

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

تجتمع المصادر الثلاثة الأساسية لمعلومات التنسيق مشكّلة ما نسمّيه تعاقب الأنماط (cascade)، وهذه الأنماط هي:

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

تُغيّر أنماط المستخدم الأنماط الّتي يعيّنها المتصفّح، ثمّ تغيّر أنماط مؤلّف المستند تلك الّتي عيّنها المستخدم. في هذه السّلسلة أنت مؤلّف المستند، ولن نتعامل إلّا مع هذا النّوع من الأنماط.

مثال

عندما تقرأ هذا المستند في متصفّح، يأتي جزء من التنسيق الّذي تراه من الإعدادات المبدئيّة لـHTML في المتصفّح.

وقد يأتي جزء آخر من الإعدادات المخصّصة للمتصفّح، إذ يمكن تخصيصها في مربع التفضيلات في Firefox مثلًا، أو يمكن تعيينها في ملف userContent.css في ملفّ المتصفّح الشّخصيّ.

ويأتي الجزء الأخير من التنسيق من خادوم موقع الأكاديميّة.

عندما تفتح المستند الّذي تتدرّب عليه في المتصفّح، تكون العناصر <strong> أعرض خطًّا من بقيّة النّصّ، هذا التنسيق يأتي من إعدادات المتصفّح المبدئيّة.

كما أن العناصر نفسها ذات لون أحمر، وهذا التنسيق يأتي من ورقة الأنماط الّتي كتبناها بأنفسنا.

ترث عناصر <strong> أيضًا معظم تنسيقها عن عناصر <p> لأنّها أبناؤها، وبالمثل ترث العناصر <p> معظم تنسيق عنصر <body>.

يكون للتنسيقات الّتي يحدّدها مؤلّف المستند الأولويّة في تعاقب الأنماط على تلك الّتي يحدّدها القارئ، وتكون الأولويّة الأقل لتنسيقات المتصفّح المبدئيّة.

بالنّسبة للتنسيقات الموروثة، يكون للتنسيقات المعرّفة على العقدة ذاتها الأولويّة على تلك الّتي ترثها عن آبائها.

هناك قواعد أخرى لهذه الأولويّات، سنتعرّف عليها لاحقًا.

تفاصيل أكثر

توفّر CSS أيضًا طريقة للقارئ لحجب التنسيق الّذي يحدّده مؤلّف المستند باستخدام الكلمة !important.

وهذا يعني أنّه لا يمكن توقّع الشّكل الّذي سيكون عليه المستند لكلّ قارئ.

إذا أردت معرفة المزيد عن موضوع التعاقب والوراثة، انظر فقرة Assigning property values, Cascading and inheritance في تعريف CSS.

تمرين: استخدام الوراثة

1. حرّر ملفّ CSS الّذي تتدرّب عليه.
2. أضف هذا السّطر بنسخه ولصقه. لا يهمّ إن كان فوق أو تحت السّطر الّذي أضفته من قبل. إلّا أن إضافته فوقه أكثر منطقيّة لأن العنصر <p> أب للعنصر <strong> في مستندك.

   p {color: blue; text-decoration: underline;}

3. احفظ الملفّ وحدّث متصفّحك لتشاهد تأثير ذلك على المستند. يؤدّي ذلك إلى تسطير النّص في كامل الفقرة، بما في ذلك الحروف الأولى من كلّ كلمة، وهذا يعني أن العناصر <strong> ورثت عن أبيها نمط تسطير النّصّ. ولكّن هذه العناصر ما تزال حمراء اللّون، لأنّ اللون الأحمر هو نمطها الخاص، ولذا يكون له الأولويّة على اللّون الأزرق لأبيها العنصر <p>.

قبل

<p>
  <strong>C</strong>ascading
  <strong>S</strong>tyle
  <strong>S</strong>heets
</p>

strong {color:red}

بعد

<p>
  <strong>C</strong>ascading
  <strong>S</strong>tyle
  <strong>S</strong>heets
</p>

p {color:blue; text-decoration:underline}
strong {color:red}

تمرين

عدّل ورقة الأنماط بحيث تكون الحروف الأولى فقط مُسطَّرة:

p {color: blue; }
strong {color: orange; text-decoration: underline;}

ما التالي؟

سنتعرّف في الدّرس التالي كيف نستهدف العناصر بطريقة أكثر انتقائيّة.

ترجمة -وبتصرف- للمقال How CSS works من سلسلة Getting started with CSS على شبكة مطوّري Mozilla. 

أوراق الأنماط المتتالية (Cascading Style Sheets أو CSS اختصارًا) هي لغة تُستخدم لوصف كيفيّة عرض المستندات للمستخدمين. تُكتب هذه المستندات في لغة رُماز مثل HTML.

المستند هو مجموعة من المعلومات التي تهيكل باستخدام لغة رُماز (markup language).

يُقصّد بعرض المستند للمستخدم تحويله إلى صيغة مُفيدة للجمهور، فالمتصفحات مثل Firefox وChrome وInternet Explorer مًصمّمة بحيث تعرض المستندات للمستخدمين مرئيًّا، مثلًا: على شاشة حاسوب أو جهاز إسقاط (projector) أو طابعة.

سنتعرض خلال هذه السلسلة إلى المواضيع التالية:

• مدخل إلى أوراق الأنماط المتتالية (CSS) (هذا الدرس).
• آلية عمل تعليمات CSS داخل المتصفحات.
• المحددات (Selectors) في CSS.
• كيفية كتابة تعليمات CSS يسهل قراءتها.
• تنسيق نصوص صفحات الويب باستخدام CSS.
• التعامل مع الألوان في CSS.
• إضافة محتوى إلى صفحة ويب باستخدام CSS.
• تنسيق القوائم (Lists) في CSS.
• تعرف على الصناديق (Boxes) في CSS.
• رصف العناصر (Layout) في CSS.
• الجداول (Tables) في CSS.
• التعامل مع أجهزة العرض المختلفة والمطبوعات في CSS.

أمثلة

• صفحة الويب هذه الّتي تقرأها هي مُستند. تُهيكل المعلومات التي تشاهدها في صفحة ويب باستخدام لغة HTML (اختصارًا لـHyperText Markup Language).
• مرُبعات الحوار في التطبيقات هي أيضًا مُستندات، وقد تكون مُهيكلة باستخدام لغة رماز مثل XUL (اختصارًا لـXML User Interface Language)، والتي قد تجدها في بعض برامج Mozilla.

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

تفاصيل أكثر

كلمة المستند لا تعني ما تعنيه كلمة "ملفّ"، إلّا أنّه يمكن حفظ المستندات ضمن ملفّات.

المستند الذي تقرأه الآن لم يُحفَظ في ملفّ، بل يُجلب من قاعدة بيانات على الخادم والذي بدوره يولّد المستند بجمع أجزائه من عدّة ملفّات. مهما يكن الأمر، فإنّك في هذه السّلسلة ستتعامل مع مستندات محفوظة في ملفّات.

بإمكانك إيجاد معلومات أكثر عن المستندات ولغات الرُماز في مواقع أخرى من شبكة مطوّري Mozilla:

سنطّلع على أمثلة من هذه اللغات في الجزء الثّاني من السلسلة.

تفاصيل أكثر

يُدعى البرنامج الذي يعرض المستندات على المستخدم في المصطلحات الرسميّة لـCSS بوكيل المستخدم (user agent أو UA). المتصفّح ليس إلّا واحدًا من وكلاء المستخدم، فلا تقتصر CSS على المتصفّحات أو العرض المرئيّ، ولكنّنا في الجزء الأوّل من السّلسلة لن نتعامل إلّا مع CSS في المتصفّح.

للاطّلاع على التعاريف الرسمية للمصطلحات في CSS، انظر Definitions في وصف CSS من قبل جمعيّة W3C المسؤولة عن تعيين المعايير القياسيّة للويب.

لنبدأ العمل: إنشاء مستند

• أنشئ مجلّدًا جديدًا في جهازك لحفظ وتنظيم تمارين هذه السّلسلة.
• افتح محرّر النصوص وأنشئ ملفًّا نصيًّا جديدًا، سنقوم بكتابة المستند في هذا الملف خلال التمارين القليلة التالية.
• انسخ والصق HTML أدناه. احفظ الملف باسم doc1.html.

1. <!DOCTYPE html>
   <html>
    <head>
    <meta charset="UTF-8">
    <title>Sample document</title>
    </head>
   
    <body>
      <p>
        <strong>C</strong>ascading
        <strong>S</strong>tyle
        <strong>S</strong>heets
      </p>
    </body>
   </html>

• افتح علامة تبويب أو نافذة جديدة في متصفّحك، ثم افتح الملف الذي أنشأته. من المُفترض أن ترى النّص وحروفه الأولى بخطّ عريض، كهذه الصّورة:

قد يختلف ما تراه في متصفحك قليلًا عن الصّورة من حيث الخط أو الألوان أو المسافات بين الحروف، وهذا غير مهمّ الآن.

المستند الآن لا يستخدم CSS، وهذا ما سنفعله في الخطوة التالية.

لماذا نستخدم CSS؟

استخدم CSS لتعريف تنسيق مستنداتك، بما في ذلك التصميم والتخطيط والاختلافات في العرض بين الأجهزة المختلفة وقياسات الشاشات المختلفة. بإمكانك إضافة CSS في رأس (<head>) مستند (نُسمّي ذلك ورقة أنماط مُضمّنة) أو إرفاق ملف منفصل يحوي تعريف التنسيقات (ورقة أنماط خارجيّة)، ثمّ ربطها مع المستند برابط يُضاف إلى رأسه.

لللأسلوب الأخير عدّة محاسن، ففصل التنسيقات عن الرُماز:

• يقلّل من التكرار
• يُسهل الصّيانة
• يسمح بإجراء تغيير على نطاق الموقع كاملًا من مكان واحد

مثال

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

عندما يعرض مستخدم صفحة ويب، يقوم المتصفح بجلب معلومات التنسيق في الوقت نفسه.

عندما يطبع مستخدم صفحة ويب، بإمكانك توفير معلومات تنسيق مختلفة تُسهّل من قراءة الصّفحة المطبوعة.

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

تفاصيل أكثر

توفّر لُغة رُماز مثل HTML بعض الوسائل لوصف تنسيق المستند بشكل منفصل عن CSS، فيمكنك مثلًا في HTML استخدام الوسم <b> لجعل النّص عريضًا، ويمكنك تحديد لون خلفيّة المستند في وسم متن المستند <body>. عندما تستخدم CSS، يُفضّل عادةً تجنّب استخدام هذه الميزات في لغة الرُماز بحيث يبقى وصف تنسيق المستند في موضع واحد فقط.

لنعمل: إنشاء ورقة أنماط

1. أنشئ ملفًّا نصيًّا آخر بجوار الملف السابق doc1.html.
2. احفظ الملف باسم style1.css. سيحوي هذا الملف وصف التنسيقات.
3. في ملفّ CSS، انسخ والصق السّطر التالي ثمّ احفظ الملف:

4. strong {color: red;}

ربط المستند بورقة الأنماط

• لربط المستند بورقة الأنماط، عدّل ملفّ HTML، أضف السّطر التالي في موقعه:

<link rel="stylesheet" href="style1.css">

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Sample document</title>
 <link rel="stylesheet" href="style1.css">
 </head>
 <body>
   <p>
     <strong>C</strong>ascading
     <strong>S</strong>tyle
     <strong>S</strong>heets
   </p>
 </body>
</html>

• احفظ الملف وحدّث الصّفحة في متصفّحك. تجعل ورقة الأنماط الحروف الأولى بلون أحمر، كهذا:

ما التالي؟

لدينا الآن مستند بسيط مرتبط بورقة أنماط خارجيّة، وسنتعلّم كيف يجمعهما المتصفح معًا لعرض الصّفحة في الجزء التالي: كيف تعمل CSS؟

ترجمة (بتصرّف) للجزأين الأوّلين What is CSS و Why use CSS من سلسلة Getting started with CSS على شبكة مطوّري Mozilla.

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

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

سوف نستخدم أيضًا إضافة اسمها jScrollPane وذلك للحصول على شريط تمرير (scrollbar) يظهر عندما يكون المحتوى أطول من ارتفاع المتصفح.

وهذه قائمة بإضافات jQuery التي سوف نستخدمها:

1. BookBlock
2. Custom jQuery++
3. jScrollPane
4. jQuery Mouse Wheel Plugin
5. Custom Mdernizer

يمكنك معاينة المثال الموضح في هذا الدرس من هنا.

كما يمكنك تحميل الملفات المصدرية.

بنية ملف HTML

في البداية يجب أن يكون لدينا حاوٍ رئيسي لاحتواء جميع العناصر، وداخل هذا الحاوي سوف يكون هناك عنصر <div> للقائمة الجانبية وسوف نعطيه فئة (class) بالاسم "menu-panel" وسوف يكون هناك عنصر <div> آخر يحتوي على المحتوى الرئيسي للموقع وسوف نعطيه فئة بالاسم "bb-custom-wrapper". وفي داخل كل قسم سوف يكون هناك حاوٍ للمحتوى وعنصر <div> سوف نحتاجه من أجل شريط التمرير الذي ذكرناه سابقًا.

<div id="container" class="container">
    <div class="menu-panel">
        <h3>Table of Contents</h3>
        <ul id="menu-toc" class="menu-toc">
            <li class="menu-toc-current"><a href="#item1">Self-destruction</a></li>
            <li><a href="#item2">Why we die</a></li>
            <li><a href="#item3">The honeymoon</a></li>
            <li><a href="#item4">A drawing joke</a></li>
            <li><a href="#item5">Commencing practice</a></li>
        </ul>
    </div>

    <div class="bb-custom-wrapper">
        <div id="bb-bookblock" class="bb-bookblock">
            <div class="bb-item" id="item1">
                <div class="content">
                    <div class="scroller">
                        <h2>Self-destruction</h2>
                        <p>...</p>
                    </div>
                </div><!-- /content -->
            </div><!-- /bb-item -->

            <div class="bb-item" id="item2"><!-- ... --></div>
            <div class="bb-item" id="item3"><!-- ... --></div>
            <div class="bb-item" id="item4"><!-- ... --></div>
            <div class="bb-item" id="item5"><!-- ... --></div>
        </div><!-- /bb-bookblock -->

        <nav>
            <a id="bb-nav-prev" href="#">←</a>
            <a id="bb-nav-next" href="#">→</a>
        </nav>

        <span id="tblcontents" class="menu-button">Table of Contents</span>
    </div><!-- /bb-custom-wrapper -->
</div><!-- /container -->

سوف نقوم بربط عناصر القائمة الجانبية بصفحات الموقع (التي تحمل الفئة "bb-item)، وسوف نُضيف أيضًا سهمين في أعلى الصفحة من أجل التنقل بين الصفحات وزر يقوم بفتح وإغلاق القائمة الجانبية.

لنقم الآن بإضافة تنسيقات CSS.

تنسيقات CSS

لن نتحدث هنا عن التنسيقات التي تأتي مع إضافة BookBlock لأنك سوف تجدها داخل ملف bookblock.css، وإنّما سوف نُركّز على التنسيقات الأخرى المهمة.

لنبدأ التنسيقات بإضافة سطر يقوم بجلب الخط المسمى "Lato" من خدمة Google web fonts:

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

سوف نقوم بإعطاء الوسم <html> الخاصية height: 100% وذلك لأننا سوف نحتاج أن نجعل بعض العناصر تتمدد على ارتفاع المتصفح كاملًا:

html {
    height: 100%;
}

سوف نستخدم أيضًا الخاصية box-sizing: border-box وذلك حتى نستخدم قيم مئوية لكل من العرض والإرتفاع أثناء استخدام padding دون القلق حول أبعاد العناصر والقيام بعمليات حسابية نحن بغنىً عنها:

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

لنقم الآن بتعريف الخط الذي سوف نستخدمه في الموقع (العنصر body) ونُعطيه ارتفاع بقيمة 100% (تذكّر أننا نريد ارتفاع بهذه القيمة لأنه سوف يكون هناك عناصر تتموضع بشكل مطلق (absolute positioning) وسوف تحتاج أن تتمدد على ارتفاع المتصفح كاملًا):

body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    font-weight: 400;
    font-size: 100%;
    color: #333;
    height: 100%;
}

سوف نستعمل أيضًا إضافة Modernizr وسوف نُضيف الفئة "no-js" إلى وسم <html>، فإذا كانت الجافاسكربت مفعّلة فإنّ Modernizr سوف يستبدل تلك الفئة بالفئة "js". وهذا سوف يساعدنا على إعطاء خصائص CSS معينة لبعض العناصر التي لا نريدها إذا كانت الجافاسكربت معطّلة.

لاحظ أيضًا أننا نحتاج أن يكون عرض الصفحة وارتفاعها بقيمة 100% فقط إذا كانت الجافاسكربت مفعّلة وعندها فقط نريد من العنصر body أن يكون له خاصية overflow: hidden:

.js body {
    overflow: hidden;
}

وهذه بعض التنسيقات الخاصة بالروابط:

a {
    color: #555;
    text-decoration: none;
}

a:hover {
    color: #000;
}

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

دعونا إذًا نقوم بإعطاء الحاوي الرئيسي عرضًا وارتفاعًا بقيمة 100% وأن نُضيف الخاصية transition إلى الحاوي container:

.container,
.bb-custom-wrapper,
.bb-bookblock {
    width: 100%;
    height: 100%;
}

.container {
    position: relative;
    left: 0px;
    transition: left 0.3s ease-in-out;
}

عند النقر على أيقونة القائمة الجانبية فإن فئة (class) أخرى سوف يتم إضافتها إلى الحاوي container والتي سوف تحتوي على الخاصية left: 240px (نفس العرض الخاص بالقائمة الجانبية) وبالتالي فإنّ الصفحة كاملة سوف تتحرك إلى اليمين بمقدار 240px وبالتالي ظهور القائمة الجانبية:

.slideRight {
    left: 240px;
}

ولكن بدون الجافاسكربت لن نكون قادرين على القيام بما سبق لذلك سوف نقوم بإضافة الخاصية padding-left: 240px:

.no-js .container {
    padding-left: 240px;
}

ونريد أن تكون القائمة الجانبية ثابتة في الجانب الأيسر بشكل افتراضي:

.menu-panel {
    background: #f1103a;
    width: 240px;
    height: 100%;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

وإذا كانت الجافاسكربت مفعلة فسوف نقوم بموضعة القائمة الجانبية بشكل مطلق وإلى اليسار بقيمة -240px:

.js .menu-panel {
    position: absolute;
    left: -240px;
}

وهذه هي التنسيقات الخاصة بعناصر القائمة الجانبية:

.menu-panel h3 {
    font-size: 1.8em;
    padding: 20px;
    font-weight: 300;
    color: #fff;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05);
}

.menu-toc {
    list-style: none;
}

.menu-toc li a {
    display: block;
    color: #fff;
    font-size: 1.1em;
    line-height: 3.5;
    padding: 0 20px;
    cursor: pointer;
    background: #f1103a;
    border-bottom: 1px solid #dd1338;
}

.menu-toc li a:hover,
.menu-toc li.menu-toc-current a{
    background: #dd1338;
}

وأمّا بالنسبة للقائمة الرئيسية التي سوف تحتوي على السهمين فإننا سوف نقوم بموضعتها بشكل مطلق وفوق جميع العناصر الأخرى:

.bb-custom-wrapper nav {
    top: 20px;
    left: 60px;
    position: absolute;
    z-index: 1000;
}

كما أنّ روابط السهمين وزر القائمة الجانبية سوف يتموضعان بشكل مطلق (position: absolute) وسوف نعطيها الخاصية border-radius: 50% لنجعلها تظهر كالدائرة:

.bb-custom-wrapper nav span,
.menu-button {
    position: absolute;
    width: 32px;
    height: 32px;
    top: 0;
    left: 0;
    background: #f1103a;
    border-radius: 50%;
    color: #fff;
    line-height: 30px;
    text-align: center;
    speak: none;
    font-weight: bold;
    cursor: pointer;
}

.bb-custom-wrapper nav span:last-child {
    left: 40px;
}

.bb-custom-wrapper nav span:hover,
.menu-button:hover {
    background: #000;
}

سوف يكون الزر الذي يفتح ويغلق القائمة الجانبية موجودًا في أعلى يسار الصفحة وسوف نقوم بإخفاء النص الموجود بداخله (نريد أن تظهر الأيقونة فقط):

.menu-button {
    z-index: 1000;
    left: 20px;
    top: 20px;
    text-indent: -9000px;
}

لنقم الآن بإنشاء أيقونة بسيطة بدون استعمال أي صور وذلك باستعمال العنصر الزائف :after واستعمال الخاصية box-shadow والتي سوف تعمل على إنشاء الخطين العلوي والسفلي للأيقونة:

.menu-button:after {
    position: absolute;
    content: '';
    width: 50%;
    height: 2px;
    background: #fff;
    top: 50%;
    margin-top: -1px;
    left: 25%;
    box-shadow: 0 -4px #fff, 0 4px #fff;
}

وفي حالة كان الجافاسكربت معطلًا فإننا نريد أن نخفي هذه العناصر:

.no-js .bb-custom-wrapper nav span,
.no-js .menu-button {
    display: none;
}

لننتقل الآن إلى تنسيق الأجزاء الداخلية لكل قسم من أقسام الصفحة (bb-item). نريد أن يتم موضعة المحتوى (content) بشكل مطلق ونريد ان نستعمل الخاصية overflow: hidden، وهذا مهم لأننا نريد تطبيق شريط التمرير هنا ونريد أن نفعل ذلك فقط عند قلب/تغيير الصفحة. فإذا لم نستخدم الخاصية overflow: hidden فإنّك سوف ترى المحتوى يتداخل ببعضه. وأعيد وأكرر مرة أخرى بأنّ هذا سوف يحدث فقط إذا كان الجافاسكربت مفعلًا ولذلك سوف نستخدم الفئة "js":

.js .content {
    position: absolute;
    top: 60px;
    left: 0;
    bottom: 50px;
    width: 100%;
    overflow: hidden;
}

العنصر <div class="scroller"> هو الذي سوف ينمو مع المحتوى لذلك سوف نعطيه الخاصية padding:

.scroller {
    padding: 10px 5% 10px 5%;
}

لاحظ أننا استعملنا قيم مئوية للجوانب وذلك حتى نجعل الصفحة تتجاوب مع حجم الشاشة.

دعونا نتخلص من الحواف الحادة عندما نقوم بالتمرير (scroll) وذلك باستخدام العناصر الزائفة إلى أعلى وأسفل عنصر المحتوى مع استخدام تدرج بين اللون الأبيض والشّفّاف:

.js .content:before,
.js .content:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    z-index: 100;
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,0) 100%
        );
}

.js .content:after {
    top: auto;
    bottom: 0;
    background:
        linear-gradient(
            to top,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,0) 100%
        );
}

هذا سوف يجعل النص يظهر بشكل باهت.

لنقم الآن بتنسيق عناصر النصوص:

.content h2 {
    font-weight: 300;
    font-size: 4em;
    padding: 0 0 10px;
    color: #333;
    margin: 0 1% 40px;
    text-align: left;
    box-shadow: 0 10px 0 rgba(0,0,0,0.02);
    text-shadow: 0 0 2px #fff;
}

.no-js .content h2 {
    padding: 40px 1% 20px;
}

.content p {
    font-size: 1.2em;
    line-height: 1.6;
    font-weight: 300;
    padding: 5px 8%;
    text-align: justify;
}

كل ما تبقى علينا الآن من تنسيقات CSS هو استخدام الـmedia queries. فإذا كانت الجافاسكربت معطلة فإننا لا نريد أن تظهر القائمة الجانبية إذا كان العرض أقل من 800px. كان هذا فقط مثالًا بسيطًا على كيفية التحكم بالعناصر تحت ظروف وشروط معينة.

الـmedia query الأخيرة سوف تعمل على تكبير الخط قليلًا من أجل الأجهزة صغيرة الحجم كالهواتف.

@media screen and (max-width: 800px){
    .no-js .menu-panel {
         display: none;
    }

    .no-js .container {
        padding: 0;
    }
}

@media screen and (max-width: 400px){
    .menu-panel,
    .content {
         font-size: 75%;
    }
}

كان هذا كل ما يتعلق بتنسيقات CSS ويتبقى علينا استخدام بعض الجافاسكربت.

بعض الجافاسكربت

سوف نبدأ اولًا بتخزين (caching) بعض العناصر حتى لا نضطر إلى استدعائها في كل مرة وسوف نقوم أيضًا بتهئية/مناداة إضافة BookBlock. نُريد أيضًا أن نقوم بضبط بعض الأمور بعد كل قلب/تغيير للصفحة وهذه الأمور هي رقم الصفحة الحالية والسلوك الخاص بإضافة jScrollPane. وهذا محدد في الاستدعاء الخلفي (callback) المسمى onEndFlip والممرر إلى إضافة BookBlock.

var $container = $( '#container' ),

// the element we will apply the BookBlock plugin to
$bookBlock = $( '#bb-bookblock' ),

// the BookBlock items (bb-item)
$items = $bookBlock.children(),

// index of the current item
current = 0,

// initialize the BookBlock
bb = $( '#bb-bookblock' ).bookblock( {
    speed : 800,
    perspective : 2000,
    shadowSides : 0.8,
    shadowFlip : 0.4,
    // after each flip...
    onEndFlip : function(old, page, isLimit) {
         // update the current value
         current = page;
         
         // update the selected item of the table of contents (TOC)
         updateTOC();

         // show and/or hide the navigation arrows
         updateNavigation( isLimit );

         // initialize the jScrollPane on the content div for the new item
         setJSP( 'init' );

         // destroy jScrollPane on the content div for the old item
         setJSP( 'destroy', old );
    }
} ),

// the navigation arrows
$navNext = $( '#bb-nav-next' ),
$navPrev = $( '#bb-nav-prev' ).hide(),

// the table of content items
$menuItems = $container.find( 'ul.menu-toc > li' ),

// button to open the TOC
$tblcontents = $( '#tblcontents' ),

transEndEventNames = {
    'WebkitTransition': 'webkitTransitionEnd',
    'MozTransition': 'transitionend',
    'OTransition': 'oTransitionEnd',
    'msTransition': 'MSTransitionEnd',
    'transition': 'transitionend'
},

// transition event name
transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],

// check if transitions are supported
supportTransitions = Modernizr.csstransitions;

لنقم أولًا بربط الأحداث ببعض العناصر التي تم تهيئتها سابقًا، كما أننا نريد أن نقوم بتهيئة jScrollPane لأول عنصر (العنصر الحالي).

function init() {
    // initialize jScrollPane on the content div of the first item
    setJSP( 'init' );
    initEvents();
}

بما أننا سوف نقوم بتهيئة وإعادة تهيئة وتدمير jScrollPane فلنقم بتعريف دالة لذلك:

function setJSP( action, idx ) {
    var idx = idx === undefined ? current : idx,
    $content = $items.eq( idx ).children( 'div.content' ),
    apiJSP = $content.data( 'jsp' );

    if( action === 'init' && apiJSP === undefined ) {
        $content.jScrollPane({verticalGutter : 0, hideFocus : true });
    }
    else if( action === 'reinit' && apiJSP !== undefined ) {
        apiJSP.reinitialise();
    }
    else if( action === 'destroy' && apiJSP !== undefined ) {
        apiJSP.destroy();
    }
}

سوف نحتاج إلى ربط العديد من الأحداث كالتالي:

1. سوف يتم استدعاء الدالتين ()next و()prev الخاصتين بإضافة BookBlock وذلك عند النقر على أزرار التنقل أو السحب باستخدام الفأرة.
2. سوف يظهر جدول المحتويات أو يختفي عند النقر على زر القائمة (tblcontents$).
3. سوف يتم استدعاء الدالة ()jump الخاصة بإضافة BookBlock وذلك عند النقر على أي عنصر من عناصر جدول المحتويات.
4. سوف يتم تهيئة jScrollPane عند القيام بتغيير حجم النافذة (window resize).

function initEvents() {
    // add navigation events
    $navNext.on( 'click', function() {
        bb.next();
        return false;
    } );

    $navPrev.on( 'click', function() {
        bb.prev();
        return false;
    } );

    // add swipe events
    $items.on( {
        'swipeleft' : function( event ) {
             if( $container.data( 'opened' ) ) {
                 return false;
             }
             bb.next();
             return false;
         },

        'swiperight' : function( event ) {
            if( $container.data( 'opened' ) ) {
                return false;
            }
            bb.prev();
            return false;
        }
    } );

    // show TOC
    $tblcontents.on( 'click', toggleTOC );

    // click a menu item
    $menuItems.on( 'click', function() {
        var $el = $( this ),
        idx = $el.index(),
        jump = function() {
            bb.jump( idx + 1 );
        };
        current !== idx ? closeTOC( jump ) : closeTOC();
        return false;
    } );

    // reinit jScrollPane on window resize
    $( window ).on( 'debouncedresize', function() {
        // reinitialise jScrollPane on the content div
        setJSP( 'reinit' );
    } );
}

ظهور أزرار التنقل من عدمه سوف يعتمد على الصفحة الحالية، فإذا كُنّا في الصفحة الأولى فإننا سوف نرى فقط زر "التالي" وإذا كُنّا في الصفحة الأخيرة فإننا سوف نرى فقط زر "السابق":

function updateNavigation( isLastPage ) {
    if( current === 0 ) {
        $navNext.show();
        $navPrev.hide();
    }
    else if( isLastPage ) {
        $navNext.hide();
        $navPrev.show();
    }
    else {
        $navNext.show();
        $navPrev.show();
    }
}

عندما نفتح جدول المحتويات (القائمة الجانبية) فإننا نريد أن تختفي عناصر التنقل وأن تظهر مرة أخرى عندما نقوم بإغلاق القائمة الجانبية.

سوف نقوم بتحريك القائمة الجانبية باستخدام خاصية transition، وإذا لم تكن هذه الخاصية مدعومة من المتصفح فإننا سوف نستخدم fallback بسيط:

function toggleTOC() {
    var opened = $container.data( 'opened' );
    opened ? closeTOC() : openTOC();
}

function openTOC() {
    $navNext.hide();
    $navPrev.hide();
    $container.addClass( 'slideRight' ).data( 'opened', true );
}

function closeTOC( callback ) {
    $navNext.show();
    $navPrev.show();
    $container.removeClass( 'slideRight' ).data( 'opened', false );
    if( callback ) {
        if( supportTransitions ) {
            $container.on( transEndEventName, function() {
                 $( this ).off( transEndEventName );
                 callback.call();
            } );
        }
        else {
            callback.call();
        }
    }
}

خاتمة

هذا كان كل شيء يخص هذا الدرس أتمنى أن يكون قد أعجبك وأن تكون قد وجدته مفيدًا.

ترجمة -وبتصرّف- للدرس Fullscreen Pageflip Layout لصاحبته Mary Lou.

منذ بدء استخدامنا لمفهوم التصميم المتجاوب في سير العمل الخاص بنا، ظهرت العديد من الأدوات كمحاولة لتسهيل عملنا وتسهيل تصميم المواقع المتجاوبة.

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

وفي هذا المقال سوف أتحدث عن بعض الطرق التي طوّرتها لإنشاء نظام شبكي (grid) مرن وسلس يسمح بالتضمين (nesting) كما يعطيك الحرية الكاملة حول كيفية تصرّف هذا النظام الشبكي في كافة الأبعاد.

كل هذا سوف يتم بمساعدة من مولّد النظام الشبكي المسمى Gridpak.

الأمور التي سوف نتمكن من فعلها

عندما ننتهي من هذا الدرس سوف يكون لدينا نظام شبكي يمكنه فعل بعض مما يظهر في هذه المعاينة.

ويمكن استخدامه في تنظيم تخطيط الصفحات كما في هذه المعاينة.

متطلبات ما قبل البدء

قبل أن نبدأ بمعرفة كيفية إنشاء هذا النظام الشبكي دعونا أولًا نقوم بتحديد ما نتوقعه من هذا النظام.

هذه بعض النقاط التي أرى أنها مهمة عند استعمال أي نظام شبكي:

• الأعمدة دقيقة ويمكن توقعها لجميع أبعاد الأجهزة.
• التنسيقات والتوصيف (markup) يجب أن يكون بسيطًا وسهل الاستخدام.
• لا يعتمد على جهاز معين أو أبعاد معينة وأن يكون مرن بشكل كامل.
• قابل للتضمين (nestable) لأي عمق.
• مكون من وحدات (modular) وله سيطرة كاملة على الأعمدة في جميع الأبعاد.
• يجب أن يعمل من دون الحاجة لـ polyfill في المتصفحات القديمة.

بالنسبة للنقطة الأخيرة، فكثير من المطورين يحبون استعمال respond.js لاستخدام ودعم الـmedia query في المتصفحات القديمة.

الجيد في الأمر أنّ المتصفحات القديمة لا تتطلب أن يتم دعمها في أي جهاز سوى أجهزة سطح المكتب وأجهزة الحاسوب المحمول. لذلك سوف أقوم بتوضيح كيفية تحديد هذه المتصفحات وحفظ طلب http واحد.

التنصيب

1. وسم <html> ودعم تراجعي (fallback) لمتصفح IE

سوف نحتاج في البداية إلى التأكد بأنّنا نستطيع تحديد المتصفحات القديمة وجعل تنسيقات CSS تعمل عليها. هذه الطريقة تم استيحاؤها من html5 boilerplate وتم توضيحها في هذه المقالة.

<!doctype html>

<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->

<!--[if IE 9]> <html class="no-js ie9 oldie" lang="en"> <![endif]-->

<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

كل ما تفعله الشيفرة البرمجية في الأعلى هو إضافة فئة (class) إلى وسم <html> بناءً على المتصفح الذي يستخدمه الزائر. في هذا المقال سوف نقوم فقط بدعم متصفحات Internet Explorer بدءًا من الإصدار الثامن.

وبهذا يمكننا أن نقوم بتحديد الإصدارات القديمة من متصفح Internet Explorer بالشكل التالي:

/* target only IE8 with the following class */

.ie8 .my-class { ... }

2. التنسيقات الأساسية ووحدة Rem

إذا كنت لا تستخدم الوحدة rem في تطوير المواقع فإنني أنصحك بالقيام بذلك في أقرب وقت، فهي وحدة رائعة خصوصًا فيما يتعلق بأحجام الخطوط (font sizing). وهذه الوحدة رائعة لأنها وحدة نسبية ولكنها نسبية فقط إلى تعريف واحد وهو التعريف الذي يوضع في وسم <html>. وهذا يعني أنّ جميع الحسابات المعقدة التي تنتج عن استخدام الوحدة em سوف تختفي.

أنظر إلى الشيفرة البرمجية التالية:

html {
    ...
    font-size: 100%;
    ...
}

body {
    ...
    /* base font size: 16px (user agent dependant, but usually 16px) */
    font-size: 1em;
    ...
}

...

.padding {
    /* IE8 fallback */
    padding: 32px;
    padding: 2rem; /* 2 * 16px = 32px */
}

بما أنّ متصفح IE8 لا يدعم وحدة rem فإننا نحتاج إلى استخدام وحدة px أيضًا.

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

3. الحصول على Gridpak

إذهب إلى موقع gridpak.com وحاول التلاعب بالخيارات حتى تحصل على ما يريحك.

بالنسبة لي سوف أقوم بتحميل نظام شبكي بهذه الخيارات ولكن لك الحرية في اختيار ما تريده:

• الأبعاد: 480px، 640px، 960px وأعلى.
• 12 عمود في جميع الأبعاد (12 عمود في الهواتف والأجهزة اللوحية وأجهزة سطح المكتب).
• padding بقيمة تساوي صفر.
• تباعد بين الأعمدة بقيمة (24px (24px gutter. يسمح لك Gridpak بأن تقوم بإنشاء gutters محددة لكل بعد من الأبعاد، ولكننا لن نقوم بذلك حتى تبقى الأمور بسيطة.

حاول أن تكون قيم الـpadding والـgutters قيم ناتجة عن حسابات ضرب بسيطة بالنسبة لحجم الخط في الـ body. سوف يساعد هذا على تقليل القيم العشرية لأنّ المتصفحات تتعامل مع القيم العشرية بطريقة مختلفة وحتى نُبقي كل شيء أجمل.

فعلى سبيل المثال لو كان الخط الأساسي هو 16px فإنّ التباعد بين الأعمدة يمكن أن يكون أحد القيم التالية:

• 8px (وهذه القيمة ناتجة عن ضرب 16 في 0.5).
• 12px (وهذه القيمة ناتجة عن ضرب 16 في 0.75).
• 24px (وهذه القيمة ناتجة عن ضرب 16 في 1.5).
• 32px (وهذه القيمة ناتجة عن ضرب 16 في 2).

بعد أن تقوم بتحديد جميع الخيارات قم بتحميل النظام الشبكي.

4. تفصيل الـ Gridpak

من أفضل خصائص Gridpak هو أنّك سوف تحصل على نظام شبكي دقيق ومتين فقط بعدة سطور من CSS، فقوة Gridpak تأتي من استعمال الخاصية box-sizing: border-box على جميع عناصر الموقع. ففي حالة استعمال border-box فإننا سوف نتمكن من الحصول على عمودين كل واحد منهما بعرض 50% وسوف يبقيان بجانب بعضهما وسوف تتمكن أيضًا من استيعاب أي قيمة border نعطيها له.

ومع تطبيق بعض تنسيقات CSS يمكننا أن نُعطي الـgutters حواف (borders) شفافة مما يمنحنا أعمدة دقيقة ومناسبة:

.row {
    /*
    * Rows contain columns
    *
    * Pull only the left hand side of our rows 24px left (our gutter width)
    * to allow for the border magic that happens in .col below
    */
    margin-left: -24px;
}

.col {
    /*
    * Create a gutter using a transparent border at the specified gutter width.
    * This pushes our content back the distance the row pulled us left, while
    * allowing border-box calculations to be used.
    */
    border: 0px solid rgba(0,0,0,0);
    border-left-width: 24px;
    float: left;
    /*
    * Include the border in the calculation of the column width
    */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*
    * Ensure that backgrounds set on columns begin just inside the border, not underneath
    */
    -webkit-background-clip: padding-box !important;
    -moz-background-clip: padding-box !important;
    background-clip: padding-box !important;
}

وفوق كل هذا فإنّ Gridpak يقوم بوضع كل نظام شبكي لكل بُعد داخل media query خاص به:

/*
* Declare a grid between 0 and 479px only
*/

@media screen and (min-width: 0px) and (max-width: 479px) {
    ...
    .span_1 { width:8.33333333333%;}
    .span_2 { width:16.6666666667%;}
    .span_3 { width:25.0%;}
    .span_4 { width:33.3333333333%;}
    .span_5 { width:41.6666666667%;}
    .span_6 { width:50.0%;}
    .span_7 { width:58.3333333333%;}
    .span_8 { width:66.6666666667%;}
    .span_9 { width:75.0%;}
    .span_10 { width:83.3333333333%;}
    .span_11 { width:91.6666666667%;}
    .span_12 {
        margin-left:0;
        width:100%;
    }
}

/*
* Declare a grid between 480px and 639px only
*/

@media screen and (min-width: 480px) and (max-width: 639px) {
    ...
}

/* etc. */
...

إذا كان علينا أن نحدد عدد مختلف من الأعمدة لكل بُعد عندما نقوم باختيار الخيارات الخاصة بـGridpak (لنقل أنها عمودين للهواتف وأربعة للأجهزة اللوحية و12 لأجهزة سطح المكتب) فإنّ تعريفات media query سوف تمنحنا مرونة وسيطرة أكبر على الأعمدة بدل أن نقوم بجعل الهواتف والأجهزة اللوحية تأخذ عمود واحد فقط كما هو الحال في معظم الأنظمة الشبكية الأخرى.

فعلى سبيل المثال يمكن لفئة (class) واحدة أن تجعل أحد الأعمدة يحتل العرض الكامل لصف ما (row) أو نصف العرض أو حتى سُدُسَ (1/6) العرض وذلك بناءً على بُعد المتصفح.

كل هذا جيد ولكن هناك شيء ما وهو أننا نريد هذه الأعمدة أن تفعل ما أريده في جميع الأبعاد.

5. تطويع Gridpak كما نريد

استعمال وحدة rem لتسهيل عملية الصيانة

دعونا في البداية نقوم بأخذ أساس الـGridpak ونُعطيه إضافة حديثة (مع دعم المتصفحات القديمة):

.row {
    margin-left: -24px;
    margin-left: -1.5rem;
}

/* Reusable column setup */
.col {
    border: 0px solid transparent;
    border-left-width: 24px;
    border-left-width: 1.5rem;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-background-clip: padding-box !important;
    -moz-background-clip: padding-box !important;
    background-clip: padding-box !important;
}

إذا أردنا في المستقبل أن نزيل دعم المتصفح IE8 فيمكننا بكل سهولة فعل ذلك عن طريق إزالة القيم ذات الوحدة px (أي أن نُزيل الخاصية margin-left: -24px وborder-left-width: 24px).

تكبير وتتابع النظام الشبكي

نريد أيضًا أن نتأكد بأنّ تخطيط الصفحة لا يصبح سيء عندما يقوم الزائر بتكبير محتوى الموقع. يمكنك قراءة هذا المقال حول استخدام الوحدات المتناسبة مع تعريفات الـmedia query.

بطبيعة الحال فإنّ استخدام وحدة الـpixel في تعريفات الـmedia query لا يبدو وكأنّه يعمل بشكل جيد عندما يقوم الزائر بتكبير المحتوى لذلك سوف نستعمل وحدة em.

زيادة على ذلك، فإنّ الـmedia queries تستخدم حجم الخط الأساسي المُعرّف في المتصفح (user agent font size)، وهذا يعني أننا -وبشكل عام- سوف نستخدم حجم الخط 16px في حساباتنا.

دعونا نتخلّص من استعمال max-width في الـmedia query حتى نستغل قوة التتابع/التعاقب (cascade):

/*
* Declare a grid which will be effective from 0px
*/

@media screen and (min-width: 0) {
    ...
}

/*
* Declare a grid which will be effective from 480px
* 480 / 16 = 30em
*/

@media screen and (min-width: 30em) {
    ...
}

/*
* Declare a grid which will be effective from 640px
* 640 / 16 = 40em
*/

@media screen and (min-width: 40em) {
    ...
}

...

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

تسمية الأعمدة الخاصة ببُعد معين

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

سوف أقوم بإضافة اسم في نهاية كل span لتحديد الأبعاد التي يعمل بها:

/*
* IE8 grid
* This grid will only work in IE8, and at all widths
*/

.ie8 .span_1_ie8 { ... }
.ie8 .span_2_ie8 { ... }
...
.ie8 .span_1_ie8 { ... }

/*
* VIEWPORT ALPHA
* Declare a grid which will be effective from 0px
*/

@media screen and (min-width: 0) {
    ...
    .span_1_vpalpha { ... }
    .span_2_vpalpha { ... }
    ...
    .span_1_vpalpha { ... }
}

/*
* VIEWPORT BETA
* Declare a grid which will be effective from 480px
* 480 / 16 = 30em
*/

@media screen and (min-width: 20em) {
    ...
    .span_1_vpbeta { ... }
    .span_2_vpbeta { ... }
    ...
    .span_1_vpbeta { ... }
}

/*
* VIEWPORT GAMMA
* Declare a grid which will be effective from 640px
* 640 / 16 = 40em
*/

...

لنبدأ الآن باستعمال النظام الشبكي.

استعمال النظام الشبكي

إنّ استعمال Gridpak لهو أمر في غاية السهولة، فجميع الأعمدة يجب أن تكون موجودة داخل عنصر حاوي وهذا العنصر يجب أن يملك فئة clearfix وهذ هو كل ما تحتاج معرفته.

<!--
    create a row with 2 columns and the following features:
    mobile -> 3 spans + 9 spans
    tablet -> 6 spans + 6 spans
    desktop -> 4 spans + 8 spans
    IE8 -> 4 spans + 8 spans
-->

<div class="row cf">
    <div class="col span_3_vpalpha span_6_vpbeta span_4_vpgamma span_4_ie8">
        content...
    </div>

    <div class="col span_9_vpalpha span_6_vpbeta span_8_vpgamma span_8_ie8">
        content...
    </div>
</div>

تضمين الأعمدة يتبع نفس النمط:

<!--
     create a row with 2 columns spanning half the width for all viewports.
     Have both columns then contain 2 columns each, both spanning half the width of the parent column.
-->

<div class="row cf">
    <div class="col span_6_vpalpha span_6_ie8">
        <div class="row cf">
            <div class="col span_6_vpalpha span_6_ie8">
                content...
            </div>
            <div class="col span_6_vpalpha span_6_ie8">
                content...
            </div>
        </div>
    </div>

    <div class="col span_6_vpalpha span_6_ie8">
        <div class="row cf">
            <div class="col span_6_vpalpha span_6_ie8">
                content...
            </div>
            <div class="col span_6_vpalpha span_6_ie8">
                content...
            </div>
        </div>
    </div>
</div>

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

خاتمة

لقد كانت رحلة طويلة احتوت على العديد من الأمور والأفكار المفيدة، وأتمنى أن تكون قد استفدت من هذا الدرس.

ترجمة -وبتصرّف- للمقال Creating Nestable Dynamic Grids لصاحبه Larry Botha.

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

هذه هي المتطلبات التي نريدها مبدئيًا:

• ما نريده مبدئيًا هو ظهور زر يحتوي على أيقونة بحث.
• عند النقر على ذلك الزر نريد أن يظهر مربع البحث.
• نريده أن يكون متجاوبًا مع جميع الأجهزة.
• عند كتابة أي شيء في مربع البحث نريد أن يقوم المربع بالقيام بالبحث فور النقر على مفتاح الدخول (enter) من لوحة المفاتيح أو النقر على الأيقونة نفسها.
• إذا كان مربع البحث ظاهرًا ولكنه كان فارغًا فإننا نريده أن يختفي عند النقر على أيقونة البحث (أي أننا إذا قمنا بالنقر على أيقونة البحث وكان المربع فارغًا فإننا لا نريده أن يقوم بالبحث وإنما يقوم بإخفاء مربع البحث).
• نريد أيضًا أن يختفي مربع البحث عند النقر خارجه سواء كان فارغًا أم لا.
• لو كانت الجافاسكربت معطلة لدى المستخدم فإننا نريد لمربع البحث أن يكون ظاهرًا (أي دون الحاجة إلى النقر على أيقونة البحث).
• نريد أيضًا أن ندعم الأجهزة التي تعمل باللمس.

يمكنك معاينة النتيجة النهائية لهذا الدرس.

بما أننا بتنا الآن نعرف ما نريد فلنقم بذلك.

بنية ملف HTML

كل ما نحتاجه من وسوم HTML هو حاوٍ رئيسي (main container) وسوف يكون عبارة عن وسم <div> وسوف نحتاج إلى وسم <form> وإلى حقلي إدخال (inputs)؛ واحد من نوع "text" والآخر من نوع "submit" وأخيرًا سوف نحتاج إلى وسم <span> ليحتوي على أيقونة البحث:

<div id="sb-search" class="sb-search">
    <form>
        <input class="sb-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search">
        <input class="sb-search-submit" type="submit" value="">
        <span class="sb-icon-search"></span>
    </form>
</div>

لنبدأ الآن بتنسيق العناصر باستخدام CSS.

تنسيقات CSS

بناءً على المتطلبات التي ذكرناها سابقًا فإنه يجب في البداية أن يكون لدينا زر يحتوي على أيقونة بحث وباقي العناصر يجب أن تكون مخفية. دعونا الآن نتخيل ما الذي سيحصل عند تمدد مربع البحث وجعله ظاهرًا (الذي هو نفسه سيكون الحاوي الرئيسي الذي ذكرناه سابقًا). كيف نقوم بذلك؟ سوف نستخدم الخاصية overflow: hidden وتكبير العرض الخاص بالعنصر الحاوي (sb-search) يجب أن يقوم بإظهار حقل البحث.

دورة تطوير واجهات المستخدم

ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة

اشترك الآن

إذًا أول شيء نقوم به هو تنسيق العنصر الحاوي (sb-search) بحيث سوف نجعله يطوف إلى اليمين باستخدام الخاصية float: right ونعطيه الخاصية overflow: hidden، والعرض يجب أن يكون 60px ولكن بما أننا نريد أن يزيد العرض إلى 100% فإننا سنواجه بعض المشاكل في متصفحات iOS فهي لا تقبل التغيير من عرض يعتمد على الـpixels إلى عرض يعتمد على النسب المئوية. لذلك سوف نقوم بتعريف خاصية min-width بالقيمة 60px وخاصية width بقيمة 0%. يمكنك قراءة المزيد عن هذا الحل العبقري من خلال هذا الرابط.

سوف نستعمل أيضًا الخاصية transition والخاصية webkit-backface-visibility: hidden- لتلافي بعض الآثار للحقول في متصفحات الهواتف iOS:

.sb-search {
    position: relative;
    margin-top: 10px;
    width: 0%;
    min-width: 60px;
    height: 60px;
    float: right;
    overflow: hidden;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    transition: width 0.3s;
    -webkit-backface-visibility: hidden;
}

أي شيء يتجاوز/يفيض عن هذا المربع الصغير لن يكون ظاهرًا.

لنقم الآن بموضعة حقل البحث. سوف نستعمل قيمة مئوية بالنسبة للعرض حتى نسمح للحقل بأن يتمدد مع تمدد العنصر الحاوي. ومع إضافة الارتفاع (height) وحجم الخط (font-size) والـpadding المناسبة يمكننا توسيط النص داخل العنصر (استعملنا padding بدل line-height لأن الخاصية line-height لا تعمل بشكل جيد في متصفح IE8).

قد يبدو استعمالنا للخاصية position: absolute غير ضروري، ولكن استعمالها يقوم بحل مشكلة تظهر عند إغلاق مربع البحث بحيث يبدو الحقل وكأنه ظاهر في الجانب الأيمن لفترة قصيرة جدًا.

.sb-search-input {
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    outline: none;
    background: #fff;
    width: 100%;
    height: 60px;
    margin: 0;
    z-index: 10;
    padding: 20px 65px 20px 20px;
    font-family: inherit;
    font-size: 20px;
    color: #2c3e50;
}

input[type="search"].sb-search-input {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
}

قمنا أيضًا بإزالة التنسيقات الإفتراضية لحقل البحث في متصفحات WebKit.

دعونا نقوم الآن بتعريف لون الخط بالنسبة للـplaceholder (الـplaceholder هو نص يظهر داخل حقل البحث قبل أن يقوم المستخدم بكتابة أي شيء بداخله حتى يُعطي المستخدم لمحة عما يجب عليه كتابته في ذلك الحقل):

.sb-search-input::-webkit-input-placeholder {
    color: #efb480;
}

.sb-search-input:-moz-placeholder {
    color: #efb480;
}

.sb-search-input::-moz-placeholder {
    color: #efb480;
}

.sb-search-input:-ms-input-placeholder {
    color: #efb480;
}

دعونا الآن نقوم بتنسيق زر أيقونة البحث وحقل التأكيد/الإرسال (submit input)، فنحن نريدهما أن يظهرا في نفس المكان لذلك يجب أن نضعهما في الجانب الأيمن ونعطيهما نفس الأبعاد. وبما أنهما سيظهران فوق بعضهما فسوف نعطيهما الخاصية position: absolute:

.sb-icon-search,
.sb-search-submit {
    width: 60px;
    height: 60px;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    padding: 0;
    margin: 0;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
}

نريد في بداية الأمر أن تكون الأيقونة قابلة للنقر، وعند فتح حقل البحث فإننا نريد لحقل التأكيد/الإرسال (submit input) أن يكون قابلًا للنقر. لذلك سوف نُعطي حقل التأكيد الخاصية z-index: -1 ونجعله شفافًا/مخفيًا حتى يمكننا رؤية أيقونة البحث:

.sb-search-submit {
    background: #fff; /* IE needs this */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
     filter: alpha(opacity=0); /* IE 5-7 */

    opacity: 0;
    color: transparent;
    border: none;
    outline: none;
    z-index: -1;
}

لاحظ أننا لم نقم بجعل الخلفية شفافة وذلك لأن الأمر لا يعمل بشكل جيد في متصفح IE فالعنصر لا يكون قابلًا للنقر عند ذلك، لذلك قمنا باستعمال لون معين (الأبيض) وجعلنا الشفافية (opacity) تساوي صفر.

وبما أننا نريد لأيقونة البحث أن تظهر فوق كل شيء فإننا سوف نقوم بإعطائها الخاصية z-index بقيمة عالية، وسوف نقوم باستخدام الفئة الزائفة ::before لإضافة الأيقونة:

.sb-icon-search {
    color: #fff;
    background: #e67e22;
    z-index: 90;
    font-size: 22px;
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
}

.sb-icon-search:before {
    content: "\e000";
}

ودعونا لا ننسى إضافة خط الويب (web font) في بداية ملف الـCSS:

/* Search icon by IcoMoon, made with http://icomoon.io/app/ */

@font-face {
    font-family: 'icomoon';
    src:url('../fonts/icomoon/icomoon.eot');
    src:url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
    url('../fonts/icomoon/icomoon.woff') format('woff'),
    url('../fonts/icomoon/icomoon.ttf') format('truetype'),
    url('../fonts/icomoon/icomoon.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

يمكننا الآن إعطاء العنصر الحاوي (sb-search) عرضًا بقيمة 100% وذلك في حالتين؛ الأولى عند النقر على أيقونة البحث وذلك عن طريق إضافة فئة (class) بالاسم "sb-search-open" باستخدام الجافاسكربت والثانية عندما لا يكون الجافاسكربت مفعّلًا لدى المستخدم:

.sb-search.sb-search-open,
.no-js .sb-search {
    width: 100%;
}

لنقم الآن بتغيير لون الخط الخاص بعنصر أيقونة البحث ونضعه أسفل حقل التأكيد/الإرسال وذلك عن طريق إعطائه قيمة z-index أقل من 90 (وهي القيمة التي أعطيناها للعنصر "sb-icon-search"):

.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
    background: #da6d0d;
    color: #fff;
    z-index: 11;
}

وأخيرًا لنقم بإضافة الخاصية z-index لحقل التأكيد/الإرسال ولكن بقيمة أكبر من 11 حتى يمكننا النقر عليها:

.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
    z-index: 90;
}

انتهينا الآن من تنسيقات CSS وبقي علينا الجافاسكربت.

بعض الجافاسكربت

لنبدأ بإضافة وإزالة الفئة "sb-search-open". بحيث سوف يتم إضافة الفئة عند النقر على الحاوي الرئيسي (sb-search) وإزالته عند النقر على حقل التأكيد/الإرسال ولكن فقط إذا كان حقل البحث فارغًا، أمّا إذا لم يكن فارغًا فإننا نريد تأكيد عملية البحث. وحتى لا نقوم بإزالة الفئة عند النقر على الحقل (لأن الحاوي بأكمله قابل للنقر) فإننا نحتاج إلى منع حدث النقر (click event) من الانتشار على ذلك العنصر. هذا يعني أنّ النقر على الحقل لن يؤدي إلى إثارة حدث النقر على العناصر الحاوية له.

;( function( window ) {
    function UISearch( el, options ) {
        this.el = el;
        this.inputEl = el.querySelector( 'form > input.sb-search-input' );
        this._initEvents();
    }

    UISearch.prototype = {
        _initEvents : function() {
            var self = this,
            initSearchFn = function( ev ) {
                if( !classie.has( self.el, 'sb-search-open' ) ) { 
                    ev.preventDefault();
                    self.open();
                }
                else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) {
                    self.close();
                }
            }
            this.el.addEventListener( 'click', initSearchFn );
            this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); });
        },

        open : function() {
            classie.add( this.el, 'sb-search-open' );
        },

        close : function() {
            classie.remove( this.el, 'sb-search-open' );
        }
    }
 
    window.UISearch = UISearch;

} )( window );

سوف نحتاج أيضًا إلى إضافة الأحداث التي تقوم بإزالة الفئة "sb-search-open" عند النقر خارج مربع البحث، وحتى يعمل ذلك فإننا نريد أن نتعامل مع انتشار الأحداث (event bubbling) عند النقر على الحاوي الرئيسي.

;( function( window ) {
    function UISearch( el, options ) {
        this.el = el;
        this.inputEl = el.querySelector( 'form > input.sb-search-input' );
        this._initEvents();
    }

    UISearch.prototype = {
        _initEvents : function() {
            var self = this,
            initSearchFn = function( ev ) {
                ev.stopPropagation();
                if( !classie.has( self.el, 'sb-search-open' ) ) { 
                    ev.preventDefault();
                    self.open();
                }
                else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) {
                    self.close();
                }
            }
            this.el.addEventListener( 'click', initSearchFn );
            this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); });
        },

        open : function() {
            var self = this;
            classie.add( this.el, 'sb-search-open' );
            // close the search input if body is clicked
            var bodyFn = function( ev ) {
                self.close();
                this.removeEventListener( 'click', bodyFn );
            };
            document.addEventListener( 'click', bodyFn );
        },

        close : function() {
            classie.remove( this.el, 'sb-search-open' );
        }
    }

    window.UISearch = UISearch;

} )( window );

وشيء آخر علينا الاهتمام به وهو قصّ مصطلح البحث.

عندما نقوم أيضًا بالنقر على أيقونة البحث فإننا نريد أن يكون الحقل مفعّلًا (focused)، ولأنّ هذا يسبب بعض المشاكل في متصفح iOS (لوحة المفاتيح تظهر في نفس الوقت) فإننا نريد تلافي ذلك في هذه الحالة، وعندما يتم إغلاق مربع البحث فإننا نريد أن يكون مربع البحث غير مفعل (blur). هذا سوف يحل بعض المشاكل في بعض الأجهزة التي تُظهر بأنّ المؤشر يومض حتى بعد أن يكون الحقل مغلقًا.

ملاحظة جانبية: كلمة focus تدل على أنّ مربع البحث مفعّل (أي أنّ المؤشر بداخله) وكلمة blur تدل على عكس ذلك.

;( function( window ) {
    // http://stackoverflow.com/a/11381730/989439
    function mobilecheck() {
        var check = false;
        (function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);

        return check;
    }

    // http://www.jonathantneal.com/blog/polyfills-and-prototypes/
    !String.prototype.trim && (String.prototype.trim = function() {
         return this.replace(/^\s+|\s+$/g, '');
     });

    function UISearch( el, options ) {
        this.el = el;
        this.inputEl = el.querySelector( 'form > input.sb-search-input' );
        this._initEvents();
    }

    UISearch.prototype = {
        _initEvents : function() {
            var self = this,
            initSearchFn = function( ev ) {
                ev.stopPropagation();
                // trim its value
                self.inputEl.value = self.inputEl.value.trim();
                if( !classie.has( self.el, 'sb-search-open' ) ) {
                    ev.preventDefault();
                    self.open();
                }
                else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) {
                    self.close();
                }
            }

            this.el.addEventListener( 'click', initSearchFn );
            this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); });
        },

        open : function() {
            var self = this;
            classie.add( this.el, 'sb-search-open' );
            // focus the input
            if( !mobilecheck() ) {
                this.inputEl.focus();
            }

            // close the search input if body is clicked
            var bodyFn = function( ev ) {
                self.close();
                this.removeEventListener( 'click', bodyFn );
            };
            document.addEventListener( 'click', bodyFn );
        },

        close : function() {
            this.inputEl.blur();
            classie.remove( this.el, 'sb-search-open' );
        }
    }

    window.UISearch = UISearch;

} )( window );

وحتى يعمل كل شيء بشكل سلس في أجهزة الهواتف فإننا سوف نحتاج إلى إضافة أحداث اللمس (touch events). كما أنّ إضافة preventDefault في دالّة initSearchFn سوف يمنع حدث النقر واللمس من أن يتفعّلا مع بعضهما في أجهزة اللمس.

;( function( window ) {
    // http://stackoverflow.com/a/11381730/989439
    function mobilecheck() {
        var check = false;
        (function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
        return check;
    }

    // http://www.jonathantneal.com/blog/polyfills-and-prototypes/
    !String.prototype.trim && (String.prototype.trim = function() {
         return this.replace(/^\s+|\s+$/g, '');
     });

    function UISearch( el, options ) {
        this.el = el;
        this.inputEl = el.querySelector( 'form > input.sb-search-input' );
        this._initEvents();
    }

    UISearch.prototype = {
        _initEvents : function() {
            var self = this,
            initSearchFn = function( ev ) {
                ev.stopPropagation();
                // trim its value
                self.inputEl.value = self.inputEl.value.trim();
                if( !classie.has( self.el, 'sb-search-open' ) ) {
                    ev.preventDefault();
                    self.open();
                }
                else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) {
                    ev.preventDefault();
                    self.close();
                }
            }

            this.el.addEventListener( 'click', initSearchFn );
            this.el.addEventListener( 'touchstart', initSearchFn );
            this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); });
            this.inputEl.addEventListener( 'touchstart', function( ev ) { ev.stopPropagation(); } );
        },

        open : function() {
            var self = this;
            classie.add( this.el, 'sb-search-open' );
            // focus the input
            if( !mobilecheck() ) {
                this.inputEl.focus();
            }
            // close the search input if body is clicked
            var bodyFn = function( ev ) {
                self.close();
                this.removeEventListener( 'click', bodyFn );
                this.removeEventListener( 'touchstart', bodyFn );
            };
            document.addEventListener( 'click', bodyFn );
            document.addEventListener( 'touchstart', bodyFn );
        },

        close : function() {
            this.inputEl.blur();
            classie.remove( this.el, 'sb-search-open' );
        }
    }

    window.UISearch = UISearch;

} )( window );

وأخيرًا، للأجهزة التي لا تدعم addEventListener وremoveEventListener فإننا سوف نستعمل polyfill.

// EventListener | @jon_neal | //github.com/jonathantneal/EventListener

!window.addEventListener && window.Element && (function () {
    function addToPrototype(name, method) {
         Window.prototype[name] = HTMLDocument.prototype[name] = Element.prototype[name] = method;
    }

    var registry = [];

    addToPrototype("addEventListener", function (type, listener) {
        var target = this;
        registry.unshift({
            __listener: function (event) {
                event.currentTarget = target;
                event.pageX = event.clientX + document.documentElement.scrollLeft;
                event.pageY = event.clientY + document.documentElement.scrollTop;
                event.preventDefault = function () { event.returnValue = false };
                event.relatedTarget = event.fromElement || null;
                event.stopPropagation = function () { event.cancelBubble = true };
                event.relatedTarget = event.fromElement || null;
                event.target = event.srcElement || target;
                event.timeStamp = +new Date;
                listener.call(target, event);
            },

            listener: listener,
            target: target,
            type: type
        });

        this.attachEvent("on" + type, registry[0].__listener);
    });

    addToPrototype("removeEventListener", function (type, listener) {
        for (var index = 0, length = registry.length; index < length; ++index) {
            if (registry[index].target == this && registry[index].type == type && registry[index].listener == listener) {
                return this.detachEvent("on" + type, registry.splice(index, 1)[0].__listener);
            }
        }
    });

    addToPrototype("dispatchEvent", function (eventObject) {
        try {
            return this.fireEvent("on" + eventObject.type, eventObject);
        } catch (error) {
            for (var index = 0, length = registry.length; index < length; ++index) {
                if (registry[index].target == this && registry[index].type == eventObject.type) {
                     registry[index].call(this, eventObject);
                }
            }
        }
    });

})();

خاتمة

هذا كان كل شيء فيما يخص هذا الدرس، أتمنى أن تكون قد استفدت منه وتعلمت منه شيئًا جديدًا.

ترجمة -وبتصرّف- للمقال Expanding Search Bar Deconstructed لصاحبته Mary Lou.

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

سوف نقوم في هذا الدرس ببناء شيء شبيه بهذه المعاينة (أنظر إلى Demo2) بحيث تكون الأيقونة التي تفتح القائمة موجودة في أعلى يسار الشاشة والحد (border) يكون أسمك من جهة اليسار.

ملاحظة: ضع في الحسبان أننا سوف نستعمل تأثيرات التنقل (transitions) والحركة (animation) على عناصر زائفة (pseudo-elements) والتي لن تعمل في بعض المتصفحات (مثل Safari وMobile Safari).

بنية ملف HTML

سوف تحتوي بنية HTML الخاصة بالقائمة على عنصر nav وعلى عنصر a وأيضًا على عنصر ul يوجد بداخله مجموعة من عناصر li وبداخل كل عنصر من هذه العناصر يوجد أيقونة:

<nav id="bt-menu" class="bt-menu">
    <a href="#" class="bt-menu-trigger"><span>Menu</span></a>
    <ul>
        <li><a href="#" class="bt-icon icon-zoom">Zoom</a></li>
        <li><a href="#" class="bt-icon icon-refresh">Refresh</a></li>
        <li><a href="#" class="bt-icon icon-lock">Lock</a></li>
        <li><a href="#" class="bt-icon icon-speaker">Sound</a></li>
        <li><a href="#" class="bt-icon icon-star">Favorite</a></li>
    </ul>
</nav>

لنبدأ الآن بتنسيق العناصر باستخدام CSS.

تنسيقات CSS

ملاحظة: التنسيقات التي سوف نقوم بكتابتها لن تحتوي على أي بادئات للمتصفحات (vendor prefixies) ولكنك سوف تجدها في الملفات المصدرية لهذا الدرس.

سوف نقوم في البداية بتطبيق الخاصية box-sizing: border-box على جميع العناصر:

*,
*:after,
*::before {
    box-sizing: border-box;
}

ودعنا نقوم أيضًا بإعطاء بعض التنسيقات لجسم الصفحة (العنصر body) والحاوي الرئيسي:

body {
    background: #04a466;
}

.container {
    padding: 80px;
}

سوف تساعد خاصية padding: 80px على توفير بعض المساحة حول المحتوى حتى نضمن وجود بعض المساحة عندما تظهر الحدود (border).

سوف تكون القائمة الرئيسية متموضعة بشكل ثابت في الصفحة (باستخدام position: fixed) وسوف تكون الحدود دائمًا موجوة حول مجال الرؤية (viewport). سوف نستخدم تنسيقات مبدئية للحدود والتي سوف تتحول إلى حدود أكبر عند النقر على أيقونة القائمة. لاحظ أننا جعلنا الارتفاع يساوي صفر (height: 0) وذلك حتى نضمن بأنّ القائمة لا تُغطّي أي شيء قبل ظهورها على الشاشة، كما أنّه سيكون هناك تأخير بمقدار 0.3s بالنسبة للارتفاع عندما نقوم بإغلاق القائمة:

.bt-menu {
    position: fixed;  
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    border-width: 0px;
    border-style: solid;
    border-color: #333;
    background-color: rgba(0,0,0,0);
    transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
}

عندما نقوم بفتح القائمة فإننا نريد أن نجعل الارتفاع يساوي 100% (ولكننا لن نستخدم الخاصية transition) وسوف نجعل الحدود تساوي 90px على الجهة اليسرى و30px على الجهات الأخرى، كما أنّ لون الخلفية سوف يكون شبه شفاف وذلك باستخدام RGBA:

.bt-menu.bt-menu-open {
    height: 100%;
    border-width: 30px 30px 30px 90px;
    background-color: rgba(0,0,0,0.3);
    transition: border-width 0.3s, background-color 0.3s;
}

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

.bt-overlay {
    position: absolute;
    width: 100%;
}

وعندما نقوم بفتح القائمة فإنّ هذا العنصر سوف يكون بارتفاع كامل (height: 100%):

.bt-menu-open .bt-overlay {
    height: 100%;
}

لنقم الآن بتنسيق الأيقونة التي تفتح القائمة عند النقر عليها. سوف نعطيها تموضعًا ثابتًا (position: fixed) وسوف نجعلها تظهر في الجزء العلوي من الجهة اليسار للصفحة:

.bt-menu-trigger {
    position: fixed;
    top: 15px;
    left: 20px;
    display: block;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

سوف يعمل العنصر a كحاوٍ والعنصر span سيكون الخط المتوسط في أيقونة الهامبرجر (تم تسميتها بهذا الاسم لأنّ شكلها يشبه سندويشة الهامبرجر). لذلك سوف نقوم بموضعة العنصر span في الوسط وذلك بإعطائه الخاصية top: 50% والخاصية margin-top: -2px (هذه خدعة قديمة بحيث نقوم بإعطاء العنصر قيمة margin سالبة بنصف ارتفاع العنصر حتى نجعله يتوسط كما نريد):

.bt-menu-trigger span {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 100%;
    height: 4px;
    margin-top: -2px;
    background-color: #fff;
    font-size: 0px;
    user-select: none;
    transition: background-color 0.3s;
}

وعند فتح القائمة سوف يتغير شكل الأيقونة التي تفتح القائمة وتغلقها إلى حرف "X"، بحيث سوف نستعمل العناصر الزائفة لإنشاء الخطين المتقاطعين على شكل "X" وسوف نقوم بإخفاء الخط الذي في الوسط (والذي قلنا بأنّه هو نفسه العنصر span):

.bt-menu-open .bt-menu-trigger span {
    background-color: transparent;
}

لنقم الآن بإنشاء الخطين المتقاطعين كما قلنا باستخدام العناصر الزائفة، بحيث سوف نعطيها الخاصية position: absolute وسوف يكون ارتفاعها بنفس ارتفاع العنصر الذي يحتويها (العنصر span في هذه الحالة) وذلك عن طريق إعطائها الخاصية height: 100%:

bt-menu-trigger span:before,
.bt-menu-trigger span:after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    content: '';
    transition: transform 0.3s;
}

وسوف نستخدم الخاصية translateY لموضعتها بشكل صحيح:

.bt-menu-trigger span:before {
    transform: translateY(-250%);
}

.bt-menu-trigger span:after {
    transform: translateY(250%);
}

سوف ينتج الشكل "X" عندما نقوم بفتح القائمة وذلك عن طريق الخاصية (translateY(0 وعن طريق تدوير العناصر الزائفة باستخدام الخاصية (rotate(45deg:

.bt-menu-open .bt-menu-trigger span:before {
     transform: translateY(0) rotate(45deg);
}

.bt-menu-open .bt-menu-trigger span:after {
     transform: translateY(0) rotate(-45deg);
}

كما أنّ العنصر ul الذي سوف يحتوي على الأيقونات سوف يتم موضعته بشكل ثابت (باستخدام position: fixed) وإلى يسار الشاشة:

.bt-menu ul {
    position: fixed;
    top: 75px;
    left: 0;
    margin: 0;
    padding: 0;
    width: 90px;
    list-style: none;
    backface-visibility: hidden;
}

لنقم الآن بإعطاء العناصر li و a الخاصية display: block ونجعلها بعرض كامل باستخدام الخاصية width: 100%:

.bt-menu ul li,
.bt-menu ul li a {
    display: block;
    width: 100%;
    text-align: center;
}

كل عنصر li سوف يكون مخفيًا بشكل مبدئي وبشفافية منعدمة (opacity: 0)، كما أنّ التنقل الرجعي (backward transition) لخاصية visibility سوف يتم تأخيره حتى تنتهي خاصية التنقل الخاصة بالخاصيتين transform و opacity:

.bt-menu ul li {
    padding: 16px 0;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s, opacity 0.2s, visibility 0s 0.3s;
}

سوف نقوم الآن بتحويل جميع عناصر li بشكل مختلف عن بعضها بحيث تكون جميعها موجودة في الوسط وإلى اليسار إلى أن تختفي (وذلك باستعمال القيمة -100% على المحور العمودي):

.bt-menu ul li:first-child {
    transform: translate3d(-100%,200%,0);
}

.bt-menu ul li:nth-child(2) {
    transform: translate3d(-100%,100%,0);
}

.bt-menu ul li:nth-child(3) {
    transform: translate3d(-100%,0,0);
}

.bt-menu ul li:nth-child(4) {
    transform: translate3d(-100%,-100%,0);
}

.bt-menu ul li:nth-child(5) {
    transform: translate3d(-100%,-200%,0);
}

عند فتح القائمة سوف تظهر العناصر li بشكل فوري لأننا لم نقم بإعطائها خاصية transition. وسوف يتحركوا أيضًا إلى مواقعهم الرئيسية وذلك عن طريق استخدام الخاصية (transform: translate3d(0,0,0:

.bt-menu.bt-menu-open ul li {
    visibility: visible;
    opacity: 1;
    transition: transform 0.3s, opacity 0.3s;
    transform: translate3d(0,0,0);
}

لنقم الآن بتنسيق عناصر a. سوف نستخدم خط أيقوني (icon font) ونضيف مصدر الخط وفئات الأيقونات (icon classes) الموجودة في ملف CSS آخر والذي توفره خدمة مثل Fontastic أو IcoMoon app.

سوف نقوم بإخفاء النص الموجود في العناصر وذلك باستعمال الخاصية font-size: 0px ونجعل اللون شفاف باستخدام color: transparent:

.bt-menu ul li a {
    display: block;
    outline: none;
    color: transparent;
    text-decoration: none;
    font-size: 0px;
}

وحتى نجعل الأيقونات تظهر (لأننا قمنا بإخفائها عن طريق font-size: 0 و color:transparent) فإننا سوف نُعطي العناصر الزائفة الخاصية font-size: 48px وcolor: #04a466. لاحظ أننا استعملنا "px" بدل "em" وذلك لأننا أعطينا العنصر الرئيسي القيمة font-size: 0 وبالتالي فإنّ "em" لن تعمل هنا:

.bt-menu ul li a:before {
    color: #04a466;
    font-size: 48px;
    transition: color 0.2s;
}

وعندما يقوم المستخدم بوضع مؤشر الفأرة فوق العنصر (hover) فإننا نريد أن يكون لون الخط أبيضًا:

.bt-menu ul li a:hover:before,
.bt-menu ul li a:focus:before {
    color: #fff;
}

وأخيرًا وليس آخرًا، نريد أن تظهر الأيقونات بحجم أصغر في شاشات الهواتف المحمولة:

@media screen and (max-height: 31.125em) {
    .bt-menu ul li a:before {
        font-size: 32px;
    }

}

هذا كان كل ما يتعلق بتنسيقات CSS. لننتقل الآن إلى الجافاسكربت.

بعض الجافاسكربت

ما نريد فعله بالجافاسكربت بسيط ومباشر، ما نريده هو أنّه عند النقر على أيقونة القائمة فإنّه يتم إضافة/إزالة الفئة (class) التي تحمل الاسم "bt-menu-open" والفئة "bt-menu-close على العنصر nav (إضافة الفئة "bt-menu-close" هي فقط ضرورية إذا كنت سوف تستخدم التحريك (animation) للتأثير الخاص بأيقونة القائمة، تمامًا كما فعلنا في Demo1. وهذا سوف يسمح لنا بتشغيل التحريك الرجعي عندما نقوم بإغلاق القائمة).

عندما نقوم بالنقر على عنصر الـoverlay الذي تحدثنا عنه سابقًا نريد أن يتم إغلاق القائمة. وسوف نقوم أيضًا بإضافة بعض الدعم للأجهزة التي تعمل باللمس:

(function() {

    // http://stackoverflow.com/a/11381730/989439
    function mobilecheck() {
        var check = false;
        (function(a)   {if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);

    return check;
}

function init() {
    var menu = document.getElementById( 'bt-menu' ),
    trigger = menu.querySelector( 'a.bt-menu-trigger' ),
  
    // event type (if mobile, use touch events)
    eventtype = mobilecheck() ? 'touchstart' : 'click',
    
    resetMenu = function() {
        classie.remove( menu, 'bt-menu-open' );
        classie.add( menu, 'bt-menu-close' );
    },

    closeClickFn = function( ev ) {
        resetMenu();
        overlay.removeEventListener( eventtype, closeClickFn );
    };

    var overlay = document.createElement('div');
    overlay.className = 'bt-overlay';
    menu.appendChild( overlay );

    trigger.addEventListener( eventtype, function( ev ) {
        ev.stopPropagation();
        ev.preventDefault();
        if( classie.has( menu, 'bt-menu-open' ) ) {
            resetMenu();
        }
        else {
            classie.remove( menu, 'bt-menu-close' );
            classie.add( menu, 'bt-menu-open' );
            overlay.addEventListener( eventtype, closeClickFn );
        }
    });
}

init();

})();

خاتمة

هذا كان كل شيء. أتمنى أن تكون قد استمتعت بهذا الدرس ووجدته مفيدًا وعمليًا، وتأكد بأن تلقي نظرة على جميع المعاينات (demos) فالمعاينة الأخيرة يوجد بها مبدأ لمشغّل فيديو يأخذ كامل الشاشة.

ترجمة -وبتصرّف- للمقال Animated Border Menus لصاحبته Mary Lou.

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

لذلك في هذا الدرس سوف نتحدث عن 5 فئات زائفة وكيفية عملها مع طرح بعض الأمثلة للمساعدة على الفهم بشكل أفضل.

:first-child

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

دعونا نأخذ مثالًا بسيطًا حتى يتضح الأمر بشكل أفضل. تخيّل معي الشيفرة البرمجية التالية:

<article>
    <p>
        Lorem Ipsum...
    </p>
    <p>
        Another Lorem Ipsum...
    </p>
</article>

p:first-child {
    font-size: 1.5em;
}

في هذا المثال سوف يتم تغيير حجم الخط فقط للعنصر <p> الأول (الذي يحتوي على النص "Lorem Ipsum...") وذلك لأنه هو العنصر الإبن الأول للعنصر الأب <article>.

لنأخذ مثالًا آخر:

<div class="container">
    <h1>Heading</h1>
    <p>
        Lorem Ipsum...
    </p>
</div>

p:first-child {
    font-size: 1.5em;
}

في هذا المثال لن يتم تغيير حجم الخط للعنصر <p> وذلك لأنه ليس العنصر الإبن الأول، فكما ترون أنّ العنصر الإبن الأول هو <h1> وليس <p>.

بعض الملاحظات

كما رأينا في المثال الأخير أننا لم نستطع تنسيق (تغيير حجم الخط باستخدام font-size) العنصر <p> باستخدام العنصر الزائف :first-child وذلك لأنّ هذا العنصر لم يكن هو العنصر الإبن الأول، لذلك وحتى نستطيع تنسيق هذا العنصر فإننا سوف نحتاج إلى استعمال فئة زائفة أخرى وهي :first-of-type، فهذه الفئة كما يُشير اسمها فإنّها تقوم باختيار عُنصر إبن ولكن بشرط أن يكون هو العنصر الأول من نوعه داخل العنصر الأب. ففي المثال الأول لن يتغير أي شيء لأن تأثير :first-child و:first-of-type سيكون هو نفسه نظرًا لأنّ العنصر <p> هو أول عنصر إبن (وسوف يتم اختياره من قبل :first-child) وهو كذلك العنصر الأول من نوعه داخل العنصر الأب (وسوف يتم اختياره من قبل :first-of-type). سوف نتحدث عن هذه الفئة الزائفة لاحقًا في هذا الدرس.

شيء آخر يجب عليك معرفته هو أنّ الفئة الزائفة :first-child حالها كحال الفئات الزائفة الأخرى يمكن استخدامها مع محددات (selectors) أخرى مثل :hover و::before (فمثلًا يمكنك القيام بشيء مشابه لهذا p:first-child:hover).

أمثلة إضافية

تخيل معي شيفرة HTML التالية:

<article>
    <h1>Understanding :first-child</h1>
    <p>
        This is the first paragraph, but it's not the first child of its parent.
    </p>
    <p>
        This is another paragraph. <span>This is a span inside the paragraph.</span>
    </p>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
    </ul>
</article>

وتخيل معي تنسيقات CSS التالية:

span:first-child {
    color: grey;
}

هنا سوف يتم تغيير لون الخط الخاص بالعنصر <span> والموجود في العنصر <p> إلى اللون الرمادي (grey) وذلك لأنّ العنصر <span> هو العنصر الإبن الأول للعنصر <p>.

لنأخذ تنسيقات CSS أخرى:

li:first-child {
    text-decoration: underline;
    color: deepPink;
}

هنا سوف يتم تحديد العنصر <li> الأول وسوف يتم اعطاؤه التنسيقات text-decoration: underline وcolor: deepPink.

تنسيقات أخرى:

p:first-child {
    font-size: 1.5em;
}

هنا لن يتم تحديد أي عنصر <p> وبالتالي لن يتم تطبيق الخاصية font-size: 1.5em ويعود السبب في ذلك إلى أننا نملك عنصرين <p> ولكن لا عنصر من هذين العنصر هو الإبن الأول للعنصر <article> فبالرجوع إلى شيفرة HTML يمكنك ملاحظة أن العنصر الأول هو <h1>.

وأخيرًا وليس آخرًا:

span:first-child::before {
    content: "(";
    color: deepPink;
}

span:first-child::after {
    content: ")";
    color: deepPink;
}

لاحظ في هذا المثال أننا استخدمنا ::before و::after مع الفئة الزائفة :first-child ففي هذا المثال سوف يتم وضع محتويات العنصر <span> داخل قوسين لونهما زهري.

يمكنك معاينة جميع الأمثلة السابقة من هنا.

دعم المتصفحات

العنصر الزائف :first-child مدعوم في كل المتصفحات تقريبًا فهو مدعوم في Chrome، Firefox، Safari، Opera 9.5+، Internet Explorer 7+ وفي متصفحات Android وiOS.

ملاحظة: في متصفح Internet Explorer 8 إذا تم إدخال عنصر ما بشكل ديناميكي عن طريق النقر على رابط ما فإنّ الفئة الزائفة :first-class لن يتم تطبيقها حتى يذهب الـfocus عن الرابط.

:last-child

جميع ما ذكرناه عن الفئة الزائفة :first-child ينطبق على الفئة الزائفة :last-child ولكن بدلًا من جملة "الإبن الأول" استخدم "الإبن الأخير"، هكذا بكل بساطة.

ولكن هل تذكر عندما تحدثنا عن :first-of-type وقلنا بأنّ هذه الفئة تقوم باختيار عُنصر إبن ولكن بشرط أن يكون هو العنصر الأول من نوعه داخل العنصر الأب؟ على نفس المنوال هناك الفئة الزائفة :last-of-type وهذه الفئة تقوم باختيار عُنصر إبن ولكن بشرط أن يكون هو العنصر الأخير من نوعه داخل العنصر الأب (سوف نتحدث عنها لاحقًا في هذا الدرس).

دعونا ننتقل الآن مباشرة إلى بعض الأمثلة.

بعض الأمثلة

تخيل معي شيفرة HTML التالية:

<article>
    <h1>Understanding :last-child</h1>
    <p>
        This is the first paragraph, but it's not the first child of its parent.
    </p>
    <p>
        This is another paragraph. <span>This is a span inside the paragraph.</span>
    </p>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
    </ul>
</article>

وتخيل معي تنسيقات CSS التالية:

span:last-child {
    color: grey;
}

هنا سوف يتم تغيير لون الخط الخاص بالعنصر <span> والموجود في العنصر <p> إلى اللون الرمادي (grey) وذلك لأنّ العنصر <span> هو العنصر الإبن الأخير للعنصر <p> (في الحقيقة هذا العنصر هو العنصر الأول والأخير للعنصر <p> لأنه العنصر الإبن الوحيد ولذلك يمكننا استخدام :first-child أو:last-child).

لنأخذ تنسيقات CSS أخرى:

li:last-child {
    text-decoration: underline;
    color: deepPink;
}

هنا سوف يتم تحديد العنصر <li> الأخير وسوف يتم اعطاؤه التنسيقات text-decoration: underline وcolor: deepPink.

تنسيقات أخرى:

p:last-child {
    font-size: 1.5em;
}

هنا لن يتم تحديد أي عنصر <p> وبالتالي لن يتم تطبيق الخاصية font-size: 1.5em ويعود السبب في ذلك إلى أننا نملك عنصرين <p> ولكن لا عنصر من هذين العنصر يُعتبر الإبن الأخير للعنصر <article> فبالرجوع إلى شيفرة HTML يمكنك ملاحظة أن العنصر الأخير هو <ul>.

مثال أخير:

span:last-child::before {
    content: "(";
    color: deepPink;
}

span:last-child::after {
    content: ")";
    color: deepPink;
}

لاحظ في هذا المثال أننا استخدمنا ::before و::after مع الفئة الزائفة :last-child ففي هذا المثال سوف يتم وضع محتويات العنصر <span> داخل قوسين لونهما زهري.

يمكنك معاينة جميع الأمثلة السابقة من هنا.

دعم المتصفحات

إنّ دعم المتصفحات للفئة الزائفة :last-child أقل من دعمها للفئة الزائفة :first-child فهي مدعومة في متصفحات Chrome، Firefox، Safari، Opera 9.5+، Internet Explorer 9+ وفي متصفحات Android وiOS (لاحظ أنّ الفرق في الدعم هو أنها غير مدعومة في متصفح IE 8 وIE 7).

:first-of-type

تقوم هذه الفئة بتحديد أول ظهور لأحد العناصر الإبن الموجودة في عنصر أب، أي أنّه لا يشترط -كما كان الحال في :first-child- أن يكون العنصر هو الإبن الأول للعنصر الأب.

دعونا نأخذ مثالًا بسيطًا:

<article>
    <h1>Article Title</h1>
    <p>
        First paragraph.
    </p>
    <p>
        Second paragraph.
    </p>
    <!-- .... -->
</article>

p:first-of-type {
   font-size: 1.5em;
}

ففي هذا المثال سوف يتم تحديد العنصر <p> الذي يحتوي على النص "First paragraph" وذلك لأنه هو أول عنصر من نوعه (الظهور الأول) داخل العنصر الأب <article>.

بعض الملاحظات

إنّ الفئة الزائفة :first-of-type تُعتبر مشابهة للفئة الزائفة :first-child ولكن مع فرق جوهري واحد وهو أنّه لا يشترط -كما كان الحال في :first-child - أن يكون العنصر هو الإبن الأول للعنصر الأب. ففي المثال السابق استطعنا استخدام :first-of-type لتحديد العنصر <p>، أمّا لو استخدمنا :first-child فإننا لن نستطيع تحديد أي من العنصرين <p> لأنهما ليسا العنصر الإبن الأول (العنصر الإبن الأول هو <h1>).

وكما هو الحال بالنسبة للفئات الزائفة السابقة فإنّ الفئة الزائفة :first-of-type يمكن استخدامها مع محددات (selectors) أخرى مثل :hover و::before (فمثلًا يمكنك القيام بشيء مشابه لهذا p:first-of-type:hover).

أمثلة إضافية

تخيل أنك تملك شيفرة HTML التالية:

<div class="container">
    <h1>Title</h1>
    <nav>
        <ul>
            <li>First Item</li>
            <li>Second Item</li>
            <li>Third Item</li>
            <li>Fourth Item</li>
        </ul>
    </nav>

    <article>
        <h2>Title</h2>
        <p>
            Lorem Ipsum... <a href="#">Link</a>... <a href="#">another Link</a>
        </p>
        <p>
            Lorem Ipsum...
        </p>
    </article>

    <article>
        <h2>Title</h2>
        <p>
            Lorem Ipsum...
        </p>
        <p>
            Lorem Ipsum
        </p>
     </article>
</div>

وتخيل تنسيقات CSS التالية:

article:first-of-type {
    background-color: #eee;
    border: 1px solid #ddd;
}

هنا سوف يتم اختيار العنصر <article> الأول وإعطاؤه الخاصيتين background-color: #eee وborder: 1px solid #ddd.

لنأخذ تنسيقات CSS أخرى:

p:first-of-type {
    font-weight: bold;
}

هنا سوف يتم تحديد أول عنصر <p> داخل العنصر الأب الذي يحتويه، وبناء على ذلك فإنّه سوف يتم تحديد عنصر <p> الأول الموجود في كلا العنصرين <article> وإعطاؤهما الخاصية font-weight: bold.

أنظر إلى تنسيقات CSS الأخيرة هذه:

a:first-of-type {
    color: deepPink;
}

a:first-of-type::after {
    content: "(" attr(href) ")";
    color: deepPink;
}

في هذه التنسيقات سوف يتم تحديد أول ظهور للعنصر <a> داخل أي عنصر آخر وسوف يتم استخدام ::after لوضع قيمة href لهذه العناصر إلى جانب العنصر وداخل قوسين.

يمكنك معاينة جميع الأمثلة السابقة من هنا.

دعم المتصفحات

هذه الفئة الزائفة مدعومة في متصفحات Chrome، Firefox، Safari، Opera 9.5+، Internet Explorer 9+ وفي متصفحات Android وiOS.

:last-of-type

تقوم هذه الفئة بتحديد آخر ظهور لأحد العناصر الإبن الموجودة في عنصر أب، أي أنّه لا يشترط -كما كان الحال في :last-child- أن يكون العنصر هو الإبن الأخير للعنصر الأب.

دعونا نأخذ مثالًا بسيطًا:

<article>
    <h1>Article Title</h1>
    <p>
        First paragraph.
    </p>
    <p>
        Second paragraph.
    </p>

    <footer> <-- .. --></footer>
</article>

p:last-of-type {
    font-style: italic;
}

في هذا المثال سوف يتم تحديد العنصر <p> الذي يحتوي على النص "Second paragraph" وذلك لأنه هو آخر عنصر من نوعه (الظهور الأخير) داخل العنصر الأب <article>.

بعض الملاحظات

إنّ الفئة الزائفة :last-of-type تُعتبر مشابهة للفئة الزائفة :last-child ولكن مع فرق جوهري واحد وهو أنّه لا يشترط -كما كان الحال في :last-child - أن يكون العنصر هو الإبن الأخير للعنصر الأب. ففي المثال السابق استطعنا استخدام :last-of-type لتحديد العنصر <p>، أمّا لو استخدمنا :last-child فإننا لن نستطيع تحديد أي من العنصرين <p> لأنهما ليسا العنصر الإبن الأخير (العنصر الإبن الأخير هو <footer>).

وكما هو الحال بالنسبة للفئات الزائفة السابقة فإنّ الفئة الزائفة :last-of-type يمكن استخدامها مع محددات (selectors) أخرى مثل :hover و::before (فمثلًا يمكنك القيام بشيء مشابه لهذا p:last-of-type:hover).

أمثلة إضافية

تخيل أنك تملك شيفرة HTML التالية:

<div class="container">
    <h1>Title</h1>
    <nav>
        <ul>
            <li>First Item</li>
            <li>Second Item</li>
            <li>Third Item</li>
            <li>Fourth Item</li>
        </ul>
    </nav>

    <article>
        <h2>Title</h2>
        <p>
            Lorem Ipsum... <a href="#">Link</a>... <a href="#">another Link</a>
        </p>
        <p>
            Lorem Ipsum...
        </p>
    </article>

    <article>
        <h2>Title</h2>
        <p>
             Lorem Ipsum...
        </p>
        <p>
             Lorem Ipsum
        </p>
     </article>
</div>

وتخيل تنسيقات CSS التالية:

article:last-of-type {
    background-color: #eee;
    border: 1px solid #ddd;
}

هنا سوف يتم اختيار العنصر <article> الأخير وإعطاؤه الخاصيتين background-color: #eee وborder: 1px solid #ddd.

لنأخذ تنسيقات CSS أخرى:

p:last-of-type {
    font-weight: bold;
}

هنا سوف يتم تحديد آخر عنصر <p> داخل العنصر الأب الذي يحتويه، وبناء على ذلك فإنّه سوف يتم تحديد عنصر <p> الأخير الموجود في كلا العنصرين <article> وإعطاؤهما الخاصية font-weight: bold.

أنظر إلى تنسيقات CSS الأخيرة هذه:

a:last-of-type {
    color: deepPink;
}

a:last-of-type::after {
    content: "(" attr(href) ")";
    color: deepPink;
}

في هذه التنسيقات سوف يتم تحديد آخر ظهور للعنصر <a> داخل أي عنصر آخر وسوف يتم استخدام ::after لوضع قيمة href لهذه العناصر إلى جانب العنصر وداخل قوسين.

يمكنك معاينة جميع الأمثلة السابقة من هنا.

دعم المتصفحات

هذه الفئة الزائفة مدعومة في متصفحات Chrome، Firefox، Safari، Opera 9.5+، Internet Explorer 9+ وفي متصفحات Android وiOS.

()nth-child:

تسمح لك هذه الفئة الزائفة بتحديد العناصر بناءً على رقمها أو مكان ظهورها في الكود المصدري داخل الحاوي الخاص بها.

يمكنك أن تُعطي هذه الفئة رقمًا موجبًا وسوف تقوم هذه الفئة بتحديد العنصر الذي يتوافق ترتيبه داخل العنصر الحاوي الخاص به مع الرقم الموجب الذي أعطيته لها. فعلى سبيل المثال، القيمة التالية (li:nth-child(3 سوف تقوم بتحديد العنصر <li> الذي يكون ترتيبه هو الثالث داخل العنصر الأب الذي يحتويه.

يمكنك أيضًا أن تُعطيها القيمة "even" أو "odd" بحيث تقوم "even" بتحديد العناصر الزوجية (2، 4، 6، 8 ...الخ) وتقوم "odd" بتحديد العناصر الفردية (1، 3، 5، 7 ...الخ). فمثلًا (li:nth-child(even سوف تقوم بتحديد جميع عناصر <li> الزوجية داخل العنصر الذي يحتويها و (li:nth-child(odd سوف تقوم بتحديد جميع عناصر <li> الفردية داخل العنصر الذي يحتويها.

تسمح لك هذه الفئة الزائفة أيضًا باختيار العناصر بناءً على معادلة (equation) تعطيها لها وتكون على الشكل :(nth-child(an+b بحيث تقوم باستبدال a وb برقمين صحيحن (integers) من اختيارك وn تمثل الأرقام الموجبة (3،2،1،0 وهكذا).

وعلى سبيل المثال سوف تقوم القيمة :(nth-child(3n+1 بتحديد العنصر الإبن الأول ( لأنّ 3*0 +1=1) وسوف يقوم أيضًا بتحديد العنصر الإبن الرابع (لأنّ 3*1 +1=4) وأيضًا يتم تحديد العنصر الإبن السابع (لأنّ 3*2 +1=7) وهكذا دواليك.

ما تقوم به :(nth-child(an+b هو أنّها تقوم بتقسيم العناصر الأبناء إلى عدد "a" من العناصر (المجموعة الأخيرة تأخذ الباقي) وبعدها تقوم بتحديد العنصر الذي يكون ترتيبه "b" داخل كل مجموعة. فعلى سبيل المثال سوف تقوم القيمة :(nth-child(3n+1 بتقسيم العناصر <li> إلى 3 مجموعات وتقوم بوضع الباقي في مجموعة رابعة (هذا في حالة أن عدد العناصر لا يقبل القسمة على 3) وبعدها تقوم بتحديد العنصر الأول من كل مجموعة.

الصورة التالية تُظهر نتيجة تطبيق (li:nth-child(3n+1 على 11 عنصر <li>، وبما أنّ a=3 فإنّه سوف يتم قسمة العناصر العشرة على 3 وبما أنّ 3/11 يساوي 3 والباقي 2 فإنّه سيتم وضع العنصرين الأخيرين في مجوعة رابعة منفصلة، وبعد ذلك سوف يتم اختيار العنصر الأول من كل مجموعة (لأنّ b=1). العناصر الملونة باللون الأزرق هي التي سوف يتم اختيارها.

عندما تقوم بتمرير معادلة ما إلى الفئة الزائفة ()nth-child: فإنّ المتصفح يقوم بالمرور على جميع العناصر الأبناء الموجودة داخل أحد العناصر وبعدها يقوم بتحديد العناصر التي تتوافق مع المعادلة. أيّ أنّ العناصر يتم معاملتها على أنها مصفوفة (array) وكل عنصر لديه رقم خاص به وقد يتطابق أو لا يتطابق مع نتيجة المعادلة.

بعض الملاحظات

قد يكون التعامل مع  ()nth-child: شيئًا مربكًا ومشوشًا، ولا شك في أنّ القيام بالحسابات التي تتطلبها هذه الفئة لن يكون أمرًا سهلًا وممتعًا، ولهذا السبب فقد قام البعض بتطوير مجموعة من الأدوات التي تجعل الأمر أسهل وأيسر وهذه بعض منها:

• CSS3 structural pseudo-class selector tester
• NTH-TEST – nth-child and nth-of-type tester

وكما هو الحال بالنسبة للفئات الزائفة السابقة فإنّ الفئة الزائفة  ()nth-child: يمكن استخدامها مع محددات (selectors) أخرى مثل :hover و::before. لاحظ في المثال التالي كيف استخدمنا  ()nth-child: مع :hover:

li:nth-child(2n+3)::after {
    /* styles here */
}

tr:nth-child(even):hover {
    background-color: lightblue;
}

هناك فئة زائفة أخرى تعمل بشكل مشابه للفئة الزائفة ()nth-child: وهذه الفئة هي ()nth-last-child: والفرق الجوهري بينهما هو أنّ الأخيرة تبدأ من العنصر الأخير بدلًا من العنصر الأول.

هناك أيضًا الفئة ()nth-of-type: وهي تشبه الفئة ()nth-child: إلّا أنّ الأولى تقوم بتحديد العناصر إذا كانت تلك العناصر من نوع محدد.

أمثلة أخرى

في المثال التالي سوف يتم تحديد الصفوف الأفقية في الجداول وإعطاؤها لون خلفية رمادي (#eee).

tr:nth-child(even) {
    background-color: #eee;
}

تعتبر الأسطر التالية كلها صالحة:

li:nth-child(-n+1) {}

p:nth-child(odd) {}

tr:nth-child(2n) {} 

article:nth-child(2n+1) {} 

li:nth-child(4n+1) {}

يمكنك الدخول على هذه المعاينة والتلاعب بالمدخلات والأرقام لترى كيف يتم تحديد العناصر.

3- دعم المتصفحات

هذه الفئة الزائفة مدعومة في متصفحات Chrome، Firefox، Safari، Opera 9.5+، Internet Explorer 9+ وفي متصفحات Android وiOS.

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

تعريف بالعنصرين

يُستخدم هذين العنصرين لإدخال محتوى معين (نص، أيقونة...الخ) بعد أو قبل المحتوى الموجود داخل أحد عناصر الصفحة (يمكنك من الاسم معرفة أنّ after:: تقوم بإدخال المحتوى بعد وأنّ before:: تقوم بإدخال المحتوى قبل). ويتم إدخال المحتوى باستخدام الخاصية content ويتم عرض المحتوى المُدخل بجانب - أي على نفس الخط (inline)- المحتوى الأصلي للعنصر.

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

هنا يأتي دور هذين العنصرين، فيمكن باستعمالهما أن نُضيف الأيقونة التي نريدها إمّا في بداية/قبل الروابط (باستعمال before::) أو نهاية/بعد (باستعمال after::) الروابط، وفي هذا المثال سوف نستعمل after:: لإضافة الأيقونة  في نهاية جميع الروابط التي لها class بالاسم "external".

Let's <a href="http://movethewebforward.org/" class="external">Move The Web Forward</a> together! 

الكود التالي يوضح كيفية فعل ذلك، بحيث تظهر الأيقونة إلى جانب الرابط على نفس الخط:

.external::after {
  content: url(external-link.png);
  padding-left: 5px; /* create some space between the image and the content before it */
}

لاحظ أننا استعملنا الخاصية content مع الدالة ()url لإضافة الصورة. ضع في الحسبان أنّ الصّور التي يتم إدخالها باستخدام العناصر الزائفة لا يمكن إعادة ضبط حجمها لذلك يجب عليك أن تضبط حجمها قبل أن تستعملها.

معاينة النتيجة النهائية

لنأخذ مثالًا آخر ولكن هذه المرة باستعمال before::. تخيّل أنّ هناك عنصر blockquote وبداخله يوجد بعض النصوص، فيمكننا باستعمال before:: أن نقوم بتزيين هذا العنصر عن طريق إدخال علامة اقتباس قبل النص الموجود بداخله، بحيث سيتم إضافة علامة الاقتباس ولكنها لن تظهر في DOM.

<blockquote>
    Your present circumstances don't determine where you can go; they merely determine where you start.—Nido Qubein
</blockquote>

الكود التالي سيقوم بإضافة علامة الاقتباس إلى عنصر blockquote باستعمال before::، وسوف تظهر علامة الاقتباس إلى جانب النص.

blockquote::before {
    content: "\201C";
    /* style the quote */
    color: deepPink;
    font-size: 3em;
    position: relative;
    top: 20px;
}

قمنا باستعمال خاصية content ووضعنا داخلها قيمة اليونيكود (Unicode) الخاصة بعلامة الاقتباس (201C\). هذه هي الطريقة التي يتم بها عادة إضافة الرموز (glyphs) في CSS.
معاينة النتيجة النهائية.

وبما أنّ المحتوى الذي يتم إدخاله باستخدام الفئات الزائفة لا يتم إدخاله وإظهاره في DOM فإنّك لن تستطيع رؤيته أو التعديل عليه باستخدام أدوات المطورين (Developer tools) الموجودة في المتصفحات. ولكن لحسن الحظ فإنّ متصفحات Google Chrome+32 وإضافة Firebug الخاصة بمتصفح Firefox يسمحون لك برؤية مكان وجود العناصر الزائفة في DOM، وأيضًا يمكنك رؤية تنسيقات CSS الخاصة بتلك العناصر والتعديل عليها.

ولرؤية ذلك بشكل مباشر يمكنك الدخول على المعاينات الموجودة في الأعلى ووضع مؤشر الفأرة على الأيقونة والنقر عليها بزر الفأرة الأيمن ومن ثم اختيار "Inspect element" (يجب أن ترى شيء شبيه بالصورة التالية):

يمكنك من خلال المعاينة أو الصورة الموجودة في الأعلى ملاحظة أنّ المحتوى المُضاف باستخدام after:: يظهر/يتموضع بجانب وبعد المحتوى الموجود داخل علامتي الإقتباس.

يمكنك أيضًا من خلال الصورة الموجودة في الأعلى ملاحظة أنّ المحتوى المُضاف باستخدام before:: يظهر/يتموضع بجانب وقبل المحتوى الموجود داخل علامتي الإقتباس.

وبما أنّ محتوى after:: يتم إدخاله بعد المحتوى الأصلي للعنصر فإنّ هذا يعني أنّ العنصر الزائف نفسه (after:: في حالتنا هذه) سوف يظهر فوق العناصر الأخرى التي تأتي قبله في DOM. (نقصد بكلمة "فوق" هنا كيفية ظهور/تكدُّس العناصر فوق بعضها البعض بالنسبة للخاصية z-index).

ونفس الأمر ينطبق على ::before، فالمحتوى المُدخل بواسطته يتم إدخاله بعد المحتوى الأصلي للعنصر وهذا يعني أنّ العنصر الزائف نفسه (::before في حالتنا هذه) سوف يظهر أسفل العناصر الأخرى التي تأتي بعده في الـDOM.

ضع في الحسبان أنّه يمكنك إدخال أي نوع من المحتوى مع العناصر الزائفة، فيمكنك مثلًا إدخال حروف خاصة (characters)، نصوص أو حتى صور. فعلى سبيل المثال جميع التعريفات/الأكواد التالية صحيحة:

.element::after {
    content: url(path/to/image.png); /* an image, for example, an icon */
}

.element::after {
    content: "(To be continued...)"; /* a string */
}

.element::after {
    content: "\201C"; /* also counts as a string. Escaping the unicode; renders it as a character */
}

يمكن أيضًا للخاصية content أن تحتوي على عدّاد (counter) ويمكنك كذلك أن تتركها فارغة إن أردت. فمن أحد استعمالات العناصر الزائفة عندما تكون خاصية content الخاصة بها فارغة هو التخلص من floats في عنصر ما. يمكنك أيضًا تنسيق العناصر الزائفة مثلها مثل أي عنصر آخر، فتستطيع مثلًا إعطائها الخصائص float ،position أو حتى animation ( ضع في الحسبان أنّ خاصية animation لا يمكن استعمالها مع العناصر الزائفة في جميع المتصفحات، فالمتصفحات التي تدعم ذلك هي (Chrome 26+، Firefox 4+، Safari 6.1+، Opera (post Blink وكذلك متصفحات +Internet Explorer 10. إنّ قدرتنا على تنسيق العناصر الزائفة كما لو كانت عنصرًا حقيقيًا في الصفحة أدى إلى استعمال هذه العناصر في معظم الحالات لأغراض تجميلية، فالعناصر الزائفة مستخدمة بكثافة لإنشاء الأشكال الهندسية (geometric shapes) في CSS. فيمكننا مثلًا أن نقوم بإنشاء نجمة ثمانية باستخدام عنصر ما والعنصر الزائف الخاص به، وحتى نحصل على هذه النجمة سنقوم بإنشاء مربّعين؛ الأول باستعمال العنصر نفسه والثاني باستعمال العنصر الزائف بحيث نقوم بتنسيق العنصر الزائف ونعطيه عرض (width) وارتفاع (height) بنفس عرض وارتفاع العنصر الأب/الرئيسي ومن ثم موضعته إلى أعلى العنصر الأب باستعمال position: absolute وأخيرًا تدويره بمقدار 45 درجة.

/* 
    The element and its pseudo-element are both made translucent using the `opacity` property in order to better visualize how the two are positioned in the demo. 
    By removing the opacity values, you can see a fully opaque eight-point star 
*/
.element {
    width: 250px;
    height: 250px;
    background-color: #009966;
    opacity: .8;
    position: relative;
    margin: 100px auto;
}

.element:after {
    content: "";
    position: absolute;
    display: block;
    width: 250px;
    height: 250px;
    background-color: #009966;
    opacity: .8;
    transform: rotateZ(45deg);
}

لاحظ أننا تركنا الخاصية content فارغة وذلك لأننا استخدمنا العنصر الزائف لأغراض تجميلية فقط.

معاينة النتيجة النهائية.

ضع في الحسبان أنّه يمكننا الحصول على نفس النتيجة السابقة باستعمال before:: فلن يكون هناك أي اختلاف في النتيجة.

بعض الملاحظات

1. هل تستعمل (:) أم (::)

قد تكون قد صادفت في أحد المرات وجود العنصر الزائف after بهذا الشكل after: بدلًا من after:: (نفس الأمر ينطبق على العنصر الزائف before:).

في CSS1 وCSS2 كان يتم تعريف العناصر الزائفة باستعمال (:) بدل (::) كما هو الحال في الفئات الزائفة (hover: على سبيل المثال). ولكن الأمر تغيّر في CSS3 فقد أصبح يتم تعريفها باستعمال (::) بدل (:) وذلك حتى نستطيع التمييز بينها وبين الفئات الزائفة، أي أنّ العناصر الزائفة أصبحت تُكتب باستعمال (::) والفئات الزائفة بقيت تُكتب باستعمال (:).

/* old CSS2 syntax */
.element:after {
    /* content and styles here */
}

/* new CSS3 syntax */
.element::after {
    /* content and styles here */
}

جميع المتصفحات التي تدعم (::) تقوم أيضًا بدعم (:) (أي أنّك إذا كتبت العناصر الزائفة بهذا الشكل: after: أو after:: فلن يكون هناك مشكلة)، ولكن إذا أردت أن تدعم متصفح Internet Explorer 8 فعليك أن تستخدم (:) لأنّ هذا المتصفح لا يدعم العناصر الزائفة إذا كُتبت باستعمال (::).

لاحظ أننا استعملنا (:) بدل (::) في جميع المعاينات والأكواد التي عرضناها سابقًا وذلك حتى نضمن أفضل دعم لجميع المتصفحات وحتى يستطيع مستخدموا Internet Explorer 8 من رؤية المعاينات بدون مشاكل.

2. الوصولية (Accessibility)

قلنا مسبقًا بأنّ المحتوى المُضاف بواسطة العناصر الزائفة لا يتم إدخاله أو إظهاره في DOM وإنّما يظهر بصريًا فقط (أي يمكنك رؤيتها على الشاشة). وبالتالي فإنّ قارئات الشاشة (screen readers) لن تكون قادرة على رؤية المحتوى المُضاف بواسطة العناصر الزائفة أو الوصول إليه. ولهذا السبب فإنّه يُنصح بعدم استعمال العناصر الزائفة لإدخال أي محتوى تعتقد أنّه مهم في الموقع.

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

وبما أنّ المحتوى المُضاف بواسطة العناصر الزائفة لا يتم إدخالها أو إظهارها في DOM، فهذا يعني أننا لن نستطيع ربطها بمعالجات الأحداث (event handlers) في لغة جافاسكربت.

أمثلة إضافية

يمكن استعمال العناصر الزائفة مثل ::after لفعل الكثير من الأشياء وإنشاء الكثير من التأثيرات، فبالإضافة إلى الأمثلة التي رأيتها سابقًا فيمكنك الإطلاع على المقالات التالية للمزيد من المعلومات عن هذه العناصر.

• استخدام العناصر الزائفة :after و:before.
  1- استخدام after:: لتنسيق الروابط الموجودة في تنسيقات الطباعة (print style sheets).
  أحد أكثر الاستخدامات المفيدة للعنصر الزائف after:: يظهر في تنسيقات الطباعة، ففي الأوراق المطبوعة لا يمكننا النقر على الروابط كما هو الحال في الأجهزة الالكترونية كالحواسيب والهواتف، وبالتالي فسوف تحتاج في الغالب بأن تضع عنوان الرابط (URL) بجانب الرابط مباشرة حتى يستطيع القارئ ان يقوم بزيارة الرابط إن أراد ذلك. ولمعرفة كيفية فعل ذلك أنظر إلى الكود التالي:

  @media print { a[href]::after { content: " (" attr(href) ")"; } } 

  يحتوي المثال في الأعلى على عدة مبادئ من مبادئ CSS مثل مُحدّد الصفة (a[href]) (attribute selector) وخاصية content وكاذلك الدالة ()attr وهذا شرح لما تفعله كل واحدة منها:
• يقوم مُحدّد الصفة ([a[href) بتحديد جميع الروابط (وسوم a) الموجودة في الصفحة والتي تملك الصفة href.
• يُخبر العنصر الزائف after:: المتصفح بأن يختار الروابط التي تم تحديدها وأن يقوم بإدخال القيمة الموجودة في الخاصية content إلى نهاية المحتوى الموجود في كل رابط.
• يمكن للخاصية content أن تقبل العديد من القيم وأحد هذه القيم هو النصوص/سلسلة محارف (string) ويمكن أن يتم تقسيم سلسلة المحارف إلى عدة أجزاء وكل جزء يجب أن يكون موجودًا داخل علامات اقتباس، وإذا كان هناك مجموعة من هذه السلاسل (multiple strings) فسوف يتم دمجها.

• تقوم الدالة ()attr بأخذ ما هو موجود داخل أحد الصفات (attribute) وتقوم بإرجاعه على شكل سلسلة محارف للخاصية content الموجودة في العنصر الزائف (after:: في حالتنا هذه).
  إذاً فالشيفرة البرمجية الموجودة في الأعلى تختار جميع الروابط التي لها صفة href (وذلك باستعمال مُحدّد الصفة) ومن ثم تقوم باستخراج القيمة الموجودة في صفة href (باستعمال دالة ()attr) وبعد ذلك تقوم باستخدام تلك القيمة كقيمة للخاصية content وأخيرًا تظهر القيمة الموجودة في الخاصية content في نهاية الروابط كما نريد.
  لاحظ أيضًا أننا استخدمنا media print@ وذلك لأننا نريد أن يظهر نص الرابط فقط عندما يقوم أحدهم بطباعة الصفحة على ورقة.
  يمكنك معاينة النتيجة النهائية من هنا (ضع في عين الإعتبار أننا لم نقم باستعمال media print@ في هذه المعاينة لأننا نريد توضيح الفكرة فقط).

معاينة مباشرة لبعض الأمثلة

المعاينة التالية سوف تستخدم after:: لإضافة سهم صغير إلى بعض عناصر القائمة الرئيسية التي تحتوي على قوائم فرعية بداخلها، وعندما يقوم المستخدم بوضع مؤشر الفأرة على أحد تلك العناصر فإنّ القوائم الفرعية تظهر ويتم أيضًا استبدال السهم بسهم آخر وذلك عن طريق تغيير القيمة الموجودة في الخاصية content.
مشاهدة المعاينة
إنّ استبدال القيمة الموجودة في الخاصية content (استبدال السهم الذي رأسه لأسفل بسهم آخر رأسه للأعلى) يمكن أن يحدث بسبب أنّه يمكن استخدام العناصر الزائفة والفئات الزائفة مع بعضها، فعلى سبيل المثال يمكن استخدام li:hover::after بحيث يتم تحديد الفئة الزائفة after:: عندما يقوم المستخدم بوضع مؤشر الفأرة فوق أحد عناصر القائمة الرئيسية التي تحتوي عناصر فرعية.
يمكنك الاطلاع على هذه المعاينة أيضًا لمثال آخر.

دعم المتصفحات

إنّ دعم المتصفحات للعناصر الزائفة after: وbefore: ممتاز فهو مدعوم في جميع المتصفحات تقريبًا، ولكن كما قلنا سابقًا فإنّ متصفح Internet Explorer 8 لا يدعم استخدام (::) في العناصر الزائفة، لذلك إن أردت دعم هذا المتصفح فإن عليك استخدام (:) بدلًا من (::).

ملاحظة: متصفحات Internet Explorer لا تدعم استخدام الخاصية z-index مع العناصر الزائفة.

ترجمة -وبتصرّف- للمقال after:: لصاحبته Sara Soueidan.

سوف نتطرق في هذا الدرس إلى كيفية تنسيق وتخصيص عناصر <"input type="file> بالطريقة الصحيحة والسليمة وباستعمال العنصر <label> وبعض الجافاسكربت.

معاينة النتيجة النهائية.

يمكنك تحميل الشيفرة المصدرية للأمثلة من هنا.

هناك العديد من الطرق لتخصيص العنصر <"input type="file> وقد جربت العديد منها ولكنها لم تعجبني ولم تُلبّي متطلباتي. لذلك حاولت البحث في Google ولكني لم أجد مبتغاي. وبعد أن فقدت الأمل وظننت أنني لن أجد ما أبحث عنه وقعت عيني بالصدفة على أحد التعليقات الموجودة في موقع StackOverflow، وكان ذلك التعليق يحتوي على كلمة "<label>" وكان ذلك بداية الخيط وأعتقد أنّه ما كنت أبحث عنه.

وكما تعلمون فالنقر على عنصر label يؤدي إلى تفعيل أحد عناصر <input> مرتبطة به، ومما يثير الاهتمام أنّه إذا كان ذلك العنصر عبارة عن  <"input type="file> فإنّ النقر على الـlabel المرتبطة به يؤدي إلى فتح متصفح الملفات وهذا هو الحل المثالي الذي كنت أبحث عنه.

<input type="file" name="file" id="file" class="inputfile" />

<label for="file">Choose a file</label>

أي أنّ النقر على أي واحد من هذين العنصرين (<label> أو <"input type="file>) سوف يعطي نفس النتيجة وهي فتح متصفح الملفات، وهذا يعني أنّ أصعب جزء قد تم حلُّه. لن نحتاج إلى جافاسكربت أو حلول معقدة، كل ما نحتاجه هو السطرين البرمجيين الموجودين في الأعلى. أنظر إلى الصورة في الأسفل.

دعونا الآن نقوم بتنسيق العناصر حتى تبدو وكأنّنا نملك زرا عاديا.

إخفاء عنصر <input>

في البداية يجب علينا إخفاء العنصر <input>، وسوف تتكفل الخاصيتين display: none أو visibility: hidden بذلك. لماذا نريد إخفاءه؟ لأنّ قيمة المُدخل (input) لن يتم ارسالها إلى الخادوم عندما نقوم بعمل تسليم (submit) للنموذج. والسبب الثاني هو أننا لا نريد أن يتم تحديد ذلك العنصر عندما يقوم الزائر بتصفح الموقع باستعمال الزر tab الموجود على لوحة المفاتيح (لأننا نريد لموقعنا أن يكون قابل للوصول accessible). وبناءً على ذلك قمت باستعمال تنسيقات CSS التي تراها في الأسفل التي سوف تعمل على إخفاء العنصر عن أنظارنا ولكنه سيبقى مرئي بالنسبة للمتصفح نفسه:

.inputfile {

    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

قد تتسائل لماذا وضعنا القيمة 0.1px لكل من العرض والارتفاع وليس 0px. يعود السبب في ذلك إلى أنّه إذا أعطينا عنصر ما عرض وارتفاع بقيمة 0px فإنّنا لن نتمكن من استخدام زر tab على تلك العناصر في بعض المتصفحات. وأمّا بالنسبة للخاصية position: absolute فقد استخدمناها حتى نمنع أن يتداخل العنصر مع العناصر الأخرى.

تنسيق العنصر <label>

بما أنّ العنصر <label> هو الزر افتراضيًا فإننا نستطيع تنسيق هذا العنصر كما نريد. سنقوم بشيء بسيط هنا ولن نجعل التنسيقات معقدة:

.inputfile + label {

    font-size: 1.25em;
    font-weight: 700;
    color: white;
    background-color: black;
    display: inline-block;
}

.inputfile:focus + label,
.inputfile + label:hover {

    background-color: red; 
}

الوصولية (accessibility)

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

.inputfile + label {

    cursor: pointer; /* "hand" cursor */
}

أنظر إلى الصورتين التاليتين ولاحظ أنّ في الصورة الأولى لا يتغير مؤشر الفأرة على عكس الصورة الثانية التي يتغير فيها مؤشر الفأرة عند وضعه على العنصر ليعطي انطباعًا بأنّ هذا العنصر قابل للنقر.

التصفح/التنقل باستخدام لوحة المفاتيح

إن كان زوار موقعك لا يستطيعون تصفح موقعك باستخدام لوحة مفاتيح فقط فتأكد حينها أنّك تقوم بشيء خاطئ ويجب عليك اصلاحه. وقد كان إخفاء عنصر <input> بطريقة صحيحة هو أحد الأشياء الجيدة لتحسين تجربة المستخدم، وأمّا الشيء الآخر هو أن تُعطي للمستخدم انطباعًا ما بأنّ العنصر قد أصبح في حالة focus (يُصبح العنصر في حالة focus عند التصفح باستخدام زر tab في لوحة المفاتيح، وبالتالي نستطيع استخدام الفئة الزائفة focus: على ذلك العنصر):

.inputfile:focus + label {

    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

تُستخدم القيمة webkit-focus-ring-color auto 5px من أجل الحصول على المظهر الإفتراضي للخط الخارجي (outline) في متصفحات Chrome، Opera وSafari. وبالنسبة للقيمة 1px dotted #00 فهي موجودة فقط للمتصفحات التي لا تفهم -webkit-.

مشاكل متعلقة باللمس (touch)

إذا كنت تستخدم FastClick (وهي مكتبة للتخلص من الإيقاف المؤقت للنقر والذي مُدته 300ms في الأجهزة التي تعمل باللمس) وكنت تنوي إضافة عناصر إضافية داخل العنصر <label>، فإنّ الزر لن يعمل كما يجب إلا إذا استخدمت الخاصية pointer-events: none:

<label for="file"><strong>Choose a file</strong></label>

.inputfile + label * {

    pointer-events: none;
}

تحسين بعض الأمور باستخدام الجافاسكربت

بقي علينا شيء واحد يجب فعله وهو إظهار إذا ما كان هناك ملفات تم اختيارها أم لا. ومع أنّ العنصر <"input type="file> يُظهر ذلك عادةً إلا أننا قمنا بإخفائه إن كنت تذكر، ولكن لحسن حظنا فهناك طريقة لفعل ذلك باستخدام الجافاسكربت بحيث نجعل نص الـlabel هو اسم الملف المُختار، وإذا كان هناك عدة ملفات فإنّ نص الـlabel يصبح عدد تلك الملفات:

<input type="file" name="file" id="file" class="inputfile" data-multiple-caption="{count} files selected" multiple />

var inputs = document.querySelectorAll( '.inputfile' );

Array.prototype.forEach.call( inputs, function( input )
{

    var label = input.nextElementSibling;
    labelVal = label.innerHTML;

    input.addEventListener( 'change', function( e )
    {
        var fileName = '';

        if( this.files && this.files.length > 1 )
            fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
        else
            fileName = e.target.value.split( '\\' ).pop();

        if( fileName )
            label.querySelector( 'span' ).innerHTML = fileName;
        else
            label.innerHTML = labelVal;
    });
});

قمت أيضًا بكتابة أكواد jQuery تقوم بنفس العمل، لذلك تأكد من أن تتصفح الملف المصدري إن كنت تفضل استخدام jQuery.

توضيح بسيط للأكواد الموجودة في الأعلى:

• وجود الصفة multiple في عنصر <input> يسمح للمستخدم بأن يختار أكثر من ملف مرة واحدة. أمّا الصفة data-multiple-caption فهي تستخدم للتعبير عن الرسالة التي تريد أن تظهر للمستخدم عندما يقوم باختيار عدة ملفات. وبالنسبة للعبارة { count } فهي اختيارية وسوف يتم استبدالها برقم يُعبّر عن عدد الملفات المُختارة.
• الصفة multiple غير مدعومة في متصفح Internet Explorer 9 أو أقل ولا حتى الخاصية files الخاصة بالجافاسكربت، ولذلك سوف نعتمد على value. وبما أنّها عادةً تحتوي على قيمة بالصيغة C:\fakepath\filename.jpg فإنّ ()split( '\\' ).pop تقوم باستخراج اسم الملف.
• من المثير للاهتمام أنّه يمكنك إلغاء قيمة من المدخلات عن طريق الضغط على زر ESC عندما تكون نافذة تصفح الملفات مفتوحة، وهذا متاح فقط في متصفحي Chrome وOpera. ولهاذ استخدمنا المتغير labelVal لتخزين القيمة الافتراضية للـlabel وإرجاعها عند الحاجة لذلك.

سوف تكون النتيجة النهائية كما في الصورة:

ولكن ماذا لو كانت الجافاسكربت غير مفعلة؟

بما أنّه لا يوجد طريقة أخرى غير الجافاسكربت لمعرفة إذا ما قام المستخدم باختيار ملف أم لا، فإنّه من الأفضل الاعتماد على المظهر الافتراضي لمُدخِل الملفات من أجل سهولة الاستخدام. لذلك كل ما علينا فعله هو إضافة class باسم "no-js" للعنصر <html> ومن ثم نستخدم الجافاسكربت لاستبداله بالاسم "js" وبهذه الطريقة نعرف إذا كان الجافاسكربت مفعلًا أم لا.

<html class="no-js">

<head>

<!-- remove this if you use Modernizr -->

<script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);</script>

</head>

</html>

وهذه تنسيقات CSS:

.js .inputfile {

    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.no-js .inputfile + label {

    display: none;
}

خطأ في متصفح Firefox

إنّه لمن المفاجئ معرفة أنّ متصفح Firefox يتجاهل input[type="file"]:focus بينما تعمل :hover و:active بشكل جيد. ولكن لحسن الحظ فإنّ هذا المتصفح يسمح لنا بالتعرف على حالة focus باستخدام الجافاسكربت، لذلك فإنّ الحل هو إضافة class للعنصر <input> ليسمح لنا بالتحكم بحالة الـfocus:

input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });

input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });

.inputfile:focus + label,
.inputfile.has-focus + label {

    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

خاتمة

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

ترجمة -وبتصرّف- للمقال Styling & Customizing File Inputs the Smart Way لصاحبته Osvaldas Valutis.

كُنّا في درس سابق قد تحدثنا عن كيفية تخطيط صفحات الويب باستعمال CSS2 وكيف أنّ ذلك لم يكن بالأمر السهل، لذلك في هذا الدرس سوف نقوم بنفس التخطيط ولكن باستعمال تقنيات CSS3 الجديدة.

تٌقدّم لنا CSS3 مجموعة من التقنيات والتحسينات لتساعدنا على تخطيط صفحات الويب بشكل أفضل وأسهل ودون الحاجة إلى الكثير من الأكواد كما كان الحال في CSS2. كما أنها مُصممة لتدعم السلوكات المتغيرة/الديناميكية وبالتالي يمكننا القول بأنها " لغة قابلة للبرمجة".

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

دالة ()calc الخاصة بلغة CSS3

تُستخدم دالة ()calc الجديدة لحساب القيم بشكل ديناميكي (ضع في الحسبان أن دعم هذه الدالة يختلف من متصفح لآخر). وفي داخل هذه الدالة يمكنك كتابة أي معادلة/تعبير (expression) باستخدام المعاملات الحسابية المعروفة (+، -، *، /).

سوف يساعدنا استخدام هذه الدالة على التخلص من الكثير من الأكواد التي كان لا بد منها في CSS2، وفي حالتنا هذه فإنها سوف تساعدنا في تمدد العناصر بشكل أفضل (سوف يصبح استخدام تقنية CSS Expansion التي ذكرناها سابقًا أكثر سهولة). أنظر للكود الموجود في الأسفل:

#nav, #subnan {
    position: fixed;
    height: calc(100% - 10em); /* replaces */
    z-index: 20;
}

لاحظ أننا استخدمنا الدالة ()calc في الخاصية height وهذا سوف يساعدنا بالحصول على نفس النتيجة التي حصلنا عليها باستخدام CSS2 عندما استخدمنا الخاصيتين top: 6em و bottom: 4em، وبهذا يمكن للأمور أن تصبح أكثر مرونة وسوف نحتاج إلى خاصية واحدة (height مع ()calc) بدل اثنتين (top وbottom).

استخدام CSS3 Flexbox في تخطيط الصفحات

تُعتبر Flexbox من الخصائص والتقنيات الجديدة التي ظهرت في CSS3 وهي تجعل من تخطيط الصفحات وترتيب عناصرها أمرًا سهلًا ومتشابهًا في مختلف أحجام الشاشات والأجهزة، وبالتالي فهي مفيدة جدًا عند القيام بتصميم مواقع متجاوبة.

وهذه بعض الخصائص والميزات التي تتمع بها Flexbox:

• تمكننا من موضعة العناصر الأبناء (child elements) بشكل أسهل ويصبح تخطيط الصفحات المعقدة أبسط وأسهل ودون الحاجة إلى الكثير من الأكواد فيصبح لدينا كود أنظف وقابل للقراءة بشكل أفضل.
• يمكن وضع العناصر الأبناء بأي إتجاه نريده وتصبح أبعاد تلك العناصر مرنة أكثر بحيث يمكنها التجاوب مع مساحة العرض.
• تستطيع العناصر الأبناء أن تتمدد وتتقلص تلقائيًا لتشغل المساحة الفارغة.

كما أنّ Flexbox يقدم مجموعة خاصة به من المفاهيم والمصطلحات، ونذكر بعض منها:

• Flex container: العنصر الذي يحتوي على الخاصية display بالقيمة flex أو inline-flex بحيث يصبح هذا العنصر هو العنصر الحاوي (الأب) للعناصر التي نريد التعامل معها.
• Flex item: هو أي عنصر موجود في الـFlex container. (ملاحظة: أي نص موجود بشكل مباشر داخل الـFlex container سيتم احتواؤه داخل anonymous flex item).
• Axes: أي flexbox يجب أن يحتوي على الخاصية flex-direction بحيث تُحدد هذه الخاصية المحور الرئيسي (main axis) الذي سوف تتموضع حوله الـflex items. ويوجد أيضًا المحور العرضي (cross axis) ويكون هذا المحور عموديًا على المحور الرئيسي.
• Lines: يمكن للـflex items أن تصطف/تتموضع في خط واحد أو خطوط متعددة وذلك ما تحدده الخاصية flex-wrap.
• Dimensions: يحتوي flexbox على main size و cross size كبديل عن height وwidth بحيث تُحدد هاتين القيمتين حجم المحور الرئيسي (main axis) والعرضي (cross axis) على التوالي.

بعد هذه المقدمة القصيرة عن flexbox يمكننا الآن استخدامها في تخطيط الصفحات.

<body class="layout-flexbox">
    <header id="header"></header>

    <div class="content-area">
        <nav id="nav"></nav>
        <aside id="subnav"></aside>
        <main id="main"></main>
    </div>

    <footer id="footer"></footer>
</body>

نريد في حالة الاستخدام التي نعمل عليها أن تكون العناصر الرئيسية (header ،content ،footer) مصفوفة بشكل عمودي، وبالتالي سوف نستخدم القيمة column في الخاصية flex-direction كما يلي:

.layout-flexbox {
    display: flex;
    flex-direction: column;
}

ومع أنّ العناصر الرئيسية يجب أن تكون مصفوفة بشكل عمودي إلّا أنّ العناصر في منطقة المحتوى (nav ،subnav ،main) نريدها مصفوفة بشكل أفقي. وبما أنّ كل flex container يمكن أن يحتوي على خاصية flex-direction واحدة فقط فإننا سنقوم بتعريف العديد من flex containers داخل بعضها البعض حتى يمكننا التحكم في تخطيط الصفحة كما نشاء (أي حتى يصبح بإمكاننا أن نجعل العناصر تصطف كما نريد وألّا نصبح مقيدين باتجاه واحد فقط).

ولهذا السبب قمنا بإضافة حاوي (container) آخر (<div class="content-area">) ليحتوي على عناصر nav ،#subnav# و main#.

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

نريد الآن أن نقوم بموضعة الـflex items لذلك سوف نستخدم الخاصية flex وهي اختصار(shorthand) للخصائص flex-grow ،flex-shrink وflex-basis. وهذه الخصائص تُحدد كيف تقوم الـflex items بتوزيع المساحة الفارغة المتبقية بينها، وهذا تعريف بسيط بهذه الخصائص:

• flex-grow: تُحدد كم يمكن للعنصر (flex item) أن ينمو/يتمدد نسبة للعناصر الأخرى في نفس الحاوي.
• flex-shrink: تُحدد كم يمكن للعنصر (flex item) أن يتقلص نسبة للعناصر الأخرى في نفس الحاوي.
• flex-basis: يُحدد الحجم الافتراضي للعنصر (أي حجمه قبل أن ينمو أو يتقلص).

عندما نقوم بإعطاء الخاصيتين flex-grow وflex-shrink القيمة "صفر" فإننا نقوم بمنع العنصر من أن يتقلص أو ينمو حتى لو كان هناك مساحة فارغة (أي أنّ حجم العنصر يبقى ثابتًا). وهذا ما سوف نقوم به للترويسة (header) والتذييل (footer) لأننا نريد أن يبقى حجمهما ثابتًا:

#header {
    flex: 0 0 5em;
}

#footer {
    flex: 0 0 3em;
}

وإذا أردنا لعنصر أن يستغل أي مساحة ثابتة فإننا نعطي الخاصيتين flex-grow وflex-shrink القيمة "1" ونعطي الخاصية flex-basis القيمة auto. وهذا ما نريده بالنسبة لمنطقة المحتوى (نريدها أن تستغل أي مساحة فارغة).

وكما ذكرنا سابقًا فإننا نريد للعناصر الموجودة داخل <div class="content-area"> أن تصطف بشكل أفقي، لذلك سوف نعطيها الخاصية display: flex حتى يصبح هذا العنصر عبارة عن flex container وسوف نعطيها أيضًا الخاصية flex-direction: row حتى نجعل العناصر الموجودة في داخله (nav ،#subnav# و main#) تصطف بشكل أفقي، وبالتالي نحصل على تنسيقات CSS التالية:

.content-area {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    margin: 1em 0;
    min-height: 0;
}

في منطقة المحتوى نريد أن يكون حجم كلا العنصرين nav# وsubnav# ثابت وبالتالي سوف نعطيها الخاصية flex بقيم مناسبة:

#nav {
    flex: 0 0 5em;
    margin-right: 1em;
    overflow-y: auto;
}

#subnav {
    flex: 0 0 13em;
    overflow-y: auto;
    margin-right: 1em;
}

لاحظ أنني استعملت الخاصية overflow-y: auto وذلك حتى نتعامل مع المحتوى إذا ما تجاوز ارتفاع الحاوي. متصفح Firefox هو من يحتاج لهذه الخاصية.

سوف يأخذ العنصر main# المساحة الفارغة المتبقية:

#main {
    flex: 1 1 auto;
    overflow-y: auto;
}

كل شيء يبدو جيدًا إلى الآن، لذلك دعونا نقوم بإضافة السلوك المتغير/الديناميكي ونرى ما يحصل.

سوف تكون أكواد الجافاسكربت مشابهة لما استخدمناه سابقًا باستثناء أن اسم الـclass للعنصر الحاوي سيكون layout-flexbox بدلًا من layout-classic:

$('.layout-flexbox #nav’).on('click', 'li.nav-toggle', function() {
    $('#nav').toggleClass('expanded');
});

سوف نضيف "class expanded" إلى تنسيقات CSS كما يلي:

#nav {
    flex: 0 0 5em; /* collapsed size */
    margin-right: 1em;
    overflow-y: auto;
    &.expanded {
        flex: 0 0 10em; /* expanded size */
    }
}

لاحظ أننا هذه المرة لم نحتج إلى أن ندع العناصر الأخرى تعلم بشأن تغير العرض وذلك لأنّ flexbox تعالج الأمر دون تدخل منا.

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

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

تخطيط الصفحات باستخدام CSS3 Grid

إذا كنت تعتقد أن flexbox شيء جديد فأنت حتمًا لم تسمع عن CSS3 Grid، فهي ما زالت في مرحلة مبكرة (مرحلة draft) ودعم المتصفحات لها شبه معدوم (يمكنك تفعيلها في متصفح Google Chrome عن طريق الدخول إلى chrome://flags واختيار "experimental Web Platform features").

وفائدتها هي أنها تعمل في طبقة العرض (presentation layer) وبالتالي لن نحتاج إلى معرفة كيفية ظهور العناصر في التوصيف (markup) الخاص بملفات HTML (أي أنّ كل شيء سيتم باستخدام CSS بعض النظر عن ترتيب العناصر في HTML).

الفكرة العامة هي أن يكون هناك شبكة تخطيط (grid) مرنة ومُعرّفة بشكل مسبق يمكن أن نستخدمها لموضعة العناصر بداخلها. وكما هو الحال في flexbox فإنها تعمل على مفهوم المساحات الفارغة وتسمح لنا بتعريف إتجاهين (عمودي وأفقي) في نفس العنصر مما يؤدي إلى تقليل حجم الكود وزيادة مرونته.

يُقدّم لنا Grid Layout نوعين من الـgrids وهما explicit وimplicit، ولجعل الأمور بسيطة سوف نركز على explicit فقط.

وكما هو الحال مع flexbox فإنّ Grid يقدم مجموعة خاصة به من المفاهيم والمصطلحات، ونذكر بعض منها:

• Grid container: هو أي عنصر يملك الخاصية display بالقيمة "grid" أو "inline-grid" بحيث تتموضع العناصر داخله ويتم محاذاتها بناءً على grid مُعرّف مسبقًا (explicit mode). والـgrid هو عبارة عن مجموعة من الخطوط العمودية والأفقية المتقاطعة والتي تفصل الـGrid container إلى مجموعة من الخلايا (cells). وهناك مجموعتين من الخطوط؛ الأولى لتعريف الأعمدة (columns) والثانية تكون عمودية على هذه الأعمدة لتعريف الصفوف (rows).
• Grid track: هي المسافة بين خطّين متجاورين، وكل Grid track يتم إعطاؤه دالة تحجيم (sizing function) للتحكم بكيفية نمو كل عمود أو صف وبالتالي التحكم في البعد بين الخطوط المحيطة بكل خط.
• Grid cell: هي المسافة بين صفّين متجاورين وعمودين متجاورين من خطوط الـgrid، وهو أصغر وحدة من الـgrid يمكن الرجوع والاستناد إليها عندما نقوم بموضعة عناصر الـgrid.
• Flexible length: هو بُعد يتم تحديده بوحدة fr وهو يُمثّل جزء من المساحة الفارغة في الـGrid container.

إليك عناصر HTML التي سوف نستخدمها:

<body class="layout-grid">
    <header id="header"></header>
    <nav id="nav"></nav>
    <aside id="subnav"></aside>
    <main id="main"></main>
    <footer id="footer"></footer>
</body>

لاحظ بأننا في تخطيط الصفحة هذا لن نحتاج إلى عنصر إضافي يعمل كحاوٍ لمنطقة المحتوى كما كان الحال مع flexbox، وذلك لأنّ هذا النوع من تخطيط الصفحات (Grid layout) يسمح لنا بتعريف مساحة كل عنصر في كلا الإتجاهين وبنفس الـGrid container.

لنبدأ الآن بإضافة تنسيقات CSS:

.layout-grid {
    display: grid;
    grid-template-columns: auto 0 auto 1em 1fr;
    grid-template-rows: 5em 1em 1fr 1em 3em;
}

قمنا باستخدام الخاصية display: grid على الحاوي (Grid container)، وكذلك استخدمنا الخاصيتين grid-template-columns وgrid-template-rows وهما تمثلان المساحة بين الـGrid tracks. بمعنى آخر، فإنّ هاتين القيمتين لا تمثلان مكان تواجد خطوط الـgrid وإنّما تمثلان مقدار المساحة بين الـGrid tracks.

ضع في الحسبان أنّ وحدات القياس يمكن أن تكون أي واحدة من التالية:

• وحدة طول (length).
• نسبة مئوية معينة من حجم الحاوي (Grid container).
• مساحة من المحتوى الذي يحتله العمود أو الصف.
• جزء من المساحة الفارغة في الـgrid.

فعلى سبيل المثال، في الخاصية grid-template-column: auto 0 auto 1em 1fr سيكون لدينا التالي:

• track واحد لتعريف عمودين بعرض auto (مساحة القائمة الرئيسية nav#).
• gutter واحد بقيمة "صفر" (الـmargin الخاص بالعنصر subnav# موجود في مستوى العنصر، ويمكن أن يكون موجودًا أو لا وبهذه الطريقة نضمن أن لا يكون هناك gutter مزدوج).
• track واحد لتعريف عمودين بعرض auto (مساحة القائمة الفرعية subnav#).
• gutter واحد بقيمة 1em.
• track واحد بقيمة 1fr للعنصر main# (سوف يأخذ المساحة المتبقية).

لاحظ أننا استخدمنا القيمة auto في الـtrack، وهذا يسمح لنا بالحصول على أعمدة ديناميكية بحيث يتم تعريف مكان وحجم خطوط الـgrid بناءً على المحتوى الخاص بها. (سوف نحتاج أيضًا إلى تعريف حجم العنصرين nav# وsubnav# وهذا ما سنفعله بعد قليل).

وبطريقة مشابهة، سوف تملك الصفوف الخاصية grid-template-row: 5em 1em 1fr 1em 3em مما يجعل العنصرين header# و footer# ثابتين ويؤدي أيضًا إلى أنّ العناصر الموجودة بين هذين العنصرين سوف تستخدم المساحة الفارغة المتبقية في حين تكون قيمة الـgutters بقيمة 1em.

لنرى الآن كيف سنقوم بموضعة العناصر داخل الـgrid الذي قمنا بتعريفه:

#header {
    grid-column: 1 / 6;
    grid-row: 1 / 2;
}

#footer {
    grid-column: 1 / 6;
    grid-row: 5 / 6;
}

#main {
    grid-column: 5 / 6;
    grid-row: 3 / 4;
    overflow-y: auto;
}

إنّ تنسيقات CSS الخاصة بالعنصر header# تُخبرنا بأننا نريد أن تكون الترويسة موجودة بين الخطين 1 و6 (أي العرض كامل) بالنسبة للأعمدة وبين الخطين 1 و2 بالنسبة للصفوف. ونفس الشيء بالنسبة للعنصر footer# فنريده أن يكون موجودًا بين الخطين 1 و6 (أي العرض كامل) بالنسبة للأعمدة وبين الخطين 5 و6 بالنسبة للصفوف. أمّا بالنسبة لمنطقة المحتوى فقد تمّ إعطاؤها الخصائص المناسبة حتى تشغل المساحة التي يفترض بها أن تشغلها.

لاحظ أنّ الخاصية grid-column هي اختصار (shorthand) للخاصيتين grid-column-start وgrid-column-end و أنّ الخاصية grid-row هي اختصار للخاصيتين grid-row-start وgrid-row-end.

لنعد الآن إلى العنصرين nav# وsubnav#. بما أننا قمنا مسبقًا بوضع هذين العنصرين داخل الـtrack بقيم auto فسوف نحتاج إلى تحديد مساحتهما (نفس الشيء سيكون بالنسبة لـ"expanded" فسوف نقوم فقط بتغيير عرضها وسوف يتكفل Grid بالباقي).

#nav {
    width: 5em;
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    &.expanded {
        width: 10em;
    }
}

#subnav {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
    width: 13em;
    margin-left: 1em;
}

يمكننا الآن أن نقوم بتغيير وضع القائمة الرئيسية nav# وإخفاء أو إظهار القائمة الفرعية subnav# وكل شيء سيعمل بشكل جيد وملائم. كما أنّ Grid Layout تسمح لنا باستعمال أسماء مستعارة لتسمية الخطوط حتى نستطيع أن نُغير في الـgrid كما نريد دون أن يؤدي ذلك إلى خلل في الأكواد لأنّها ستكون مربوطة باسم معين وليس بأحد خطوط الـgrid.

خاتمة

حتى باستخدام تقنيات CSS القديمة فإنّ هناك الكثير مما يستطيع مطورو الويب فعله واستغلاله. ومع ذلك فقد يكون ذلك مهمة ليست سهلة وتحتاج إلى الكثير من الأكواد والتي قد تكون مكررة في كثير من الأحيان.

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

ترجمة -وبتصرّف- للمقال CSS Layout Tutorial: From Classic Approaches to the Latest Techniques لصاحبه Laureano Martin Arcanio.

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

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

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

ملاحظة: سوف نستخدم HTML5 وSass في هذا المقال. ويمكنك الحصول على الشيفرات البرمجية كاملة من هنا.

إحدى حالات الاستخدام

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

ستكون حالة الاستخدام التي سنعمل عليها عبارة عن تخطيط لتطبيق ويب (Web App) مع بعض السلوكيات المتغيرة/الديناميكية (dynamic)، بحيث سيكون هناك عناصر ثابتة في الصفحة مثل الترويسة (header) والتذييل (footer) وقائمة رئيسية (navigation) وقائمة فرعية (sub-navigation) وقسم محتوى قابل للتمرير(scrollable content). ستكون المتطلبات الخاصة بتخطيط الصفحة كما يلي:

التخطيط الأساسي:

• الترويسة، التذييل، قائمة رئيسية وقائمة فرعية وهذه العناصر ستبقى ثابتة عند التمرير (scroll).
• سوف تشغل القائمة الرئيسية والقائمة الفرعية أي مساحة عمودية فارغة.
• سوف يشغل قسم المحتوى المساحة المتبقية في الصفحة وسوف يحتوي على منطقة قابلة للتمرير.

السلوكيات المتغيرة/الديناميكية:

سوف تحتوي القائمة الرئيسية على أيقونات فقط بشكل افتراضي، ولكن يمكن لها أن تتمدد لتحتوي على بعض النصوص (وأيضًا تتقلص/تنطوي لتظهر الأيقونات فقط مرة أخرى).

اختلافات في تخطيط الصفحة:

ستحتوي بعض الصفحات على قائمة فرعية بجانب القائمة الرئيسية والبعض الآخر لا.

استخدام تقنيات CSS2

هذا هو تخطيط HTML5 الذي سوف نستخدمه:

<body class="layout-classic">
    <header id="header"></header>
    <nav id="nav"></nav>
    <aside id="subnav"></aside>
    <main id="main"></main>
    <footer id="footer"></footer>
</body>

1. الموضعة الثابتة (position: fixed)

في CSS2 يمكنك الحصول على عناصر ثابتة في الصفحة (مثل الترويسة، التذييل...الخ) عن طريق توظيف نموذج تخطيط يَستخدم الموضعة الثابتة (يستخدم position: fixed).

سوف نستخدم أيضًا الخاصية z-index لنتأكد بأنّ العناصر الثابتة سوف تظهر فوق جميع العناصر الأخرى في الصفحة، بحيث تقوم هذه الخاصية بتحديد مكان العنصر إمّا أعلى أو أسفل عنصر آخر، فالعناصر التي تحتوي على قيمة z-index كبيرة سوف تظهر فوق العناصر التي تحتوي على قيمة z-index أقل.

هناك شيء مهم يجب عليك تذكره وهو أنّ خاصية z-index لن تعمل إلا بوجود خاصية position، أي أنّك إذا استخدمت خاصية z-index  على أحد العناصر ولكنك لم تستخدم خاصية position على نفس العنصر فإنّ خاصية z-index لن تعمل. وبالنسبة لنا، فسوف نستخدم القيمة 20 (وهي أعلى من القيمة الافتراضية) حتى نُبقي العناصر الثابتة فوق العناصر الأخرى في الصفحة.

وسوف نستخدم خاصية width ونعطيها القيمة 100% وهذا سيسمح للعناصر بالتمدد أفقيًا بالقدر الذي تستطيعه.

#header, #footer {
    position: fixed;
    width: 100%;
    z-index: 20;
}

#header {
    top: 0;
    height: 5em;
}

#footer {
    bottom: 0;
    height: 3em;
}

هذا بالنسبة للترويسة والتذييل، ولكن ماذا بالنسبة للقائمة الرئيسية (nav#) والفرعية (subnav#)؟

2. تقنية التوسع/التمدد في CSS

بالنسبة للقائمة الرئيسية (nav#) والفرعية (subnav#)، سوف نستخدم تقنية تسمى بتقنية التمدد (CSS Expantion) بحيث تُستخدم هذه التقنية على العناصر التي تحتوي على الخاصية position: fixed (بحيث يبقى العنصر ثابت في الصفحة) أو الخاصية position: absolute (بحيث يتم موضعة العنصر بناءً على أقرب عنصر حاوي يحتوي على الخاصية position بقيمة غير القيمة static).

يمكن الحصول على تمدد رأسي/عمودي (vertical) باستخدام الخاصيتين top و bottom وإعطائها قيم محددة بحيث يتمدد العنصر عموديًا ليستخدم المساحة العمودية المتبقية وفقًا لتلك القيم، أي أنّ ما نقوم به هو ربط الجزء العلوي للعنصر بمسافة محددة من الجزء العلوي للصفحة وكذلك ربط الجزء السفلي للعنصر بمسافة محددة من الجزء السفلي للصفحة مما سيؤدي إلى تمدد العنصر ليشغل المساحة العمودية بين هاتين النقطتين (العلوية والسفلية).

ونفس الأمر ينطبق على التمدد الأفقي بحيث نستخدم الخاصيتين left و right ونعطيها قيم محددة بحيث يتمدد العنصر أفقيًا ليشغل المساحة الأفقية المتبقية وفقًا لتلك القيم.

وبالنسبة لنا في هذه الحالة فإننا نريد أن نستخدم التمدد العمودي:

#nav, #subnav {
    position: fixed;
    top: 6em; /* ترك مسافة فوق الترويسة */
    bottom: 4em; /* ترك مسافة تحت التذييلة */  
    z-index: 20;
}

#nav {
    left: 0;
    width: 5em;
}

#subnav {
    left: 6em; /* leave 1em margin to right of nav */
    width: 13em;
}

3. الموضعة الإفتراضية/الساكنة (static)

سوف نستخدم الموضعة الساكنة لموضعة منطقة المحتوى القابلة للتمرير، بحيث تظهر العناصر وتتموضع بالترتيب كما تظهر بالتدفق الطبيعي للمستند (كما تظهر في ملف HTML)، وبما أنّ جميع العناصر الأخرى في الصفحة متموضعة بشكل ثابت فإنّ هذا العنصر سيكون هو العنصر الوحيد الذي يظهر وفقًا للتدفق الطبيعي للمستند. ونتيجة لذلك فكل ما نحتاجه لموضعة العنصر بشكل مناسب هو استخدام الخاصية margin حتى لا يحصل تداخل بينه وبين العناصر الأخرى الثابتة (الترويسة، التذييل والقائمتين الرئيسية والفرعية):

#main {
    margin: 6em 0 4em 20em;
}

وبهذا نكون قد أتممنا متطلبات التخطيط الأساسي باستخدام CSS2 وبقي علينا أن نهتم بأمر المتطلبات الإضافية الخاصة بالسلوكيات المتغيرة/الديناميكية.

4. السلوكيات المتغيرة/الديناميكية باستخدام تقنيات CSS2

ذكرنا سابقًا بأنّ القائمة الرئيسية سوف تحتوي على أيقونات فقط بشكل افتراضي، ولكن يمكن لها أن تتمدد لتحتوي على بعض النصوص (وأيضًا تتقلص/تنطوي لتظهر الأيقوانات فقط مرة أخرى).

لنبدأ أولًا بإعطاء القائمة الرئيسية عندما تكون متمددة عرضًا (width) بقيمة 5em زيادة على عرضها الرئيسي (أي يصبح عرضها عندما تتمدد 10em)، وسوف نقوم بذلك عن طريق إنشاء class باسم "expanded" بحيث يمكننا ديناميكيًا (باستخدام الجافاسكربت) إضافته أو إزالته من القائمة الرئيسية:

#nan {
    left: 0;
    width: 5em;
    &.expanded { /* Sass notation */
        width: 10em;
    }
}

يمكنك بالأسفل رؤية كود الجافاسكربت (jQuery في حالتنا هذه) الذي سوف نستخدمه لإضافة أو إزالة الـclass الذي يحمل الاسم "expanded" عندما يقوم المستخدم بالنقر على أيقونة القائمة:

$('.layout-classic #nav').on('click', 'li.nav-toggle', function() {
    $('#nav').toggleClass('expanded');
});

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

يمكنك الآن رؤية واحدة من المشاكل/القيود في CSS2، فسوف نحتاج الآن إلى كتابة العديد من الأكواد الخاصة بقيم العناصر المتموضعة بشكل ثابت، ونتيجة لذلك فسوف نحتاج إلى تعريف classes باسم "expanded" إضافية حتى نسمح للعناصر الأخرى بأن تتموضع لاستيعاب القائمة الرئيسية عندما تتمدد، وبذلك سوف نحتاج إلى كتابة المزيد والمزيد من الأكواد الإضافية.

#subnav {
    left: 6em;
    width: 13em;
    &.expanded {
        left: 11em; /* تحريكها لليمين */
    }
}

#main {
    margin: 6em 0 4em 20;
    z-index: 10;
    &.expanded {
        margin-left: 25em; /* تحريكها لليمين */
    }
}

سوف نحتاج أيضًا إلى إضافة أكواد جافاسكربت إضافية لإضافة أو إزالة الـclass "expanded" لتلك العناصر عندما يقوم المستخدم بالنقر على القائمة الرئيسية.

$('.layout-classic #nav').on('click', 'li.nav-toggle', function() {
    $('#nav, #subnav, #main').toggleClass('expanded');
});

سيكون كل شيء أفضل الآن.

5. اختلافات تخطيط الصفحة باستخدام تقنيات CSS2

كنا قد ذكرنا مسبقًا بأنّ بعض الصفحات لن تحتوي على قائمة فرعية. ولنكون أكثر دقة فإننا نريد للقائمة الفرعية أن تختفي عندما يضغط المستخدم على أيقونة "المستخدمين" (users) الموجودة في القائمة الرئيسية.

سوف نبدأ أولًا بإنشاء class بالاسم "hidden" وفيه الخاصية display: none:

hidden {
    display: none;
}

كما أننا سنستخدم الجافاسكربت لإخفاء القائمة الفرعية وذلك عن طريق تطبيق الفئة "hidden" على هذه القائمة عندما يقوم المستخدم بالنقر على أيقونة "المستخدمين" (users):

$('#nav.fa-user').on('click', function() {
    $('#subnav').toggleClass('hidden');
});

وبهذا يمكن للعناصر أن تختفي عند النقر على أيقونة "المستخدمين" ولكن المساحة التي كانت تحتلها سوف تبقى غير مستخدمة بدلًا من أن تقوم العناصر الأخرى باستخدام تلك المساحة.

وحتى نحصل على السلوك المطلوب عندما نقوم بإخفاء القائمة الفرعية فإننا سوف نستخدم المحدد المجاور(adjacent sibling selector) وهو يأتي على شكل إشارة الجمع +.

6. المحدد المجاور

يُستخدم المحدد المجاور لتحديد عنصرين واختيار العنصر الثاني الذي يأتي مباشرة بعد العنصر الأول. فعلى سبيل المثال، سيقوم الكود التالي باختيار العنصر الذي يحمل ID بقيمة main والذي يأتي مباشرة بعد العنصر الذي يحمل ID بقيمة subnav:

#subnav + #main {
    margin-left: 20em;
}

استخدمنا الكود في الأعلى لإعطاء العنصر main# الخاصية margin-left: 20em فقط إذا كان هذا العنصر يأتي مباشرة بعد العنصر  subnav#. ولكن عندما يتمدد العنصر nav# (بحيث يتم إضافة الفئة expanded إلى العنصر main# بناءً على الكود الذي كتبناه سابقًا) فإننا نريد للخاصية margin-left أن تحتوي على القيمة 25em.

#subnav + #main.expanded {
    margin-left: 25em;
}

وأمّا إذا كانت القائمة الفرعية subnav# مخفية فإننا نريد للخاصية margin-left الخاصة بالعنصر main# أن تحتوي على القيمة 6em:

#subnav.hidden + #main {
    margin-left: 6em;
}

ملاحظة: واحدة من مساوئ استخدام المحدد المجاور هو أن الـDOM سوف يحتوي دائمًا على العنصر subnav# حتى لو كان غير ظاهر في الصفحة.

وأخيرًا، إذا كان العنصر subnav# مخفيًا وnav# متمددًا فإننا نريد الخاصية margin-left للعنصر main# بأن تكون بالقيمة 11em:

#subnav.hidden + #main.expanded {
    margin-left: 11em;
}

خاتمة

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

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

ترجمة -وبتصرّف- للمقال CSS Layout Tutorial: From Class+ic Approaches to the Latest Techniques لصاحبه Laureano Martin Arcanio.

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

سوف تحتوي القائمة التي سنقوم بإنشائها على قائمتين فرعيتين تظهران عندما يقوم المستخدم بوضع مؤشر الفأرة (hover) فوق الرابط/العنصر الأب (parent link). ألقِ نظرة على ما سنقوم بإنشائه في هذا الدرس.

هيكلة ملف HTML

سنقوم في البداية بإنشاء ملف HTML يحتوي على الوسوم (tags) الخاصة بالقائمة. سوف نستعمل وسم <nav> الذي ظهر في HTML5، ثم نضيف روابط القائمة الرئيسية داخل وسم <ul>.

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a></li>
        <li><a href="#">Articles</a></li>
        <li><a href="#">Inspiration</a></li>
    </ul>
</nav>

بعد ذلك سوف نضيف القوائم الفرعية (قوائم فرعية درجة أولى) أسفل رابطي "Tutorials" و"Articles"، وكل واحدة من هاتين القائمتين ستكون عبارة عن وسم <ul>  موجود داخل وسم <li>. أنظر الشفرة البرمجية في الأعلى.

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a>
            <ul>
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator</a></li>
                <li><a href="#">Web Design</a></li>
            </ul>
        </li>
        <li><a href="#">Articles</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">User Experience</a></li>
            </ul>
        </li>
        <li><a href="#">Inspiration</a></li>
    </ul>
</nav>

أمّا روابط القائمة الفرعية الثانية (قائمة فرعية درجة ثانية) فسوف تكون موجودة داخل الخيار "Web Design" من القائمة الفرعية الأولى ذات الدرجة الأولى. أي أنّ هذه الروابط ستكون موجودة داخل وسم <ul> وهذا الوسم سيكون موجودًا داخل الوسم:

 <li><a href="#">Web Design</a></li> 

(يمكنك النظر إلى الشفرة البرمجية التالية حتى تتوضح الصورة بشكل أفضل).

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a>
            <ul>
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator</a></li>
                <li><a href="#">Web Design</a>
                    <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Articles</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">User Experience</a></li>
            </ul>
        </li>
        <li><a href="#">Inspiration</a></li>
    </ul>
</nav>

لقد حصلنا إلى الآن على قائمة منسدلة بقوائم فرعية واضحة المعالم وسنقوم في الخطوة التالية بإضافة تنسيقات CSS.

إضافة تنسيقات CSS

لنبدأ الآن بإضافة بعض تنسيقات CSS الأساسية لنجعل القائمة المنسدلة تعمل. يمكننا باستخدام بعض المحددات المتقدمة أن نستهدف عناصر موجودة بشكل عميق داخل بنية HTML من دون استعمال أي ids أو classes، ففي البداية سنقوم بإخفاء العناصر الفرعية وذلك عن طريق استخدام الخاصية display:none على عناصر <ul> الموجودة داخل عناصر <ul> أخرى. وحتى نجعل هذه القوائم تظهر مرة أخرى عند وضع مؤشر الفأرة فوقها فإننا سنحتاج إلى إضافة الخاصية display: block. وبالنسبة للمحدد > فسوف نستخدمه حتى نتأكد بأنّ يظهر فقط العنصر الإبن <ul> الموجود داخل <li> الذي وضع فوقه مؤشر الفأرة بدلًا من أن تظهر جميع القوائم الفرعية بنفس اللحظة وهو ما لا نريده بكل تأكيد.

nav ul ul {
    display: none;
}
nav ul li:hover > ul {
    display: block;
}

يمكننا الآن تنسيق القائمة الرئيسية وذلك باستخدام بعض خصائص CSS3 مثل gradients ،box shadows وborder-radius. استخدمنا position:relative حتى نتمكن من موضعة القوائم الفرعية بالنسبة للقائمة الرئيسية (بعبارة أخرى، حتى نستطيع إعطاء الخاصية position: absloute للقوائم الفرعية)، واستخدمنا الخاصية display: inline-table حتى نمنع القائمة من التمدد على كامل الصفحة. أمّا بالنسبة للسطرين الأخيرين في الكود الموجود في الأعلى فهذا ما يسمى Clearfix وهو يستخدم لحل مشكلة الـfloats الشائعة وحتى لا نضطر إلى استعمال overflow: hidden لأن ذلك سيؤدي إلى إخفاء القوائم الفرعية ويمنعها من الظهور.

nav ul {
    background: #efefef;
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
    background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0 20px;
    border-radius: 10px;
    list-style: none;
    position: relative;
    display: inline-table;
}

nav ul:after {
    content: ""; clear: both; display: block;
}

قمنا بعد ذلك بتنسيق عناصر القائمة <li> وما تحتويه من عناصر <a>. وعندما يقوم المستخدم بوضع مؤشر الفأرة فوق العنصر سيتحول لون الخلفية إلى إحدى تدرجات اللون الأزرق وسوف يتغير لون الخط إلى الأبيض.

nav ul li {
    float: left;
}

nav ul li:hover {
    background: #4b545f;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}

nav ul li:hover a {
    color: #fff;
}

nav ul li a {
    display: block; padding: 25px 40px;
    color: #757575; text-decoration: none;
}

أصبحت القائمة الرئيسية جاهزة الآن ولكن القوائم الفرعية تحتاج إلى بعض العمل الإضافي، فبعض التنسيقات في عناصر القوائم الفرعية سوف ترث تنسيقات العنصر الأب، لذلك سوف نحتاج إلى تغيير لون الخلفية (background) وإزالة border-radius وتعديل قيم padding حتى يظهر كل شيء بأفضل شكل. وحتى نضمن أن تظهر هذه القوائم أسفل القائمة الرئيسية فقد استعملنا الخاصيتين position: absolute و top: 100%.

إنّ عناصر <li> الموجودة داخل <ul> في القوائم الفرعية لن تحتاج إلى أن تكون بجانب بعضها بشكل أفقي (أي لن نحتاج إلى استعمال خاصية float) وإنما ستكون فوق بعضها البعض بشكل عمودي مع وجود حدود (borders) صغيرة تفصل بينها. وفي الأخير هناك تأثير hover الذي سوف يُغيّر لون الخلفية إلى شيء أدكن.

nav ul ul {
    background: #5f6975; 
    border-radius: 0px; 
    padding: 0;
    position: absolute; 
    top: 100%;
}

nav ul ul li {
    float: none;
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
}

nav ul ul li a {
    padding: 15px 40px;
    color: #fff;
}

nav ul ul li a:hover {
    background: #4b545f;
}

نأتي الآن للخطوة الأخيرة وهي موضعة القوائم الفرعية من الدرجة الثانية. سوف ترث هذه القوائم التنسيقات الخاصة بالقائمة الفرعية من الدرجة الأولى وبذلك فكل ما سنحتاجه هو موضعة هذه القوائم باستخدام position: absolute و left: 100% نسبة إلى العنصر الأب <li> الذي يحتوي على الخاصية position: relative.

nav ul ul ul {
    position: absolute; 
    left: 100%; 
    top:0;
}

وإلى هنا نصل إلى نهاية هذا الدرس ونكون قد حصلنا على قائمة منسدلة جميلة وأنيقة.

يمكنك تصفح النتيجة النهائية من هنا.

ترجمة -وبتصرف- للمقال How To Create a Pure CSS Dropdown Menu لصاحبه Iggy.

كنت في الماضي قد قمت بإنشاء العديد من مثل هذا التأثير باستخدام الفوتوشوب، ولكن مع ظهور CSS3 وجلبها للكثير من الخصائص المدهشة فقد قررت أن أقوم بدرس حول كيفية إنشاء ذلك التأثير بمساعدة واستخدام التدرجات (gradients) والمرشحات (filters) الموجودة في CSS3.

سوف نستخدم التدرجات (gradients) والمرشحات (filters) الخاصة بلغة CSS لدمج العديد من الألوان المتداخلة لإنشاء التأثير المطلوب. إنّ دعم المتصفحات للمرشحات جيد جدًا فهو مدعوم في جميع المتصفحات الحديثة ما عدا متصفحات Internet Explorer ومتصفح Opera mini (أنقر هنا لمعلومات أكثر عن دعم المتصفحات).

كيف تقوم بإنشاء التأثير باستعمال CSS فقط

<div class="retro">
  <img src="images/retrofy-me.jpg" alt="Retro is cool!" />
</div>

حتى نقوم بإنشاء التأثير سنحتاج إلى صورة، لذلك قم بإضافة صورة باستخدام وسم `<img>`. وبما أنّ بعض تأثيرات CSS تعتمد على وجود عنصر حاوي من نوع block فسوف تكون الصورة موجودة داخل وسم `<div>` (يمكنك استخدام `<p>` بدلًا من `<div>` فكلاهما من نوع block ولكني أفضل استخدام div).

.retro {
  -webkit-box-shadow: inset 0px 0px 100px rgba(0,0,20,1);
  box-shadow: inset 0px 0px 100px rgba(0,0,20,1);
  background: -webkit-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), -webkit-linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%);
  background: linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%);
  display: table;
}

.retro img {
  -webkit-filter: sepia(20%) brightness(10%) contrast(130%);
  filter: sepia(20%) brightness(10%) contrast(130%);
  position: relative;
  z-index: -1;
}

يمكنك استعمال تنسيقات CSS الموجودة في الأعلى لإنشاء تأثير retro على أي صورة.

كيف يعمل كل شيء

نبدأ تنسيقات CSS باستعمال خاصية `box-shadow` واعطائها القيمة (inset 0px 0px 100px rgba(0,0,20,1 مما يخلق توهجًا داخليًا بلون أزرق داكن وذلك لمحاكاة الصورة باهتة الحواف. ولكن هناك مشكلة وهو أن التأثير الذي تصنعه خاصية box-shadow لن يظهر لأنه سيكون موجودًا أسفل الصورة وسوف يتمدد على العرض الكامل للصفحة وهو ما لا نريده، ولحل تلك المشكلة سوف نضيف للصورة الخصائص position: relative و z-index: -1 حتى نجعل التأثير يظهر فوقها، كما أننا سوف نعطي الخاصية display: table للعنصر الأب حتى نمنع تمدده على كامل الصفحة ويكتفي فقط بالتمدد على أبعاد الصورة.

لاحظ أننا استعملنا تدرجين؛ الأول (linear-gradient(top, rgba(255,145,0,0.2) 0%, rgba(255,230,48,0.2) 60% وسوف يعطي تدرجًا عموديًا من اللون البرتقالي إلى اللون الأصفر، وتسمح لنا قيم rgba بتقليل شفافية الألوان حتى نسمح للتدرج بالظهور وكأنه عبارة عن غشاء شفاف فوق الصورة.

أمّا بالنسبة للتدرج الثاني (linear-gradient(20deg, rgba(255,0,0,0.5) 0%, rgba(255,0,0,0) 35% فقد أضفناه للعنصر الأب (وسم div) ويتدرج من لون أحمر ذو شفافية 50% إلى نفس اللون ولكن بشفافية 0% وبزاوية 20 درجة لمحاكاة تأثير تسرب الضوء الجميل.

تعمل التأثيرات حتى الآن بشكل جيد ولكن الصورة تبدو مسطحة كثيرًا، لذلك سوف نستعمل مرشحات CSS  كالتالي: (filter: brightness(10%) contrast(130%) sepia(20% للتعديل على الصورة قليلًا حتى تبدو أفضل، فخاصية brightness ستزيد سطوع الصورة بمقدار 10%، وخاصية التباين contrast تقوم بتدكين المناطق الداكنة وتفتيح المناطق الفاتحة، أمّا خاصية sepia فتضيف للصورة درجة من اللون البني المائل للصفار وبقيمة 20% حتى نحافظ على الألوان الأصلية للصورة.

خاتمة

كما رأيت، فبدمج خاصية gradient مع خاصية filter يمكننا إنشاء تأثيرات جميلة وعصرية وتشبه بدرجة كبيرة تلك التي يمكننا إنشاؤها باستخدام برنامج الفوتوشوب.

ترجمة -وبتصرّف- للمقال Create a Trendy Retro Photo Effect Purely with CSS لصاحبه Iggy.

سنقوم اليوم بإذن الله ببناء قائمة أخرى مُطَعَّمة بتأثيرات fancy hover‏. وسأعتمد التصميم ‏المُسطح الشائع مُستخدمًا الألوان الزاهية والأيقونات الرائعة، وأُطبّق تقنيات CSS‏ المتعددة، وبذلك يُصبح هذا الدرسُ ‏مقالةً رائعةً لمصممي الويب.‏

مفهوم القائمة

قبل أن نبدأ بأي تنسيقات، سنقوم بإنشاء الهيكل الأساسي للقائمة بـ HTML‏. هناك عناصر جديدة في HTML5‎‏ مثل ‏nav‏ مُتاحة هذه الأيام، حتى أنها تعمل على إنترنت إكسبلورر بمساعدة بعض الإضافات مثل ‏ html5shiv.
‏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Flat Nav</title>

<link href="style.css" rel="stylesheet" />

<link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>

</head>
<body>

<div id="demo">
    <nav>
        <ul>
            <li>
                <a href="#">
                    <span>Home</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>About</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>Portfolio</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>Contact</span>
                </a>
            </li>
            
        </ul>
    </nav>
</div>

</body>
</html>

يبدأ الكود بتعريف ‏HTML5‎‏ كمرجعية للصفحة عن طريق <doctype html!>‏، عنوان الصفحة ‏‏title‏‏ ورابط ‏ملف CSS‏ ‏الذي سنقوم بإنشائه بعد ذلك ‏‏link>‎>. يأتي بعد ذلك ربط صفحة الويب بخط ‏ ‏Dosis‏‏ من ‏‏‏Google Webfonts‏. تبدأ ‏البُنية الرئيسة في القائمة بعنصر ‏‏nav‏، تكون داخله قائمة ‏ul‏. وكل ‏عنصر داخل ‏ul‏ يحتوي على رابط مرفقًا معه ‏عنصر ‏‎span‎‏ لإظهار تسمية الزر على يمين القائمة عند ‏مرور الماوس عليه.‏

تنسيقات CSS

nav ul {
    list-style: none; overflow: hidden; position: relative;
}

nav ul li { 
  float: left; margin: 0 20px 0 0;
}

نبدأ بعمل تنسيق ‏CSS‏ بأن نُزيل رمز النقطة من أمام كل عنصر من عناصر القائمة ‏ul‏، نجعل تلك العناصر ‏‏‏li‏ بجوار بعضها البعض. نضع تعريف التنسيق ‏overflow: hidden‏ للقائمة ‏ul‏ لتظهر تسميات ‏الأزرار متناسقة وغير متداخلة، من ثم وضع التنسيق الخاص بتسميات الأزرار ‏span‏ حتى تكون كلٌ منها ‏متمركزة في مكانها الصحيح على ‏li‏ الخاص بها ضمن القائمة ‏ul‏ الأب.

nav ul li a {
    display: block; width: 120px; height: 120px;
    background-image: url(icons.png); background-repeat: no-repeat;
}
   
nav ul li:nth-child(1) a {
    background-color: #5bb2fc;
    background-position: 28px 28px;
}

nav ul li:nth-child(2) a {
    background-color: #58ebd3;
    background-position: 28px -96px;
}

nav ul li:nth-child(3) a {
    background-color: #ffa659;
    background-position: 28px -222px;
}

nav ul li:nth-child(4) a {
    background-color: #ff7a85;
    background-position: 28px -342px;
}

كل نقطة من نقاط القائمة الأربعة يتم تنسيقها لتظهر كمربع بعد إضافة الطول والعرض لها وهو ‏‎120px‎‏، قابلة ‏للتحول من تنسيق ‏inline‏ إلى تنسيق ‏block‏ باستخدام ‏display: block;‎‏. يتم تصدير جميع الأيقونات ‏من الفوتوشوب في صورة ‏sprite‏ واحدة تحوي خلفيات الصور الأربعة في نفس الملف، لذا فإن ملف ‏‏‏icons.png‏ يُعتبر صورة خلفية لجميع نقاط القائمة باستخدام مُحدِّد ‏nav ul li‏. حيث تقوم بتحديد موقع ‏الخلفية من داخل الملف الواحد حسب تموضعها فيه.‏

يُمكنك إضافة تنسيق مُحدَّد لكل نقطة من النقاط الأربعة على حِدة باستخدام مُحدِّد ‏li :nth-child‏. حيث تستطيع ‏أن تضيف ‏classes‏ لكل عنصر لوحده من عناصر القائمة ‏li‏ حسب رقم هذا العنصر. بالضبط كما حددنا لون ‏الخلفية لكل عنصر منفردًا.‏

nav ul li a span {
    font: 50px "Dosis", sans-serif; text-transform: uppercase; 
    position: absolute; left: 580px; top: 29px;
    display: none;
}

نأتي الآن إلى ضبط موقع تسمية النص لعناصر القائمة، بتطبيق حدث التنسيق ‏on hover‏ لجميع العناصر مرة ‏واحدة، وذلك على ‏span‏ التي أضفناها لكل عنصر من عناصر القائمة. أولاً: نقوم بإضافة خصائص الخط ‏‏‏Dosis‏، وهي حجم الخط، و‏uppercase‏ (تحويل الحروف الصغيرة إلى حروف كبيرة) باستخدام خاصية ‏‏‏text-transform‏. ‏

افتراضيًا، فإن كل تسمية عنصر تتموضع في الزاوية العلوية يسارًا على بلوك عنصر القائمة، ولكننا نريدها أن تكون ‏على يمين القائمة ‏ul‏ خارج إطار العناصر. ببساطة، نضيف خاصية الموضع ‏position: absolute;‎‏ لعمل ‏ذلك. قمنا قبل ذلك بوضع الخاصية ‏position: relative;‎‏ إلى ‏nav ul‏ حتى يكون التموضع الحر مرتبطًا ‏بالقائمة ‏ul‏ (الأب)، عدا عن كونها مرتبطة بالعرض الكامل لشاشة المتصفح.‏

nav ul li a:hover span {
    display: block;
}

nav ul li:nth-child(1) a span {
    color: #5bb2fc;
}

nav ul li:nth-child(2) a span {
    color: #58ebd3;
}

nav ul li:nth-child(3) a span {
    color: #ffa659;
}

nav ul li:nth-child(4) a span {
    color: #ff7a85;
}

نرى الآن جميع تسميات العناصر ظاهرة فوق بعضها البعض في نفس الوقت، لذا سنقوم بإخفائها باستخدام الخاصية ‏‏‏display:none;‎‏ حتى لا تظهر أي من التسميات إلا حين يمر الماوس فوق عنصرها فقط، بإضافة ‏‏‏display:block;‎‏ إلى حدث التنسيق ‏on hover‏ الخاص بكل عنصر. بقي أن نُعطيَ كلَّ تسمية عنصر لونها ‏الخاص بها والمطابق للون خلفية عنصرها، هذا الأمر يتم في مُحدِّد ‏‎:nth-child‏ لكل عنصر على حدة.‏

النص الكامل لملف CSS‏، بعد أن انتهينا من الخطوات جميعها، سوف يصبح لدينا ملف CSS‏ جاهزًا كما يلي، بإمكانك نسخه من هنا:

nav ul {
    list-style: none; overflow: hidden; position: relative;
}

nav ul li {
    float: left; margin: 0 20px 0 0;
}

nav ul li a {
    display: block; width: 120px; height: 120px;
    background-image: url(icons.png); background-repeat: no-repeat;
}

nav ul li:nth-child(1) a {
    background-color: #5bb2fc;
    background-position: 28px 28px;
}

nav ul li:nth-child(2) a {
    background-color: #58ebd3;
    background-position: 28px -96px;
}

nav ul li:nth-child(3) a {
    background-color: #ffa659;
    background-position: 28px -222px;
}

nav ul li:nth-child(4) a {
    background-color: #ff7a85;
    background-position: 28px -342px;
}
        
nav ul li a span {
    font: 50px "Dosis", sans-serif; text-transform: uppercase; 
    position: absolute; left: 580px; top: 29px;
    display: none;
}

nav ul li a:hover span {
    display: block;
}
                
nav ul li:nth-child(1) a span {
    color: #5bb2fc;
}

nav ul li:nth-child(2) a span {
    color: #58ebd3;
}

nav ul li:nth-child(3) a span {
    color: #ffa659;
}

nav ul li:nth-child(4) a span {
    color: #ff7a85;
}

التصميم النهائي لقائمتنا ذات السِمة المسطحة: 

يمكن معاينة مثال حي عن الدرس، أو تصفح ملفات العمل الخاصة بالدرس.

ترجمة وبتصرف للمقال: How To Create a Trendy Flat Style Nav Menu in CSS.

شجرة مسار الصفحة (سنقوم بتسميتها لاحقًا بـالمسار) هي عبارة عن التفريعة الكاملة للصفحة بدءًا من الصفحة ‏الرئيسة للموقع، ثم التصنيف الرئيس للصفحة وأي تصنيفات فرعية لها، ومن ثم اسم الصفحة الحالية، مع وجود ‏روابط للبندين الأولين في الشجرة دون الأخير لأنه مفتوح أمامك حاليًا في المسار.‏
هناك تقنيات وخصائص في الإصدارات القديمة لـCSS‏ لا تزال تستخدم بكثرة في الوقت الحالي بالرغم من توفر ‏الإصدارات الحديثة ‏CSS3‎‏. سنقوم في هذا الدرس بإنشاء مسار ذي تصميم مُسطح، بدون الحاجة إلى وضع خلفية ‏صورة له.‏

ستكون روابط المسار مُنسَّقَة بأشكال الشارات لدعم فكرة التنقل الهرمي في المحتوى. وقد اعتدنا على وضع صورة ‏خلفية من نوع ‏PNG‏ للمسار مشابهة لأشكال الشارات، لكننا اليوم بفضل تقنيات الحدّ الذكي ‏clever border‏ سنقوم ‏بإنشاء كامل الخلفية باستخدام CSS‏ فقط.‏

يمكم معاينة مثال حي لما سيكون عليه المثال بعد نهاية الدرس.

سنبدأ مباشرة بعمل روابط التنقل في المسار على هيئة ‏‎ul‎‏. سيظهر كل رابط في المسار كـ ‏li‏ ضمن نقطة ‏عنصر في المسار:

‏<div id="crumbs">
    <ul>
        <li><a href="#">Breadcrumb</a></li>
    </ul>
</div>

نستهلّ كتابة كود CSS‏ بإنشاء كل نقطة عنصر كمربع أزرق اللون. ونقوم بتوسيط النص في المسافة المخصصة ‏للرابط متساوية على الجانبين. نستخدم ‏position: relative‎‏ لضبط خاصية التموضع للعناصر بحيث تكون ‏مرتبطة بـ ‏ul‏ الأب:

#crumbs ul li a {
    display: block;
    float: left;
    height: 50px;
    background: #3498db;
    text-align: center;
    padding: 30px 40px 0 40px;
    position: relative;
    margin: 0 10px 0 0; 

    font-size: 20px;
    text-decoration: none;
    color: #fff;
}

نقوم بإعادة تشكيل تأثيرات شكل الشارة في CSS‏ كي تصبح مثل خلفية صورة. استخدم مُحدِّد ‏‎:after‎‏ لإنشاء ‏عنصر إضافي يكون تنسيقه خاصًا به دون غيره. تشكّل المُثلث من خلال تطبيق العديد من حدود الـCSS، فكما ترى ‏في الصورة السابقة أن المثلث يمكن إنشاؤه بتطبيق الحدّ العلوي والسفلي بحيث تتقاطع بهذا الشكل. لعلك لاحظت ‏وجود المساحات الحمراء، تركتُها لإيضاح الفكرة فقط، حيث سنقوم فيما بعد بتحويل اللون إلى شفاف حتى يظهر ‏المثلث الأزرق جليًا. سنقوم باستخدام تأثيرات الحدود هذه في مكان آخر من خلال التموضع الحر.‏

#crumbs ul li a:after {
    content: "";  
    border-top: 40px solid red;
    border-bottom: 40px solid red;
    border-left: 40px solid blue;
    position: absolute; right: -40px; top: 0;
}

سينتج لدينا المثلث المطلوب بعد تطبيقنا لتأثيرات الحدود مع الألوان المُحَدَّدَة لكل حدّ، وبهذا يتكون لدينا شكل الشارة ‏لكل رابط نضعه ضمن المسار:‎ ‎

border-top: 40px solid transparent‏;‏
border-bottom: 40px solid transparent‏;‏
border-left: 40px solid #3498db‏;‏

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

#crumbs ul li a:before { 
    content: ""; 
    border-top: 40px solid transparent;     
    border-bottom: 40px solid transparent; 
    border-left: 40px solid #d4f2ff; 
    position: absolute; left: 0; top: 0; 
}

نلاحظ أن المثلث المضاف حديثًا يؤثر على مظهر النص الخاص بوصف الرابط الذي قبله، ولكن يمكننا تدارك الأمر ‏بتعديل بسيط في الـ‎padding‎‏:

padding: 30px 40px 0 80px‏;‏

كلما أضفت روابط جديدة للمسار، فإنه يزداد حجمه طولاً. وكل رابط منها مُنسق بشكل الشارة، بفضل تأثيرات حد ‏المثلث في الـCSS‏ واللمسة الجمالية للـ‏right margin‏.‏

<div id="crumbs"> 
    <ul> 
        <li><a href="#1">One</a></li> 
        <li><a href="#2">Two</a></li> 
        <li><a href="#3">Three</a></li> 
        <li><a href="#4">Four</a></li> 
        <li><a href="#5">Five</a></li> 
    </ul> 
</div>

يمكن تنسيق قائمة المسار بشيء أجمل، قم بإزالة تأثيرات المثلث عن العنصر الأول والأخير من خلال المُحدِّد ‏‏‏‎:first-child ‎‏ و ‏‎:last-child‏ باستخدام ‏‎border-radius‏، تلاحظ تحول زوايا العنصرين الأول والأخير ‏إلى زوايا مستديرة.‏

#crumbs ul li:first-child a {
    border-top-left-radius: 10px; border-bottom-left-radius: 10px;
}
#crumbs ul li:first-child a:before {
    display: none; 
}

#crumbs ul li:last-child a {
    padding-right: 80px;
    border-top-right-radius: 10px; border-bottom-right-radius: 10px;
}
#crumbs ul li:last-child a:after {
    display: none; 
}

كل ما تبقى علينا هو تطبيق تأثيرات الـ‏hover‏ على الروابط. لا تنس تغيير لون الحد اليسار ‏border-left-‎color‏ في حدث التنسيق ‏hover‏ الخاص بتأثيرات المثلث، حتى تضمن أن تتغير الألوان مع مرور الماوس على ‏روابط المسار.‏

‏#‏crumbs ul li a:hover‏ ‏{
background: #fa5ba5‎‏;‏
‏}‏

‏#‏crumbs ul li a:hover:after‏ {
    border-left-color: #fa5ba5‎‏;‏
‏}‏

يمكن معاينة المثال من هنا، أو تحميل الشفرة المصدرية لكامل المثال من على حساب أكاديمية حسوب على github.

ترجمة -وبتصرف- للمقال How To Create Flat Style Breadcrumb Links with CSS لصاحبه Iggy.