سؤالات مصاحبه HTML و CSS سطح میدل (50 سؤال)

Question 1

کدام selector معمولاً specificity بالاتری دارد؟

Accepted Answer

`#header`

Answer

`div`

Answer

`.card`

Answer

`*`

Question 2

کدام عملیات معمولاً گران‌تر است؟

Accepted Answer

تغییر `width` که باعث reflow/layout شود

Answer

تغییر `color` (repaint)

Answer

تغییر فقط `opacity` با GPU

Answer

خواندن یک متغیر JS

Question 3

BFC چه کمکی می‌کند؟

Accepted Answer

شامل کردن float و جلوگیری از margin collapse با بیرون

Answer

اجرای JavaScript سریع‌تر

Answer

فعال‌سازی Service Worker

Answer

فقط برای SVG

Question 4

کدام ویژگی stacking context جدید می‌سازد؟

Accepted Answer

`transform` با مقدار غیر از none

Answer

`color`

Answer

`margin`

Answer

`font-size`

Question 5

`position: sticky` چگونه رفتار می‌کند؟

Accepted Answer

تا رسیدن به آستانه relative است و بعد داخل والدش fixed می‌شود

Answer

همیشه نسبت به viewport fixed است

Answer

مثل absolute از جریان خارج می‌شود

Answer

فقط در جدول کار می‌کند

Question 6

تفاوت `:hover` و `::before`؟

Accepted Answer

`:hover` یک pseudo-class (حالت) است؛ `::before` یک pseudo-element (عنصر مجازی)

Answer

هر دو pseudo-element هستند

Answer

`::before` فقط با JavaScript کار می‌کند

Answer

`:hover` محتوا اضافه می‌کند

Question 7

تفاوت `defer` و `async` روی `<script>`؟

Accepted Answer

`defer` بعد از parse و به ترتیب اجرا می‌شود؛ `async` به محض دانلود و بی‌ترتیب

Answer

هر دو parse HTML را مسدود می‌کنند

Answer

`async` همیشه بعد از `DOMContentLoaded` اجرا می‌شود

Answer

هیچ تفاوتی ندارند

Question 8

`srcset` و `sizes` روی `<img>` چه کاری انجام می‌دهند؟

Accepted Answer

مرورگر تصویر مناسب را بر اساس اندازه نمایش و تراکم پیکسل انتخاب می‌کند

Answer

همه تصاویر را با هم دانلود می‌کنند

Answer

تصویر را lazy-load می‌کنند

Answer

فرمت تصویر را تبدیل می‌کنند

Question 9

مزیت CSS custom properties (`--x`) نسبت به متغیرهای Sass؟

Accepted Answer

در runtime زنده‌اند، cascade می‌شوند و با JS قابل تغییرند

Answer

در زمان build حذف می‌شوند

Answer

فقط در IE کار می‌کنند

Answer

از specificity پیروی نمی‌کنند

Question 10

یک flex item حاوی متن طولانی بدون فاصله (مثل URL) از container بیرون می‌زند، با اینکه `flex: 1` دارد. راه‌حل معمول چیست؟

Accepted Answer

`min-width: 0` روی flex item

Answer

`flex-grow: 0` روی flex item

Answer

`display: inline-flex` روی container

Answer

`justify-content: stretch` روی container

Question 11

در یک flex container با `flex-direction: row`، اگر آیتمی هم `width: 200px` و هم `flex-basis: 300px` داشته باشد، اندازه‌ی اولیه‌اش چیست؟

Accepted Answer

`300px`؛ `flex-basis` (غیر از `auto`) بر `width` اولویت دارد

Answer

`200px`؛ `width` همیشه اولویت دارد

Answer

`500px`؛ مقادیر جمع می‌شوند

Answer

`250px`؛ میانگین گرفته می‌شود

Question 12

چرا `align-content: center` روی یک flex container تک‌خطی (`nowrap`) اثری ندارد؟

Accepted Answer

چون `align-content` خطوط flex را در cross axis توزیع می‌کند و فقط در حالت چندخطی معنا دارد

Answer

چون `align-content` فقط در Grid کار می‌کند

Answer

چون باید همراه `justify-content` نوشته شود

Answer

چون فقط روی آیتم‌ها تنظیم می‌شود نه container

Question 13

