تعلم تطوير الويب وحدات القياس والقيم في CSS

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

ننصحك قبل المتابعة في قراءة هذه المقال أن:

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

ما هي قيم CSS

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

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

ملاحظة: تُستخدم الأقواس الزاوية لتمييز أنواع القيم في CSS عن الخاصيات (تمييز الخاصية color عن نوع القيمة <color>). لهذا، قد تختلط عليك هذه الأنواع مع عناصر HTML أيضًا، فكلاهما يستخدم الأقواس الزاوية، لكن هذا الأمر مستبعد الحدوث لأنهما تستخدمان في سياقيين مختلفين.

ضبطنا في المثال التالي لون العنوان باستخدام كلمة مفتاحية وضبطنا لون الخلفية باستخدام الدالة ()rgb:

h1 {
  color: black;
  background-color: rgb(197, 93, 161);
}

نوع قيمة في CSS هو بمثابة طريقة لتحديد القيم التي يُسمح للخاصية بأخذها، فإذا رأيت مثلًا خاصيةً تأخذ قيمًا من النوع <color>، فلا حاجة لأن تتسائل ما هي الأنواع المختلفة للألوان التي يمكنني استخدامها، هل هي كلمات مفتاحية أو قيم ست عشرية أو دوال ()rgb، إذ يمكنك اختيار أي قيمة لونية تراها مناسبة شرط أن يدعمها المتصفح (ستجد في صفحة كل خاصية في موسوعة حسوب معلومات عن دعم المتصفح لهذه الخاصية وللقيم التي تأخذها).

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

الأرقام والأعداد والنسب المئوية

هنالك العديد من القيم العددية التي قد تستخدمها في CSS، وإليك أنواع هذه القيم العددية:

الأطوال

أكثر أنواع القيم العددية التي قد تصادفك هي الأطوال <length> مثل 10px أو 30em، وهنالك نوعان من الأطوال في CSS، نسبية ومطلقة، لهذا من المهم أن تعرف الفرق بينها لكي تتفهم أحجام الأشياء.

وحدات القياس المطلقة للأطوال

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

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

وحدات الطول النسبية

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

مثال تطبيقي

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

ضُبط حيّز الصندوق الثاني بوحدة القياس vm (حيّز شاشة العرض)؛ إذ تقيس هذه الوحدة حيّز العنصر بالنسبة إلى حيّز شاشة العرض، فعندما نقول 10vw، فهذا يعني أن حيّز الصندوق هو 10 بالمئة من حيّز شاشة العرض (الشاشة التي تعرض عليها الصفحة أو نافذة المتصفح)، وإذا غيّرت حيّز نافذة المتصفح سيتغير حيّز الصندوق. قد لا تتمكن من رؤية ما يحدث هنا لأن الشيفرة مدرجة ضمن هذه الصفحة باستخدام "إطار HTML"

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

حاول أن تستخدم المحرر التفاعلي التالي لتغيير القيم بشتى الطرق وملاحظة الفرق:

وحدة القياس rem ووحدة القياس em

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

تمثّل شيفرة HTML التي ستراها تاليًا مجموعةً من القوائم المتداخلة (ثلاث قوائم) وستتكرر هذه القوائم في شيفرة كلا المثالين، والفرق الوحيد بين المثالين أن الأول يستخدم وحدة em والآخر وحدة rem.

نبدأ تحليل المثالين باستخدام خط حجمه 16px للعنصر <html> ودعونا نتذكر أن:

• em: هي وحدة قياس مأخوذة على أنها نسبةٌ من حجم خط العنصر الأب، وُتطبق مع الخاصيات التي تضبط خط الكتابة، مثل حجم خط الكتابة. في مثالنا: تأخذ العناصر <li> التي تمتلك الصنف ems قيمًا أبعادها بالنسبة إلى حجم خط الكتابة للعنصر الأب وبالتالي سيزداد حجم العناصر في القوائم المتداخلة تدريجيًا لأن كل منها يأخذ الحجم 1.3em، أي سيكون حجم كل قائمة أكبر من حجم القائمة الأعلى (القائمة الأب) بمقدار 1.3مرة.

• rem: هي وحدة قياس مأخوذة على أنها نسبة من حجم خط العنصر الجذري (مأخوذة من root em)، وهكذا ستأخذ عناصر القائمة <li> التي تمتلك الصنف rems قيمًا أبعادها بالنسبة إلى حجم خط الكتابة للعنصر الجذري وهو <html>، وبالتالي لن تتغير أحجام عناصر القوائم المتتالية لأن أبعاد عناصرها ستبقى كما هي، لكن إذا غيّرت حجم خط الكتابة font-size للعنصر الجذري <html> ستتغير أبعاد جميع عناصر القوائم التي تأخذ الصنفين ems و rems في المثال وفقًا لتغير حجم خط كتابة العنصر الجذري.

