در حال بارگذاری...

رابط کاربری در CSS

Optional Advanced تازه روی یک عکس شابلون گذاشت. این جلسه جعبهٔ ابزار دیگری است: رابط کاربری. شکل اشاره‌گر، محل چشمک‌زدن caret، و ظاهر ویجت بومی را عوض می‌کنید. اینجا سوراخ توی پوستر نمی‌زنید، و مقاله را هم به ستون روزنامه نمی‌شکنید.

جواب مستقیم

ویژگی‌های رابط کاربری در CSS به تعامل اشاره می‌کنند. cursor شکل ماوس را انتخاب می‌کند (pointer، wait، help، not-allowed…). resize گوشه را قابل‌کشیدن می‌کند — معمولاً روی textarea. outline با outline-offset حلقهٔ فوکوس می‌کشد و جای چیدمان نمی‌گیرد (outline را در باکس‌مدل دیده‌اید؛ اینجا عادت صفحه‌کلید است). user-select می‌تواند انتخاب تصادفی متن را کم کند. caret-color رنگ میلهٔ چشمک‌زن را عوض می‌کند. appearance (و -webkit-appearance) پوست ویجت بومی را برمی‌دارد تا خودتان استایل بدهید. فوکوس را دیدنی نگه دارید. کل صفحه را پوستر غیرقابل‌انتخاب نکنید.

چرا این ماسک نیست و ستون هم نیست

ماسک می‌گوید کدام پیکسل‌های یک جعبه دیده شوند. چندستونه یک جریان متن را تکه می‌کند. ویژگی‌های UI هیچ‌کدام نیستند. عرض و ارتفاع چیدمان همان می‌ماند مگر resize وسط باشد. فیلتر و mask-image هنوز مال کار هنری‌اند. اینجا سؤال این است: «قابل کلیک به‌نظر می‌رسد؟ می‌شود تایپ کرد؟ می‌شود جعبه را بزرگ کرد؟ کاربر صفحه‌کلید می‌فهمد کجاست؟»

cursor — راست بگویید

cursor یک قول است. pointer یعنی «این را می‌شود کلیک کرد.» روی دکمه و لینک واقعی بگذارید. روی تیتری که هیچ کاری نمی‌کند دست نگذارید.

Cursor map for honest controls

css

a.nav-link,
button.save {
cursor: pointer;
}

button[disabled] {
cursor: not-allowed;
}

.help-hint {
cursor: help;
}

.busy-panel {
cursor: wait;
}

default همان پیکان است. text میلهٔ I روی متن قابل‌انتخاب است. grab و grabbing به دستگیرهٔ کشیدن می‌خورند. cursor سفارشی با url(...) هم هست؛ کوچک نگه دارید و حتماً یک کلیدواژهٔ پشتیبان بنویسید. اشاره‌گر دروغ بدتر از هیچ است: شعار را کلیک می‌کنند و هیچ نمی‌شود.

resize — جعبه را بزرگ کنید، نه کل چیدمان را

resize روی جعبه‌هایی کار می‌کند که overflow دارند. استفادهٔ روزمره فیلد یادداشت است:

Resize a textarea

css

textarea.notes {
min-height: 6rem;
min-width: 16rem;
max-width: 100%;
resize: vertical;
overflow: auto;
}

مقادیر: none، both، horizontal، vertical. با overflow غیر از visible جفت کنید وگرنه دستگیره ممکن است نیاید. resize: both را روی همهٔ کارت‌ها نپاشید: پوستهٔ صفحه نباید پر از گوشهٔ کشیدنی شود. min-height و max-width فیلد را از جمع‌شدن یا ترکیدن نگه می‌دارند.

outline به‌عنوان حلقهٔ فوکوس

در جلسهٔ باکس‌مدل دیدید outline بیرون border می‌نشیند و جا نمی‌گیرد. در جعبهٔ ابزار UI همان حلقه را برای فوکوس صفحه‌کلید نگه می‌دارید — اغلب با :focus-visible تا کاربر ماوس با هر کلیک جعبه نگیرد:

Focus outline with offset

css

button.save:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 3px;
}

button.save:focus:not(:focus-visible) {
outline: none;
}

هرگز *:focus { outline: none; } سراسری نفرستید مگر هر کنترل جایگزینی به‌همان اندازه دیدنی داشته باشد (border، سایه، یا حلقه). outline-offset حلقه را از لبه دور می‌کند بدون این‌که همسایه جابه‌جا شود. این هنوز border نیست (اندازه عوض می‌شود) و محو ماسک روی برچسب دکمه هم نیست.

user-select — انتخاب تصادفی را کم کنید

انتخاب متن یک قابلیت است. فقط جایی کمش کنید که دابل‌کلیک نباید آبی شود — برچسب نوار ابزار، تراشهٔ کشیدنی — نه کل مقاله.

Limit selection on chrome, not prose

css

.toolbar-label {
user-select: none;
}

article.body {
user-select: text;
}

none هایلایت را می‌بندد. text پیش‌فرض خواندنی است. all با یک کلیک کل عنصر را برمی‌دارد — برای یک توکن کوتاه کد خوب است، روی پاراگراف شلوغ. پیشوند (-webkit-user-select) هنوز در WebKit قدیمی دیده می‌شود؛ اگر لازم شد کنار ویژگی استاندارد بگذارید. انتخاب را روی متن حقوقی، قیمت، یا پیام خطا که باید کپی شود نبندید.

caret-color — رنگ میلهٔ تایپ

caret همان میلهٔ چشمک‌زن داخل فیلد است. با برند هماهنگ کنید بدون پنهان‌کردنش:

Caret color in a field

css

input.email,
textarea.notes {
caret-color: #0f766e;
color: #0f172a;
}

caret-color: auto از رنگ متن پیروی می‌کند. caret هماهنگ پولیش است. caret-color: transparent برای «تمیزی» دام است: کسی نمی‌بیند کجا تایپ می‌کند. این color کل صفحه نیست و mask-image روی حرف هم نیست.

appearance — ویجت بومی را از نو بپوشانید

مرورگر چک‌باکس، فیلد جستجو و date picker را با پوست بومی می‌کشد. appearance: none (و اگر لازم شد -webkit-appearance: none) آن پوست را برمی‌دارد تا خودتان بکشید:

Reset appearance then restyle

css

input.search {
appearance: none;
-webkit-appearance: none;
border: 1px solid #94a3b8;
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
}

input[type="checkbox"].tick {
appearance: none;
-webkit-appearance: none;
width: 1.15rem;
height: 1.15rem;
border: 2px solid #334155;
border-radius: 0.25rem;
}

بعد از none شما بدهکار border، حالت تیک‌خورده، و حلقهٔ فوکوس هستید. چک‌باکس نامرئی چک‌باکس سفارشی نیست. پشتیبانی بر حسب نوع کنترل فرق دارد؛ ویجت واقعی را تست کنید، نه فقط input متنی. با appearance ماسکی که عکس را خورد «درست» نکنید و چندستونه را هم جایگزین نکنید.

UI در برابر ماسک، ستون، و outline باکس‌مدل

📊 UI vs mask vs columns vs outline

Tool	Job	Poor fit
`cursor` / `resize` / `caret-color` / `appearance`	Interaction chrome on controls	Stenciling a photo; newspaper columns
`user-select`	Limit highlight on chrome, not articles	Hiding copy people must paste
`outline` + `:focus-visible`	Keyboard focus ring (no layout space)	Replacing border math; fading labels with a mask
`mask-image`	Soft holes on one element’s pixels	Pointer shape; growing a textarea
Multi-column (`column-*`)	Fragment flowing text	Cursors, carets, native widget skin

Optional Advanced ستون را برای نثر گذاشت و ماسک را برای عکس. رابط کاربری لایهٔ کنترل است. column-count روی فرم تنظیمات، یا mask-image روی دکمهٔ ارسال، فرم را «UIتر» نمی‌کند.

چه چیزی را از بین نبرید

همهٔ راهنمای بومی را حذف نکنید. اسکرول‌بار، caret و حلقهٔ فوکوس برای همین‌اند که لازم‌اند. هدف لمسی هنوز اندازه می‌خواهد (دکمه را قبلاً در کورس استایل کردید). اگر کنترل غیرفعال است، cursor: not-allowed به‌علاوهٔ ویژگی واقعی disabled آرام‌تر از ماسکی است که برچسب را پنهان کند.

UI polish is not a mask or columns

css

.ok-ui {
cursor: pointer;
outline-offset: 2px;
}

.not-a-stencil {
/* don't: mask-image on the submit label to “soften” the click */
}

.not-a-newspaper {
/* don't: column-count on a login form to look advanced */
}

اگر مشکل لبهٔ عکس است، برگردید به ماسک. اگر مقاله بلند است، برگردید به ستون — یا به جریان بلوک معمولی. اگر حس این است که «قابل کلیک نیست»، از cursor و یک کنترل واقعی شروع کنید، نه از فیلتر تزئینی.

خودتان امتحان کنید

روی <button> واقعی cursor: pointer بگذارید و روی [disabled] مقدار not-allowed.
به textarea بدهید resize: vertical و min-height و overflow: auto.
outline با :focus-visible و outline-offset اضافه کنید — با Tab بروید سراغش.
user-select: none را فقط روی تراشهٔ نوار ابزار بگذارید؛ مقاله قابل‌انتخاب بماند.
در input رنگ caret-color را عوض کنید. فیلد را ماسک نکنید و column-count نگذارید.

اشتباه‌های رایج

cursor: pointer روی متنی که لینک یا دکمه نیست
resize: both روی کارت چیدمان و نوار ناوبری
outline: none سراسری بدون جایگزین :focus-visible
user-select: none روی کل صفحه، قیمت، یا متن خطا
caret-color: transparent به‌خاطر «ظاهر تمیز»
appearance: none بعد بدون border، بدون حالت تیک، بدون حلقهٔ فوکوس
ماسک یا چندستونه را به‌جای پولیش رابط کاربری گرفتن

خلاصه

CSS رابط کاربری به تعامل اشاره می‌کند: اشاره‌گر، resize، caret، پوست بومی
cursor باید راست بگوید؛ resize مال فیلد است نه پوستهٔ صفحه
حلقهٔ فوکوس را دیدنی نگه دارید؛ user-select و caret-color سبک بمانند
appearance: none فقط وقتی کل ویجت را از نو می‌سازید
نه شابلون ماسک است نه ستون روزنامه
Optional Advanced بعدی: تبدیل سه‌بعدی (transforms-3d)

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود

زبان