تفاوت `repeat(auto-fill, minmax(200px, 1fr))` و `repeat(auto-fit, minmax(200px, 1fr))` وقتی آیتم‌ها کم باشند چیست؟

Accepted Answer

`auto-fill` ستون‌های خالی را نگه می‌دارد؛ `auto-fit` آن‌ها را collapse می‌کند تا آیتم‌ها کش بیایند

Answer

`auto-fit` ستون‌های خالی را نگه می‌دارد؛ `auto-fill` آن‌ها را حذف می‌کند

Answer

`auto-fill` فقط سطر می‌سازد و `auto-fit` فقط ستون

Answer

هیچ تفاوتی ندارند

Question 14

مزیت اصلی `grid-template-areas` چیست؟

Accepted Answer

تعریف بصری و خوانای layout با نام‌گذاری ناحیه‌ها و تغییر ساده در media queryها

Answer

تغییر ترتیب DOM برای screen readerها

Answer

حذف نیاز به `display: grid`

Answer

ایجاد خودکار ستون‌ها بر اساس محتوا

Question 15

با `grid-template-rows: 100px 100px` و ۶ آیتم در ۲ ستون، ارتفاع سطر سوم چگونه تعیین می‌شود؟

Accepted Answer

سطر ضمنی (implicit) است و با `grid-auto-rows` تعیین می‌شود (پیش‌فرض `auto`)

Answer

آیتم‌های اضافه نمایش داده نمی‌شوند

Answer

به‌طور خودکار `100px` می‌شود

Answer

آیتم‌های اضافه روی سطرهای قبلی overlap می‌کنند

Question 16

تفاوت `:is()` و `:where()` چیست؟

Accepted Answer

`:where()` همیشه specificity صفر دارد؛ `:is()` specificity بالاترین آرگومانش را می‌گیرد

Answer

`:is()` فقط یک سلکتور می‌پذیرد

Answer

`:where()` در مرورگرها پشتیبانی نمی‌شود

Answer

`:is()` همیشه specificity صفر دارد

Question 17

specificity سلکتور `button:not(.primary)` چیست؟

Accepted Answer

`(0,1,1)`؛ خود `:not` حساب نمی‌شود ولی آرگومانش حساب می‌شود

Answer

`(0,0,1)`؛ `:not` specificity را صفر می‌کند

Answer

`(0,2,1)`؛ `:not` به‌عنوان pseudo-class و `.primary` جدا حساب می‌شوند

Answer

`(1,0,1)`

Question 18

یک inline style `style="color: red"` و یک rule در stylesheet `#title { color: blue !important; }` داریم. کدام اعمال می‌شود؟

Accepted Answer

آبی؛ declaration با `!important` بر inline style معمولی غلبه می‌کند

Answer

قرمز؛ inline style همیشه برنده است

Answer

قرمز؛ چون در HTML دیرتر آمده

Answer

هیچ‌کدام؛ مرورگر رنگ پیش‌فرض را می‌گذارد

Question 19

کلمه‌ی کلیدی `currentColor` چه مقداری دارد؟

Accepted Answer

مقدار property `color` همان عنصر

Answer

رنگ پس‌زمینه‌ی والد

Answer

رنگ accent سیستم‌عامل

Answer

آخرین رنگ استفاده‌شده در stylesheet

Question 20

در لیست‌های تودرتو با `li { font-size: 1.2em; }` چه مشکلی پیش می‌آید؟

Accepted Answer

اندازه در هر سطح ضرب می‌شود و فونت مدام بزرگ‌تر می‌شود

Answer

همه‌ی سطوح دقیقاً هم‌اندازه می‌مانند

Answer

فونت در سطوح داخلی کوچک‌تر می‌شود

Answer

`em` در `font-size` نادیده گرفته می‌شود

Question 21

`font-size: clamp(1rem, 2.5vw, 2rem)` چه رفتاری دارد؟

Accepted Answer

با عرض viewport مقیاس می‌گیرد ولی هرگز کمتر از `1rem` یا بیشتر از `2rem` نمی‌شود

Answer

به‌صورت تصادفی یکی از سه مقدار را انتخاب می‌کند

Answer

همیشه `2.5vw` است

Answer

فقط در media queryها کار می‌کند

Question 22

property `aspect-ratio: 16 / 9` در چه شرایطی اثر نمی‌کند؟

Accepted Answer

