إتقان وحدات إطار العرض في CSS: دليل شامل للتصميم المتجاوب

في عالم تطوير الويب دائم التطور، يعد إنشاء تصميمات متجاوبة تتكيف بسلاسة مع مختلف أحجام الشاشات أمرًا بالغ الأهمية. توفر وحدات إطار العرض في CSS (vw, vh, vmin, vmax, vi, و vb) طريقة قوية لتحقيق ذلك، مما يوفر نهجًا مرنًا وقابلًا للتطوير لتحديد أحجام العناصر بالنسبة لإطار العرض. سيتعمق هذا الدليل الشامل في تعقيدات وحدات إطار العرض، مستكشفًا وظائفها وتطبيقاتها العملية وأفضل الممارسات لتنفيذها.

فهم وحدات إطار العرض

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

وحدات إطار العرض الأساسية: vw, vh, vmin, vmax

• vw (عرض إطار العرض): تمثل 1% من عرض إطار العرض. على سبيل المثال، 10vw تساوي 10% من عرض إطار العرض.
• vh (ارتفاع إطار العرض): تمثل 1% من ارتفاع إطار العرض. وبالمثل، 50vh تعادل 50% من ارتفاع إطار العرض.
• vmin (الحد الأدنى لإطار العرض): تمثل القيمة الأصغر بين vw و vh. إذا كان إطار العرض أعرض من ارتفاعه، فستكون vmin مساوية لـ vh. وعلى العكس، إذا كان إطار العرض أطول من عرضه، فستكون vmin مساوية لـ vw. هذا مفيد للحفاظ على النسب، خاصة في العناصر المربعة أو شبه المربعة.
• vmax (الحد الأقصى لإطار العرض): تمثل القيمة الأكبر بين vw و vh. إذا كان إطار العرض أعرض من ارتفاعه، فستكون vmax مساوية لـ vw. وإذا كان إطار العرض أطول من عرضه، فستكون vmax مساوية لـ vh. تُستخدم هذه الوحدة غالبًا عندما تريد أن يملأ عنصر ما أكبر بُعد ممكن من إطار العرض.

وحدات إطار العرض المنطقية: vi, vb

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

• vi (إطار العرض السطري): تمثل 1% من حجم إطار العرض السطري، وهو الاتجاه الذي يتدفق فيه المحتوى أفقيًا (على سبيل المثال، من اليسار إلى اليمين في معظم اللغات الغربية). في وضع الكتابة من اليسار إلى اليمين، تتصرف vi بشكل مشابه لـ vw. ومع ذلك، في وضع الكتابة من اليمين إلى اليسار (مثل العربية أو العبرية)، لا تزال vi تمثل البعد الأفقي ولكنها تبدأ من الحافة اليمنى لإطار العرض.
• vb (إطار العرض الكتلي): تمثل 1% من حجم إطار العرض الكتلي، وهو الاتجاه الذي يتدفق فيه المحتوى عموديًا. وهذا يماثل vh في معظم أوضاع الكتابة الشائعة.

مثال: لنفترض موقعًا مصممًا للغتين الإنجليزية (من اليسار إلى اليمين) والعربية (من اليمين إلى اليسار). استخدام vi للهامش الداخلي أو الخارجي على جوانب الحاوية سيضبط تلقائيًا إلى الجانب الصحيح بناءً على اتجاه اللغة، مما يضمن تباعدًا متسقًا بغض النظر عن تفضيلات لغة المستخدم.

التطبيقات العملية لوحدات إطار العرض

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

1. أقسام بارتفاع كامل

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

.full-height-section {
 height: 100vh;
 width: 100vw; /* Ensures it fills the full width as well */
}

يضمن هذا المقتطف البرمجي أن عنصر .full-height-section يشغل دائمًا ارتفاع إطار العرض بالكامل، بغض النظر عن حجم الشاشة. ويضمن width: 100vw; أن العنصر يملأ العرض بالكامل أيضًا، مما ينشئ قسمًا يملأ إطار العرض بالكامل حقًا.

2. الطباعة المتجاوبة

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

h1 {
 font-size: 8vw; /* Font size scales with viewport width */
}

p {
 font-size: 2vh; /* Font size scales with viewport height */
}

في هذا المثال، تم تعيين font-size للعنصر h1 إلى 8vw، مما يعني أنه سيكون 8% من عرض إطار العرض. مع تغير عرض إطار العرض، سيتم تعديل حجم الخط وفقًا لذلك. وبالمثل، تم تعيين font-size للعنصر p إلى 2vh، ليتناسب مع ارتفاع إطار العرض.

3. صناديق نسبة العرض إلى الارتفاع

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

.aspect-ratio-box {
 width: 100%;
 position: relative;
}

