5 وحدات CSS من الممكن انك لم تعرفهم من قبل

5 وحدات CSS من الممكن انك لم تعرفهم من قبل

شبكة الانترنت هى شبكة واسعة الافق وكل يوم فى توسع وهذا يؤدى الى اشياء جديدة ومشاكل جديدة وايضا حلول جديدةلهذا يجب علينا ان نتعلم كل شئ عن الادوات التى معنا حتى الادوات التى لا نحتاجها بالتاكيد سوف ياتى يوم وستحتاجها وفى هذا الموضوع سوف اخبركم على بعض الادوات الموجوده فى CSS التى قد لا تعرفونها وهذه الادوات هيا وحدات قياس pixel و الـ em فلتتابعوا معنا : 

1 : Rem 

هى وحدة قياس em التي تعرف بأنها قيمة الـ font-size (حجم الخط) الحالي للعنصر.

على سبيل المثال، إذا قمت بتعيين حجم الخط للعنصر body، فإن قيمة em لأي عنصر داخل الـ body سوف تكون مساوية لقيمة حجم الخط تلك

في هذا المثال حددنا قيمة font-size للعنصر div لتكون 1.2em وهو ما يعني 1.2 ضعف حجم الخط الموروث، الذي هو في هذه الحالة 14px. فتكون قيمة حجم الخط الناتج هي 16.8px


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

قد تكون هذه هي النتيجة المرغوبة في بعض الحالات، لكنك غالباً ما قد ترغب بمجرد الإعتماد على مقياس واحد. في هذه الحالة، ينبغي أن نستخدم وحدة القياس rem حرف "r" في rem يشير إلى "root" أي الجذر. وتساوي قيمة font-size للعنصر الأساسي وهو ما يمثله غالباً عنصر الـ lhtm

في المثال السابق، ستكون قيمة حجم الخط لجميع عناصر div المتداخلة هيا 16.8px

2: مناسب للتصاميم القائمة على الأعمدة (Grids)

الـ rem ليست فقط مفيدة لتحديد حجم الخط. فعلى سبيل المثال، يمكنك إنشاء نظام أعمدة متكامل (grid system) أو مكتبة ستايل UI بالأعتماد على font-size الخاص بعنصر html الجذري وذلك بإستخدام وحدة القياس rem والإستعانة بتدرج مقياس الـ em في أماكن محددة. وهو ما سوف يتيح لك نظاماً لحجم الخط يمكن توقعه و تنويعه.

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

3: الـ vh و الـ vw

تقنيات تصاميم الأنترنت التجاوبية (responsive web design) تعتمد بشكل كبير على قواعد النسب المئوية. مع ذلك، فإن النسب المئوية ليست دائما الحل الأنجح لكل المشاكل. فمثلاً عرض العنصر في CSS يعتمد على عرض العنصر الأعلى منه مباشرة. ماذا لو أردت إستخدام عرض أو ارتفاع الحجم الكلي لصفحة المتصفح أو مايعرف بإطار العرض (viewport) بدلاً من العرض الخاص بالعنصر الأعلى (parent)؟ هذا بالضبط ما تتيحه لك وحدتي الـ vh و الـ vw 

 

وحدة الـ vh تساوي 1/100 من إرتفاع إطار العرض (viewport). على سبيل المثال، إذا كان ارتفاع المتصفح هو 900px، فإن 1vh سوف يساوي 9px. بنفس الطريقة إذا كان عرض الـ viewport يساوي 750px ، فإن 1vw سوف يساوي 7.5px.

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

تخيل أنك أردت إنشاء عنواناً ما بحيث يملأ العرض الكلي للشاشة. لتحقيق ذلك، سوف نقوم بتعيين font-size بوحدة الـ vw. وبالتالي فأن الحجم سوف يتغير على حسب عرض المتصفح.

4:الـ vmin و الـ vmax

بينما يرتبط كل من الـ vh و الـ vw دائماً بعرض وإرتفاع viewport فإن vmin و vmax يرتبطان بالحد الأقصى أو الآدنى للعرض والإرتفاع و يعتمد هذا على أيهما الأكبر والأصغر. على سبيل المثال، إذا كانت أبعاد المتصفح محددة بقيمة 1100px عرض و 700px طول ، فإن 1vmin سوف يساوي 7px و 1vmax سوف يساوي 11px أما إذا كان العرض محدداً بقيمة 800px و الطول 1080px فإن الـ vmin سوف تساوي 8px بينما سيكون الـ vmax مساوياً لـ 10.8px.

 متى يمكنني استعمال هذه القيم؟


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

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

مزج هذه التقنيات ببعضها البعض يمنح مرونة كبيرة لإستخدام حجم إطار العرض (viewport) بطرق جديدة و ممتعة.

 5: الـ 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، ولكن إذا أردت أن تتحكم في الخط بشكل أكثر دقة فيمكنك التعامل مع هذه العناصر كالتالي:

في الوقت الذي نجد فيه بأن وحدة ex موجودة منذ إصدار CSS1، إلا أنه وعلى الرغم من ذلك فأنك لن تجد أي دعم قوي لوحدة ch. للحصول على مزيد من التفاصيل بخصوص دعم الوحدات، الرجاء الإطلاع على CSS units and values من مدونة إريك ماير

والان قد انتهينا

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