وقتی هم `width` و هم `height` به‌صورت صریح تعیین شده باشند

Answer

وقتی عنصر `display: block` باشد

Answer

وقتی فقط `width` تعیین شده باشد

Answer

روی عناصر غیر از `<img>`

Question 23

برای سایتی که هم فارسی (RTL) و هم انگلیسی (LTR) دارد، به جای `margin-left` بهتر است از چه استفاده کرد؟

Accepted Answer

`margin-inline-start` که با جهت متن خودکار برعکس می‌شود

Answer

`margin-right` با یک کلاس جدا برای RTL همیشه بهتر است

Answer

`margin-start`

Answer

`float: start`

Question 24

«قانون اول ARIA» چه می‌گوید؟

Accepted Answer

اگر عنصر native HTML با معنا و رفتار لازم وجود دارد، از آن به جای ARIA استفاده کنید

Answer

روی همه‌ی عناصر `role` بگذارید

Answer

ARIA همیشه بر HTML معنایی برتری دارد

Answer

از ARIA فقط در فرم‌ها استفاده کنید

Question 25

اگر مجبور به استفاده از `

` باشید، چه چیزهای دیگری لازم است؟

Accepted Answer

`tabindex="0"` و فعال شدن با کلیدهای Enter و Space

Answer

فقط `cursor: pointer`

Answer

فقط یک `onclick`؛ بقیه را `role` انجام می‌دهد

Answer

`aria-hidden="true"`

Question 26

مشکل قرار دادن `aria-hidden="true"` روی یک container حاوی لینک‌ها چیست؟

Accepted Answer

لینک‌ها هنوز با Tab focus می‌گیرند ولی screen reader چیزی اعلام نمی‌کند

Answer

لینک‌ها از نظر بصری مخفی می‌شوند

Answer

لینک‌ها غیرفعال می‌شوند و کلیک کار نمی‌کند

Answer

هیچ مشکلی ندارد؛ روش توصیه‌شده است

Question 27

برای اعلام پیام «محصول به سبد اضافه شد» به کاربر screen reader بدون جابه‌جا کردن focus، از چه استفاده می‌کنید؟

Accepted Answer

یک live region مثل `aria-live="polite"` یا `role="status"`

Answer

`alert()` مرورگر

Answer

`title` روی دکمه

Answer

`aria-hidden="false"` روی پیام

Question 28

هدف «skip link» در ابتدای صفحه چیست؟

Accepted Answer

به کاربران کیبورد اجازه می‌دهد از منوی تکراری بپرند و مستقیم به محتوای اصلی بروند

Answer

لینک‌های شکسته را نادیده می‌گیرد

Answer

صفحه را برای موتور جستجو سریع‌تر index می‌کند

Answer

انیمیشن‌های صفحه را رد می‌کند

Question 29

مزیت `:focus-visible` نسبت به `:focus` چیست؟

Accepted Answer

focus ring را برای کاربران کیبورد نشان می‌دهد ولی معمولاً برای کلیک ماوس نه

Answer

focus را برای همه‌ی کاربران کاملاً حذف می‌کند

Answer

فقط روی عناصر قابل مشاهده در viewport کار می‌کند

Answer

focus را خودکار به عنصر بعدی می‌برد

Question 30

`@media (prefers-reduced-motion: reduce)` برای چه استفاده می‌شود؟

Accepted Answer

کاهش یا حذف انیمیشن‌ها برای کاربرانی که در تنظیمات سیستم آن را خواسته‌اند

Answer

کاهش مصرف باتری در حالت ذخیره انرژی

Answer

غیرفعال کردن JavaScript

Answer

تشخیص دستگاه‌های کند

Question 31

اضافه کردن `color-scheme: light dark` به `:root` چه اثری دارد؟

Accepted Answer

به مرورگر اجازه می‌دهد کنترل‌های فرم، scrollbar و پس‌زمینه‌ی پیش‌فرض را با تم سیستم تطبیق دهد

Answer

به‌طور خودکار همه‌ی رنگ‌های سایت را invert می‌کند

Answer

تم dark را برای همه اجباری می‌کند

Answer

فقط رنگ لینک‌ها را تغییر می‌دهد

Question 32

