خصائص CSS المذهلة التي لا يعرفها أغلب المطورين

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

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

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

1. خلايا فارغة

هذه الخاصية خاصة بالجداول، ويمكنك استخدامها مع border-collapse: separate. تتحكم هذه الخاصية فيما إذا كانت الخلايا التي لا تحتوي على محتوى مرئي تُظهر خلفيتها وحدودها.

إليك جدولًا نموذجيًا، يحتوي على خلية فارغة وأخرى تمتد إلى الخلية التي تقع أسفلها:

<table>
<tr>
<td>Apples</td>
<td>4</td>
</tr>
<tr>
<td>Grapes</td>
<td></td>
</tr>
<tr>
<td rowspan="2">Bananas</td>
<td>4</td>
</tr>
<tr>
<td>9</td>
</tr>
</table>

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

td {
empty-cells: hide;
}

الآن، ستتوقف أي خلايا جدول بدون محتوى مرئي عن عرض أي لون خلفية أو حدود:

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

2. text-underline-position

يستخدم أكثر من أربعة من كل خمسة مواقع إلكترونية خاصية text-decoration، غالبًا للتحكم في كيفية تسطير الروابط. ولكن يمكن استخدام قيمة التسطير لهذه الخاصية مع خاصية أقل استخدامًا، وهي text-underline-position:

a {
text-decoration: underline;
text-underline-position: under;
}

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

”

ملاحظة

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

3.column-span

الأعمدة خاصية CSS قليلة الاستخدام نسبيًا، حيث تظهر في أقل من 3% من صفحات الويب. ولطالما تم تقليدها باستخدام حلول بديلة مثل display: float، إلا أنها عانت أيضًا من عدم الاتساق بين المتصفحات وعدم وضوح فهمها؛ فهي ليست مُصممة للتخطيط العام، أليس كذلك؟

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

تعالج خاصية column-span الحاجة إلى الخروج من تخطيط العمود في منتصف الكتلة، مما يتسبب في امتداد العنصر عبر الأعمدة، وتجاهلها بشكل فعال:

في هذا المثال، يكون الامتداد واضحًا:

h1, h2 { column-span: all }

4. الشبكة

تُعد خاصية الشبكة حالةً مثيرةً للاهتمام. أصبحت تخطيطات الشبكة شائعةً جدًا الآن، ويتجلى ذلك في استخدام grid-template-columns في ٤٢٪ من الصفحات. إلا أن اختصار الشبكة البسيط غير شائعٍ على الإطلاق، حيث يستخدمه أقل من نصف بالمائة من الصفحات.

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

grid: “a” 100px “b” 1fr;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
grid: 30% / auto-flow dense;
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

ليس من المستغرب أن يُفضّل المصممون خصائص فردية مثل grid-template-columns (42%) وgrid-column (23%) وgrid-gap (19%). ولكن، كما هو الحال مع جميع خصائص الاختزال، تُوفّر الشبكة الوقت وتُقلّل من التعقيد، وتُسهّل صيانة CSS. مع ذلك، توخّ الحذر: الإفراط في الاستخدام قد يُسبّب الالتباس، لذا فكّر في استخدام خصائص طويلة مثل grid-auto-flow للتوضيح، عند الحاجة.

5. الحرف الأول

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

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

p {
/* 3 lines tall */
initial-letter: 3;
}
يمكنك أيضًا توفير قيمة ثانية تحدد خط الأساس للحرف الكبير:

p {
/* 2 lines tall, baseline sinks 1 line */
initial-letter: 2 1;
}

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

6. خاصية “تأكيد النص”

لا علاقة لخاصية “تأكيد النص” بعلامة em (التأكيد) أو بقيمة الخط المائل لنمط الخط المستخدمة لمحاكاة مظهر النص المُبرز. بل هي طريقة لتمييز النص لتأكيده، مثل تسطيره. الفرق الرئيسي هو أن خاصية “تأكيد النص” ترسم حرفًا محددًا إما فوق أو أسفل الأحرف الفردية.

p {
text-emphasis: filled double-circle red;
}

.info {
text-emphasis: “!”;
}

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

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

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