لربما لاحظت مُؤخّرا أنّ CSS في تطور مستمر، وإلى الأفضل بالطبع. فمن جهة لدينا العديد من المُميّزات الجديدة (مثل القواعد الجديدة @rules وأشباه الأصناف المطورة) ونظم بناء الصّفحات وتقسيمها (مثل flexbox و Grid system). ومن جهة أخرى لدينا بعض الأدوات التي تُتيح لنا التّلاعب بالأشكال والصور مباشرة من المتصفح، وأنا أحب هذه الأمور، ومتأكد من أنّك تُحبّها أيضًا، وفي هذه المقالة سنعرض بعضا منها.

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

وحدات القياس النّسبية

بحكم أنّنا في 2015 فلابد وأنّك قد تعاملت من قبل مع الوحدات النّسبية em والنّسب المئوية. ولذا فأنا واثق من أنّك وقعت في المُشكلة الشّائعة والتي تكمن في استخدام هذه الوحدات ضمن الوراثة. سأشرح الأمر بمثال بسيط. من الشّائع مُؤخّرًا أن يتمّ استعمال حجم خط ثابت في الصّفحة، ومن بعدها استعمال وحدات القياس النّسبية لتحديد حجم الخطّ لبقية العناصر في الصفحة.
في CSS سيبدو الأمر كالتالي:

html { font-size: 10px; } 
 p { font-size: 1.4em; }

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

The cat sat on the <span>mat</span>.

إذا أردت أن يكون حجم خط span أصغر مثلا، وليكن مثلًا 1.2em، فما الذي ستفعله؟ تحضر الآلة الحاسبة وتحسب نتيجة 1.2/1.4؟ لتحصل على شيء كهذا:

p span { font-size: 0.85714em; }

مشكلة الوراثة ليست محدودة في em فحسب. فإذا كُنت تستخدم النّسب المئوية فالقيمة عادة منسوبة إلى العنصر الحاوي (الأب) وليس إلى حجم الصّفحة. لنضرب مثالًا بسيطًا، ولنقل أنك تملك عنصرًا بارتفاع يُقدّر بـ75% من الصفحة، وهذا العنصر يملك بداخله عنصرًا آخر، ونحن نريد من العنصر الابن أن يكون بارتفاع 40% من الصفحة، في هذه الحالة عليك أن تعطيه قيمة 53.33333%.

الأمر ليس مثالّيًّا إطلاقًا.

القيم المنسوبة إلى أساس ثابت

كالعادة، لكل مشكلة حل. في حالتنا تم تقديم وحدة جديدة تُدعى rem. هذه الوحدة هي وحدة نسبية، ولكنها منسوبة إلى قيمة ثابتة وليس إلى حاويها. هذه القيمة هي حجم الخط في العنصر الأساسي في الصفحة (في حالة HTML فهذا العنصر هو دوما وسم html ). في مثالنا السابق، استعملنا 10px كحجم الخط في الصفحة، سنرى كيف يمكن لـrem أن تساعدنا:

p { font-size: 1.4rem; }
p span { font-size: 1.2rem; }

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

هذه الخاصّيّة مدعومة بشكل جيّد من المُتصفّحات. كل المُتصفّحات المُتطوّرة إلى جانب IE9 تقوم بدعمها.
لكن هناك مشاكل بسيطة في الدعم، فمُتصفّح IE لا يدعمها في حال ما إذا استخدمتها داخل الخاصّيّة المُختصرة font ويتم تجاهل التّصريح كاملًا. تستطيع قراءة المشاكل المعروفة هنا في خانة Known Issues في الأسفل Can I use rem.

وحدات القياس المنسوبة إلى النّافذة (Viewport)

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

