حان الوقت لتبدأ باستخدام وحدة القياس REM

موضوع الوحدة المستخدمة لتحديد حجم النص في CSS قد يولد جدالاً طويلاً. وكالعادة لا يهمني ما تستخدمه طالما أنه يساعدك على إنجاز عملك على أتم وجه، ولكن يبدو أن نجماً جديداً (ليس جديداً جداً) يلوح في الأفق.

حان الوقت لتبدأ باستخدام وحدة القياس REM

المحاربون القدماء:

تعودنا استخدام إحدى وحدتين (أو ربما ثلاثة) لتحديد حجم النص خلال السنوات الماضية:

وحدة PX:

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

body { font-size: 14px; }
h1 { font-size: 24px; }
p  { font-size: 14px; }
li { font-size: 14px; }

ولكن هذا كان محبطاً للمهتمين بقابلية الاستخدام (Usability)، حيث لم تسمح هذه الطريقة للمستخدمين باستخدام ميزة تكبير وتصغير النص التي تقدمها المستعرضات. ظهرت خلال السنوات الماضية ميزة تقريب الصفحة ككل (Zoom) ضمن المستعرضات، مما خفف من أثر هذه المشكلة.

وحدة EM:

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

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

body { font-size: 62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */
li li, li p /* etc */ { font-size: 1em; }

وحدة النسبة المئوية %:

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

وحدة REM الجديدة:

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

html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

ولكن، لا بد أنها ليست مدعومة بما يكفي!

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

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

مترجم بتصرف من Font Sizing with REM

محمود الدعاس

من مواليد دمشق. ابتدأ بعد التخرج كمبرمج ويب عام 2005 مع شركة إيميا، انتقل بعدها إلى شركة تكنوليد للأتمتة المتكاملة ومنها إلى شقيقتها أتمتة للحلول المتقدمة كمصمم غرافيك ومصمم ومطور ويب. أسس مع مجموعة من زملاء الدراسة موقع HOMELESS-PRO.com لنشر قصص مصورة باللغة العربية للشباب، و Guestra كوكالة تصميم وتطوير.

مواضيع الكاتبموقع الكاتب

لمتابعة الكاتب:
TwitterFacebookPinterest

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *