Arabic (العربية/عربي) translation by Mac Alnakari (you can also view the original English article)
ملاحظة: الشكر للصديق تيمور عبد العزيز لمشاركته في هذه الترجمة.
من السهل أن يجد المرء نفسه آسيراً للعمل بتقنيات الـ CSS المألوفة لديه، إلا أن من شأن ذلك أن يضعه في موقفٍ ضعيف عند ظهور مشاكلَ جديدة.
وكما أن شبكة الانترنت تستمر في النمو، فإن الطلب على حلول جديدة سيستمر في النمو. لذلك، فإننا كمصممي إنترنت و مطوري واجهات تطبيقات، ليس آمامنا من خيار إلا أن نتعرف على أدواتنا، بل و أن نتقنها بشكل جيد.
ويعني هذا، الإلمامُ كذلك بمعرفة الآدوات التخصصية، التي لا يجري استعمالها كثيراً، و لكن عند الحاجة إليها، تكون هي الآداة الآنجح لآداء المهمة.
اليوم، سأعرّفكم على بعض آدوات للـ CSS قد لم تتعرفوا إليها من قبل. كل واحدة من هذه الآدوات هي وحدة قياس مثل الـ pixel و الـ em و من الممكن جداً أنكم لم تسمعوا عنها من قبل! دعونا نتعمق بها.
الـ rem
سوف نبدأ بشئ مشابه لما هو مألوف لديكم مسبقاً. آلا وهو وحدة قياس em والتي تعرف بأنها قيمة الـ font-size (حجم الخط) الحالي للعنصر. لذا، على سبيل المثال، إذا قمت بتعيين حجم الخط للعنصر body، فإن قيمة em لأي عنصر داخل الـ body سوف تكون مساوية لقيمة حجم الخط تلك..
<body> <div class="test">Test</div> </body>
body {
font-size: 14px;
}
div {
font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}
في هذا المثال حددنا قيمة font-size للعنصر div لتكون 1.2em. وهو ما يعني 1.2 ضعف حجم الخط الموروث، الذي هو في هذه الحالة 14px. فتكون قيمة حجم الخط الناتج هي 16.8px.
لكن، ماذا يحدث عندما نحدد حجم الخط باستعمال em للعناصر المتداخلة مع بعضها البعض؟ في المثال التالي سنطبق نفس كود CSS الوارد في المثال السابق. كل div سوف يرث حجم خطه من العنصر الأعلى منه مباشرة (parent)، مما سينتج عنه زيادة تدريجية في حجم الخط.
<body>
<div>
Test <!-- 14 * 1.2 = 16.8px -->
<div>
Test <!-- 16.8 * 1.2 = 20.16px -->
<div>
Test <!-- 20.16 * 1.2 = 24.192px -->
</div>
</div>
</div>
</body>
قد تكون هذه هي النتيجة المرغوبة في بعض الحالات، لكنك غالباً ما قد ترغب بمجرد الإعتماد على مقياس واحد. في هذه الحالة، ينبغي أن نستخدم وحدة القياس rem. حرف "r" في rem يشير إلى "root" أي الجذر. وتساوي قيمة font-size للعنصر الأساسي (الجذري)، وهو ما يمثله غالباً عنصر الـ html.
html {
font-size: 14px;
}
div {
font-size: 1.2rem;
}
في المثال السابق، ستكون قيمة حجم الخط لجميع عناصر div المتداخلة هيا 16.8px.
مناسب للتصاميم القائمة على الأعمدة (Grids)
الـ rem ليست فقط مفيدة لتحديد حجم الخط. فعلى سبيل المثال، يمكنك إنشاء نظام أعمدة متكامل (grid system) أو مكتبة ستايل UI بالأعتماد على font-size الخاص بعنصر html الجذري وذلك بإستخدام وحدة القياس rem، والإستعانة بتدرج مقياس الـ em في أماكن محددة. وهو ما سوف يتيح لك نظاماً لحجم الخط يمكن توقعه و تنويعه.
.container {
width: 70rem; // 70 * 14px = 980px
}
الفكرة وراء إتباع استراتيجية كهذه تكمن في السماح لتصميمك بالتدرج حسب حجم المحتوى الخاص به. ومع هذا، قد لا تكون بالضرورة هي الخيار الأمثل في جميع الحالات.
هل بإمكاني إستخدام هذه الخاصية؟
إطلع على مدى دعم خاصية الـ rem (root em) في موقع caniuse.com
الـ vh و الـ vw
تقنيات تصاميم الأنترنت التجاوبية (responsive web design) تعتمد بشكل كبير على قواعد النسب المئوية. مع ذلك، فإن النسب المئوية ليست دائما الحل الأنجح لكل المشاكل. فمثلاً عرض العنصر في CSS يعتمد على عرض العنصر الأعلى منه مباشرة. ماذا لو أردت إستخدام عرض أو ارتفاع الحجم الكلي لصفحة المتصفح أو مايعرف بإطار العرض (viewport) بدلاً من العرض الخاص بالعنصر الأعلى (parent)؟ هذا بالضبط ما تتيحه لك وحدتي الـ vh و الـ vw.
وحدة الـ vh تساوي 1/100 من إرتفاع إطار العرض (viewport). على سبيل المثال، إذا كان ارتفاع المتصفح هو 900px، فإن 1vh سوف يساوي 9px. بنفس الطريقة إذا كان عرض الـ viewport يساوي 750px ، فإن 1vw سوف يساوي 7.5px.
يمكننا الإستفادة من هذه الخاصية في عدد لامتناهي من الإستخدامات. على سبيل المثال، بالأمكان الحصول على شرائح عرض (Slides) بالإرتفاع الكامل أو الشبه كامل للشاشة وذلك بإستخدام سطر CSS واحد.
.slide {
height: 100vh;
}
تخيل أنك أردت إنشاء عنواناً ما بحيث يملأ العرض الكلي للشاشة. لتحقيق ذلك، سوف نقوم بتعيين font-size بوحدة الـ vw. وبالتالي فأن الحجم سوف يتغير على حسب عرض المتصفح.
هل بإمكاني إستخدام هذه الخاصية؟
إطلع على مدى دعم خاصية وحدات الـ viewport: vw، vh في موقع caniuse.com
الـ vmin و الـ vmax
بينما يرتبط كل من الـ vh و الـ vw دائماً بعرض وإرتفاع viewport، فإن vmin و vmax يرتبطان بالحد الأقصى أو الآدنى للعرض والإرتفاع و يعتمد هذا على أيهما الأكبر والأصغر. على سبيل المثال، إذا كانت أبعاد المتصفح محددة بقيمة 1100px عرض و 700px طول ، فإن 1vmin سوف يساوي 7px و 1vmax سوف يساوي 11px. أما إذا كان العرض محدداً بقيمة 800px و الطول 1080px، فإن الـ vmin سوف تساوي 8px بينما سيكون الـ vmax مساوياً لـ 10.8px.
إذاً، متى يمكنني استعمال هذه القيم؟
تخيل أنك احتجت إلى عنصر يكون دائماً مرئياً على الشاشة. فإن استعمال ارتفاع وعرض محددين بقيمة vmin تحت 100 سوف يتيح لك ذلك. على سبيل المثال، إذا أردنا إنشاء عنصر مربع يكون ملامساً بشكل دائم لجانبي الشاشة على الأقل ، بإمكاننا القيام بذلك على النحو التالي:
.box {
height: 100vmin;
width: 100vmin;
}
إذا احتجت إلى إنشاء صندوق مربع يغطي بشكل كامل الحجم المرئي لإطار العرض viewport (ملامساً الجوانب الأربعة للشاشة في جميع الأوقات)، استخدم نفس الطريقة ولكن بإضافة الـ vmax.
.box {
height: 100vmax;
width: 100vmax;
}
مزج هذه التقنيات ببعضها البعض يمنح مرونة كبيرة لإستخدام حجم إطار العرض (viewport) بطرق جديدة و ممتعة.
هل بإمكاني إستخدام هذه الخاصية؟
إطلع على مدى دعم خاصية وحدات الـ viewport: vmin، vmax في موقع caniuse.com
الـ ex و الـ ch
وحدتي ex و ch شبيهتان بالـ em و rem حيث تعتمدان على الخط الحالي وحجمه. لكن، وعلى عكس الـ em و الـ rem ، فإن هاتين الوحدتين تعتمدان كذلك على نوع الخط font-family، حيث يتم تحديدهما بناءً على مقاييس خاصة بالخط نفسه.
تُعرف وحدة الـ ch أو الـ character كونها "وحدة قياس متقدمة" لحساب عرض خانة الحرف 0. يمكن الاطلاع على نقاش شيق حول ما يعنيه هذا على مدونة إريك مايرز، لكن المفهوم الآساسي لها يتلخص في أنه ولدى تعيين خط أحادى المسافة (monospace)، يتم حساب العرض بناءً على عدد ما من الأحرف، مثلاً width: 40ch; يمكنه دائماً استيعاب سلسلة من 40 حرف من ذلك الخط تحديداً. بينما تتلخص الاستعمالات التقليدية لهذه القاعدة بشكل خاص في التصاميم بلغة برايل (لفاقدي البصر)، إلا أن الامكانيات للابتكار هنا تتخطى بكل تأكيد هذه الاستعمالات البسيطة.
تُعرّف وحدة الـ ex بـ "طول الحرف x للخط المستخدم أو ما يعادل نصف em واحدة". الـ x-height لخطٍ ما هو إرتفاع حرف الـ x الصغيرة من ذلك الخط. عادةً ما يكون ذلك في علامة المنتصف لذلك الخط.
هناك الكثير من الاستعمالات لهذا النوع من وحدات القياس، معظمها للتنسيق الدقيق للخطوط المطبوعة. على سبيل المثال، عنصر الـ sup و الذي يدل على الحرف المكتوب فوق الخط (superscript)، يمكن دفعه للآعلى في السطر باستخدام position relative و قيمة bottom تساوي 1ex. وبنفس الطريقة يمكننا سحب عنصر subscript للآسفل. تستخدم المتصفحات خاصية الـ vertical-align بشكل تلقائي للتعامل مع عناصر superscript و subscript، ولكن إذا أردت أن تتحكم في الخط بشكل أكثر دقة فيمكنك التعامل مع هذه العناصر كالتالي:
sup {
position: relative;
bottom: 1ex;
}
sub {
position: relative;
bottom: -1ex;
}
هل بإمكاني إستخدام هذه الخاصية؟
في الوقت الذي نجد فيه بأن وحدة ex موجودة منذ إصدار CSS1، إلا أنه وعلى الرغم من ذلك فأنك لن تجد أي دعم قوي لوحدة ch. للحصول على مزيد من التفاصيل بخصوص دعم الوحدات، الرجاء الإطلاع على CSS units and values من مدونة إريك ماير
الخلاصة
متابعة التطور والتوسع المستمرين في عالم الـ CSS هو أمر في غاية الأهمية حتى تظل على معرفة وافية بجميع الآدوات التي في جعبتك. فقد تواجهك مشكلةٌ معينة تتطلب حلاً غير متوقع باستخدام إحدى هذه الوحدات أو غيرها من وحدات القياس المغمورة و الغير مشهورة. خصص وقتاً لقراءة المواصفات الجديدة. اشترك للحصول على نشرات الأخبار من مصادر قيمة مثل cssweekly. ولا تنس التسجيل الآن للحصول على النشرات الأسبوعية، الدورات، الدروس والموارد المجانية كهذه المقالة في قسم Web Design على موقع Tuts+.
المزيد للقراءة
المزيد من المعلومات الجيدة عن وحدات CSS.
