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

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

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

فهم وحدات منفذ العرض: الأساس

قبل الغوص في تفاصيل كل متغير، دعنا نؤسس فهمًا أساسيًا للمفهوم الجوهري: وحدات منفذ العرض.

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

وحدات منفذ العرض الأساسية هي:

• vw (عرض منفذ العرض): تمثل 1% من عرض منفذ العرض. على سبيل المثال، 100vw تساوي العرض الكامل لمنفذ العرض.
• vh (ارتفاع منفذ العرض): تمثل 1% من ارتفاع منفذ العرض. على سبيل المثال، 50vh تساوي نصف ارتفاع منفذ العرض.

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

مثال: لنفترض وجود صورة رئيسية تمتد على عرض الشاشة بالكامل. يمكنك تحقيق ذلك باستخدام CSS التالي:

            .hero-image {
  width: 100vw;
  height: 50vh; /* Half the screen height */
  object-fit: cover; /* Ensures the image fills the area without distortion */
}

            

              
                Copy
              
            
          

تقديم المتنافسين الجدد: vi، vb، vmin، و vmax

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

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

حالات استخدام لـ vi و vb

vi و vb تصبحان ذات أهمية خاصة عند التعامل مع التدويل (i18n) والتعريب (l10n). يمكن للمواقع الإلكترونية التي تدعم لغات متعددة، خاصة تلك التي لها أوضاع كتابة مختلفة (من اليسار إلى اليمين مقابل من اليمين إلى اليسار مقابل من الأعلى إلى الأسفل)، أن تستفيد بشكل كبير من هذه الوحدات.

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

            .navigation {
  width: 20vi; /* Adapts to the inline size (width in LTR, height in RTL) */
  /* Other styling... */
}

            

              
                Copy
              
            
          

استغلال vmin و vmax للعناصر القابلة للتكيف

vmin و vmax تقدمان قدرات فريدة لإنشاء عناصر تستجيب بذكاء لاتجاهات منفذ العرض المختلفة (عمودي مقابل أفقي).

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

            .square {
  width: 50vmin; /* Ensures the width is always 50% of the smaller viewport dimension */
  height: 50vmin; /* Maintains the square aspect ratio */
  background-color: #007bff; /* Example color */
}

            

              
                Copy
              
            
          

في هذه الحالة، سيكون عرض وارتفاع المربع دائمًا 50% من البعد الأصغر لمنفذ العرض (عرضه أو ارتفاعه). هذا يضمن بقاء المربع مرئيًا بالكامل، بغض النظر عما إذا كان منفذ العرض في الوضع العمودي أو الأفقي.

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

            .full-background {
 width: 100vmax; 
 height: 100vmax;
 object-fit: cover;
 object-position: center;
}

            

              
                Copy
              
            
          

منفذ العرض الديناميكي: معالجة خصوصيات متصفحات الجوال (lvw, svw, dvw)

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

لمواجهة هذه التحديات، تقدم CSS وحدات منفذ العرض الديناميكية: lvw، و svw، و dvw.

• lvw (عرض منفذ العرض الكبير): تمثل 1% من أكبر حجم ممكن لمنفذ العرض، عندما تكون جميع عناصر واجهة مستخدم المتصفح مختفية (على سبيل المثال، شريط العنوان مخفي).
• svw (عرض منفذ العرض الصغير): تمثل 1% من أصغر حجم ممكن لمنفذ العرض، عندما تكون جميع عناصر واجهة مستخدم المتصفح مرئية (على سبيل المثال، شريط العنوان معروض بالكامل).
• dvw (عرض منفذ العرض الديناميكي): تمثل 1% من الحجم الحالي لمنفذ العرض، والذي يتكيف ديناميكيًا مع ظهور واختفاء عناصر واجهة مستخدم المتصفح.

هناك وحدات مقابلة للارتفاع: lvh، و svh، و dvh.

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

الحل: استخدم dvh بدلاً من vh. يتكيف dvh ديناميكيًا مع ظهور واختفاء شريط العنوان، مما يضمن أن العنصر يتناسب دائمًا مع منفذ العرض المرئي حاليًا.

مثال: قسم رئيسي بملء الشاشة على موقع للجوال:

            .hero {
  width: 100vw;
  height: 100dvh; /* Dynamically adjusts to viewport height changes */
  background-image: url('hero-image.jpg');
  background-size: cover;
  background-position: center;
}

            

              
                Copy
              
            
          

متى تستخدم lvw، svw، و dvw:

• lvw/lvh: استخدمها عندما تريد أن يشغل عنصر ما دائمًا أقصى حجم ممكن لمنفذ العرض، حتى عندما تكون عناصر واجهة المستخدم مخفية. كن حذرًا، فقد يؤدي ذلك إلى حجب المحتوى جزئيًا عند ظهور عناصر واجهة المستخدم.
• svw/svh: استخدمها عندما تريد التأكد من أن العنصر مرئي بالكامل دائمًا، حتى عندما تكون عناصر واجهة المستخدم معروضة بالكامل. قد يؤدي هذا إلى ظهور العنصر أصغر من المتوقع عند إخفاء عناصر واجهة المستخدم.
• dvw/dvh: الخيار الأكثر شيوعًا والموصى به. يوفر توازنًا عن طريق التكيف الديناميكي مع حجم منفذ العرض الحالي، مما يوفر تجربة مستخدم أكثر سلاسة واتساقًا.