چه زمانی `

Accepted Answer

برای art direction (برش یا تصویر متفاوت در هر اندازه) یا ارائه‌ی فرمت‌های جدید مثل AVIF

Answer

برای اینکه تصویر lazy load شود

Answer

فقط برای تصاویر SVG

Answer

برای حذف نیاز به `alt`

Question 33

`loading="lazy"` روی `<img>` چه می‌کند و کجا نباید استفاده شود؟

Accepted Answer

دانلود را تا نزدیک شدن به viewport به تعویق می‌اندازد؛ نباید روی تصویر hero/LCP بالای صفحه باشد

Answer

تصویر را با کیفیت پایین‌تر دانلود می‌کند؛ روی لوگو نباید باشد

Answer

تصویر را بعد از `load` صفحه دانلود می‌کند؛ روی هیچ تصویری مشکلی ندارد

Answer

فقط روی `<iframe>` کار می‌کند

Question 34

برای فیلد کد تأیید عددی (OTP)، چرا `inputmode="numeric"` روی `type="text"` اغلب بهتر از `type="number"` است؟

Accepted Answer

کیبورد عددی نشان می‌دهد بدون رفتارهای ناخواسته‌ی number مثل spinner، حذف صفر اول و تغییر با scroll

Answer

`type="number"` در موبایل کیبورد عددی نشان نمی‌دهد

Answer

`inputmode` validation سمت سرور را انجام می‌دهد

Answer

`inputmode` مقدار را رمزنگاری می‌کند

Question 35

چرا تعیین مقادیر دقیق `autocomplete` (مثل `email`، `new-password`) مهم است؟

Accepted Answer

autofill صحیح، کمک password managerها و برآورده کردن WCAG 1.3.5

Answer

تا مرورگر فرم را خودکار submit کند

Answer

تا ورودی‌ها رمزنگاری شوند

Answer

فقط برای SEO اهمیت دارد

Question 36

یک دکمه‌ی «نمایش رمز» داخل `<form>` با کلیک باعث submit شدن فرم می‌شود. علت چیست؟

Accepted Answer

`type` پیش‌فرض `<button>` داخل فرم `submit` است؛ باید `type="button"` گذاشت

Answer

همه‌ی کلیک‌ها داخل فرم آن را submit می‌کنند

Answer

چون دکمه `onclick` ندارد

Answer

چون فرم attribute `action` ندارد

Question 37

چرا استایل `input:invalid { border-color: red }` تجربه‌ی بدی ایجاد می‌کند و جایگزین مدرن آن چیست؟

Accepted Answer

فیلدهای `required` خالی از همان ابتدا قرمز می‌شوند؛ `:user-invalid` فقط بعد از تعامل کاربر فعال می‌شود

Answer

`:invalid` هرگز فعال نمی‌شود؛ باید از `:error` استفاده کرد

Answer

`:invalid` فقط بعد از submit سرور کار می‌کند

Answer

مشکلی ندارد؛ `:invalid` فقط پس از blur فعال می‌شود

Question 38

`input.setCustomValidity("...")` چه کاری انجام می‌دهد؟

Accepted Answer

فیلد را invalid می‌کند و پیام سفارشی نشان می‌دهد تا با رشته‌ی خالی پاک شود

Answer

فقط متن placeholder را تغییر می‌دهد

Answer

validation مرورگر را برای همیشه غیرفعال می‌کند

Answer

مقدار فیلد را به سرور ارسال می‌کند

Question 39

تفاوت `dialog.showModal()` و `dialog.show()` چیست؟

Accepted Answer

`showModal()` در top layer با `::backdrop` باز می‌شود، بقیه‌ی صفحه inert است و Escape آن را می‌بندد

Answer

`show()` بقیه‌ی صفحه را inert می‌کند

Answer

`showModal()` فقط ظاهر را تغییر می‌دهد و رفتاری ندارد

Answer

هیچ تفاوتی ندارند

Question 40

`font-display: swap` در `@font-face` چه رفتاری دارد؟

Accepted Answer

متن فوراً با فونت fallback نمایش داده می‌شود و بعد از لود، فونت وب جایگزین می‌شود

Answer

متن تا لود کامل فونت مخفی می‌ماند

Answer

فونت وب هرگز استفاده نمی‌شود

Answer

فونت را از cache حذف می‌کند

Question 41

چرا `transition: height 0.3s` از `height: 0` به `height: auto` انیمیت نمی‌شود؟

Accepted Answer

`auto` یک مقدار عددی قابل interpolate نیست؛ راه‌حل‌ها `grid-template-rows: 0fr→1fr` یا `interpolate-size` هستند

Answer

چون `height` اصلاً قابل transition نیست

Answer

چون مدت زمان باید بیش از ۱ ثانیه باشد

Answer

چون transition فقط روی `transform` کار می‌کند

Question 42

چرا `width: 100vw` روی ویندوز اغلب اسکرول افقی ایجاد می‌کند؟

Accepted Answer

`vw` عرض scrollbar عمودی را هم شامل می‌شود

Answer

`vw` همیشه ۱۰٪ بیشتر از viewport است

Answer

چون `vw` به margin body اضافه می‌شود

Answer

چون ویندوز از `vw` پشتیبانی نمی‌کند

Question 43

چرا `height: 100vh` در مرورگرهای موبایل گاهی بخشی از محتوا را زیر نوار آدرس پنهان می‌کند؟

Accepted Answer

`vh` بر اساس بزرگ‌ترین viewport (نوار آدرس جمع‌شده) است؛ `dvh` یا `svh` این مشکل را حل می‌کنند

Answer

چون موبایل‌ها `vh` را به `vw` تبدیل می‌کنند

Answer

چون `vh` شامل کیبورد مجازی هم می‌شود

Answer

چون `100vh` فقط در حالت landscape کار می‌کند

Question 44

چرا روی `<a target="_blank">` به لینک‌های خارجی، `rel="noopener"` توصیه می‌شد؟

Accepted Answer

تا صفحه‌ی جدید به `window.opener` دسترسی نداشته باشد و نتواند صفحه‌ی اصلی را redirect کند (tabnabbing)

Answer

تا لینک سریع‌تر باز شود به دلیل prefetch

Answer

تا لینک در همان تب باز شود

Answer

تا موتورهای جستجو لینک را دنبال نکنند

Question 45

`pointer-events: none` روی یک overlay تزئینی چه اثری دارد؟

Accepted Answer

کلیک‌ها از آن عبور می‌کنند و به عناصر زیرین می‌رسند

Answer

overlay را مخفی می‌کند

Answer

عناصر زیرین را غیرقابل کلیک می‌کند

Answer

عنصر را از ترتیب Tab خارج و برای screen reader مخفی می‌کند

Question 46

برای نمایش «...» در انتهای متن تک‌خطی طولانی، کدام ترکیب لازم است؟

Accepted Answer

`white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`

Answer

فقط `text-overflow: ellipsis;`

Answer

`overflow: scroll; text-overflow: ellipsis;`

Answer

`word-break: break-all; text-overflow: ellipsis;`

Question 47

کاربرد `@supports (display: grid) { ... }` چیست؟

Accepted Answer

اعمال استایل فقط وقتی مرورگر از آن property/مقدار پشتیبانی کند

Answer

نصب polyfill خودکار برای Grid

Answer

بررسی سرعت مرورگر

Answer

فعال‌سازی Grid در مرورگرهای قدیمی

Question 48

مرورگرها سلکتوری مثل `.sidebar ul li a` را چگونه تطبیق می‌دهند؟

Accepted Answer

از راست به چپ: ابتدا همه‌ی `a`ها، سپس بررسی اجداد

Answer

از چپ به راست: ابتدا `.sidebar`، سپس نوادگان

Answer

به‌صورت تصادفی

Answer

فقط کلاس‌ها بررسی می‌شوند و تگ‌ها نادیده گرفته می‌شوند

Question 49

چرا `max-width: 65ch` برای پاراگراف‌ها توصیه می‌شود؟

Accepted Answer

طول خط را حدود ۶۵ کاراکتر نگه می‌دارد که برای خوانایی مناسب است

Answer

`ch` یعنی ۶۵ پیکسل ثابت

Answer

`ch` بر اساس ارتفاع viewport است

Answer

فقط برای فونت‌های monospace کار می‌کند

Question 50

بهترین روش اتصال پیام خطای validation به یک input برای screen reader چیست؟

Accepted Answer

`aria-describedby` به id پیام خطا و `aria-invalid="true"` روی input

Answer

فقط قرمز کردن border فیلد

Answer

قرار دادن پیام در `title` فیلد

Answer

قرار دادن پیام در `placeholder`

HTML و CSS · میدل · 50

کدام selector معمولاً specificity بالاتری دارد؟