النسبة المئوية

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

يعرض المثال التالي أربعة صناديق ضُبط حيّز الأول بالبكسل 200px وحيّز الثاني على أنه نسبة مئوية 40%، وتتكرر العملية بالنسبة للصندوقين التاليين. يمتلك الصندوقان اللذان قُدر حيّزهما بنسبة مئوية الصنف percent، ويمتلك الصندوقان المقدران بالبكسل الصنف px، ويتواجد الصندوقان الأخيران ضمن ضمن حاوية حيّزها 400px.

عند عرض الصناديق السابقة سيبدو الصندوق الرابع المقدّر بالنسبة المئوية 40% أقل اتساعاً من الصندوق الثاني المقدر بالنسبة المئوية 40% أيضًا، والسبب أن حيّز الصندوق الرابع هو 40% من حيّز الحاوية 400px التي تضمّه، أما الثاني فهو خارج هذه الحاوية ويأخذ حيّزه 40% من حجم المستند ككل.

حاول أن تغيّر اتساع الحاوية أو النسب المئوية وراقب ما سيحدث.

في مثالنا التالي ضُبط حجم خط الكتابة بالنسبة المئوية، إذ يصبح حجم كل عنصر قائمة 80% وبالتالي سيكون حجم عناصر القوائم المتتالية أصغر كل مرة لأن حجم كل منها هو 80% من حجم عناصر القائمة الأعلى (العنصر الأب):

على الرغم من وجود خاصيات تقبل الأطوال وتقبل النسب المئوية، لكن هنالك بعض الخاصيات التي لا تأخذ سوى الأطوال، لهذا عليك التأكد من كون الخاصية تأخذ قيمًا من النوع <length> أو <percentage> أو كلاهما، فالخاصية التي لا تقبل سوى <length>لا يمكن أن تقبل <percentage>.

الأعداد

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

حاول أن تغير قيمة الخاصية opacity في محرر الشيفرة التالي وأعطها قيمًا عشرية بين 0 و 1، ولاحظ كيف تتغير شفافية الصندوق والمحتوى الذي يضمه.

ملاحظة: عندما تستخدم قيمًا عدديةً في CSS، لا ينبغي أن تُحاط القيمة بإشارتي تنصيص.

الألوان

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

يدعم نظام اللون المعياري المتاح في الحواسيب الحديثة ألوان بدقة 24-بت والتي تسمح بعرض حوالي 16.7 مليون لون مختلف من خلال تشكيل أي لون انطلاقًا من 256 قيمة مختلفة للون الأحمر مع 256 قيمة مختلفة للون الأزرق و 256 قيمة مختلفة للون الأزرق (256x256x256 =16,777,216).لنلق نظرةً الآن على بعض الطرق المستخدمة في تحديد الألوان في CSS.

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

الكلمات المفتاحية للألوان

تُستخدم الكلمات المفتاحية اللونية كثيرًا لكونها طريقة بسيطة وسهلة الفهم مثل red و blue و yellow. هناك عدد محدد من هذا الكلمات المفتاحية ولبعضها أسماء طريفة أيضًا. يمكنك الاطلاع على القائمة الكاملة لهذه الكلمات من خلال صفحة الخاصية color في موسوعة حسوب.

حاول أن تغير ألوان الصناديق والخطوط في محرر الشيفرة التفاعلي التالي باستخدام الكلمات المفتاحية:

قيم الألوان RGB الست عشرية

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

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

حاول تغيير قيم الأرقام في كل شيفرة لونية ست عشرية ولاحظ تغير الألوان.

قيم RGB و RGBA

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

استخدمنا في المثال التالي طريقة RGB لتمثيل الألوان التي عرضناها في المثال السابق:

يمكن أيضًا استخدام نظام RGBA الذي يعمل تمامًا مثل RGB لكنه يضم معاملًا رابعًا يُمثّل ما يُعرف بالقناة ألفا التي تتحكم بقتامة اللون. يأخذ المعامل ألفا أي قيمة عشرية بين 0 (شفافية كاملة) و 1 (قتامة كاملة).

ملاحظة: ضبط القتامة باستخدام دالة RGBA له ميزةٌ فريدةٌ مقارنةً بضبط القتامة من خلال الخاصية opacity؛ إذ يجعل استخدام الخاصية opacity لضبط قتامة عنصر كل ما بداخله بنفس درجة القتامة؛ بينما تحدد الدالة RGBA مع المعامل ألفا قتامة اللون الذي اخترته فقط.

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

حاول أن تغير قيمة القناة ألفا في المثال السابق لتفحص طريقة تأثيرها.

