این آموزش در تاریخ ۱۳۹۹/۱۱/۱۴ آپدیت شده است.
آموزش صفت SrcSet در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش صفت SrcSet در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
صفت SrcSet در HTML
صفت srcset صفتی است که در درون تگ <Source> مورد استفاده قرار میگیرد و با استفاده از آن میتوانیم نحوه نمایش یک تصویر را در حالت های مختلف (در اندازه صفحه نمایش های مختلف) مشخص و یا تعریف نماییم.
اگر از تگ <source> در درون تگ <picture> استفاده شود – الزامی و ضروری است که از صفت SrcSet نیز در درون تگ <source> استفاده شود.
Free-Learn
عناصری که توسط این صفت پشتیبانی می شوند
این صفت را میتوان در عناصر/تگ های زیر بکار برد.
| <source> |
Free-Learn
مثال از صفت SrcSet در HTML
در ادامه میتوانید یک مثال از این صفت را مشاهده نمایید.
در مثال زیر با استفاده از صفت media در تگ Source – تعریف کردم که وقتی اندازه عرض صفحه ی مرورگر بیشتر از ۶۵۰ پیکسل شد عکس (Logo_test.png) رو نمایش بده و اگر اندازه عرض بیشتر از ۴۶۵ پیکسل شد بیا و عکس (girls_test.jpg) رو نمایش بده.
لطفا بروی دکمه ی (امتحان کنید) کلیک نمایید تا بصورت آنلاین مثال زیر را مشاهده نمایید و همچنین لطفا اندازه صفحه را تغییر دهید تا تصاویر موجود در مثال زیر را در اندازه های مختلف مشاهده نمایید.
|
1 2 3 4 5 6 7 8 9 |
<body> <picture> <source media="(min-width: 650px)" srcset="images/Logo_test.png"> <source media="(min-width: 465px)" srcset="images/girls_test.jpg"> <img src="images/cat.gif" alt="Flowers" style="width:auto;"> </picture> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از صفت srcset در HTML پشتیبانی میکنند یا خیر.
| نام صفت | Chrome | Firefox | Opera | Safari | IE |
| srcset | ۳۸٫۰ | ۳۸٫۰ | ۲۵٫۰ | ۹٫۱ | بله |
Free-Learn
نکات و توضیحات
نکته یا توضیح خاصی نیست فقط همونطور که در ابتدای این مطلب اشاره کردم – اگر از تگ <source> در درون تگ <picture> استفاده نمایید الزامی و ضروری است که از صفت SrcSet نیز در درون تگ <source> استفاده نمایید.