.aspect-ratio-box::before {
 content: "";
 display: block;
 padding-top: 56.25%; /* 16:9 aspect ratio (height/width * 100) */
}

.aspect-ratio-box > * {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

تستخدم هذه التقنية عنصرًا زائفًا (::before) مع قيمة padding-top محسوبة بناءً على نسبة العرض إلى الارتفاع المطلوبة (في هذه الحالة، 16:9). يتم بعد ذلك تحديد موضع المحتوى داخل .aspect-ratio-box بشكل مطلق لملء المساحة المتاحة، مع الحفاظ على نسبة العرض إلى الارتفاع بغض النظر عن حجم الشاشة. هذا مفيد للغاية لتضمين مقاطع الفيديو أو الصور التي تحتاج إلى الحفاظ على نسبها.

4. إنشاء تخطيطات شبكية مرنة

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

.grid-container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(20vw, 1fr)); /* Each column is at least 20% of the viewport width */
 grid-gap: 1vw;
}

.grid-item {
 padding: 1vw;
 background-color: #f0f0f0;
}

هنا، تستخدم خاصية grid-template-columns القيمة minmax(20vw, 1fr) لضمان أن يكون كل عمود على الأقل 20% من عرض إطار العرض ولكن يمكن أن ينمو لملء المساحة المتاحة. تم تعيين grid-gap أيضًا باستخدام 1vw، مما يضمن أن المسافة بين عناصر الشبكة تتناسب مع حجم إطار العرض.

5. التباعد والحشو المتجاوب

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

.container {
 padding: 5vw;
 margin-bottom: 3vh;
}

في هذا المثال، يحتوي عنصر .container على حشو يبلغ 5% من عرض إطار العرض على جميع الجوانب وهامش سفلي يبلغ 3% من ارتفاع إطار العرض.

6. عناصر واجهة المستخدم القابلة للتطوير

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

.button {
 font-size: 2.5vh;
 padding: 1vh 2vw;
 border-radius: 0.5vh;
}

تم تعريف فئة .button بحجم خط يعتمد على ارتفاع إطار العرض (2.5vh) وحشو يعتمد على كل من ارتفاع وعرض إطار العرض. هذا يضمن أن يظل نص الزر مقروءًا وأن حجم الزر يتكيف بشكل مناسب مع أبعاد الشاشة المختلفة.

أفضل الممارسات لاستخدام وحدات إطار العرض

بينما توفر وحدات إطار العرض طريقة قوية لإنشاء تصميمات متجاوبة، من المهم استخدامها بحكمة واتباع أفضل الممارسات لتجنب المزالق المحتملة:

1. ضع في اعتبارك القيم الدنيا والقصوى

يمكن أن تؤدي وحدات إطار العرض أحيانًا إلى قيم متطرفة على الشاشات الصغيرة جدًا أو الكبيرة جدًا. لمنع ذلك، ضع في اعتبارك استخدام دوال CSS min() و max() و clamp() لتعيين حدود دنيا وقصوى لقيم وحدات إطار العرض.

h1 {
 font-size: clamp(2rem, 8vw, 5rem); /* Font size is at least 2rem, at most 5rem, and scales with viewport width in between */
}

تأخذ دالة clamp() ثلاث وسائط: قيمة دنيا، وقيمة مفضلة، وقيمة قصوى. في هذا المثال، سيكون font-size على الأقل 2rem، وعلى الأكثر 5rem، وسيتناسب مع عرض إطار العرض (8vw) بين هذين الحدين. هذا يمنع النص من أن يصبح صغيرًا جدًا على الشاشات الصغيرة أو كبيرًا جدًا على الشاشات الكبيرة.

2. ادمجها مع وحدات أخرى

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

p {
 font-size: calc(1rem + 0.5vw); /* Base font size of 1rem plus a scaling factor */
 line-height: 1.6;
}

في هذا المثال، يتم حساب font-size باستخدام دالة calc()، التي تضيف حجم خط أساسي يبلغ 1rem إلى عامل تحجيم يبلغ 0.5vw. هذا يضمن أن النص دائمًا مقروء، حتى على الشاشات الصغيرة، مع استمرار تناسبه مع حجم إطار العرض.

3. اختبر على أجهزة ومتصفحات مختلفة

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

4. ضع في اعتبارك إمكانية الوصول

عند استخدام وحدات إطار العرض للطباعة، تأكد من أن النص يظل مقروءًا ومتاحًا للمستخدمين ذوي الإعاقة. انتبه إلى تباين الألوان وحجم الخط وارتفاع السطر لضمان سهولة قراءة النص لجميع المستخدمين. يمكن أن تكون أدوات مثل مدقق تباين WebAIM مفيدة لتحديد نسب تباين الألوان المناسبة. تجنب أيضًا تعيين `font-size` أو الخصائص الأخرى المتعلقة بالحجم على عنصر `html` مباشرة باستخدام وحدات إطار العرض، حيث يمكن أن يتعارض ذلك مع تفضيلات المستخدم لتحديد حجم النص.

5. استخدمها مع متغيرات CSS (الخصائص المخصصة)

يعزز استخدام متغيرات CSS (الخصائص المخصصة) مع وحدات إطار العرض إمكانية الصيانة ويسمح بإجراء تعديلات أسهل عبر ورقة الأنماط الخاصة بك.

:root {
 --base-padding: 2vw;
}

.element {
 padding: var(--base-padding);
}

.another-element {
 margin-left: var(--base-padding);
}

في هذا المثال، يتم تعريف المتغير --base-padding بقيمة 2vw. يتم بعد ذلك استخدام هذا المتغير لتعيين الحشو والهامش للعناصر المختلفة، مما يتيح لك ضبط التباعد بسهولة عبر موقع الويب بأكمله عن طريق تغيير قيمة المتغير في مكان واحد.

تقنيات واعتبارات متقدمة

1. استخدام جافاسكريبت للتعديلات الديناميكية

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

// JavaScript
function updateViewportVariables() {
 const vh = window.innerHeight * 0.01;
 document.documentElement.style.setProperty('--vh', `${vh}px`);
}

window.addEventListener('resize', updateViewportVariables);
updateViewportVariables(); // Initial call

// CSS
.element {
 height: calc(var(--vh, 1vh) * 50); /* Fallback to 1vh if --vh is not defined */
}

يستخدم هذا المقتطف البرمجي جافاسكريبت لحساب ارتفاع إطار العرض وتعيين متغير CSS (--vh) وفقًا لذلك. ثم يستخدم العنصر .element هذا المتغير لتعيين ارتفاعه، مما يضمن أنه يشغل دائمًا 50% من ارتفاع إطار العرض. يضمن الاحتياطي `1vh` أن العنصر لا يزال له ارتفاع معقول حتى لو لم يتم تعيين متغير CSS بشكل صحيح.

2. التعامل مع ظهور لوحة المفاتيح على الهاتف المحمول

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

.full-height-section {
 height: 100dvh;
}

3. التحسين من أجل الأداء

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

أمثلة عبر بلدان وثقافات مختلفة

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

• لغات شرق آسيا (مثل الصينية واليابانية والكورية): تتطلب هذه اللغات غالبًا أحجام خطوط أكبر بسبب تعقيد الأحرف. تضمن وحدات إطار العرض سهولة القراءة على الأجهزة المحمولة حيث تكون مساحة الشاشة محدودة. يمكن أن يكون استخدام `clamp()` مع حجم خط أدنى أعلى بناءً على وحدات `rem` إلى جانب `vw` مفيدًا بشكل خاص.
• اللغات من اليمين إلى اليسار (مثل العربية والعبرية): تعد وحدات إطار العرض المنطقية (`vi`، `vb`) لا تقدر بثمن للحفاظ على اتجاه التخطيط والتباعد المتسقين، خاصة عند التعامل مع التخطيطات المعكوسة وتدفق المحتوى المعدل.
• البلدان ذات سرعات الإنترنت المتفاوتة: يعد تحسين أحجام الصور وضمان أوقات تحميل سريعة أمرًا بالغ الأهمية. تسمح صناديق نسبة العرض إلى الارتفاع التي تم إنشاؤها باستخدام وحدات إطار العرض للصور ومقاطع الفيديو بالحفاظ على نسبها مع التكيف مع أحجام الملفات الأصغر للتحميل بشكل أسرع على الاتصالات البطيئة.
• إمكانية الوصول عبر الثقافات: يوفر استخدام مزيج من `rem` لحجم الخط الأساسي و `vw` للتحجيم مرونة للمستخدمين لتجاوز التحجيم بناءً على احتياجاتهم الفردية، بغض النظر عن موقعهم الجغرافي أو سياقهم الثقافي. يعد توفير خيارات للمستخدمين لضبط أحجام الخطوط مفيدًا عالميًا.

الخاتمة

تعد وحدات إطار العرض في CSS أداة لا غنى عنها لإنشاء تصميمات ويب متجاوبة وقابلة للتطوير حقًا تتكيف بسلاسة مع أي جهاز. من خلال فهم وظائف vw و vh و vmin و vmax و vi و vb، واتباع أفضل الممارسات، يمكنك إطلاق العنان للإمكانات الكاملة لوحدات إطار العرض وإنشاء مواقع ويب جذابة بصريًا وسهلة الاستخدام توفر تجربة متسقة عبر جميع المنصات. تبنى هذه الوحدات لبناء تجارب ويب يمكن الوصول إليها عالميًا وممتعة من الناحية الجمالية، بغض النظر عن جهاز المستخدم أو خلفيته الثقافية.

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