استخدام أدوات وصف الكثافة

"كاتي هيمبينيوس"

لمتابعة هذا الدرس التطبيقي حول الترميز، افتح هذا الخلل في علامة تبويب ثانية.

الاطّلاع على هذا العرض التوضيحي

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

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

1x الكثافة	Blackberry Playbook، والعديد من الشاشات الخارجية
كثافة مرّتَين	iPad أو iPhone 5/6
3 أضعاف الكثافة	Galaxy S5 أو iPhone X

• يُرجى التحقق من index.html للحصول على الرمز المناسب لإجراء ذلك.

How does it work?

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

ما هي وحدات البكسل؟

لنبدأ من البداية بتعريف وحدة البكسل. قد يبدو ذلك بسيطًا، لكن يمكن أن يكون له معانٍ عديدة في الواقع:

وحدة بكسل الجهاز (المعروفة أيضًا باسم "البكسل الفعلي")

أصغر نقطة لون يمكن عرضها على الجهاز.

بكسل منطقي

المعلومات التي تحدِّد اللون في موقع معيّن على الشبكة. لا يحتوي هذا النوع من وحدات البكسل على حجم مادي متأصل.

بكسل CSS

تحدّد مواصفات CSS وحدة البكسل كوحدة قياس مادي. 1 بكسل = 1/96 من البوصة.

كثافة البكسل

تقيس كثافة وحدات البكسل (يُشار إليها أيضًا باسم "كثافة الشاشة" أو "كثافة العرض") كثافة وحدات البكسل في الجهاز في مساحة فعلية محددة. عادةً ما يتم قياس ذلك باستخدام وحدات البكسل لكل بوصة (ppi).

لسنوات عديدة، كانت كثافة العرض 96 بكسل في البوصة شائعة جدًا (وبالتالي، كان CSS لكل بكسل 1/96 بوصة). وفي ثمانينيات القرن الماضي، كان الحل الافتراضي لنظام التشغيل Windows. بالإضافة إلى ذلك، كان حل مراقبة CRT.

بدأ هذا الأمر في التغيير حيث أصبحت شاشات LED شائعة في العقد الأول من القرن الحادي والعشرين. على وجه الخصوص، حققت Apple نجاحًا كبيرًا في عام 2010 عندما قدمت شاشات Retina. يبلغ الحد الأدنى لدقة هذه الشاشات 192 بكسل في البوصة، أي ضعف درجة دقة الشاشات "العادية" (192 بكسل في البوصة/96 بكسل في البوصة = 2).

window.devicePixelRatio

مع إدخال تقنية عرض أحدث، بدأت "وحدات بكسل الجهاز" في التفاوت في الحجم الفعلي والشكل ولم تعد بحجم "وحدات بكسل CSS" نفسها. وقد أدّت الحاجة إلى تحديد العلاقة بين حجم "وحدات البكسل في الجهاز" و "وحدات بكسل CSS" إلى إطلاق devicePixelRatio (يُشار إليها أحيانًا باسم "نسبة وحدات البكسل في CSS").

يحدد devicePixelRatio العلاقة بين وحدات بكسل الجهاز ووحدات بكسل CSS لجهاز معين. الجهاز الذي تبلغ درجة دقته 192 بكسل في البوصة يحتوي على devicePixelRatio من 2 (192 بكسل في البوصة/96 بكسل في البوصة = 2) لأن "حجم 2 من وحدات بكسل في العرض هو بحجم 1 CSS بكسل".

في الوقت الحالي، تتراوح نسبة وحدات البكسل في معظم الأجهزة بين 1.0 و4.0.

ملاحظة: لا يجب أن تكون هذه النسبة عددًا صحيحًا. 1.5 و2.4 و2.5 كلها نسب وحدات البكسل للأجهزة الشائعة.

• حدِّد كثافة وحدات البكسل في الجهاز عن طريق كتابة window.devicePixelRatio في وحدة التحكّم.

• يمكنك الاطّلاع على هذا الجدول لمعرفة نِسب وحدات البكسل للأجهزة الشائعة. ويتراوح معظمها بين 1.0 و4.0.

إذًا، كيف يمكنك تطبيق هذه المعلومات؟

تحديد حجم الصور استنادًا إلى نسبة وحدات البكسل للجهاز

لكي تظهر الصور بأفضل شكل على الشاشات العالية الدقة، من الضروري تقديم نُسخ مختلفة من الصور لمختلف devicePixelRatios.

نسبة وحدات البكسل في الجهاز	يشير إلى ما يلي:	على هذا الجهاز، ستظهر علامة <img> بعرض CSS 250 بكسل بشكل أفضل عندما تكون الصورة المصدر...
1	وحدة بكسل واحدة للجهاز = 1 بكسل CSS	العرض: 250 بكسل
2	2 بكسل في الجهاز = 1 بكسل CSS	العرض: 500 بكسل
3	3 وحدات بكسل في الجهاز = 1 بكسل CSS	العرض: 750 بكسل

ملاحظات:

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

ملاحظة: تسهّل الأدوات مثل الحدة إنشاء صورة بأحجام متعددة. يتم تناول ذلك بمزيد من التفصيل هنا.

استخدام أدوات وصف الكثافة لعرض صور
متعددة

يمكن استخدام أدوات وصف الكثافة مع السمة "srcset " لعرض صور مختلفة على أجهزةPixelRatios المختلفة.

• ألقِ نظرة على ملف index.html ولاحظ العنصر <img>.

<img src="flower.jpg"
  srcset="flower-1x.jpg 1x,
          flower-2x.jpg 2x,
          flower-3x.jpg 3x">

في هذا المثال، نتناول الكلمات التالية:

• إنّ كل من 1x و2x و3x هي أدوات وصف للكثافة تحدد للمتصفح كثافة وحدات البكسل المستهدفة من الصورة. يؤدي هذا إلى عدم احتياج المتصفح إلى تنزيل صورة لتحديد هذه المعلومات.
• يمكن للمتصفّح الاختيار من بين ثلاث صور: flower-1x.jpg (هذه الصور مخصّصة للمتصفّحات ذات كثافة وحدات بكسل 1.0) و"flower-2x.jpg" (المخصَّصة للمتصفّحات ذات كثافة وحدات بكسل 2.0) و"flower-3x.jpg" (المخصَّصة للمتصفّحات ذات كثافة وحدات بكسل 3.0).
• flower.jpg هي الصورة الاحتياطية للمتصفّحات التي لا تتوافق مع srcset.

كيفية استخدام هذه الميزة:

• استخدِم جهازPixelRatio ووحدة x لكتابة أدوات وصف الكثافة. على سبيل المثال، تتم كتابة واصف الكثافة للعديد من شاشات Retina (window.devicePixelRatio = 2) على النحو التالي: 2x.
• إذا لم يتم توفير واصف للكثافة، يُفترض أن يكون 1x.
• يُعد تضمين أدوات وصف الكثافة في أسماء الملفات اصطلاحًا شائعًا (وسيساعدك على تتبع الملفات)، ولكنه ليس ضروريًا. يمكن أن يكون للصور أي اسم ملف.
• ليس من الضروري تضمين سمة sizes. تُستخدَم السمة sizes فقط مع أدوات وصف العرض.