الاتجاه الفني

Katie Hempenius

تجربة هذا الإصدار التجريبي

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

ما الذي يحدث هنا؟

اتجاه العمل الفني: يعرض صورًا مختلفة على أحجام شاشات مختلفة.

تحمّل الصورة السريعة الاستجابة أحجامًا مختلفة من الصورة نفسها. يأخذ اتجاه الفن هذه الخطوة إلى الأمام ويحمّل صورًا مختلفة تمامًا حسب الشاشة.

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

عرض الرمز

• اطّلِع على index.html للاطّلاع على رمز اتجاه الفن لهذا العرض التوضيحي.

آلية عمل الرمز

يستخدم اتجاه الفن علامات <picture> و <source> و <img>.

picture

توفّر علامة <picture> عنصرًا ملفّفًا لصفر أو أكثر من علامات <source> وعلامة <image> واحدة.

source

تحدّد علامة <source> مورد وسائط.

يستخدم المتصفّح أوّل علامة <source> مع طلب وسائط يعرض قيمة صحيحة. إذا لم تتطابق أي من طلبات البحث عن الوسائط، يعود المتصفّح إلى تحميل الصورة المحدّدة بواسطة <img>. .

img

تجعل علامة <img> هذا الرمز يعمل على المتصفّحات التي لا تتوافق مع علامة <picture>.

إذا كان المتصفّح لا يتيح استخدام علامة <picture>، يتم تحميل الصورة المحدّدة باستخدام علامة <img>.