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