رابط کاربری CSS (CSS User Interface)
در این بخش «رابط کاربری CSS» را با تمرکز بر دو ویژگی مهم بررسی می کنیم: «تغییر اندازه (resize)» و «فاصله دور خط بیرونی (outline-offset)». این ویژگی ها امکان تعامل بهتر با عناصر را فراهم می کنند و در عین حال، مرزبندی های بصری دقیقی می سازند.
رابط کاربری CSS: تغییر اندازه (resize)
ویژگی resize تعیین می کند یک عنصر توسط کاربر قابل تغییر اندازه باشد یا نه، و اگر بله، در کدام محور. برای اثرگذاری مناسب، معمولاً همراه با overflow: auto استفاده می شود.
horizontal– تنها عرض قابل تغییر است.vertical– تنها ارتفاع قابل تغییر است.both– هر دو بعد قابل تغییر هستند.none– تغییر اندازه غیرفعال است.
نمونه: تنها عرض
div { resize: horizontal; overflow: auto; }نمونه: تنها ارتفاع
div { resize: vertical; overflow: auto; }نمونه: هر دو بعد
div { resize: both; overflow: auto; }غیرفعال کردن تغییر اندازه در textarea
اغلب <textarea> به صورت پیش فرض قابل تغییر اندازه است. با مقدار none می توانید آن را غیرفعال کنید.
textarea { resize: none; }نکته: برای جلوگیری از اسکرول غیرمنتظره، حتماً overflow مناسب را تنظیم کنید؛ سپس رفتار تغییر اندازه کنترل پذیرتر می شود.
رابط کاربری CSS: فاصله outline با عنصر (outline-offset)
ویژگی outline-offset فاصله ای شفاف بین «outline» و لبه عنصر ایجاد می کند. برخلاف border، outline بیرونِ کادر کشیده می شود، بنابراین روی ابعاد عنصر تأثیر نمی گذارد.
نمونه: تعیین فاصله مشخص
div.ex1 { margin: 20px; border: 1px solid black; outline: 4px solid red; outline-offset: 15px; }نمونه: سبک متفاوت برای outline
div.ex2 { margin: 10px; border: 1px solid black; outline: 5px dashed blue; outline-offset: 5px; }هشدار: از آن جا که outline بیرونِ مرز عنصر رسم می شود، ممکن است با محتوای مجاور هم پوشانی داشته باشد؛ بنابراین فاصله ها را با دقت انتخاب کنید.
ویژگی های رابط کاربری در این فصل
resize— مشخص می کند عنصر توسط کاربر قابل تغییر اندازه است یا خیر.outline-offset— فاصله شفاف میان outline و مرز عنصر را تعریف می کند.
منابع و مسیر مطالعه بیشتر
برای تکمیل چیدمان، می توانید صفحه ستون های چندگانه CSS را مرور کنید. همچنین جهت ادامه مباحث، به متغیرهای CSS سر بزنید.
MDN: CSS resize و MDN: outline-offset توضیحات مرجع و جزییات سازگاری مرورگرها را ارائه می دهند.