آموزش تگ progress در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ progress در HTML با من همراه باشید.
Free-Learn
در این جلسه میخوانیم
تگ Progress در HTML
تگ progress تگی است که با استفاده از آن میتوان میزان درصد از پیشرفت یک کار یا عمل یا در واقع همون پروژه را مشخص کرد.
Free-Learn
مثال از تگ progress در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
|
1 2 3 4 5 6 |
<body> میزان پیشرفت ساخت پروژه : <progress value="35" max="100"></progress> </body> |
مثال شماره ۲ : سفارشی سازی تگ Progress با استفاده از CSS
در دستورات زیر که متعلق به زبان CSS می باشد ، ۲ دستور داریم به اسم های :
- -webkit-progress-bar
- -moz-progress-bar
که ممکنه کمی براتون عجیب غریب باشه! نگران نباشید چیز خاصی نیست، webkit و moz فقط برای اینه که مرورگرهای گوگل کروم و موزیلا فایرفاکس از این ویژگی پشتیبانی کنند.
یعنی webkit برای مرورگرهای گوگل کروم (Chrome)،اوپرا/اپرا (Opera) و سافاری (Safari) و moz برای مرورگر موزیلا فایرفاکس می باشد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> progress { background-color: #f3f3f3; border: 0; height: 18px; border-radius: 9px; } progress::-webkit-progress-bar { background-color:#00b185; } progress::-moz-progress-bar { background-color:#00b185; } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ progress در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | IE |
| پشتیبانی | ۸٫۰ | ۱۶٫۰ | ۱۱٫۰ | ۶٫۰ | ۱۰٫۰ |
Free-Learn
جدول صفات تگ progress در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
| نام صفت | مقدار | توضیح |
|---|---|---|
| max | number | بیشترین/حداکثر مقدار را برای تگ Progress مشخص میکند. |
| value | number | میزان/مقدار پیشرفت پروژه را مشخص میکند. |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ progress از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
تگ progress یک تگ جدید/اضافه شده در HTML5 می باشد.
اگر میخواهید یک گیج اندازه گیری (Gauge) داشته باشید و از طریق آن میزان فضا یا اندازه یک عنصر را به نمایش بگذارید سعی کنید حتما از تگ Meter که مناسب اینکار است استفاده نمایید.
Free-Learn
دستورات CSS پیش فرض
این تگ هیچ دستور CSS پیش فرضی ندارد.
