آموزش شبه کلاس Read-Only در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش شبه کلاس Read-Only در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
شبه کلاس Read-Only در CSS
با استفاده از شبه کلاس ( یا هم انتخابگر ) read-only در CSS میتوان عناصر ورودی را که فقط خواندنی ( Read-Only ) هستند را انتخاب و براشون استایل دلخواه تعریف کرد.
با استفاده از صفت ReadOnly میتوان مشخص کرد که آیا یک عنصر ورودی فقط خواندنی باشد یا خیر.
با استفاده از شبه کلاس read-write نیز میتوان عناصری را که قابل خواندن / نوشتن هستند انتخاب کرد.
| نسخه | CSS3 |
|---|
Free-Learn
مثال از شبه کلاس Read-Only در CSS
در ادامه میتوانید یک مثال از این انتخابگر / شبه کلاس را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : با استفاده از صفت readonly میتوان یک عنصر را فقط خواندنی کرد، و اگه از این صفت استفاده نشه بصورت پیشفرض یک عنصر هم قابل نوشتن هستن هم خواندن.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style> input:read-only{ background-color:#607D8B; color:#fff; } input:read-write{ background-color:#4CAF50; color:#fff; } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از انتخابگر / شبه کلاس read-only در CSS پشتیبانی میکنند یا خیر.
» عددی که در کنار -moz- وجود دارد ، یعنی از آن نسخه به بالا باید از این پیشوند استفاده نمایید. ( درباره پیشوندها بیشتر بخوانید )
| نام انتخابگر | Chrome | Firefox | Opera | Safari | IE |
| read-only: | ۳۶٫۰ | ۷۸٫۰ ۳٫۰ -moz- |
۲۳٫۰ | ۹٫۰ | خیر |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این انتخابگر / شبه کلاس در CSS بصورت زیر می باشد.
|
1 2 3 |
:read-only { دستورات سی اس اس در اینجا } |
Free-Learn
نکات و توضیحات
برخی از مرورگرها در نسخه های قدیمی تر از این ویژگی پشتیبانی نمی کنند لذا باید برای حل این مشکل از یسری دستورات پیشوندی از نسخه مشخص شده آن مرورگر ( که در جدول پشتیبانی مرورگرها مشخص شده ) استفاده نمایید.
- -moz- برای مرورگر موزیلا فایرفاکس
Free-Learn