الوحدات الرّئيسية هي vh (التي ترمز إلى viewport height) و vw (التي ترمز إلى viewport width) وهي منسوبة إلى ارتفاع وعرض النّافذة. الوحدتان منسوبتان إلى أبعاد النّافذة حيث أن قيمة واحدة تقدر بـ 1 بالمئة من أبعاد الشّاشة. أيّ `1vw = 1%’. هذا مثال بسيط لنشرح به الأمر:

div { height: 50vh; }

في هذا المثال، ارتفاع العنصر سيكون بالتّحديد نصف ارتفاع النافذة، حيث أنّه -كما أسلفنا- 1vh = 1% أيّ أن 50vh = 50%من ارتفاع النّافذة.

قيمة الوحدة -كما سبقت الإشارة إليه- منسوبة إلى أبعاد النّافذة، فإذا تغيّر حجم النافذة ستتغير معه قيمة الوحدة. أُنشئت هذه الوحدة لتحل مشكلة النّسب المئوية في الوراثة، حيث أنّ10vw ستبقى دومًا منسوبة إلى حجم النّافذة مهما كان حجم الحاوي.

هناك أيضا وحدة vmin والتي تُساوي أصغر قيمة من أيّ من vh أو vw، إلى جانب وحدة vmax التي تقوم بالعكس أيّ أكبر قيمة من أيّ منهما.

دعم المتصفحات جيد، فكل المتصفحات إلى جانب IE9 تقوم بدعم كل من vh وvw. دعم وحدة vmin جيّد أيضًا، على عكس وحدة vmax فهي غير مدعومة في كل إصدارات IE.
هناك بعض المشاكل في chrome في الإصدارات التي سبقت 34 (عند استعمال الوحدة داخل border وبعض التصريحات الأخرى) Can I use Viewport units.

القيم المحسوبة

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

div {
  margin:  20px;
  width: 33%; 
}

إن كنت تستخدم قيم padding و border فحسب في تقسيم عناصرك في الصّفحة، فتستطيع تخطّي المُشكلة السّابقة عبر استخدام box-sizing: border-box ولكن هذه الخاصّيّة لن تُساعدك في حال كنت تستخدم الحواشي margins. لذا تم توفير دالة تُدعى بـ calc(). هذه الدّالة تسمح لك بالقيام بعمليات حسابية على مختلف الوحدات. شاهد هذا المثال:

div {
  margin:  20px;
  width: calc(33% - 40px);
}

تستطيع استعمال الخاصّيّة في أيّ مكان تريد، ولو داخل نفسها. انظر للمثال في الأسفل:

width: calc(calc(50% - 4em) + 4vmin);

هذه الخاصّيّة مدعومة بشكل جيد، كل الإصدارات الحديثة من المُتصفّحات إلى جانب الإصدار 9 من IE تدعمها (هناك بعض الاستثناءات التي يمكنك قراءتها في خانة known issues على Can I use calc()).

تحميل مجموعة مُعيّنة من الأحرف

الأداء هو عامل رئيسي في بقاء الزّائر في موقعك من عدمه. وسرعة تحميل الموقع هي أحد هذه العوامل. والآن مع انتشار الهواتف الذّكيّة وشبكات الإنترنت اللاسلكية (شبكات 3G التي من مشاكلها التّدفّق البطيء) تدفع المطور للتّحسين من سرعة الموقع أكثر وأكثر. القاعدة الرئيسية في تقليل وقت التحميل هي التقليل من حجم وعدد الملفّات الخارجية، والخاصيّة التّالية تقوم بهذا الأمر.

الخاصية الجديدة تُدعى unicode-range وهي تأخذ مجالًا مُعيّنًا من unicode كقيمة (unicode هو إعطاء كل محرف قيمة له على مجال ما، مثلا الأحرف العربية تقع في المجال 0600—06FF وتقدر بحوالي 255 رمز، وكل ترميز يخصّ محرفًا).

هذه الخاصّيّة تُضاف إلى تصريح @font-face. وعندما يقوم المُتصفّح بجلب الخط، سيقوم بجلب الحُرُوف المُحدّدة فحسب، ويتم التّخلّص من الحروف غير المرغوب فيها. الأمر مُفيدٌ جدًّا في الخطوط الكبيرة جدًّا مثل Helvetica الذي يُقدّر حجمه بـ500kbs ويحتوي أغلب لغات العالم.

في هذا المثال سنقوم بسحب الحروف “عـ ، ـلـ، ـم” (يجب التّنويه إلى أنّ حرف العين المُنفصل ‘ع’ يملك رمزًا مُستقلّا عن حرف العين في أول الكلمة ‘عـ’ والذي يملك رمزًا مُستقلًّا عن نفس الحرف في نهاية الكلمة أو في وسطها، وهذا الأمر ينطبق على كلّ الحروف. تستطيع معرفة ترميز كل حرف من هنا).

@font-face {
  font-family: foo;
  src: url('helvetica.ttf');
  unicode-range: U+FECB,U+FEE0,U+FEE2;
}

في هذا المثال سنقوم بسحب الحروف العربية فقط عبر مجال كامل:

@font-face {
  font-family: foo;
  src: url('helvetica.ttf');
  unicode-range: U+0600-06FF;
}

سيُقلّل هذا من حجم الخط من 500kb إلى حوالي 30kb وهذا تحسن مُمتاز جدًّا.

دعم المُتصفّحات ليس جيّدًا بما فيه الكفاية حاليًّا، الخاصية مدعومة من طرف chrome و من طرف Safari ومتصفح فيَرفُكس سيدعم الخاصية ابتدءًا من الإصدار 36، كما أنّها مدعومة من طرف IE9+ لكن يتم تجاهلها إذا استُخدمت u على شكل صغير (lowercase).

Can I use Font unicode-range subsetting

أشباه الأصناف الجديدة (pseudo-classes)

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

شبه صنف التّجاهل (negation pseudo-class)

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

لنقل أن لديك مجموعة من العناصر، وتريد أنّ تغيّر لون كل عنصر ذي مرتبة زوجية ما عدى العنصر الأخير، ستقوم بشيء كهذا:

li { color: white;}
li:nth-child(even) { color: red;}
li:last-child { color: white;}

لكن عبر مُحدّد التّجاهل تستطيع القيام بهذا عبر الشكل التالي

li { color: white;}
li:nth-child(even):not(:last-child) { color: red;}

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

شبه صنف المُطابقة (matches-any pseudo-class)

شبه صنف matches() يقبل مُحدِّدًا (selector)، أو مُحدِّدًا مُركّبًا، أو مجموعة من المُحدّدَات. لكن ما الذي يفعله؟

إنّه مفيد للقيام بتأثير ما على مجموعة من العناصر. كمثال، تخيل أنّه لديك مجموعة من وسوم الفقرات <p> في أماكن مختلفة من الصّفحة، وأنت تريد التّأثير على مجموعة مُعيّنة منها، قد تقوم بالأمر التّالي:

.home header p,
.home footer p,
.home aside p {
  color: #F00;
}

لكن مع matches() تستطيع اختصار الأمر السّابق عبر إيجاد الأمور المشتركة في ما سبق. في مثالنا كل سطر يبدأ بـ .home وينتهي بـ p، لذا نستطيع استخدام matches() لتحديد كل العناصر الموجودة بينهما. لم تفهم كيف سنقوم بذلك؟ لابأس، هذا ما سنفعله:

.home :matches(header,footer,aside) p { color: #F00; }

شبه الصنف هذا هو جزء من CSS4 لذا دعمه ليس قويًّا كالبقية.

حاليًّا تستطيع استخدامه مع chrome و safari بشكل عادي وفي IE9+ تحت الاسم matchesSelector وفي فيَرفُكس أيضًا، من الأفضل أخط الحيطة واستخدامه مع -moz- و -webkit- قبل اسمه.

Can I use matches() DOM method

إذًا، ما رأيك في ما سبق؟

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

الميزات الجديدة الأخرى مثل المُرشِّحات (filters) الخاصّة بالصّور قد تكون أجمل ولكن استخدامها محدُود على عكس الميزات التي استعرضناها.

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

ترجمة -وبتصرّف- للمقال Learning to Love the Boring Bits of CSS لصاحبه Peter Gasston

تُعتبر خاصيّة الطوفان float property من مصادر القوّة لأي مطوّر أو مُصمّم يستخدم تِقنيّات HTML وCSS. ويُؤدّي عدم الفهم الصحيح لآلية عمل هذه الخاصيّة إلى بعض التِباس في كيفية التعامُل معها.

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

عرفنا الطوفان سابقًا من عالم الطباعة والتصميم كما في المجلات، حيثُ الصورة على أحد الجهتين اليمين أو اليسار ويتوضع نَصّ بجانبها بشكل مُتناسق وجذّاب، وفي عالم الويب ومع تقنيّات HTML/CSS، يلتف النصّ حول الصورة باستخدام خاصيّة الطوفان float property كما هو الأمر في تصاميم المجلات. استخدام الصُور مع خاصيّة الطوفان هو أحد الأمور الّتي يُمكنك استخدامها مع هذه الخاصيّة، ولكن في الحقيقة يُمكن استخدام هذه الخاصيّة أيضًا مع أي عنصر من عناصر HTML، حتّى أنّه بالإمكان استخدامها في تقسيم الصفحة page layout.

التعريف

تُعرّف رابطة الشبكة العالمية W3C خاصيّة الطوفان بالشكل التالي:

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

يُمكن تحديد أربعة قيم لخاصيّة الطوفان: left, right, inherit, none، حيثُ كل قيمة تُعبّر عن دلالتها فمثلًا، تحديد قيمة الطوفان إلى اليسار لعنصر ما (float: left) سينقل العنصر إلى أقصى حافة العنصر الأب الخاص به من جهة اليسار. كما هو الحال عندما تكون القيمة المُحددة للعنصر هي float: right، حيثُ أنّ العنصر سينتقل إلى أقصى اليمين لحواف العنصر الأب الخاص به، وتجعل القيمة inherit العنصر يرثُ قيمة الطوفان من العنصر الأب الخاص به، والقيمة none هي القيمة الافتراضيّة والتي تجعل من العنصر لا يستخدم الطوفان أبدًا.

img { 
  float: right;
  margin: 10px;
}

آلية عمل الطوفان

يعمل الطوفان بطريقة غير مُعقدة وليس كما يعتقد البعض، لتوضيح ذلك يجب العودة إلى أساسيات HTML لمعرفة حقيقة ما يجري قبل الخوض في التفاصيل. في عالم الويب، تتقيّد تقنية HTML بجملة قواعد، ما يتقاطع مع خاصيّة الطوفان هو قاعدة التدفّق الطبيعيّ normal flow، حيثُ تصطف العناصر مِن نوع block فوق بعضها البعض، كما في العناصر div، p، h1 من الأعلى إلى الأسفل. تتوضع العناصر المُطوفة في بادئ الأمر حسب التدفّق الطبيعيّ وتبعًا إلى تسلسلها في مُستند HTML، ومن ثُمّ تُسحب العناصر المُطوفة من التدفّق الطبيعيّ، وتُنقل إلى أقصى يمين أو يسار (على حسب القيمة المُحددة) العنصر الأب الخاصّ بالعنصر المُطوف. بمعنى آخر، تغيّر العناصر المُطوفة من طريقة عملها وتُخالف التدفّق الطبيعيّ في اصطفاف العناصر بعضها فوق بعض إلى اصطفاف العناصر بجانب بعضها البعض، وذلك في حال توفر مساحة كافية للعناصر للتتوضع بجانب بعضها البعض. فَهم هذا التسلسل في عرض العناصر هو أهمّ ما في الطوفان، وهو ما يجعل البعض مرتبكًا في تطبيق هذه الخاصيّة وحلّ مشاكلها.

في المثال التالي يوجد ثلاثة صناديق مُحددة الطول والارتفاع، ومن دون تطبيق خاصيّة الطوفان وتُعرض وفقًا لتسلسلها في مُستند HTML.

<div class="block pink"></div>
<div class="block blue"></div>
<div class="block green"></div>

.block { 
  width: 200px;
  height: 200px;
}

من المُلاحظ في المثال السابق كيف أنّ العناصر تصطف فوق بعضها البعض، ويُمثل ذلك مفهوم "التدفق الطبيعيّ". في المثال التالي نفس الصناديق ولكنها مُطوّفة باستخدام خاصيّة الطوفان float: left.

.block { 
  float: left;
  width: 200px;
  height: 200px;
}

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

تحرير الطوفان

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

<!-- HTML -->
<div class="block pink float"></div>
<div class="block blue float"></div>
<div class="block green"></div>
<div class="block orange"></div>

/* CSS */
.block {
  width: 200px;
  height: 200px;
}
.float { float: left; }
.pink { background: #ee3e64; }
.blue { background: #44accf; }
.green { background: #b7d84b; }
.orange { background: #E2A741; }

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

تملك الخاصيّة clear خمس قيم هي: يسار left، يمين right، الطرفين both، مَوروث inherit ولا شيء none. تجعل القيمة left العنصر أسفل أي عنصر مُطوف إلى جهة اليسار، وتجعل القيمة right العنصر أسفل أي عنصر مُطوف إلى جهة اليمين، واستخدام القيمة both تجعل من العنصر أسفل أي عنصر مُطوف على الجهتين اليُمنة واليسرى، أما القيمة inherit فتجعل من العنصر يرث قيمة العنصر الأب للخاصيّة clear. في المثال التالي تم استخدام الخاصيّة clear بالقيمة left مع الصندوق الأخضر.

<!-- HTML -->
<div class="block pink float"></div>
<div class="block blue float"></div>
<div class="block green clear"></div>
<div class="block orange"></div>

/* CSS */
.block {
  width: 200px;
  height: 200px;
}
.float { float: left; }
.clear { clear: left; }
.pink { background: #ee3e64; }
.blue { background: #44accf; }
.green { background: #b7d84b; }
.orange { background: #E2A741; }

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

استخدام الطوفان لتقسيم الصفحات

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

#container {
width: 960px;
margin: 0 auto;
}
#content {
float: left;
width: 660px;
background: #fff;
}
#navigation {
float: right;
width: 300px;
background: #eee;
}
#footer {
clear: both;
background: #aaa;
padding: 10px;
}

تحليل ملف التنسيق السابق يُظهر أنّ الحاوية الرئيسة والتي تُدعى container تُقيّد عناصر الصفحة المُطوفة في موضعها الذي يجب أن تكون عليه، ولو لم يكن لدينا هذه الحاوية لكانت العناصر المُطوفة مُلتصقةً على حواف نافذة المُتصفّح، وأما العناصر المُطوفة داخل الحاوية فهي content و navigation. يُمكن الحصول على تقسيمٍ ذو عمودان وذلك بأنّ نُطوّف المُحتوى content إلى جهة اليسار، وشريط التنقّل الجانبي navigation إلى جهة اليمين، ولكلٍ منهما قيمة عرض مُحددة بـ 660px للمُحتوى و300px لشريط التنقّل الجانبي، وبذلك سيستحوذ هذان العنصران عرض الحاوية بالكامل (960px). أخيرًا تم تحديد الخاصيّة clear على ذيل الصفحة footer، والتي من شأنها أنّ تُعيد العناصر التي تلي أي عناصر مُطوفة إلى التدفّق الطبيعيّ، في هذه الحالة حُددت القيمة both لذيل الصفحة footer، لجعله يصطفُ أسفل المحتوى وشريط التنقّل الجانبي.

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

الطوفان أولًا

حتى الآن جميع الأمثلة السابقة كانت واضحة وبعيدةً عن المشاكل، حيثُ هناك حالات دقيقة يجبُ الإشارة إليها عند استخدام خاصيّة الطوفان. واحدةٌ من أهمّ هذه الحالات هي غير مُرتبطة بشكل مُباشر مع تقنيّة CSS بل مع تقنيّة HTML نفسها، حيثُ يختلف توضع العنصر المُطوف عن ما هو مُتوقع له أنّ يكون فيه، كما في المثال التالي حيثُ لدينا صندوق صغير نوعًا ما وبداخله صورة مُطوفة إلى جهة اليمين وبجانبها نصٌّ، ويملك العنصر الأب، وهو الحاوية، مساحة عرض مُحدودة (280px) ليُحيط بالعناصر المُطوفة بداخله.

#container {
width: 280px;
margin: 0 auto;
padding: 10px;
background: #aaa;
border: 1px solid #999;
}
img {
float: right;
}

<div id="container">
  <img src="image.gif" />
  <p>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p>
</div>

حتى الآن لا يوجد ما هو غريب في المثال السابق، ولكن ماذا لو كان ترتيب العناصر في صفحة HTML مُختلفٌ بعض الشيء، حيث الصورة بعد النَصّ

<div id="container">
  <p>...</p>
  <img src="image.gif" />
</div>

النتيجة ليست مرضية أبدًا، حيث انتقلت الصورة من أعلى الزاوية اليُمنى إلى أسفل النصّ، ليس هذا فقط بل أصبحت الصورة خارج الحاوية الخاصّة بها. إذا ما المُشكلة؟ في الحقيقة سبب المُشكلة يحتاج إلى شرحٍ والذي سنتطرّق إليه لاحقًا، ولكن الجدير بالذكر الآن أنّه من المُمكن تطبيق قاعدة "التطويف أولًا"، أيّ أنّ العناصر المُطوفة تأتي قبل العناصر غير المُطوفة في مُستند HTML، قد لا تعطي هذه القاعدة النتيجة المطلوبة دائمًا ولكن من الجيد تذكرها. أما سبب ظهور الصورة خارج حدود الحاوية الخاصّة بها فهو يعود إلى ما يُسمى بالانْطِواء collapsing.

الانْطِواء Collapsing

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

يُوضّح المثال التالي حاوية بداخلها صندوقين

<!-- HTML -->
<div class="container"> 
<div class="block pink"></div>
<div class="block blue"></div>
</div>

/* CSS */
.container {
   background: rgb(168, 207, 166);
   width: 600px;
   margin: auto;
}
.block {
  width: 200px;
  height: 200px;
  margin-left: 64px;
}

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

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

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

<div id="container">
  <p>...</p>
  <img src="image.gif" />
  <div style="clear: right;"></div>
</div>

في المثال التالي لدينا عنصر أب يحتوي على ثلاثة صور مُطوفة، من المُلاحظ كيف أن الصور الثالثة خارج الحاوية.

<div id="container">
  <img src="image.gif" />
  <img src="image.gif" />
  <img src="image.gif" />
</div>

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

#container {
  overflow: hidden;
  width: 260px;
  margin: 0 auto;
  padding: 10px 0 10px 10px;
  background: #aaa;
  border: 1px solid #999;
}

يُوضح المثال التالي اختفاء المحتوى من الظهور عند استخدام خاصيّة overflow.

يوجد طريقة أُخرى لحل مُشكلة الانطواء والّتي تعطي نتائج جيّدة كما في الحلول السابقة، وهي استخدام شبه العناصر pseudo-elements المُسمى "بعد" after.

#container:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

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

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

خاتمة

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

ترجمة -وبتصرّف- للمقال: CSS Floats 101 لصاحبه Noah Stokes

سنتحدّث في هذه المقالة عن جزءٍ مهمٍّ في CSS3، والذي يعمل بشكلٍ مُنسجمٍ مع HTML5 وبالتحديد مع النماذج (forms). يَشترط هذا المقال معرفة مُسبقة بلغة HTML وCSS ومبادئ JavaScript، لن يكون الموضوع صعبًا وسنتناوله بشكلٍ مُبسط.

نبذة عن الأصناف الزائفة

لكي لا يلتبس عليك الأمر أودُ الإشارة إلى أنّ كلمة pseudo (الّتي تعني "زائف") تُلفظ "سودو" وذلك لكي تَستطيعَ تمييزها في حال سماعك لها في شرح ما.

يُشير الصّنف الزائف إلى عنصر (element) موجود في البناء الهيكلي لمُستند HTML ولكن لا يُمكن الوصول إليه مباشرةً عبر خواص (attributes) محددة سابقًا، فمثلًا: يستهدف الصنف الزائف ‎:first-child العنصر الأول الذي يلي العنصر الأب، وقد يكون العنصر الأول <h1> أو<p>، لذلك لا تستطيع استهدافه بشكل مباشر ولكن المتصفّح يَعرف طريقه إليه.

قدّم الإصدار 2.1 من CSS عددًا قليلًا من الأصناف الزّائفة، من بينها أوضاع الوصلات (link states)، وأيضًا تلك التي تُعبر عن أفعال المستخدم مثل ‎:active و‎:hover؛ أمّا في الإصدار الثالث فقد ازداد عددها، وتوفّر منها ما هو مُرتبط بهيكل مُستند HTML مثل ‎:nth-of-type و‎:nth-child ، وكذلك ما هو مُرتبط مع الواجهة المرئيّة مثل ‎:checked و‎:enabled، ومنها أيضًا ما يتعلّق بتدقيق النّماذج (form validation)، وهي موضوع مقالنا هذا.

تدقيق صلاحية النموذج بدون استخدام JavaScript

قدّمت لنا HTML5 إمكانيّة تدقيق النّماذج ضمن المتصفّح (خلافًا للتّدقيق على الخادوم) بدون الاستعانة بلغة JavaScript، عندما تُحاول إرسال النموذج، سيُدقّق المتصفح كافة الحقول ويُظهر رسالة خطأ عند تعبئتها بشكل غير صحيح، هذا التصرّف تلقائيّ من المتصفّح إذا كان يدعم ذلك، وقد تختلف رسائل الخطأ هذه من متصفح إلى آخر ومن نظام تشغيل إلى آخر، وتعديلها ليس سهلًا نسبيًا، ولكن بإمكانك تغيير طريقة ظهور رسائل الخطأ على العناصر نفسها باستخدام الأصناف الزّائفة والتي تُصنّف ضمن وحدة واجهة المستخدم الأساسية في CSS3‏ (‏CSS Basic User Interface Module) وفق مُواصفات W3C، تَجد في الصور التّالية كيف يَعرض كل متصفح تنسيقًا مُختلفًا عن الآخر.

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

العناصر المطلوبة والاختيارية

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

<input type="text" required>

من ناحية المظهر، استخدم الصّنف الزائف ‎:required والذي يَستهدف العنصر الذي يَملك الخاصّة required، على سبيل المثال لِوضع علامة النجمة (*) بجانب عنوان الحقل، والتي عادةً ما تُستخدم لتُشير إلى أنّ هذا الجزء من النموذج مطلوب وليس اختياريًّا اكتب التالي:

input:required + label::after { content: "*"; }

تطبيق التنسيق السابق يَعتمد على كيفيّة بناء مُستند HTML فالمثال السابق يخص التّالي:

<input type="text" required id="foo">
<label for="foo">Foo</label>

يُستهدف الحقل الاختياري بالصّنف الزّائف ‎:optional وبُطبق تأثيره على على كل عنصر لا يملك الخاصة required، مثلًا لجعلٍ حقل اختياري ذا حدود فاتحة نُطبق التنسيق التالي:

input:optional { border-color: silver; }

العناصر السليمة وغير السليمة

لتدقيق النماذج أشكال أخرى بجانب required وoptional تُمكنك من استخدام مطابقة الأنماط (pattern matching)، فمثلًا لِتدقيق عنوان البريد الإلكتروني:

<input type="email">

عندما يقوم المُستخدم بإرسال مُدخلات لا تُطابق نمطًا مُحددًا، يُعتبر المُدخل غير سليم، ولِتَنسيق عناصر النموذج السليمة وغير السليمة، يُستخدم الصّنفان الزائفان :valid و:invalid بالتّرتيب، وتُرسم إشارة تبعًا لسلامة المُدخل كما يلي:

input:invalid + label::after { content: ' ⨉'; }
input:valid + label::after { content: ' ✓'; }

لاحظ أنّ هذا التنسيق يُطبقُ عند تحميل الصفحة لذلك يجب استخدام JavaScript لتطبيق التأثيرات عند إرسال النموذج، وذلك بإضافة صنف (class) إليه، في مثالنا سوف نضيف الصنف submitted:

document.forms[0].addEventListener('submit', function(e) {
  e.currentTarget.classList.add('submitted');
});

قد يَختلف النّص البرمجيّ الذي ستكتبه، ولكن كلّ ما عليك فعله هو تنسيق الصنف كما في التالي:

.submitted input:invalid + label::after { content: ' ⨉'; }

مجالات الأرقام

تسمح بعض أنواع الحقول مثل number بتحديد مجال من القيم باستخدام الخاصيات min وmax كما في التّالي:

<input type="number" max="10" min="1">

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

<input type="number" max="10" min="1" value="11">

يُستخدم عندها الصنف الزائف ‎:out-of-range وتنسيقه:

input[type='number']:out-of-range { border-color: red; }

بعكس ‎:out-of-range لدينا ‎:in-range وتنسيقه:

input[type='number']:in-range { border-color: green; }

القراءة والكتابة

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

<textarea readonly>Lorem ipsum</textarea>

لتنسيق العناصر التي تحمل الخاصّة readonly يُستخدم الصّنف الزّائف ‎:read-only وبإمكانك أيضًا إضافة الخاصة user-select لِتمنع المستخدم من تحديد النص.

textarea:read-only { user-select: none; }

ويُستخدم الصّنف الزّائف ‎:read-write للعناصر الأُخرى المسموح بتعديلها ويُنسق بالشكل التّالي:

textarea:read-write { user-select: text; }

لاحظ أنّه قد تمّ تنسيق الحواف للتمييز، حيث بشكل افتراضيّ لا يُوجد فرق في التنسيق بين الصّنفين الزّائفين ‎:read-only و‎:read-write

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

يُوضّح الجدول التّالي دعم المُتصفحات لِتدقيق النموذج، تجد آخر تحديث للجدول هنا، حيث يُلاحظ أنّ أغلب المتصفحات في آخر إصداراتها تدعم هذه الخاصة.

أما الجدول التّالي فيُوضح دعم المتصفحات للأصناف الزّائفة، بالنسبة للدّعم الجزئي (partial support) لأشباه الأصناف، فيعني أنّه عند استخدامها يجب إضافة البادئة moz لفيرفُكس وms لـِIE وwebkit لباقي المُتصفحات، تجد آخر تحديث للجدول هنا

‏HTML و CSS لغتان في تطوّر مُستمر وذلك من شأنه أنّ يُقلّل من اعتمادنا على JavaScript، مما يُقلّل حجم ملف .js (على حِساب ملف .css) المُرسل للمستخدم ومنه إلى سرعة نسبيّة في التصفح وتجربة استخدام أفضل، أرجو أنّ أكون قد وفقت في الشرح وقدّمت الفائدة المرجوّة من هذه المقالة، أنصحكَ بالتطبيق العمليّ لتركيز المعلومة، ولا تنسَ مشاركة المقالة.

ترجمة -وبتصرّف- للمقال: CSS3 Pseudo-Classes and HTML5 Forms‏ لصاحبه Peter Gasston‏.

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

المُسوّي (Equalizer)

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

لتنسيق هذه الصناديق بشكل مُتساوي، كل ما عليك فعله هو إضافة خاصيّة المعلومات data-equalizer إلى العنصر الأب الخاص بهذه الصناديق، وخاصيّة المعلومات data-equalizer-watch لكل عُنصرٍ تُريد تسويته على نفس الارتفاع.

    <div class="row" data-equalizer>
      <div class="small-12 medium-4 columns">
        <div class="panel" data-equalizer-watch>
          <h3>...</h3>
          <p>...</p>
        </div>
      </div>

      <div class="small-12 medium-4 columns">
        <div class="panel" data-equalizer-watch>
          <h3>...</h3>
          <p>...</p>
        </div>
      </div>

      <div class="small-12 medium-4 columns">
        <div class="panel" data-equalizer-watch>
          <h3>...</h3>
          <p>...</p>
        </div>
      </div>
    </div>

    <div class="row" data-equalizer>
      <div class="large-4 columns">
        <ul class="pricing-table" data-equalizer-watch>
          ...
        </ul>
      </div>
      <div class="large-4 columns">
        <ul class="pricing-table" data-equalizer-watch>
          ...
        </ul>
      </div>
      <div class="large-4 columns">
        <ul class="pricing-table" data-equalizer-watch>
          ...
        </ul>
      </div>
    </div>

التبادل (Interchange)

يُستخدم "التبادل" (interchange) في تحميل (load) جزء مُحدد من مُستند HTML بناءً على استعلامات وسائط (media queries) مُعينة، حيث أنك تستطيع تحميل مُحتوى مُعين دون الآخر على حجم شاشة مُعين دون الآخر، لاحظ أنّي قلّت تحميل وليس إظهار، وهو ما يحدث في "أصناف الظهور". تمت إضافة "التبادل" في الإصدار الخامس من Foundation، وهو من الميزات الّتي يتوفق بها Foundation على إطار العمل Bootstrap.

تخيلْ أنّ يكونَ لديك صفحة تحتوي نصًّا لخرائط Google، الخرائط سوف تظهر بشكل سلس على أجهزة سطح المكتب، ولكن على أجهزة الهاتف المحمول سيكون هناك تأخيرٌ بعض الشيء في عرض الصفحة. "التبادل" يسمح لك بتحميل صورة ثابتة على أجهزة الهاتف المحمول بدلًا من تضمين خريطة تفاعليّة، الأمر الذي يزيد من سرعة عرض الصفحة وبالتّالي تجربة استخدام أفضل للمُستخدم.

تُستخدم JavaScript لتطبيق مفهوم "التبادل" لذلك عليك ضمان عرض مُحتوى ما على الصفحة في حال عدم توفرها على المُتصفح، وذلك باستخدام الوسم <noscript>.

يَستخدم Foundation خاصيّة المعلومات data-interchange للتحكم بتحميل المُحتوى، بحيث كل جزء نريد عرضه سوف نوفر له قيمتان، القيمة الأولى هي مسار المُحتوى، والقيمة الثانية هي استعلام وسائط (media query)، ويُوفر Foundation مجموعة من استعلامات الوسائط منها "مبدئي" default و"صغير" small و"كبير" large ولوضعية اتجاه الجهاز عمودي portrait وأفقي landscape.

عند عرض الصفحة يتمّ اختبار كل استعلام على الترتيب، والاستعلامات الّتي تُحقق الشرط يتمّ تحميل المَسار الخاصّ بها، حيثُ يتمّ تحميلُ مُحتوى آخر استعلام تُحقق الدلالة الخاصة بها، مع الانتباه أنّه عليك دائمًا التصريح عن الاستعلام المُسمى "مبدئي" default.

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

    <img data-interchange="[img/green-default.jpg, (default)], [img/green-small.jpg, (small)], [img/green-medium.jpg, (medium)], [img/green-large.jpg, (large)]">

لاحظ أن أبعاد الصورة المُحملة في الشاشات الكبيرة هو 960 * 1600:

أما أبعاد الصورة في الشاشات المتوسطة هو 480 * 800:

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

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

    <noscript><img src="img/green-default.jpg"></noscript>

كما أنّه بإمكانك كتابةُ الاستعلامات الخاصّة بك، حيثُ أنّ النّصّ السابق كان من المُمكن كتابته على الشكل التّالي لتحصل على نفس النتيجة:

    <img data-interchange="[img/green-default.jpg, (only screen and (min-width: 1px))], [img/green-small.jpg, (only screen and (max-width: 640px))], [img/green-medium.jpg, (only screen and (max-width: 1024px))], [img/green-large.jpg, (only screen and (min-width: 1024px))]">

"التبادل" من الميزات الّتي سوف تستخدمها بكثرة إنّ كنتَ مطوّرًا مُحترفًا، طبعًا بإمكانك دائمًا الاستعانة بحلولٍ من جهة الخادم (server-side)، ولكن مع المواقع الصغيرة "التبادل" يأتي كحلٍ مثالي على جهة العميل (client-side) ولا يتطلب الكثير من الإعداد، لذلك أنصحك بالاعتماد على هذه الإضافة في مشاريعك.

الجولة (Joyride)

من الإضافات المُميزة جدًا في Foundation، والّتي يَفتقد لها إطار العمل Bootstrap، تُتيح "الجولة" joyride أخذ المستخدم في جولة لاستعراض الموقع وميزاته، أو الإشارة إلى ميزة جديدة قُمت بإضافتها مؤخرًا إلى الموقع، أو حتّى شرح كيفية إجراء مهمة (task) في الموقع عبر شرح خطوات التنفيذ.

الإعداد سيكون عبر إنشاء "قائمة مُرتبة" <ol>، أو "قائمة غير مُرتبة" <ul>، في أسفل صفحة HTML وإضافة الخاصيّة data-joyride، هذه القائمة سوف تحتوي مكان التوقف في كل خطوة من خطوات الجولة ومُحتوى الرسالة الخاص بكل نقطة وقوف، سوف نستخدم الصنف joyride-list لإخفاء القائمة من الظهور في المتصفح، وخاصيّة المعلومات data-joyride ستكون مسؤولة عن النصّ الخاص بـِHTML. لكل عنصر قائمة <li>، والّتي من المُمكن أن تحتوي على عنوان ورسالة مناسبة، سنُعرف محطات الوقوف بخاصيّة المعلومات data-id مُعطاةً قيمةً مُناسبة، والخاصيّة data-text ستكون مسؤولة عن الانتقال إلى نقطة الوقوف التّالية، والخاصيّة data-prev-text ستكون مسؤولة عن الانتقال إلى محطة وقوف سابقة، أما القائمة الأخيرة ستكون مسؤولة عن إنهاء الجولة وذلك بالخاصيّة data-button.

في صفحة المعرض الخاص بالمتجر سوف نُشير إلى الخيارات المتوفرة لاستعراض الصور، سوف نقوم بتحديد id لكل عنصر نريد الوقوف عنده، ومحطات الوقوف لدينا هي كالتّالي: stop1 للإشارة إلى إمكانيّة البحث وstop2 للإشارة إلى إمكانيّة تصفية المُحتوى و أخيرًا stop3 للإشارة إلى إمكانيّة استعراض الصور عبر "ترقيم الصفحات" (pagination)، وبعد تحديد محطات الوقوف علينا كتابة النصّ البرمجيّ الخاص بالجولة:

    <ol class="joyride-list" data-joyride>
      <li data-id="1stop" data-text="Next"> <!-- محتوى التوقف الأول -->
        <h4>Search</h4>
        <p>You can search for photo.</p>
      </li>
      <li data-id="2stop" data-text="Next" data-prev-text="Prev"> <!-- محتوى التوقف الثاني -->
        <h4>Filter</h4>
        <p>You can filter the content.</p>
      </li>
      <li data-id="3stop" data-text="Next" data-prev-text="Prev"> <!-- محتوى التوقف الثالث -->
        <h4>Explore</h4>
        <p>Or explore our gallery.</p>
      </li>
      <li data-button="End" data-prev-text="Prev"> <!-- محتوى رسالة الانتهاء من الجولة -->
        <h4>The end</h4>
        <p>Happy shooting</p>
      </li>
    </ol>

لا تعمل "الجولة" عند انتهاء تحميل الصفحة كما في الإضافات السابقة، ولذلك عليك استدعاء الدالة start باستخدام JavaScript:

    $(document).foundation('joyride', 'start');

بإمكانك تخصيص طريقة العرض كما ترغب، سرعة الانتقال من نقطة إلى أخرى، أو طريقة الانتقال، أو حتّى إلغاء إمكانيّة التحكم "بالجولة" باستخدام لوحة المفاتيح، حيث بشكل افتراضي يُمكنك استخدام الأسهم للانتقال خطوة للأمام وخطوة للخلف وإنهاء "الجولة" بزر الهروب (Esc)، ولتعطيل هذه الأزرار بإمكانك استخدام خاصية المعلومات data-options والخيار keyboard والقيمة false، وللمزيد من التخصيص يُمكنك مراجعة التوثيق الرسمي

الأيقونات الاجتماعيّة وخطوط الأيقونات

الأيقونات الاجتماعيّة

يُوفر Foundation حزمة من الأيقونات الاجتماعيّة يصل عددها إلى 76 أيقونة، وهي بصيغة SVG والّتي تجعل من عرضها على شاشات Retina مثاليًا.

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

    <link rel="stylesheet" href="css/webicons.css" /> 

في متجرنا سوف نقوم بإضافة ثلاث أيقونات في ذيل الصفحة footer، وذلك باستخدام الصنف webicon ومن ثم اسم الأيقونة لتظهر بالحجم المتوسط، ولتخصيص الحجم يُمكننا استخدام الصنفين small و large.

  <div class="row">
      <footer class="text-center">
        <a href="#" class="webicon facebook large"></a>
        <a href="#" class="webicon flickr large"></a>
        <a href="#" class="webicon twitter large"></a>
      </footer>
    </div>

خطوط الأيقونات

يُوفر Foundation حزمة من خطوط الأيقونات وعددها 283، ويُمكنك الحصول عليها من هنا، وبعد التحميل وفك الضغط، قُم باستدعاء ملف CSS الخاص بالأيقونات في الوسم <head> بإضافة السطر التّالي:

<link rel="stylesheet" href="css/foundation-icons.css" />

في متجرنا سوف نضيف "سلة التسوق" shopping-cart في الشريط العلوي، وذلك باستخدام اسم الأيقونة مسبوقًا بـِ fi كصنف للوسم <i>

<li class="right"><a href="#"><i class="fi-shopping-cart"></i></a></li>

أيضًا في الصفحة الرئيسة بإمكاننا استخدام الأيقونات التّالية:

<i class="fi-camera"></i>
...
<i class="fi-upload"></i>
...
<i class="fi-dollar"></i>

أُقصوصات

يُوفر Foundation أقصوصات (snippets) للمحرر Sublime Text وهي مساعدة جدًا في عملية التطوير وتزيد من إنتاجيّة المُطوّر، وبإمكانك تحميلها عن طريق مُدير الحزم الخاص بالمُحرر، ولكن لا أنصح بتحميلها في بداية تعاملك مع الإطار وإنمّا عليك في البداية التعامل مع الإطار بشكل مباشر لتحفظ الصياغة الخاصة به.

إنّ كنت لا تملك مُدير الحزم فيُمكنك تحميله من هنا بعد التحميل كل ما عليك فعله هو كتابة اسم الأقصوصات.

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

    cd "%AppData%\Sublime Text 3\Packages\User"
    git clone https://github.com/zurb/foundation-5-sublime-snippets.git

لاحظ عند كتابة zf-topbar في المُحرر ثم الضغط على Tab سينتج النّصّ البرمجيّ التّالي، وهي عبارة عن الشريط العلوي (topbar).

وعند كتابة zf-pagination في المُحرر ثم الضغط على Tab سينتج النّصّ البرمجيّ الخاصّ بـ"ترقيم الصفحات" (pagination).

تُقدم لك الأقصوصات أيضًا تعليق للإشارة إلى الأصناف المتوفرة لبعض العناصر، فعند كتابة zf-button والضغط على Tab النّص التّالي سيوضح لك إلى الأصناف المتوفرة والّتي يُمكنك استخدامها مع الصنف button.

كما تلاحظ أنّ هذه الأقصوصات تُوفر عليك الكثيرَ من الكتابة والوقت، لذلك أنصحك بالإطلاع عليها وتجربتها.

ما الذي عليك فعله بعد انتهاء السلسلة؟

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

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

الأزرار (Buttons)

يَملك Foundation مجموعة من الأزرار الجذابة، لإنشاء زر كل ما عليك فعله هو إضافة الصنف button إلى الوسم <a> أو المُدخل <input> من نوع submit لتحصل على الزر الافتراضي وبالحجم المُتوسط مع اللون الأساسي للإطار ومع تأثير المرور (hover)، ولتخصيص حجم الزر لديك أصناف عدّة:"صغير جدًا" tiny، و"صغير" small، و"كبير" large، و"مُوسّع" expanded. الزر بشكله الافتراضي حاد الحواف، ولتغيير ذلك بإمكانك استخدام أحد الصنفين round أو radius، أمّا لتغيير الألوان فيُقدم Foundation خمسة أصناف باستثناء اللون الأساسي، ويُشير إلى هذه الألوان على أساس دلالتها اللونية، فاللون الأحمر ستجده باسم الصنف alert واللون الأخضر ستجده بالصنف success.

أزرار ضمن مجموعة (Button Groups)

كما يُمَكنك Foundation من إنشاء مجموعة أزرار مُترابطة مع بعضها البعض، وذلك باستخدام "قائمة غير مرتبة" <ul> مع الصنف button-group، ولتنسيق هذا النوع من الأزرار سوف نستخدم الأصناف round وradius لتظهر على أول وآخر زر من المجموعة، أمّا الصنف "مُتساوي" even فهو يُوزع مجموعة الأزرار على عرض المساحة الممنوحة لهذه الأزرار. كما يُقدم Foundation الصنف "اصطفاف" stack والذي يجعل من الأزرار مصفوفةً فوق بعضها البعض، والصنف stack-for-small الذي يَجعل من الأزرار متوافقةً مع الشاشات الصغيرة.

    <!-- أبسط شكل من أشكال أزرار ضمن مجموعة وبدون أي تنسيق -->
    <ul class="button-group">
      <li><a href="#" class="button">Button 1</a></li>
      <li><a href="#" class="button">Button 2</a></li>
      <li><a href="#" class="button">Button 3</a></li>
    </ul>


    <ul class="button-group even-3"> <!-- أزرار ضمن مجموعة مع تقسيم المساحة الكلية على ثلاثة أزرار -->
      <li><a href="#" class="button secondary">Button 1</a></li>
      <li><a href="#" class="button secondary">Button 2</a></li>
      <li><a href="#" class="button secondary">Button 3</a></li>
    </ul>
    <ul class="button-group round even-6"> <!-- أزرار ضمن مجموعة مع تقسيم المساحة الكلية على الأزرار الستّة وتنسيق بحواف دائرية -->
      <li><a href="#" class="button">Button 1</a></li>
      <li><a href="#" class="button">Button 2</a></li>
      <li><a href="#" class="button">Button 3</a></li>
      <li><a href="#" class="button">Button 4</a></li>
      <li><a href="#" class="button">Button 5</a></li>
      <li><a href="#" class="button">Button 6</a></li>
    </ul>

مثال حي http://codepen.io/anon/pen/zxZrVa

أزرار مع قائمة منسدلة (Dropdown Buttons)

في الإصدارات الأخيرة من إطار العمل Foundation تم تبسيط التعامل مع هذا النوع من الأزرار، كل ما تحتاج إليه العنصران <button> و<ul>، الزر سوف يأخذ الصنفين button وdropdown وخاصية المعلومات data-dropdown والتي تحمل قيمة بأيّ اسم معبّر لكي نعرّف به القائمة غير المرتبة، أمّا القائمة غير مرتبة ذاتها فتأخذ المعرّف المُسبق عبر قيمة الخاصية id، وبالإضافة إلى "خاصية المعلومات" data-dropdown-content والصنف f-dropdown، بهذا نحصل على زر مع قائمة مُنسدلة بأبسط شكلٍ ممكن.

    <!-- زر مع قائمة مُنسدلة وبحواف دائرية ولون أحمر وكبير الحجم -->
    <button data-dropdown="drop" class="large alert round button dropdown">Dropdown Button</button><br>
    <ul id="drop" data-dropdown-content class="f-dropdown"> <!-- القائمة المُنسدلة مع عناصرها -->
      <li><a href="#">This is a link</a></li>
      <li><a href="#">This is another</a></li>
      <li><a href="#">Yet another</a></li>
    </ul>

مثال حي http://codepen.io/anon/pen/GgWZRJ

الأزرار المُنقسمة (Split Buttons)

يُنشئ "زر منقسم" عن طريق الربط بين الوسوم الثلاثة<a>و <span> و <ul>، الوسم <a> سوف يأخذ الصنفين button وsplit، أمّا الصنف <span> سوف يأخذ "خاصية المعلومات" data-dropdown مع قيمة مناسبة لتعريف "القائمة غير المرتبة" <ul>، أمّا القائمة <ul> سوف نُضيف لها الخاصية id مع القيمة المُعرفة في خاصية المعلومات data-dropdown في الصنف <span>، وبالإضافة إلى الصنف f-dropdown و"خاصية المعلومات" data-dropdown-content.

لنستخدم بعض هذه الأزرار في متجرنا، في الصفحة الرئيسة لدينا الصور الأكثر مبيعًا سوف نحول زر الشراء العادي إلى زر مُنقسم (split button)، وذلك عبر إضافة الصنفين button وsplit ولنجعله صغير الحجم عبر الصنف tiny، وللقائمة المُنسدلة سوف نقوم بإنشاء "قائمة غير مُرتبة" للخيارات الإضافية، كما في الشيفرة التالية:

    <!-- زر مُنقسم صغير جدًا مع قائمة مُنسدلة -->
    <a href="#" class="button split tiny">Buy<span data-dropdown="drop"></span></a>
    <ul id="drop" class="f-dropdown" data-dropdown-content> <!-- القائمة المُنسدلة وعناصرها -->
      <li><a href="#">Add to favorites</a></li>
      <li><a href="#">Add to cart</a></li>
    </ul>

في صفحة المُنتج سوف نجعل زر "أضف إلى السلة" مصقول الحواف بالصنف radius، مع لون خفيف بالصنف Info.

    <a href="#" class="button info radius">Add to Cart</a>

في صفحة التسجيل سوف نقوم بالتعديل على المُدخل input من نوع "إرسال" submit وتنسيقه على أنّه غير مفعل بالصنف disabled وبحواف دائرية بالصنف round.

    <input type="submit" value="Submit" class="button round disabled">

الجداول والنماذج (Tables and Forms)

الجداول (Tables)

يتفوّق Foundation على Bootstrap بتوفير "جداول الأسعار" (pricing tables)، ومع الاتجاه الكبير نحو تطبيقات الويب، وظهور العديد من الشركات الناشئة، تزايد الطلب على هذا النوع من الجداول. Foundation كما في كل الميزات التي يُقدمها، جعل من إنشاء "جدول أسعار" أمرًا يسيرًا، فالإنشاء "جدول أسعار" كل ما عليك فعله هو إضافة الصنف pricing-table إلى "قائمة غير مرتبة" (<ul>)، أمّا "عناصر القائمة" <li> فلديها الأصناف "عنوان" title، "سعر" price، "وصف" description، "عنصر دائري" bullet-item، وأخيرًا "الزر" cta-button.

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

    <ul class="pricing-table">
      <li class="title">Pro</li>
      <li class="price">$99.99</li>
      <li class="description">We do every thing for you, just upload your photos</li>
      <li class="bullet-item">Unlimited photos per week</li>
      <li class="bullet-item">24/7 Support</li>
      <li class="bullet-item">We change bad comments and rating to good ones</li>
      <li class="cta-button"><a class="button" href="#">Enroll Now</a></li>
    </ul>

النماذج (Forms)

يَعتير البعض التعامل مع النماذج (forms) من الأمور المعقدة نوعًا ما في HTML، لما لها من تفاصيل، لم يشأ Foundation أن يزيد من هذا التعقيد، وحاول قدر الإمكان التسهيل من مُهمة المطوّر في التعامل معها وجعلها مرنةً في التخصيص، بُنيت النماذج في Foundation من دمج عناصر النماذج الأساسية في HTML مع النظام الشبكي، ويتحدد تَنسيق عناصر النموذج عن طريق الخاصية type بدلاً من استخدام الأصناف، ويُمكن جعل النماذج مُتجاوبة باستخدام النظام الشبكي في Foundation وذلك بتعريف الصنف row داخل الوسم <form> واستخدام الأصناف الثلاثة الخاصة بالنظام الشبكي smallوmedium وlarge، لتحصل على نماذج متجاوبة وبأقل قدر مُمكن من الكتابة.

ملحقات النماذج (Pre/Postfix Labels & Actions)

يُقدم Foundation النماذج بشكل مرنٍ للغاية حيثُ بإمكانك ربط المُدخل (input) مع زر أو مع لاحقة أو بادئة نصية (pre/postfix label)، والتي تُقدم طريقة سريعة للمُستخدم لإدخال المدخلات الخاصة بالنماذج، وأيضًا تعطيه تلميحًا عن ما هو مطلوب منه في تعبئة النماذج. يُقدم Foundation طريقة سريعة للتحكم بحجم هذه الملحقات، وذلك باستخدام النظام الشبكي، ولربط مُدخل مع زر نستخدم الوسم <input> من النوع نص (text) مع الوسم <a> بالإضافة إلى الصنفين button وpostfix، ونَستخدم الوسم <span> مع الصنف prefix لإنشاء "بادئة نصية" prefix label، والصنف postfix لإنشاء "لاحقة نصية" postfix label. أما للتنسيق فعليك استخدامُ الصنف collapse لإزالة الحشو (padding) بين المُدخل من جهة والبادئة أو اللاحقة والزر من جهة أخرى.

    <form>
      <div class="row"> <!-- الصفّ الأول ويحتوي على مُدخلين -->
        <div class="large-6 columns">
          <input type="text" placeholder="First name" />
        </div>
        <div class="large-6 columns">
          <input type="text" placeholder="last name" />
        </div>
      </div>
      <div class="row"> <!-- الصفّ الثاني ويحتوي على مُدخل واحد -->
        <div class="large-12 columns">
         <input type="text" placeholder="Email" />
        </div>
      </div>
      <div class="row"> <!-- الصفّ الثالث ويحتوي على مُدخل واحد -->
        <div class="large-12 columns">
         <input type="text" placeholder="Re-enter email" />
        </div>
      </div>
      <div class="row"> <!-- الصفّ الرابع -->
        <div class="large-12 columns">
         <input type="text" placeholder="Password" />
        </div>
      </div>

      <div class="row"> <!-- الصفّ الخامس -->
        <div class="large-6 columns">
          <input type="radio" name="radioname" value="Male" id="thisidformale"><label for="thisidformale">Male</label>
          <input type="radio" name="radioname" value="Female" id="thisidforfemale"><label for="thisidforfemale">Female</label>
        </div>
      </div>

      <div class="row collapse"> <!-- لإزالة الحشو بين البادئة والمُدخل -->
        <div class="small-2 columns"> <!-- البادئة بعمودين -->
          <span class="prefix">http://</span> <!-- تعريف البادئة -->
        </div>
        <div class="small-10 columns"> <!-- المُدخل -->
          <input type="text" placeholder="Enter your URL...">
        </div>
      </div>

      <div class="row">
        <div class="large-12 columns">
          <label>What is your favorite brand?
            <select>
              <option value="Canon">Canon</option>
              <option value="Nikon">Nikon</option>
              <option value="Panasonic">Panasonic</option>
              <option value="Sony">Sony</option>
            </select>
          </label>
        </div>
      </div>
      <div class="row"> <!-- الصفّ الأخير -->
        <div class="large-12 columns">
          <div class="row">
            <div class="large-6 columns">
              <div class="row collapse prefix-radius"> <!-- بادئة بحواف مصقولة -->
                <div class="small-3 columns">
                  <span class="prefix">@</span> <!-- البادئة للإشارة إلى ادخال اسم العضوية فقط -->
                </div>
                <div class="small-9 columns">
                  <input type="text" placeholder="Twitter Account">
                </div>
              </div>
            </div>
            <div class="large-6 columns">
              <div class="row collapse prefix-radius"> <!-- بادئة بحواف مصقولة -->
                <div class="small-3 columns">
                  <span class="prefix">photos/</span> <!-- البادئة للإشارة إلى ادخال اسم العضوية فقط -->
                </div>
                <div class="small-9 columns">
                  <input type="text" placeholder="Flickr account">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>

مثال حي http://codepen.io/anon/pen/ZYeOzZ

في صفحة المعرض الخاصة بالمتجر سوف نُوفر إمكانية البحث عن الصور باستخدام المُدخل <input> مع زرٍ مُلحق، سوف نُزيل الحشو (padding) بين المُدخل والزر باستخدام الصنف collapse، ولتنسيق الزر سوف نستخدم الصنف expand، والصنف postfix والذي سيجعل من الزر مُتناسقًا مع المُدخل.

    <div class="large-12 columns">
      <div class="radius panel">
      <form>
        <div class="row collapse">
          <div class="large-10 small-8 columns">
            <input type="text"/>
          </div>
          <div class="large-2 small-4 columns">
            <a href="#" class="postfix button expand">Search</a>
          </div>
        </div>
      </form>
    </div>
    </div>

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

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

الصور والفيديو (Images and Videos)

المدار (Orbit)

"المدار" وهو ما يقابل "carousel" في إطار العمل Bootstrap، قدم Foundation "المدار" بشكل مُبسطٍ وسريع الإعداد كل ما عليك فعله هو إضافة خاصية المعلومات data-orbit "للقائمة الغير مرتبة" (<ul>) وستتكفّل JavaScript بما بقي لإنشاء "المدار"، ومُحتوى "المدار" يُمكن أنّ يكون نصّيًا أو صورًا والتي يُمكن أن يُضاف لها "شرح صورة" (caption)، ويدعم "المدار" ميزة المسح بالإصبع (swiping) في الأجهزة التي تُوفر شاشات لمسية، وخاصية الربط العميق (deep linking)، والتي تُتيح لك إنشاء رابط لأحد عناصر "المدار".

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

    <div class="row">
        <ul data-orbit>
          <li>
            <img src="img/1.jpg">
          </li>
          <li>
            <img src="img/2.jpg">
          </li>
          <li>
            <img src="img/3.jpg">
          </li>
        </ul>
    </div>

في الصفحة الرئيسة الخاصة بالمتجر قمنا بإنشاء "المدار" باستخدام مُحتوى نصّي فقط.

    <div class="row panel">
        <ul class="text-center" data-orbit>
          <li>
            <div>
              <h2>Start make money by selling you photos</h2>
              <p>We have connection with big clients looking for you photos</p>
            </div>
          </li>
          <li>
            <div>
              <h2>We are fair</h2>
              <p>We take 95% and the rest is for you</p>
            </div>
          </li>
          <li>
            <div>
              <h2>We have subscription plans</h2>
              <p>Three bussnies plans for all sizes</p>
            </div>
          </li>
        </ul>
    </div>

مثال حي http://codepen.io/anon/pen/NPpRqQ:

للأسف توقف Foundation عن دعم "المدار" بعد أكثر من أربعة أعوام على إصداره، تنصح Zurb باستخدام أحد الحلول البديلة وهي إضافة slick. الأمر الجيد أنّه مازال بالإمكان متابعة استخدام "المدار" وبكامل ميزاته، ولكن بدون تحديثات مستقبلية.

عارض الصور (Lightbox)

قام Foundation بتوفير إضافة عرض الصور (lightbox)، حيثُ أنّ "المدار" لا يستطيع التعامل مع الصور ذات الارتفاع المختلف، ولإنشاء عارض الصور كل ماعليك فعله هو تجميع الصور في "قائمة غير مرتبة" وإضافة الصنف clearing-thumbs والخاصيةdata-clearing، لتحصل على معرض صور بأبسط الخيارات، حيث تُعرض جميع الصور على الصفحة وعند الضغط على أحدها يتم الانتقال إلى صفحة جديدة لتُعرض الصورة بحجم كبير مع إمكانية التّنقل بين الصور الأُخرى بشكل مُصغّرات (thumbnails)، ولإضافة شيء من الجمالية للصور بإمكانك استخدام الصنف th للوسم <img>، الذي يضيف إطارًا و"تأثير مرور" (hover) للصور، كما يُقدم Foundation أسلوبًا آخرًا للعرض حيثُ بإمكانك اختيار إحدى الصور وعرضها في الصفحة بشكل منفرد وبعد الضغط عليها يُنتقل إلى صفحة أُخرى تعرض الصورة المُختارة بحجمها الكبير وباقي الصور بشكل مُصغّر، ولتطبيق هذا الأسلوب عليك إضافة الصنف clearing-feature "للقائمة غير المرتبة" والصنف clearing-featured-img للصورة المُختارة، ولإضافة "شرح صورة" (caption) نستخدم "خاصية المعلومات" data-caption.

    <div class="row">
      <div class="large-12 columns">
        <ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4 clearing-thumbs" data-clearing>
          <li><a href="img/th1.jpg" class="th"><img src="img/th1.jpg"></a></li>
          <li><a href="img/th2.jpg" class="th"><img src="img/th2.jpg"></a></li>
          <li><a href="img/th3.jpg" class="th"><img src="img/th3.jpg"></a></li>
          <li><a href="img/th4.jpg" class="th"><img src="img/th4.jpg"></a></li>
          <li><a href="img/th5.jpg" class="th"><img src="img/th5.jpg"></a></li>
          <li><a href="img/th6.jpg" class="th"><img src="img/th6.jpg"></a></li>
          <li><a href="img/th7.jpg" class="th"><img src="img/th7.jpg"></a></li>
          <li><a href="img/th8.jpg" class="th"><img src="img/th8.jpg"></a></li>
        </ul>
      </div>
    </div>

الفيديو المرن (Flex Video)

التعامل مع تجاوبيّة الفيديو من الأمور المزعجة في CSS، وهي في نفس الوقت مطلبٌ أساسيٌ في أي موقع. يُقدم Foundation الصنف flex-video للتعامل مع الفيديو المُضمّن (embedded) في الصفحة، حيث يقوم هذا الصنف بالحفاظ على أبعاد الفيديو مُتناسقة على مُختلف قياسات الشاشات. للاستفادة من "الفيديو المرن" Flex Video كل ما عليك فعله هو إحاطة الوسم <iframe> بالوسم <div> مع الصنف flex-video، لتحصل على تجاوبية على أي حجم شاشة، ويُمكن استخدام الصنف widescreen لتوسيع عرض الفيديو. كما يُقدم Foundation صنفًا خاصًا لموقع Vimeo وبنفس الاسم وذلك لتنسيقه بشكل أفضل في الصفحة.

    <div class="flex-video">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/ExAmPl3" frameborder="0" allowfullscreen></iframe>
    </div>

دائمًا لدمج فيديو في الصفحة يجب استخدام الرابط المسمى Embed المُلحق بالفيديو، في YouTube يُمكن الحصول على الرابط أسفل الفيديو.

الهيئة والظهور (Formatting and Visibility)

تنسيق العناوين والنّصوص

يَهتم Foundation بمظهر العناوين والنصوص (typography)، حيث يُقدم Foundation "للقائمة غير مرتبة" <ul> الأصناف "قرص" disc لجعل جميع عناصر القائمة مسبوقًا بدائرة مُطمسة وحتى المتداخل منها (nested)، ,الصنف "دائري" circle يَسبق جميع العناصر بدائرة مُفرغة، والصنف "مربع" square يسبق العناصر بمُربع صغير مُطمس، ويعرض الصنف no-bullet القوائم مُجردة من أيّ شكل.

    <ul class="no-bullet"> <!-- القائمة سوف تظهر من دون أيّ شكل -->
      <li>List item with a much longer description or more content.</li>
      <li>List item</li>
      <li>List item
        <ul>
          <li>Nested List Item</li>
          <li>Nested List Item</li>
          <li>Nested List Item</li>
        </ul>
      </li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>

لاحظ الفرق في الاقتباسات الموجودة في الصفحة الرئيسة في المتجر قبل وبعد استخدامنا لـFoundation.

لاحظ التنسيق الخاص بالعناوين (headings) في مُتصفح Chrome والتنسيق الخاص بـFoundation.

يُقدم Foundation الصنف vcard "لقائمة غير مرتبة" <ul> لعرض العناصر <li> على شكل بطاقة عمل، حيث يُحيط العناصر بحدود (border) لتبدو كالصندوق لتُستخدم كبطاقة عرض لبيانات الاتصال.

    <ul class="vcard">
      <li class="fn">Mohamad Abras</li>
      <li class="street-address">Address: its private.</li>
      <li class="locality">City: One of the city</li>
      <li class="email"><a href="#">mohamad.abras@sawrha.com</a></li>
      <li>Phone: 111111111</li>
    </ul>

يُقدم Foundation الصنفين show-for-print لإظهار المُحتوى في صفحة الطباعة، والصنف hide-for-print لإخفاء المُحتوى في صفحة الطباعة.

يُقدم Foundation الصنف "علامة" label لتنسيق المُحتوى النصي ليكون ظاهرًا للعيان للإشارة إلى أهمية المُحتوى.

    <li class="label">Its not my real number!......My number has 2 in the end.</li>

يُقدم Foundatin تنسيقًا خاصًا للوسم <kbd> لجعله بارزًا وأكثر وضوحًا في النص.

لابُدْ أنّك لاحظت أيضًا الصنف panel الذي قمنا باستخدامه في المتجر أكثر من مرّة والذي يُضيف حدود واضحة مع خلفية تحمل لونًا بالقيمة f2f2f2 للمُحتوى الداخلي، ويُمكن تخصيص الصنف panel بالصنف callout ليُضيف لونًا يحمل القيمة ecfaff، والصنف radius لجعل الحواف مصقولة.

في صفحة الخطط والأسعار الخاصة بالمتجر سوف نستخدم الصنف panel مع الصنف callout والصنف radius.

    <h1 class="panel callout radius">Plans and Pricing</h1>

صناديق التحذير والتنبيه (Alert Boxes)

وهي من الإضافات المُساعدة التي بإمكانك أن تستخدمها مع النماذج، أو كوسيلة عرض للإشارة إلى نجاح أو فشل عملية ما على الموقع، أو حتى لعرض معلومات مُساعدة للمستخدم. تأخذ الصناديق عرض الحاوية الخاصة بها بشكل كامل، ولإنشاء صندوق كل ما تحتاجه هو خاصية المعلومات data-alert والصنف alert-box.

ولتخصيص الصناديق بإمكانك استخدام الأصناف "نجاح" success، "حواف مصقولة" radius، "تحذير" warning، "حواف دائرية" round، "تحذير" alert، و"معلومة" info.

في صفحة التسجيل الخاصة بالمتجر سوف نقوم بإنشاء صندوق تنبيه للإشارة إلى أننا نقوم بحماية معلومات المُستخدم، سوف نستخدم الصنفين radius لجعل الحواف مصقولة وinfo من أجل اللون.

    <div data-alert class="alert-box info radius">
      We protect your information.
      <a href="#" class="close">&times;</a>
    </div>

معلومة جانبية (Tooltip)

"المعلومة الجانبية" (tooltip) هي طريقة سريعة لعرض معلومات لمصطلح مُعين أو حدث (action) عند وقوف المؤشر على كلمة ما على الصفحة. للتطبيق كل ماعليك فعله هو إحاطة المصطلح المُراد إضافة "معلومة جانبية" له بالوسم <span> مع الصنف has-tip، الذي يجعل من المصطلح عريضًا (bold)، بالإضافة إلى خاصية المعلومات data-tooltip، والرسالة المُراد عرضها سوف نضعها في الخاصية title.

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

    <p><span data-tooltip class="has-tip" title="Just important notifications">No spam</span></p>

حوار مُنبثق (Reveal Modal)

وهو نوع من أنواع النوافذ المُنبثقة، حيث النافذة تظهر لعرض مُحتوى معين مع تعتيم للخلفية في الصفحة الحالية، يَستخدم Foundation مكتبة jQuery لتوفير إضافة الحوار المنبثق، ولإنشائها نقوم بإنشاء "قسم" <div> وإضافة تعريف id باسم مناسب، والصنف reveal-modal، وخاصية المعلومات data-reveal. داخل القسم بإمكانك وضع ما تريد من مُحتوى سواءً أكان كتابيًا أو صورًا أو فيديو أو نماذج، وحتى إنّه بالإمكان ربط حوار منبثق بآخر، وللتحكم بحجم الحوار بإمكانك استخدام خمسة أصناف، وهي بالتدريج من صغير جدًا tiny إلى كبير جدًا xlarge، بالإضافة إلى الصنف ملء الشاشة full، وبعد إنشاء modal بإمكانك استدعائه عبر خاصية المعلومات data-reveal-id.

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

    <!-- Any where in the HTML document -->
    <a href="#" data-reveal-id="myModal"><img class="th" src="img/th2.jpg"></a>
    <!-- At the bottom of HTML document -->
    <div id="myModal" class="reveal-modal small" data-reveal>
      <img src="img/th2.jpg">
      <a class="close-reveal-modal">&#215;</a>
    </div>

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

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

النّظام الشبكي في Foundation

يُمَكّنك Foundation من إنشاء تصاميم صفحات إنترنت مُتجاوبة مع جميع الشاشات والأجهزة بسرعة عالية، وذلك باستخدام نظامٍ شبكي يَعتمد على اثني عشر عمودًا بشكل مبدئيّ قابلة للتعديل، وهذه الشبكات يُمكن أن تكون مُتداخلة (nestable)، أي اثنا عشر عمودًا داخل اثني عشر عمودًا آخر.

يُعرَّف كل صفّ بإضافة الصنف row إلى <div>، وداخل كل صفّ يُحدَّد توزع الأعمدة باستخدام الأصناف small-x وmedium-x وlarge-x حيث x هي من 1 حتى 12، وهي دائمًا تُعرف داخل صفّ (row)، وبعد تحديد توزّع الأعمدة في الصفّ عليك إضافة الصنف column (عمود) أو columns، لا فرقَ بين الصنفين ولكنّ صيغة الجمع هي الشائعة، ومُهمة هذا الصنف هي إضافة الطوفان (float) والحشو (padding).

يُعرّف Foundation نقاط الفصل (breakpoints) الّتي تُحدّد كل قياس من قياسات النظام الشبكي كما يلي:

• الشاشات الصغيرة small تبدأ من 0 بكسل إلى 640 بكسلًا.
• الشاشات المتوسطة medium تبدأ من 641 بكسلًا إلى 1024 بكسلًا.
• الشاشات الكبيرة large تبدأ من 1025 بكسلًا إلى 1440 بكسلًا.

عند حدود هذه النقاط تتغير استجابة المُتصفّح في عرضه لمُحتويات الموقع لتبدو بأفضل صورةٍ مُمكنة.

بُني إطار العمل Foundation ليستهدف شاشات الأجهزة المحمولة أوّلًا ومنها إلى الأجهزة ذات الشاشات الكبيرة ويَستخدم في ذلك الصنف (class) المُسمى small، عند استخدام هذا الصنف، فإنّ تَوزع الأعمدة في الصفحة لن يختلف أبدًا مهما كانت قياس شاشة العرض، بمعنى أنّه في حال وجود عمودين في الصفحة سيبقى هذان العمودان مهما كان حجم الشاشة سواءٌ كانت متوسطة أو كبيرة، وعند استخدام الصنف المتوسط medium، والذي أُضيف في الإصدار الخامس، فإنّ توزع الأعمدة المُحدد على هذا الصنف سوف يتم استخدامه مع الشاشات الكبيرة أيضًا، ولكن في حالة الشاشات الصغيرة فسوف تصطف العناصر بعضها فوق بعض.

يجب أن يحتوي كل صفّ row اثني عشر عمودًا دومًا، في صفحة التسجيل في المتجر تتضمّن الصفحة صفًّا رئيسيًّا باثني عشر عمودًا داخل اثني عشر عمودًا آخر، حيث تكون النماذج (forms) ثمانية أعمدة والشريط الجانبي أربعة أعمدة، وعند تعريف النماذج يتم التعامل مع كل صفّ على أساس اثني عشر عمودًا داخل اثني عشر عمود، حيث يتم تعريف المُدخل الخاص بالاسم الأوّل على أنّه ستّة أعمدة والمُدخل الخاص بالاسم الأخير على أنه ستّة أعمدة.

    <div class="row"> <!--صفّ رئيسي-->
      <div class="medium-4 columns"> <!--أربعة أعمدة للشريط الجانبي-->
        <aside>
          <div class="panel">
            <h5>Features</h5>
            <a href="#">Read More →</a>
          </div>
        </aside>
      </div>
      <div class="medium-8 columns"> <!--ثمانية أعمدة للنماذج-->
        <form>
          <div class="row"> <!--صفّ داخل الصف الرئيسي-->
            <div class="large-6 columns">
              <input type="text" placeholder="First name" />
            </div>
            <div class="large-6 columns">
              <input type="text" placeholder="last name" />
            </div>
          </div>
          <!-- بقية النماذج -->
        </form>
      </div>
    </div>

الإزاحة (Offset)

يُقدم Foundation مفهوم "الإزاحة" لزيادة المرونة في استخدام النظام الشبكي، حيث بإمكانك تحريك أي عمود إلى جهة اليمين مستهدفًا أي حجم شاشة دون الآخر، وذلك عن طريق الأصناف small-offset-x وmedium-offset-x وlarge-offset-x حيث x هي رقمٌ من 1 حتى 11، ومن المُمكن الجمع بين جميع القياسات الثالثة السابقة ولكن من واقع الخبرة العمليّة، الأكثر استخدامًا إمّا الصنف small مع medium أو small مع large.

يُطوّف Foundation العمود الأخير إلى جهة اليمين، على عكس ما يفعل إطار العمل Bootstrap عند إنشاء صفّ بأعمدة لا تُجمع إلى اثني عشر، ولكن بإمكانك إضافة الصنف end إلى العمود المُطوّف لجعله يصطف بجانب العمود السابق.

يُنسّق النظام الشبكي الأعمدةَ بإضافة حشو (padding) بينها، ولكن هناك حالات لاترغب بظهور هذا الحشو في قياس شاشة مُعين، ولذلك يُقدم لك Foundation أصنافًا مثلَ large-collapse لإزالة هذا الحشو من الشاشات الكبيرة على سبيل المثال.

يُقدم لك Foundation أصنافًا خاصة لتوسيط العمود في منتصف الصف، ولتوسيط العمود في الشاشات الصغيرة بإمكاننا استخدام الصنف small-centered، ويَشمل تأثير هذا الصنف الشاشات المتوسطة والكبيرة، ولكن بالإمكان استخدام صنف معاكس لتغيير هذا السلوك، حيث يَقومُ الصنف large-uncentered والصنف medium-uncentered بإلغاء تأثير الصنف small-centered في الشاشات الكبيرة والمتوسطة.

في الصفحة الرئيسة في المتجر لدينا صفّ يحتوي على ثلاثة عناصر، في الشاشات الصغيرة نريد لهذه العناصر أن يصطف بعضها فوق بعض وكلُ عنصر يأخُذ عرضَ الصفحة بالكامل ولذلك يجب أنّ نستخدم الصنف small-12، أمّا في الشاشات المتوسطة والكبيرة نُريد من العناصر الثلاثة أن تُعرض بجانب بعضها البعض وبالتّالي كل عنصرٍ سيكونُ له أربعة أعمدة (12/3) من أصلِ اثني عشر عمودًا لتظهر الصناديق الثلاثة على مُستوى واحد وعلى عرض الصفحة بالكامل ولذلك سوف نستخدم الصنف medium-4 الذي يقوم بترتيب العناصر على مستوى الشاشات المُتوسطة والكبيرة.

    <div class="row">
      <div class="small-12 medium-4 columns">
        <div class="panel">
          <h3>Shoot</h3>
          <p>...</p>
        </div>
      </div>

      <div class="small-12 medium-4 columns">
        <div class="panel">
          <h3>Upload</h3>
          <p>...</p>
        </div>
      </div>

      <div class="small-12 medium-4 columns">
        <div class="panel">
          <h3>Sell</h3>
          <p>...</p>
        </div>
      </div>
    </div>

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

http://codepen.io/anon/pen/ogBQao

أيضًا في الصفحةِ الرئيسة لدينا صفّ يَعرض الصور الأكثر مبيعًا في المتجر، نُريد عرض ثلاثة صورٍ في الصف الواحد في الشاشات الكبيرة ولذلك سوف نستخدم الصنف large-4 وفي الشاشات الصغيرة والمتوسطة نريد عرض صورتين فقط في الصفّ الواحد ولذلك سوف نستخدم الصنف small-6.

<code class="lang-html"> 
</code>  <div class="row">
      <div class="small-6 large-4 columns">
        ...
      </div>
      <div class="small-6 large-4 columns">
        ...
      </div>
      <div class="small-6 large-4 columns">
        ...
      </div>
    </div>

الصورة التّالية لتوزع الأعمدة في الشاشات الكبيرة:

أمّا في الشاشات المُتوسطة والصغيرة سوف تتوزع الصور كما في الصورة التّالية مع ملاحظة طوفان الصورة الأخيرة إلى جهة اليمين، ويُمكنك استخدام الصنف end لجعل الصورة تطوف إلى جهة اليسار.

ويستخدم Foundation في ذلك الطوفان "الصّنف الزّائف" (pseudo-class) المُسمى "العنصر الأخير" last-child.

أيضًا في الصفحة الرئيسة لدينا الشيفرة التّالية والّتي تتضمّن صفّين: الأول يحتوي على اقتباسين (blockquote) كل منهما ستة أعمدة، أمّا في الصف الثاني لدينا اقتباس وحيد سنجعله يتوسط الصفّ الذي ينتمي إليه في الشاشات الكبيرة والمتوسطة دون الشاشات الصغيرة باستخدام أصناف الإزاحة medium-offset-3 و الصنف large-offset-3.

    <div class="row">
      <blockquote class="small-6 columns text-center">...<cite>..</cite></blockquote>
      <blockquote class="small-6 columns text-center">...<cite>..</cite></blockquote>
    </div>
    <div class="row">
      <blockquote class="large-6 medium-6 medium-offset-3 large-offset-3 columns">...<cite>..</cite></blockquote>
    </div>

http://codepen.io/anon/pen/rayBgg

ترتيب المصدر (Source Ordering)

من خلالِ تعامُلك مع النظام الشبكي لا بدَّ أن المشكلة التّالية واجهتك: تُريد ظُهور المُحتوى على المُتصفح بترتيب معين عند عرضه، وبترتيب آخر مُختلفٍ في نصّ مُستند HTML، رُبما لأسبابٍ تتعلقُ بالتحسينِ لمُحركات البحث (SEO)، أو أنّك تُريد عرضَ المُحتوى بترتيبٍ مُعين في شاشات سطح المكتب وبترتيبٍ مُغاير في الأجهزة المحمولة، ولهذا يُقدم Foundation حلًا لتلك المشكلة وذلك باستخدام أصناف الدفع والسحب (push and pull)، حيثُ يقوم الصنف large-push-4 بدفع العنصر أربعة أعمدةٍ باتجاه اليمين، ويَسحب الصنف large-pull-8 العُنصر ثمانية أعمدةٍ إلى اليسار.

في صفحةِ التسجيل الخاصة بالمتجر عمودان رئيسيان في الصفحة، فيهما ثمانية أعمدة للنماذج وأربعة أعمدة خاصة بعرض مزايا التسجيل في الموقع، التصميم يبدو مقبولًا على الشاشات المتوسطة والكبيرة ولكن عندَ عرض الصفحة على أجهزة الشاشات الصغيرة ستُعرض النماذج قبل العمود الخاص بالمزايا (features)، وهذا ما لا نُريده.

  <div class="row">
      <div class="medium-8 columns"> <!--عمود النماذج يُعرض أولًا في الشاشات الصغيرة وعلى يسار الصفحة في الشاشات المُتوسطة والكبيرة-->
        <form>
          <div class="row">
            <div class="large-6 columns">
              <input type="text" placeholder="First name" />
            </div>
            <div class="large-6 columns">
              <input type="text" placeholder="last name" />
            </div>
          </div>
          <!-- بقية النماذج -->
        </form>
      </div>
      <div class="medium-4 columns"> <!--عمود المزايا يُعرض بعد النماذج في الشاشات الصغيرة وعلى يمين الصفحة في الشاشات المُتوسطة والكبيرة-->
        <aside>
          <div class="panel">
            <h5>Features</h5>
            <a href="#">Read More →</a>
          </div>
        </aside>
      </div>
    </div>

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

    <div class="row">
      <div class="medium-4 columns"> <!--عمود المزايا يُعرض أولًا وعلى يسار الصفحة-->
        <aside>
          <div class="panel">
            <h5>Features</h5>
            <a href="#">Read More →</a>
          </div>
        </aside>
      </div>
      <div class="medium-8 columns"> <!-- عمود النماذج يُعرض بعد عمود المزايا وعلى يمين الصفحة-->
        <form>
          <div class="row">
            <div class="large-6 columns">
              <input type="text" placeholder="First name" />
            </div>
            <div class="large-6 columns">
              <input type="text" placeholder="last name" />
            </div>
          </div>
          <!-- بقية النماذج -->
        </form>
      </div>
    </div>

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

لتصحيحِ العرض على الشاشات الكبيرة والمُوسطة سوف نستخدام أصناف السحب والدفع، سنقوم بدفع عمود المزايا ثمانية أعمدة إلى اليمين باستخدام الصنف medium-push-8، وسحب عمود النماذج أربعة أعمدة إلى اليسار باستخدام الصنف medium-pull-4، وذلك يجعلُ من التصميم كما كان سابقًا على الشاشات الكبيرة والمتوسطة.

    <div class="row">
      <div class="medium-4 columns medium-push-8"> <!-- أيها الشريط الجانبي الرجاء التكرّم بالانتقال ثمانية أعمدة إلى اليمين في الشاشات المتوسطة والكبيرة -->
        <aside>
          <div class="panel">
            <h5>Features</h5>
            <p>Registration is free</p>
            <p><span data-tooltip class="has-tip" title="Just important notifications">No spam</span></p>
            <a href="#">Read More →</a>
          </div>
        </aside>
      </div>
      <div class="medium-8 columns medium-pull-4"> <!-- أيتها النماذج الرجاء التكرّم بالانتقال أربعة أعمدة إلى اليسار في الشاشات المتوسطة والكبيرة-->
        <form>
          ...
        </form>
      </div>

لم نستطع استخدام أصناف السحب والدفع من البداية، بل كان علينا ترتيب المُحتوى كما نريده على أجهزة الشاشات الصغيرة أولًا (تذكّر أنّ Foundation يستهدف أجهزة الهاتف المحمول أولًا (mobile-first)) ثم استخدام أصناف السحب والدفع ثانيًا.

النظام الشبكي باستخدام القِطَع Block Grid

وهو نظامٌ شبكيٌ آخر يُقدمه Foundation للتعامل مع توزع الأعمدة بأقلِ قدر مُمكن من الكتابة، وهو شائع الاستخدام مع الصّور المُصغّرة (thumbnails)، ويقوم هذا النظام الشبكي بتوزيع عناصر القوائم (<li>) بشكل مُتساوي على عرض الصفحة مهما كان حجم الشاشة، على عكسِ ما يفعل النظام الافتراضي باستخدام max-width لكل صفّ، حيث يُوزع الصنف large-block-grid-3 ثلاثة عناصر على عرض الصفحة في الشاشات الكبيرة، ويُمَكنك هذا النظام من تحديد عدد العناصر كيفما تشاء في الصفّ الواحد والجمع بين الأصناف الثلاثة small وmedium وlarge، والأصناف تُطبق على قائمة غير مرتبة <ul>.

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

عرض الصور في الشاشات الكبيرة والمتوسطة والصغيرة سوف يظهر كما في الصور اللاحقة وهي على الترتيب، أما بالنسبة للشيفرة فسوف نستخدم ثلاثة أصناف هي كالتّالي:

• الصنف large-block-grid-4 يعرض أربعة عناصر بجانب بعضها البعض في الشاشات الكبيرة.
• الصنف medium-block-grid-3 يعرض ثلاثة عناصر بجانب بعضها البعض في الشاشات المتوسطة.
• وأخيرًا الصنف small-block-grid-2 يعرض عنصرين فقط بجانب بعضهم البعض في الشاشات الصغيرة.

الشيفرة بشكلها الأخير المُستخدمة في صفحة المعرض ستكون على النحو التّالي:

    <div class="row">
      <div class="large-12 columns">
        <ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
          <li><a href="img/th1.jpg" class="th"><img src="img/th1.jpg"></a></li>
          <li><a href="img/th2.jpg" class="th"><img src="img/th2.jpg"></a></li>
          <li><a href="img/th3.jpg" class="th"><img src="img/th3.jpg"></a></li>
          <li><a href="img/th4.jpg" class="th"><img src="img/th4.jpg"></a></li>
          <li><a href="img/th5.jpg" class="th"><img src="img/th5.jpg"></a></li>
          <li><a href="img/th6.jpg" class="th"><img src="img/th6.jpg"></a></li>
          <li><a href="img/th7.jpg" class="th"><img src="img/th7.jpg"></a></li>
          <li><a href="img/th8.jpg" class="th"><img src="img/th8.jpg"></a></li>
        </ul>
      </div>
    </div>

أصناف الظهور Visibility Classes

تُقدم أصناف الظهور إمكانية إظهار أو إخفاء مُحتوى مُعين بناءً على معايير عدّة مثل حجم الشاشة واتجاه الجهاز هل هو في الوضع العموديّ (portrait) أم الأفقيّ (landscape) وهل تعمل شاشة الجهاز باللمس أم لا.

الأصناف المُستخدمة في التحكم بالظهور سهلة الحفظ والاستخدام، فلإظهار المُحتوى للشاشات الصغيرة سوف نستخدم الصنف show-for-small-only، ولإظهار المُحتوى للشاشات المُتوسطة والأكبر سنستخدم الصنف show-for-medium-up، وللإخفاء استخدم الكلمة show بدل hide، حيثُ سيُخفي الصنف hide-for-small-only المُحتوى للشاشات الصغيرة فقط.

وللتحكم بالظهور بناءً على اتجاه الشاشة نستخدم الصنفين show-for-landscape وshow-for-portrait، وللشاشات اللمسية نستخدم الصنفين show-for-touch وhide-for-touch.

في متجرنا وفي صفحة المُنتج بالتحديد، لدينا نُبذة عن المُصور ووسائل الاتصال الخاصة به، من بريد الكتروني ورقم هاتف. ما نريده هو عدم ظهور رقم الهاتف في الأجهزة اللوحية وأجهزة سطح المكتب، والابقاء على الرقم في أجهزة الجوّال، ولتحقيقِ ذلك سوف نستخدم الصنف hide-for-medium-up.

     <h2>About the photographer</h2>
      <p>Mohamad Abras is the best photographer on earth.</p>
      <p><a href="mailto:mohamad.abras@sawrha.com">Email me</a></p>
      <p class="hide-for-medium-up"><a href="tel:+33333333">Call me</a></p>

http://codepen.io/anon/pen/PwWXZv

أصناف الظهور ملائمة جدًا للتحكم بالمُحتوى الكتابي، ولكنها ليست مناسبة للتحكم بالصور، فعلى الرّغم من أنّك تستطيع استخدام الصنف hide-for-small-only مع صورة ما، فإنّ هذه الصورة سوف تُنزّل في الخلفيّة وستُحسب تكلفة حجمها المستخدم رغم عدم ظهورها على المتصفح، قد يُغريك سهولة التعامل مع هذه الأصناف ولكن المُطوّر المُحترف سوف يتعاملُ مع هذه المُشكلة باستخدام مفهوم "التبادل" (Interchange) والذي قدّمه Foundation في الإصدار الخامس والذي سوف نتحدث عنه في الجزء الأخير من السلسلة.

مُلاحظة بإمكانك اختبار اتجاه الجهاز وشاشة اللمس باستخدام محاكي أدوات المُطوّرين الخاص بالمتصفح Chrome.

تعرفنا من خلال الجزء الثاني من السلسلة على كل ما يتعلق بالنظام الشبكي، بعد الانتهاء من هذا الجزء وتطبيق بعض الأمثلة العمليّة من المُفترض أن تكون على درايةٍ كاملةٍ بالنظام الشبكي في Foundation، وفي الجزء الثالث من السلسلة سوف نتعرف على كل ما بتعلق بنظام التنقل (navigation)، بدءًا من الشريط العلوي وانتهاءً بتجزئة المحتوى على صفحات (pagination).

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

التنقل Navigation

شريط التنقل الرئيسي والقوائم المُنسدلة Navigation Menus and Dropdowns

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

يَستخدم Foundation الصنف top-bar مع خاصية المعلومات data-topbar للوسم <nav> لإنشاء الشريط، والصنف top-bar مسؤولٌ عن تحديدِ حجم وموقع الشريط أعلى الصفحة وإضافة خلفية سوداء له، ويتألف بناء الشريط العلوي من قائمة غير مُرتبة <ul> و قسم <section>، وتحتوي القائمة على عنصر خاص لعنوان الموقع والأصناف الخاصة بالشريط في الوضع المُصغر وهو toggle-topbar الذي يُخفي كلمة Menu في الوضع العادي وإظهارها في الوضع المُصغر، والصنف menu-icon وهو من أجل ما يُعرف برمز الهامبرغر (الخطوط الأفقية الثلاثة) في الوضع المُصغر، ولك حرية استخدامه أو حذفه.

أما القسم <section> ففيه يتم إنشاء القوائم الرئيسة والقوائم المُنسدلة، وله الصنف top-bar-section، والذي يُعطي عناوين القوائم اللون الأبيض، وتُنشئ القوائم عبر العنصر <ul>، ويُمكن التحكم بموضع القائمة بالصنفين right وleft، وللإشارة إلى الصفحة الحالية نستخدم الصنف active لعناصر القائمة <li>، ويُمكن أن تحتوي كل قائمة رئيسة قائمة مُنسدلة، وكل قائمة مُنسدلة قائمة منسدلة داخلية، ولإنشاء قائمة مُنسدلة نضيف الصنف has-dropdown إلى القائمة الرئيسة، وذلك من شأنه أن يضيف مثلثًا صغيرًا يشير إلى أنّ القائمة مُنسدلة، ولكل قائمة مُنسدلة سوف نُضيف لها الصنف dropdown الذي يقوم بإخفاء العناصر <li> من العرض وإظهارها عند المرور (hover) فقط، ويمكنك الفصل بين العناصر عن طريق الصنف divider.

يأخذ الشريط العلوي عرض المتصفح بالكامل بشكل افتراضي، ويُستخدم الصنف contain-to-grid لجعل عناصر الشريط العلوي متجانسةً مع النظام الشبكي، حيث العرض هو 1000 بكسل، والصنف fixed يُثبت الشريط العلوي أعلى الصفحة مهما تم التدرّج إلى أسفلها.

في متجرنا لدينا الشريط العلوي مُعرف كالتالي:

    <div class="contain-to-grid fixed">
      <nav class="top-bar" data-topbar role="navigation">
        <ul class="title-area">
          <li class="name">
            <h1><a href="#">Sawrha</a></h1>
          </li>
          <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
        </ul>

        <section class="top-bar-section">
          <ul class="right"> <!--القوائم يمين الصفحة-->
            <li class="active"><a href="#">Home</a></li> <!--الصنف "نشطّ للإشارة إلى الصفحة الحالية-->
            <li class="has-dropdown">
              <a href="#">Pages</a>
              <ul class="dropdown">
                <li><a href="#">Regiseration</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Gallery</a></li>
              </ul>
            </li>
          </ul>
        </section>
      </nav>
    </div>

لاحظ أننا استخدمنا الصنف contain-to-grid لتسوية عناصر الشريط مع النظام الشبكي، والصنف fixed لتثبيت الشريط أعلى الصفحة بشكل دائم والفرق بين استخدام الصنف contain-to-grid وعدم استخدامه موضّح في الصور التالية.

الشريط كما سوف يظهر على الشاشات المتوسطة والكبيرة.

يَسدل الشريط العلوي القوائم المُنسدلة عند المرور عليها (hover) بشكل افتراضي، وبإمكانك تغيير هذا السلوك عن طريق "خاصية المعلومات" data-options مُعطاةً القيمة "is_hover: false"، الذي سوف يجعل من القائمة تُنسدل بعد الضغط عليها.

يُتيح أيضًا الشريط العلوي إمكانية إضافة أزرار وعناصر إدخال <input> وذلك عبر الصنف has-form، ويُمكن الفصل بين العناصر باستخدام الصنف divider، ولإزالة الحشو (padding) بين المُدخل (input) والزر بإمكاننا استخدام الصنف collapse.

في متجر صوّرها سوف نضيف خانة بحث للصورة في الشريط العلوي.

<li class="divider"></li> <!-- فاصل بين القوائم وخانة البحث -->
<li class="has-form right"> <!-- عنصر قائمة لخانة البحث وعلى يمين الصفحة -->
<div class="row collapse"> <!-- لإزالة المسافة بين المُدخل والزر -->
  <div class="large-8 small-9 columns">
    <input type="text" placeholder="Find photo">
  </div>
  <div class="large-4 small-3 columns">
    <a href="#" class="button expand">Search</a>
  </div>
</div>
</li>

لاحظ المسافة بين الزر وخانة البحث في حال عدم استخدامنا للصنف collapse.

الفاصل بين القوائم.

مثال حي http://codepen.io/anon/pen/zxZXZw يُوضح المسافة بين الزر وخانة البحث.

الشريط العلوي بشكله النهائي سيكون كالتالي.

مثال حي http://codepen.io/anon/pen/OPWavB

شريط التّنقل الجانبي (Side Nav)

يُقدم Foundation الصنف side-nav لإنشاء "شريط تنقّل جانبي" باستخدام قائمة غير مرتبة (<ul>)، ويَستخدم Foundation هذا الشريط في التوثيق الرسمي الخاص به، ويُمكنك استخدام الصنف active للوسم<li> للإشارة إلى الصفحة الحالية، والصنف divider لعمل فاصل بين القوائم.

   <h5>Categories</h5>
    <ul class="side-nav">
      <li><a href="#">Snow</a></li>
      <li><a href="#">Green</a></li>
      <li><a href="#">Sky</a></li>
      <li><a href="#">Rainbow</a></li>
      <li><a href="#">Misc</a></li>
    </ul>

مثال حي http://codepen.io/anon/pen/azpPBE

التبويبات والتبويبات القابلة للطيّ (Tabs and Accordions)

يُمكنك Foundation من إنشاء تبويبات أُفقية وعمودية، وهي عناصر تُساعدك على تنظيم وعرض أكثر من مُستند داخل حاوية واحدة والتبديل/التنقل فيما بينها، ولإنشاء تبويبات أفقية نستخدم عنصر قائمة وصف (<dl>) مع الصنف tabs والخاصية data-tab، ويُظهر الصنف vertical التبويبات بشكل عمودي، حيث أنها أفقية بشكل افتراضي. كما تدعم هذه التبويبات ميزة الربط العميق (deep linking)، والتي تُتيح لك إنشاء رابط لأحد التبويبات وتَدرّج (scroll) المتصفح إلى التبويب المُختار.

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

    <div class="row">
      <div class="large-12 columns">
        <dl class="tabs" data-tab> <!--التبويبات سوف تكون أفقية لأننا لم نستخدم الصنف عمودي-->
          <dd class="active"><a href="#panel1">Info</a></dd> <!--الصنف "نشط" للدلالة على أن هذا التبويب هو التبويب الحالي-->
          <dd><a href="#panel2">Comments</a></dd> <!--ربط هذا التبويب مع المحتوى الموافق له -->
          <dd><a href="#panel3">Rating</a></dd> <!--ربط هذا التبويب مع المحتوى الموافق له -->
        </dl>
        <div class="tabs-content"> <!--يحتوي هذا القسم جميع محتويات التبويبات الثلاثة -->
          <div class="content active" id="panel1"> <!--التبويب الأول-->
            <h2>About the photographer</h2>
            <p>Mohamad Abras is the best photographer on earth.</p>
            <p><a href="mailto:mohamad.abras@live.com">Email me</a></p>
            <p class="hide-for-medium-up"><a href="tel:+33333333">Call me</a></p>
          </div>
          <div class="content" id="panel2"> <!--التبويب الثاني-->
            <p>Wow! Its the best photo I have ever seen.</p>
          </div>
          <div class="content" id="panel3"> <!--التبويب الثالث-->
            <p>Five star</p>
          </div>
        </div>
      </div>
    </div>

بإمكاننا تحسين النّص السابق بشكل أفضل من ذلك، حيث أنها الآن لا تسمح لك بإنشاء روابط عميقة للتبويبات، أي أنك لا تستطيع إنشاء رابط مُباشر للتعليقات الخاصة بالصورة مثلًا، والتبويب Info هو الذي سيُعرض دائمًا بعد تحميل الصفحة، ولكن بعد إضافة خاصية المعلومات data-options والقيمة "deep_linking:true"، ستتمكن من إنشاء رابط مُباشر لأحد التبويبات وفي حال كان هذا التبويب أسفل الصفحة سيقوم المتصفح بالتدرّج (scroll) إلى التبويب المُختار.

   <dl class="tabs" data-tab data-options="deep_linking:true">

مثال حي http://codepen.io/anon/pen/jEyXyq

يُقدم Foundation "التبويبات القابلة للطي" (accordions) وهي تُشبه التبويبات التقليديّة (tabs)، ولكن الاختلاف بينها هو على مُستوى تجربة المُستخدم User Experience، حيث أن محتويات التبويب القابل للطيّ يجب أن تكون ضئيلة الحجم ولا تستدعي من المُستخدم النزول والصعود في المتصفح (scroll down/up) على عكس التبويبات التقليدية التي من المُمكن أن يكون المحتوى الخاص بها على طول الصفحة دون التأثير على تجربة المُستخدم، أيضًا التبويبات القابلة للطيّ مناسبة جدًا للشاشات الصغيرة وبطبيعة الحال أجهزة الهاتف المحمول، يُمكن قراءة المزيد عن الفروقات هنا .يَستخدم Foundation في اعداد هذه التبويبات الصنف accordion وخاصية المعلومات data-accordion مع قائمة غير مرتبة (<ul>)، والصنف accordion-navigation لكل عنصر من عناصر القائمة (<li>).

<dl class="accordion" data-accordion>
  <dd class="accordion-navigation">
    <a href="#panel1b">Accordion 1</a>
    <div id="panel1b" class="content active">
      ...
    </div>
  </dd>
  <dd class="accordion-navigation">
    <a href="#panel2b">Accordion 2</a>
    <div id="panel2b" class="content">
      ...
    </div>
  </dd>
  <dd class="accordion-navigation">
    <a href="#panel3b">Accordion 3</a>
    <div id="panel3b" class="content">
      ...
    </div>
  </dd>
</dl>

مثال حي http://codepen.io/anon/pen/ogZbyQ

مسار التنقل (Breadcrumbs)

يُستخدم "مسار التنقل" (breadcrumbs) كثيرًا في أنظمة إدارة المُحتوى مثل WordPress، وخاصةً عندما يكون تسلسل الصفحات طويلًا ومتشعبًا، ويُقدم Foundation الصنف breadcrumbs والذي يُضاف إلى قائمة غير مرتبة (<ul>) والصنفين current وunavailable لتحديد حالة عناصر القائمة. كما يُتيح Foundation إضافة الصنف breadcrumbs إلى العنصر nav أيضًا.

    <ul class="breadcrumbs">
      <li><a href="#">Home</a></li>
      <li><a href="#">Features</a></li>
      <li class="unavailable"><a href="#">Last Photos</a></li> <!-- الصنف "غير مُتوفر للإشارة إلى أن المسار غير مُتوفر -->
      <li class="current"><a href="#">High Rating</a></li> <!-- الصنف "الحالي" للإشارة إلى المسار الحالي -->
    </ul>

سوف نحصل على نفس النتيجة في حال استخدامنا الوسم <nav>

    <nav class="breadcrumbs">
      <a href="#">Home</a>
      <a href="#">Features</a>
      <a class="unavailable" href="#">Last Photos</a>
      <a class="current" href="#">High Rating</a>
    </nav>

شريط التنقل الفرعي (Sub Nav)

يُستخدم "شريط التنقل الفرعي" بشكل شائع مع تصفية مُحتوى، ويُنشئ باستخدام الصنف sub-nav مُضافًا إلى "قائمة وصف" (<dl>)، والصنف active للدلالة على الاختيار الحالي.

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

    <div class="row">
      <div class="large-12 columns">
        <dl class="sub-nav">
          <dt>Filter:</dt>
          <dd><a href="#">All</a></dd>
          <dd><a href="#">New</a></dd>
          <dd class="active"><a href="#">Feature</a></dd>
        </dl>
      </div>
    </div>

ترقيم الصفحات (Pagination)

يُستخدم "ترقيم الصفحات" (pagination) بشكل شائع على الرغم من انتشار تقنية AJAX والتحميل التلقائي، ويُقدم Foundation الصنف pagination للعنصر <ul> والصنف unavailable لإزالة تأثير المرور (hover) لعناصر القائمة <li> وجعلِها غير قابلة للنقر (unclickable)، أمّا الصنف pagination-centered فهو يُظهر "ترقيم الصفحات" في منتصف الصفحة.

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

    <div class="row">
      <div class="pagination-centered"> <!-- ترقيم الصفحات في المُنتصف -->
        <ul class="pagination">
          <li class="arrow unavailable"><a href="">&laquo;</a></li>
          <li class="current"><a href="">1</a></li> <!-- الصفحة الأولى هي الصفحة الحالية -->
          <li><a href="">2</a></li>
          <li><a href="">3</a></li>
          <li><a href="">4</a></li>
          <li class="unavailable"><a href="">&hellip;</a></li>
          <li><a href="">12</a></li>
          <li><a href="">13</a></li>
          <li class="arrow"><a href="">&raquo;</a></li>
        </ul>
      </div>
    </div>

مثال حي http://codepen.io/anon/pen/wBJdRr

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

المُقدّمة

‏Foundation هو إطار عمل مُتجاوب (responsive) لجهة العميل (client-side)، أنشأتهُ شركة Zurb عام 2011 لتسهيل إنشاء المواقع، يُمكّنك Foundation من بناء موقعك بشكل سريع ممّا يزيد من إنتاجية التطوير، حيث يُقدم الإطار نصوص CSS جاهزة وقابلة للتعديل لتناسب أغلب المشاريع.

تُقدم شركة Zurb حلولًا للمطوّرين بجانب إطار العمل Foundation، حيث هناك العديد من الإضافات التي تختبرها Foundation في مختبراتها والتي تطلق عليها اسم playground والتي تحتوي على خطوط الأيقونات (Icon Fonts)، وأيقونات الشبكات الاجتماعية (Social Web Icons)، والرسوم البيانية، ومخططات لإنشاء نماذج بدئيّة (prototypes)، وقوالب البريد الالكتروني، والعديد منها بإمكانك أن تجده هنا، كما تُقدم شركة Zurb حزمة تطبيقات ويب مجانية ومدفوعة.

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

يَدعم Foundation جميع المُتصفحات ما عدا IE في إصداره السابع والثامن، والصورة التّالية من التوثيق الرسميّ تُوضّح توافق الإطار مع مُختلف المُتصفحات.

‏Foundation أم Bootstrap؟

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

إن كنت من مُحبي الأرقام، الترتيب التالي يُوضح أشهر أُطر العمل تقييمًا على موقع GitHub:

• ‏Bootstrap‏: أكثر من 78000 نجمة.

• ‏Foundation‏: أكثر من 19000 نجمة.

• ‏Semantic UI‏: أكثر من 15000 نجمة.

• ‏Pure‏: أكثر من 10000 نجمة.

• ‏Skeleton‏: أكثر من 7000 نجمة.

• ‏UIkit‏: أكثر من 4000 نجمة.

التحميل

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

في المجلد المُسمى css يوجد ثلاثة ملفات CSS، وهي foundation.css ويحتوي نسخة كاملة مقروءة من أنماط الإطار، والملف foundation.min.css والذي يحتوي على نسخة كاملة مُقلّصة (minified) من أنماط الإطار، حيث تم حذف جميع الفراغات والتعليقات لتصبح أصغر حجمًا، والملف الثّالث هو normalize.css ويُستخدم عادةً لتسوية المتصفحات على سوية واحدة، وهو ليس خاصًّا بـFoundation.

في المجلد js سوف تجد ملفّ JavaScript يحمل الاسم foundation.min.js وهو بشكل مُقلّص، أي غير مقروء، ويحتوي كافّة خصائص الإطار، أمّا المجلد foundation ففيه كافّة مُحتويات المَلفّ السابق ولكن بشكل مُجزّأ، بحيث يكون لكل إضافة ملف مُستقل، وكلّ من هذه الملفّات مقروء وبإمكانك استخدام أيٍّ من هذه الملفات دون الآخر، أمّا المجلد vendor فيحتوي ملفات المكتبات المستخدمة في الإطار مثل مكتبة jQuery ومكتبة Modernizr‏ والتي تُستخدم في استكشاف ميزات HTML5 وCSS التي يَدعمها المتصفح.

المتجر

سوف نعمل طيلة السلسلة على مشروع متجر بسيط لبيع الصور الفوتوغرافية نُسمّيه "صوّرها"، نستعرض من خلاله ميزات هذا الإطار، والميزات التي يُمكننا تطبيقها عليه، لا تتطرق السلسلة إلى أساسيات CSS ولا JavaScript، وسيقتصر التركيز الإطار نفسه.

سنستدعي ملف الإطار والمكتبات المُساعدة في أعلى مُستند HTML في الوسم <head> بالشكل التالي:

• الإطار مُقلّصًا، لنحصل على أصغر حجم مُمكن.
• ملفّ CSS الخاصّ بالتعديلات والتي سوف تكون مُستقلة عن الإطار لنُحافظ عليها في حال تحديث الإطار.
• ملف JavaScript الخاص بمكتبة Modernizr.

سنستدعي ملفّ الإطار الكامل وبالحجم المُصغر ومكتبة jQuery في أسفل مُستند HTML، لتحميل الصفحة بشكل أسرع دون انتظار ملفات JavaScript.

    <link rel="stylesheet" href="css/foundation.min.css"/>
    <link rel="stylesheet" href="css/mycss.css"/>
    <script src="js/vendor/modernizr.js"></script>
    ...
    <!--أسفل الصفحة-->
    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>

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

    <script src="/js/foundation.dropdown.js"></script>
    <script src="/js/foundation.tab.js"></script>

يتكوّن المتجرالذي سوف نعمل عليه خلال هذه السلسلة من خمسِ صفحات هي:

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

الهدف من المتجر هو عرض ميزات إطار العمل Foundation وليس تصميم المتجر بحد ذاته، فالمتجر مُصمّمٌ بأبسط الإمكانيات وللتوضيح فقط. سوف نستخدم متصفح Chrome طوال السلسلة ولك حريّةُ استخدام متصفحك المُفضل (أقصد Chrome :)) والصور التّالية هي لبعض الصفحات التي سوف نحصل عليها بعد انتهاء السلسلة.

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

تحسين أداء المواقع التي نقوم بتصميمها هي عملية مُستمرة، بداية تخلصنا من الجداول، من صور spacer gifs ومن إضافة الأنماط بشكل مُباشرة إلى الصفحات، حيث أننا تخصلنا مثلا من استعمال الوسم <font> وتحويل ما يُمكن تحويله إلى ملفات CSS، كما أننا قلصنا أحجام صفحاتها وفصلنا ما بين الصفحة وما بين أنماط ظهور مُكوناتها. وبعد ذلك أولينا اهتماما بطلبات DNS، وبالتخزين المؤقت caching وبالعدد الكلي للملفات وهو ما نتج عنه استخدام تقنية CSS sprites وذلك عبر تجميع مجموعات من الصور الصغيرة في ملفات مُشتركة.

بعد أن استغلينا التقنيات السابقة إلى أقصى حدودها، حان الوقت الآن للولوج إلى عصر جديد من تحسين أداء مواقعنا: خطوط الأيقونات symbol fonts.

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

تفاصيل أكثر دقة وتصفح أنعم

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

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

استخدام وتضمين الرسوم المُوجهة vector graphics في صفحات HTML كان محدودًا فيما سبق. صحيح بأنه بإمكان القيام بذلك عبر PDF وSVG لكن استخدامهما يُسبب عادة مشاكل في التوافقية ما بين المُتصفحات، وبحكم أن الخطوط عبارة عن رسوميات مُوجهة vector وكل المُتصفحات بما فيها IE6 تدعم إمكانية تصيير خُطوط مُضمنة في صفحات HTML فإنه بالإمكان الاعتماد عليها لتوفير أشكال عالية الجودة تكون مدعومة على جميع المُتصفحات، وهو أمر فتح المجال لنا لنمضي قدما في تحسين مواقعنا بشكل أفضل وتوفير تجربة استخدام أرقى للمُستخدم.

قابلية الوصول

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

العديد من خطوط الأيقونات الأولى التي شُرع في استخدامها كانت تقوم بالربط ما بين أشكالها وبعض حروف ASCII. فعلى سبيل المثال لدى الضغط على مفتاح w ستظهر صورة مُصغرة للكرة الأرضية ولدى الضغط على مفتاح m يظهر ظرف رسالة. هذا الأمر سهل من معرفة أي رمز يُمثل أي شكل وذلك بمُجرد الضغط على ذلك الزر على لوحة المفاتيح. لكن مشاكل هذه التقنية تظهر بُمجرد أن تفشل الصفحة في تحميل ملف الخطوط حيث ينتهي بنا المطاف مع صفحة تحتوي حروفا في أماكن مُتفرقة من الصفحة لا تحمل أية دلالة أو معنى. فعلى سبيل المقال لو كان الخط الذي تستخدمه يهدف إلى إظهار سهم صغير أمام عبارة Next فإنه من المُحتمل أن تستعمله على النحو التالي:

<div><span class="icon">L</span> Next</div>

لكن لو فشلت الصفحة في تحميل ملفات CSS، JavaScript أو ملف الخطوط فإن ما سيظهر على الصفحة هو حرف L بدل ذلك السهم. حتى ولو وجدت طريقة ما باستخدام JavaScript وCSS (بفضل :before و:after) لإظهار السهم على النحو الذي تريده فإن عناكب مُحركات البحث ستعجز عن فهم ذلك وستظل تُؤرشف مُحتوى صفحتك على الشكل "L Next”، وهو أمر لن ترغب فيه.

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

سأزيدك من الشعر بيتا، بإمكاننا تحسين هذه التقنية أكثر. تملك الخطوط عادة محارف خاصة يُطلق عليها اسم ligatures، هذه المحارف التي يندر أن تلمحها العين غير المُدربة بشكل جيد، تُستعمل لربط حرفين مُختلفين في حرف واحد لتسهيل قراءتهما. فعلى سبيل المثال لو كتبت حرفي f متتاليين فإنه من المُحتمل جدا – لو كنت تستخدم خطا عالي الجودة- أن تظهر على هيئة حرف ff واحد يربط ما بين الحرفين بلمسة جمالية. هناك عدة محارف مُدمجة شائعة مثل ff، fl أو fi إلا أنه لا يوجد ما يمنعك من إضافة محارفك الخاصة بك، حيث أنه من المُمكن إضافة ذلك في ملف الخط الخاص بك وبمُجرد أن تتم كتابة تلك الحروف بالترتيب الذي ترغب فيه يتم استبدالها بمحرفك الخاص، حتى أنه يُمكنك إضافة محرف جديد يُظهر شعار موقعك لدى كتابتك لجملة أو كلمة متعددة الحروف (كـ webtuts.me مثلا).

ما الذي يحدث في هذه الحالة؟ المُتصفحات التي لا تقدر على استظهار المحارف المُدمجة -ونقصد بذلك عناكب مُحركات البحث- ستقوم بأرشفة النص غير المُدمج (اسم موقعك في المثال السابق). أما المُتصفحات التي تقدر على ذلك فستقوم بإظهار الشكل المُوجه الذي قمت بتحديده (شعار موقعك مثلا)، وبالتالي فإننا حللنا المشكل السابق باستخدام أفضل ما يوجد في كلا العالمين (عالم المُتصفحات وعالم عناكب مُحركات البحث) بفضل تقنيات أعلى مما يُمكن القيام به بُمجرد HTML وCSS لوحدهما.

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

<ul>
   <li>Home</li>
   <li>Contact</li>
   <li>About</li>
   <li>Cart</li>
</ul>

في حين ستكون النتيجة التي تظهر على النحو التالي:

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

لاستخدام المحارف المُدمجة التي تُستبدل بأيقونات وأشكال عدة استعمالات مُفيدة، فعلى سبيل المثال على موقع شبكة BBC الإخباري كانت تُستخدم ساعة تفاعلية في إحدى زوايا الصفحة الرئيسية. كان بإمكان استخدام Flash لتصميم تلك الساعة أو الاستعانة بـ CSS لإدارة صورة الساعة للحصول على التوقيت المُناسب وتوقيت عمليات التدوير بشيء من JavaScript، لكن خيار BBC وقع على HTML5 وتم استخدام Canvas و JavaScript لتتم إعادة رسم الساعة بشكل مُستمر.

كلا الحلين السابقين يعتمدان على صور لا يُمكن لها أن تظهر بشكل جيد على شاشات عالية الدقة. كان بالإمكان أيضا استخدام بعض مكتبات JavaScript مثل مكتبة Raphaeljs والتي ستقوم بإنشاء رسوميات SVG أو كائنات VML جميلة ومُوجهة، لكن بحكم أن كامل العملية سنتم عبر JavaScript فإن ذلك سيمنع مُحركات البحث والمُتصفحات التي لا تستخدم Javascript من رؤيتها.

لكن استخدام خطوط الأيقونات كان من شأنه أن يُعطي نتائج أفضل في كلا العالمين: قابلية الوصول وجودة الرسوم. فعلى سبيل المثال يُمكن تصميم خط بمُجرد أن نكتب 12:00 تظهر صورة ساعة تُشير إلى هذا الوقت، وكتابة 12:01 ستُظهر صورة أخرى مُختلفة وهكذا دواليك. بالرغم من أن هذه العملية طويلة وشاقة إلا أن نتائجها ستكون أفضل بكثير، بل هناك بعض الخطوط التي تقوم بتوفير ساعات مُماثلة. قم بزيارة هذا الموقع وألق نظرة على الشفرة المصدرية وستُبهر ببساطتها.

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

إنشاء خط الأيقونات الخاص بك

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

هذه التطبيقات ليست مُعقدة الاستعمال كثيرا، بل هناك من الخدمات من يسعى لجعل العملية في مُنتهى السهولة مثلما هو عليه الحال مع Icomoon حيث يكفي أن تقوم برفع ملفات SVG الخاصة بأيقوناتك، ربط تلك الأيقونات بمحارف unicode ومن ثم تصدير الخط، كل هذا مُباشرة من خلال مُتصفحك.

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

مشاكل قد تُواجهك لدى استخدام خطوط الأيقونات

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

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

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

لمُواجهة هذا الإشكال اقترحت Apple خطوطا مُتعددة الألوان وهو ما سيسمح بإنشاء رسوم مُوجهة مُتعددة الألوان وإظهارها على صفحات الويب مثلما هو عليه الحال مع خط Apple Color Emoji المُتوفر على نظام OSX Lion، إلا أن هذا الحل يبقى محدودا جدًا بحكم أن توفير خط مُتعدد الألوان يحتاج إلى دعم المُتصفحات له كما سنحتاج إلى أدوات جديد لإنشائها وهو ما سيُؤخر من أية جهود تسعى لتعميم هذه الخطوط الجديدة.

أهلا بكم في عصر جديد

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

ترجمة -وبتصرف- للمقال: The Era of Symbol Fonts لصاحبه Brian Suda (بموافقة من موقع A List Apart وكاتب المقال).