ملاحظة: لم تدعم الدالة ()rgb في الإصدارات القديمة من CSS معامل ألفا، لذلك ينبغي عليك استخدام دالة أخرى هي ()rgba. يمكنك حاليًا تمرير معامل ألفا إلى الدالة ()rgb، ولكن لا تزال صيغة ()rgba مدعومةً للتوافق مع مواقع الويب القديمة، ولها نفس سلوك الدالة ()rgb تمامًا.

قيم HSL و HSLA

يُعد نظام الألوان HSL أقل دعمًا بقليل من RGB (غير مدعوم من قبل إصدارات متصفح إنترنت إكسبلورر القديمة)، وقد جرى تضمين هذا النظام بعد أن أبدى المصممون اهتمامًا كبيرًا به؛ فبدلًا من الأحمر والأخضر والأزرق، تقبل الدالة السطوع hue والإشباع saturation والإضاءة lightness للتمييز بين 16.7 لونًا متاحًا.

• السطوع: يمثل المساحة اللونية الأساسية ويأخذ قيمةً بين 0 و 360 وهي قيمة الزاوية المقاسة على قرص اللون color wheel.
• الإشباع: يمثل إشباع اللون ويأخذ قيمةً بين 0 (لا لون، يظهر مثل مساحة رمادية) و 100% (لون كامل).
• الإضاءة: يمثل إضاءة اللون ويأخذ قيمةً بين 0 (لا إضاءة ويظهر بلون أسود) و 100% (مضاء كاملًا ويظهر باللون الأبيض).

لاحظ المثال السابق باستخدام نظام HSL:

وكما يوجد RGBA مقابل RGB، يوجد HSLA مقابل HSL ليضبط قناة ألفا وبالتالي ضبط القتامة. لاحظ كيف يبدو الأمر في المثال التالي بعد استبدال RGBA بنظام HSLA:

ملاحظة: لم تدعم الدالة ()hsl في الإصدارات القديمة من CSS معامل ألفا، لذلك ينبغي عليك استخدام دالة أخرى هي ()hsla. يمكنك حاليًا تمرير معامل ألفا إلى الدالة ()hsl، ولكن لا تزال صيغة ()hsla مدعومةً للتوافق مع مواقع الويب القديمة، ولها نفس سلوك الدالة ()hsl تمامًا.

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

الصور

تُستخدم الصيغة <image> للإشارة إلى أن الخاصية تقبل صورة قيمةً لها، سواءً كانت الصورة فعلية مصدرها ملف يُشار إليه من خلال عنوان url أو كانت دالة أو خلفية لونية متدرجة.

يعرض المثال التالي استخدام صورة فعلية وخلفية لونية متدرجة من خلال ضبط قيم الخاصية background-image:

ملاحظة: هناك قيم أخرى للنوع <image> لكنها حديثة العهد وضعيفة الدعم من قبل المتصفحات.

الموضع

تمثل القيم من النوع <position-value> مجموعةً من الإحداثيات الثنائية التي تُستخدم لتحديد موضع مثل موضع خلفية عنصر عندما تُستخدم مع الخاصية background-position. يمكن أن تأتي هذه القيم على شكل كلمات مفتاحية، مثل top أو right أو left أو bottom أو center وذلك لمحاذاة المحتوى إلى حدود الصندوق، يليها طول يمثل إزاحة الغرض المطلوب عن الحافة العلوية أو اليسارية للصندوق أو كلاهما.

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

جرّب تغيير هذه القيم وشاهد كيف يمكنك التعديل على موضع الصورة.

النصوص والمحددات

رأينا في الأمثلة السابقة استخدام كلمات مفتاحية بمثابة قيم لبعض الخاصيات، مثل الخاصيات التي تقبل النوع <color>، إذ أمكننا استخدام قيم لونية، مثل red و black وغيرها. توصف هذه الكلمات المفتاحية بطريقة أكثر دقة على أنها معرّفات Identifier وهي قيمة خاصة تفهمها لغة CSS، لهذا لا توضع هذه الكلمات ضمن إشارتي تنصيص، ولا تُعامل على أنها قيم نصية.

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

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

الدوال

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

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

نستخدم في مثالنا التالي الدالة ()calc لجعل حيّز الصندوق ‎20% + 100px. تُحسب %20 من حيّز حاوية العنصر الأب التي بضبطها المحدد wrapper.، وستتغير بتغير هذا الحيّز. لا يمكن تحديد هذه القيمة سلفًا لأننا لا نعلم كم هو تحديدًا %20 من حيّز العنصر الأب، لهذا نستخدم الدالة ()calc:

الخلاصة

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

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

ترجمة -وبتصرف- لمقال CSS values and unites.

اقرأ أيضًا

• المقال السابق: التعامل مع طفحان المحتوى خارج صندوق العنصر باستخدام CSS
• أنواع محددات التنسيق في CSS
• خفايا CSS المُملّة التي يجب عليك الإلمام بها
• رصف العناصر (Layout) في CSS