كيفية تغيير عنوان URL لصورة HTML في الوضع المظلم

باستخدام CSS ، من السهل جدًا تطبيق التغييرات إذا كان النظام في الوضع المظلم ، باستخدام ملفprefers-color-schemeميزة الوسائط.

تحقق من وظيفة بلوق الخاص بي علىالوضع المظلمإذا كنت تريد معرفة المزيد عنها.

اليوم أواجه مشكلة - كيف أغير صورة محددة في HTML ، بدلاً من قاعدة CSS؟

تبين أن هناك طريقة HTML بسيطة للقيام بذلك ، دون استخدام أي CSS أو JavaScript.

يمكننا استخدامpictureعلامة للالتفافimgبطاقة شعار:

<picture>
  <source 
    srcset="dark.png" 
    media="(prefers-color-scheme: dark)">
  <img src="light.png">
</picture>

إذا تم دعم الوضع المظلم وتمكينه ، فإن ملفdark.pngسيتم استخدام الصورة كمصدر لملفimgبطاقة شعار.

العلامة مدعومة جيدًا ، والمتصفحات القديمة التي لا تنفذها ، أو التي لا تنفذ الوضع المظلم ، ستعود إلى عرضlight.pngصورة.

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

تحميل مجانيكتيب HTML


المزيد من دروس html: