انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #2 من درس: عناصر Picture وSVG في لغة HTML

Media Queries with Source Media تبديل الصور باستعلامات الوسائط media

احترف عناصر Picture و SVG في HTML: التوجيه الفني للصور المتجاوبة، استعلامات media، تبديل الصيغ AVIF و WebP، رسم أشكال SVG وتنسيقها بالـ CSS والتعقيم الأمني ضد ثغرات XSS.
5 صفوف تعليمية
لغة HTML
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي
تستقبل خاصية الوسائط media داخل وسم <source> استعلامات وسائط CSS (Media Queries)، وهو ما يحقق مبدأ التوجيه الفني (Art Direction). يتيح هذا التوجيه عرض لقطات مقتصة بذكاء تناسب الهواتف الطولية، بينما يعرض لقطات أفقية بانورامية للشاشات العريضة.
الصف 2 صورة توضيحية
مخطط شلال تقييم المتصفح لعنصر picture والتبديل الذكي للصور
الصف 3 كود برمجي
HTML 
<picture>
  <!-- Wide panoramic studio view for larger screens -->
  <source media="(min-width: 640px)"
          srcset="images/examples/workspace-wide.webp">
  <!-- Focused square laptop crop for mobile -->
  <img src="images/examples/workspace-mobile.webp"
       alt="Developer desk workstation">
</picture>
جرّب بنفسك
الصف 4 شرح توضيحي
بخلاف حيل خلفيات CSS، يضمن استخدام <picture> مع خاصية media عدم قيام هواتف الزوار بتنزيل صورة الحواسيب الضخمة في الخلفية نهائياً. يؤدي ذلك إلى توفير باقة الإنترنت للزائر وتسريع مؤشر الرسم المحتوي الأكبر (LCP) بصورة قياسية على شبكات الجوال.
الصف 5 ملاحظة هامة

جميع فقرات هذا الدرس (عناصر Picture وSVG في لغة HTML)