أمثلة عملية وأفضل الممارسات

دعنا نستكشف بعض الأمثلة العملية التي توضح كيفية استخدام متغيرات وحدات العرض بفعالية في سيناريوهات العالم الحقيقي.

1. إنشاء شريط تنقل متجاوب

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

            .navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1vh 2vw; /* Vertical padding based on viewport height, horizontal based on viewport width */
  background-color: #f8f9fa;
}

.nav-links {
  list-style: none;
  display: flex;
}

.nav-links li {
  margin-left: 2vw; /* Spacing between navigation links */
}

.nav-links a {
  text-decoration: none;
  color: #333;
  font-size: 1.2em; /* Using ems for font size allows further scaling based on the root font size */
}

            

              
                Copy
              
            
          

2. تصميم تخطيط شبكي مرن

يمكن استخدام وحدات العرض لإنشاء تخطيطات شبكية مرنة تتكيف مع أحجام الشاشات المختلفة. بدلاً من عرض البكسل الثابت، استخدم vw أو fr (وحدة كسرية في CSS Grid) لتوزيع المساحة بشكل متناسب.

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20vw, 1fr)); /* Each column takes up at least 20% of the viewport width, but can expand to fill available space */
  gap: 1vw;
}

.grid-item {
  padding: 1em;
  background-color: #e9ecef;
}

            

              
                Copy
              
            
          

3. تنفيذ طباعة (Typography) تتدرج بشكل متجاوب

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

            h1 {
  font-size: 5vw; /* Font size is proportional to the viewport width */
  margin-bottom: 1vh;
}

p {
  font-size: 2vw; /* Font size is proportional to the viewport width */
  line-height: 1.6;
}

            

              
                Copy
              
            
          

ملاحظة هامة: على الرغم من أن أحجام الخطوط المعتمدة على `vw` توفر استجابة، إلا أنها قد تؤدي أحيانًا إلى نص كبير جدًا أو صغير جدًا على أحجام الشاشات المتطرفة. فكر في استخدام clamp() لتعيين الحد الأدنى والأقصى لأحجام الخطوط.

            h1 {
  font-size: clamp(2rem, 5vw, 4rem); /* Minimum 2rem, scales up to 5vw, maximum 4rem */
}

            

              
                Copy
              
            
          

4. إنشاء أقسام بملء الشاشة بارتفاع ديناميكي

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

            .full-screen-section {
  width: 100vw;
  height: 100dvh; /* Adjusts dynamically to viewport height */
  display: flex;
  justify-content: center;
  align-items: center;
}

            

              
                Copy
              
            
          

التوافق عبر المتصفحات والبدائل (Fallbacks)

بينما تدعم معظم المتصفحات الحديثة متغيرات وحدات العرض، من الضروري مراعاة التوافق عبر المتصفحات. قد لا تدعم المتصفحات القديمة بشكل كامل جميع الوحدات الأحدث (lvw، و svw، و dvw، و vi، و vb).

أفضل الممارسات للتوافق عبر المتصفحات:

• التحسين التدريجي: استخدم متغيرات وحدات العرض كآلية تحجيم أساسية، ولكن وفر بدائل للمتصفحات القديمة باستخدام وحدات مطلقة أو نسبية.
• استعلامات ميزات CSS: استخدم @supports لاكتشاف دعم المتصفح لمتغيرات وحدات عرض معينة وتطبيق الأنماط وفقًا لذلك.
• Polyfills: فكر في استخدام polyfills (مكتبات JavaScript) لتوفير الدعم للميزات المفقودة في المتصفحات القديمة. ومع ذلك، كن على دراية بتأثير الأداء لإضافة JavaScript إضافي.

مثال باستخدام استعلامات ميزات CSS:

            .element {
  width: 50vw; /* Modern browsers will use this */
}

@supports not (width: 50vw) {
  .element {
    width: 50%; /* Fallback for older browsers */
  }
}

            

              
                Copy
              
            
          

اعتبارات إمكانية الوصول

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

اعتبارات إمكانية الوصول الرئيسية:

• حجم النص والتكبير/التصغير: اسمح للمستخدمين بتكبير وتصغير الصفحة دون كسر التخطيط. تجنب استخدام وحدات العرض حصريًا لأحجام الخطوط؛ بدلاً من ذلك، ادمجها مع وحدات نسبية مثل em أو rem.
• التباين: تأكد من وجود تباين كافٍ بين ألوان النص والخلفية، خاصة عند استخدام وحدات العرض للتحكم في قيم الألوان.
• التنقل باستخدام لوحة المفاتيح: تحقق من إمكانية الوصول إلى جميع العناصر التفاعلية عبر التنقل بلوحة المفاتيح. يجب ألا تتداخل وحدات العرض مع ترتيب التركيز أو وظائف لوحة المفاتيح.
• التوافق مع قارئات الشاشة: اختبر تصميماتك باستخدام قارئات الشاشة للتأكد من الإعلان عن المحتوى بشكل صحيح وأن العناصر التفاعلية يمكن الوصول إليها.

مستقبل تحجيم منفذ العرض

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

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

الخاتمة: إتقان متغيرات وحدات العرض للتصميم المتجاوب للويب

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

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