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

Question 1

Critical CSS به چه معناست؟

Accepted Answer

استایل above-the-fold برای First Paint سریع‌تر

Answer

حذف کامل همه CSS

Answer

فقط dark mode

Answer

CSS نوشته‌شده با TypeScript

Question 2

Container Queries بر اساس چه چیزی واکنش نشان می‌دهند؟

Accepted Answer

اندازهٔ والد/کانتینر کامپوننت

Answer

فقط عرض کل viewport

Answer

فقط ارتفاع صفحه

Answer

سرعت اینترنت کاربر

Question 3

برای مودال accessible کدام ضروری است؟

Accepted Answer

focus trap + بستن با Escape + بازگردانی فوکوس

Answer

فقط رنگ قرمز برای دکمه بستن

Answer

غیرفعال کردن کامل کیبورد

Answer

استفاده از `alert()` مرورگر

Question 4

`content-visibility: auto` چه کمکی می‌کند؟

Accepted Answer

رندر محتوای خارج از صفحه را تا نزدیک شدن به viewport به تعویق می‌اندازد

Answer

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

Answer

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

Answer

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

Question 5

خطر استفاده زیاد از `will-change` چیست؟

Accepted Answer

لایه‌های اضافه و مصرف زیاد حافظه GPU

Answer

حذف استایل‌ها

Answer

خطای syntax در مرورگر

Answer

هیچ خطری ندارد

Question 6

selector `:has()` چه امکانی می‌دهد؟

Accepted Answer

انتخاب والد بر اساس فرزندان یا عناصر بعدی

Answer

فقط انتخاب فرزند اول

Answer

اجرای JavaScript داخل CSS

Answer

import فایل CSS دیگر

Question 7

`@layer` در CSS چه مشکلی را حل می‌کند؟

Accepted Answer

کنترل ترتیب cascade مستقل از specificity

Answer

بارگذاری تنبل فایل CSS

Answer

ساخت stacking context

Answer

تعریف انیمیشن

Question 8

`<link rel="preload">` برای چیست؟

Accepted Answer

دانلود زودهنگام و با اولویت بالای منبع حیاتی صفحه فعلی

Answer

دانلود صفحه بعدی در پس‌زمینه

Answer

کش کردن دائمی فایل

Answer

اجرای فوری اسکریپت

Question 9

بهترین راه جلوگیری از CLS برای تصاویر؟

Accepted Answer

تعیین `width`/`height` یا `aspect-ratio` برای رزرو فضا

Answer

لود تصاویر بعد از ۵ ثانیه

Answer

استفاده از `display: none`

Answer

حذف همه تصاویر

Question 10

ترتیب درست مراحل rendering pipeline مرورگر پس از تغییر استایل چیست؟

Accepted Answer

Style → Layout → Paint → Composite

Answer

Layout → Style → Composite → Paint

Answer

Paint → Layout → Style → Composite

Answer

Composite → Paint → Style → Layout

Question 11

چرا این حلقه کند است؟ `for (el of items) { el.style.width = box.offsetWidth + "px"; }`

Accepted Answer

هر خواندن `offsetWidth` پس از نوشتن، یک forced synchronous layout ایجاد می‌کند (layout thrashing)

Answer

چون `style.width` فقط repaint ایجاد می‌کند

Answer

چون `offsetWidth` درخواست شبکه می‌فرستد

Answer

چون حلقه‌ی `for...of` در DOM کند است

Question 12

چرا انیمیشن CSS روی `transform` حتی وقتی main thread با JavaScript سنگین مسدود است روان می‌ماند، ولی انیمیشن `left` نه؟

Accepted Answer

انیمیشن `transform` می‌تواند کاملاً روی compositor thread اجرا شود؛ `left` در هر فریم به layout روی main thread نیاز دارد

Answer

چون `transform` توسط JavaScript engine بهینه می‌شود

Answer

چون `left` فقط با `position: static` کار می‌کند

Answer

چون مرورگر انیمیشن‌های `left` را به ۳۰fps محدود می‌کند

Question 13

`contain: layout paint` روی یک ویجت مستقل چه سودی دارد؟

Accepted Answer

تغییرات داخلی آن باعث layout/paint بقیه‌ی صفحه نمی‌شود و محتوا به باکسش clip می‌شود

Answer

ویجت را در یک Web Worker جداگانه render می‌کند

Answer

ویجت را از accessibility tree حذف می‌کند

Answer

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

Question 14

یک مودال با `position: fixed` به جای پوشاندن viewport، فقط داخل یک کارت نمایش داده می‌شود. محتمل‌ترین علت چیست؟

Accepted Answer

یکی از اجداد `transform`، `filter`، `perspective` یا `contain: paint` دارد و containing block شده است

Answer

کارت `position: relative` دارد

Answer

کارت `z-index` بالایی دارد

Answer

مودال `display: flex` دارد

Question 15

مزیت `isolation: isolate` روی root یک کامپوننت چیست؟

Accepted Answer

یک stacking context بدون اثر جانبی می‌سازد تا `z-index`های داخلی با بقیه‌ی صفحه رقابت نکنند

Answer

کامپوننت را در Shadow DOM قرار می‌دهد

Answer

استایل‌های بیرونی را به کامپوننت اعمال نمی‌کند

Answer

کامپوننت را روی GPU layer جدا می‌برد

Question 16

`@scope (.card) to (.content) { img { ... } }` چه کاری انجام می‌دهد؟

Accepted Answer

`img`های داخل `.card` را استایل می‌دهد ولی نه آن‌هایی که داخل `.content` هستند (donut scope)

Answer

`img`ها را در Shadow DOM ایزوله می‌کند

Answer

specificity استایل‌ها را به `(1,0,0)` افزایش می‌دهد

Answer

فقط اولین `img` داخل `.card` را انتخاب می‌کند

Question 17

چرا transition روی `--angle` در `background: conic-gradient(from var(--angle), ...)` کار نمی‌کند مگر با `@property`؟

Accepted Answer

custom property ثبت‌نشده type ندارد و مرورگر نمی‌تواند interpolate کند؛ `@property` با `syntax: "<angle>"` آن را قابل انیمیشن می‌کند

Answer

چون gradientها هرگز قابل انیمیشن نیستند

Answer

چون `var()` داخل gradient مجاز نیست

Answer

چون transition فقط روی propertyهای shorthand کار می‌کند

Question 18

با `p { color: blue; color: var(--c); }` و `--c: 20px`، رنگ متن چه می‌شود؟

Accepted Answer

رنگ ارث‌رسیده از والد؛ declaration در زمان computed-value نامعتبر است و مثل `unset` عمل می‌کند

Answer

آبی؛ مرورگر به declaration قبلی برمی‌گردد

Answer

سیاه، چون رنگ پیش‌فرض همیشه سیاه است

Answer

خطای parse و کل rule نادیده گرفته می‌شود

Question 19

با `@layer reset, base;`، اگر هر دو لایه برای یک property `!important` داشته باشند، کدام برنده است؟

Accepted Answer

`reset`؛ برای declarationهای important ترتیب لایه‌ها معکوس می‌شود

Answer

`base`؛ لایه‌ی بعدی همیشه برنده است

Answer

آن که specificity بیشتری دارد، بدون توجه به لایه

Answer

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

Question 20

چرا `.card { container-type: inline-size; } @container (min-width: 400px) { .card { padding: 2rem; } }` روی خود `.card` اعمال نمی‌شود؟

Accepted Answer

یک عنصر نمی‌تواند اندازه‌ی خودش را query کند؛ container query فقط روی نوادگان container اعمال می‌شود

Answer

چون `container-type` باید `size` باشد

Answer

چون container query فقط با `max-width` کار می‌کند

Answer

چون `padding` در container query مجاز نیست

Question 21

در یک ردیف کارت که هر کارت عنوان، متن و دکمه دارد، چگونه بخش‌ها را در همه‌ی کارت‌ها هم‌تراز کنیم؟

Accepted Answer

کارت‌ها `grid-row: span 3` و `grid-template-rows: subgrid` بگیرند تا از trackهای والد استفاده کنند

Answer

به همه‌ی عنوان‌ها ارتفاع ثابت بدهیم

Answer

از `display: contents` روی body کارت استفاده کنیم

Answer

از `float` برای هر بخش استفاده کنیم

Question 22

چگونه layout shift ناشی از swap فونت وب را بدون حذف `font-display: swap` کاهش می‌دهید؟

Accepted Answer

تعریف `@font-face` برای فونت fallback با `size-adjust`، `ascent-override` و `descent-override` منطبق با فونت وب

Answer

افزایش `line-height` به ۳

Answer

قرار دادن فونت در انتهای `<body>`

Answer

استفاده از `font-weight: normal`

Question 23

`fetchpriority="high"` روی تصویر hero چه اثری دارد؟

Accepted Answer

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

Answer

تصویر را inline و base64 می‌کند

Answer

تصویر را از CDN نزدیک‌تر دریافت می‌کند

Answer

فشرده‌سازی تصویر را غیرفعال می‌کند

Question 24

یک `<script>` inline بعد از `<link rel="stylesheet">` آمده است. چرا اجرای آن ممکن است با CSS کند تأخیر بخورد؟

Accepted Answer

اسکریپت ممکن است استایل‌ها را بخواند، پس مرورگر اجرای آن را تا آماده شدن CSSOM متوقف می‌کند

Answer

چون اسکریپت‌های inline همیشه آخر اجرا می‌شوند

Answer

چون CSS و JS از یک connection استفاده می‌کنند

Answer

چنین تأخیری وجود ندارد

Question 25

`<link rel="stylesheet" href="print.css" media="print">` چه رفتاری در بارگذاری دارد؟

Accepted Answer

دانلود می‌شود ولی با اولویت پایین و render را مسدود نمی‌کند

Answer

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

Answer

مانند stylesheet معمولی render را مسدود می‌کند

Answer

پس از `load` صفحه به‌صورت sync اجرا می‌شود

Question 26

چه ریسکی در استفاده از `display: contents` روی عناصری مثل `

Accepted Answer

برخی مرورگرها معنای عنصر را از accessibility tree حذف کرده‌اند و ممکن است focus هم از دست برود

Answer

فرزندان عنصر از DOM حذف می‌شوند

Answer

عنصر دو بار render می‌شود

Answer

هیچ ریسکی ندارد؛ فقط باکس حذف می‌شود

Question 27

یک `` همراه با `` داریم. نام قابل‌دسترس از کجا می‌آید؟

Accepted Answer

`aria-labelledby`؛ بالاترین اولویت را در محاسبه‌ی accessible name دارد

Answer

`<label>`؛ همیشه بر ARIA برتری دارد

Answer

`aria-label`

Answer

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

Question 28

یک `

` همراه با متنش به‌صورت پویا در DOM inject می‌شود و screen reader چیزی نمی‌گوید. چرا؟

Accepted Answer

live region باید از قبل در DOM باشد؛ فقط تغییرات بعدی محتوای آن اعلام می‌شوند

Answer

چون `role="status"` فقط روی `<span>` کار می‌کند

Answer

چون باید `aria-hidden="true"` داشته باشد

Answer

چون live regionها فقط در `<dialog>` کار می‌کنند

Question 29

attribute `inert` روی محتوای پشت یک drawer باز چه کاری انجام می‌دهد؟

Accepted Answer

زیردرخت را غیرقابل focus، غیرقابل کلیک و پنهان از accessibility tree می‌کند

Answer

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

Answer

فقط از screen reader پنهان می‌کند، مانند `aria-hidden`

Answer

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

Question 30

برای متنی که فقط screen reader باید بخواند (مثلاً برچسب دکمه‌ی آیکونی)، کدام روش درست است؟

Accepted Answer

کلاس visually-hidden با `position: absolute`، ابعاد 1px، `clip-path: inset(50%)` و `overflow: hidden`

Answer

`display: none`

Answer

`visibility: hidden`

Answer

`font-size: 0` و `color: transparent` در جای خود

Question 31

در یک toolbar یا tablist با ۱۰ دکمه، الگوی «roving tabindex» چیست؟

Accepted Answer

فقط آیتم فعال `tabindex="0"` دارد و بقیه `-1`؛ پیمایش داخلی با کلیدهای جهت‌دار انجام می‌شود

Answer

همه‌ی آیتم‌ها `tabindex` مثبت به ترتیب می‌گیرند

Answer

همه‌ی آیتم‌ها `tabindex="-1"` دارند و ویجت با Tab قابل دسترس نیست

Answer

`tabindex` به‌صورت تصادفی بین آیتم‌ها جابه‌جا می‌شود

Question 32

استفاده از `order` در flex یا جای‌گذاری صریح در grid برای تغییر ترتیب بصری چه مشکل دسترس‌پذیری ایجاد می‌کند؟

Accepted Answer

ترتیب focus و خواندن screen reader از DOM پیروی می‌کند و با ترتیب بصری ناهماهنگ می‌شود

Answer

عناصر جابه‌جاشده focusable نیستند

Answer

screen reader عناصر جابه‌جاشده را دو بار می‌خواند

Answer

هیچ مشکلی ندارد؛ مرورگر ترتیب focus را خودکار اصلاح می‌کند

Question 33

یک focus ring با `outline: none; box-shadow: 0 0 0 3px blue` در Windows High Contrast ناپدید می‌شود. چرا و راه‌حل چیست؟

Accepted Answer

در forced-colors mode، `box-shadow` حذف می‌شود؛ از `outline: 2px solid transparent` یا outline واقعی استفاده کنید که با رنگ سیستم نمایش داده می‌شود

Answer

چون High Contrast از CSS پشتیبانی نمی‌کند

Answer

چون رنگ آبی در High Contrast مجاز نیست ولی `box-shadow` قرمز کار می‌کند

Answer

چون باید `z-index` بالاتری داشته باشد

Question 34

چرا `height: 100%` روی یک فرزند اغلب هیچ اثری ندارد؟

Accepted Answer

درصد ارتفاع به ارتفاع definite در والد نیاز دارد؛ اگر والد `height: auto` باشد، مقدار به `auto` تبدیل می‌شود

Answer

چون درصد ارتفاع نسبت به عرض محاسبه می‌شود

Answer

چون `height` فقط با `px` کار می‌کند

Answer

چون باید `box-sizing: content-box` باشد

Question 35

در `grid-template-columns: 1fr 1fr`، یک بلوک `<pre>` با خط طولانی باعث می‌شود ستون‌ها نامساوی شوند. علت و راه‌حل؟

Accepted Answer

`1fr` یعنی `minmax(auto, 1fr)` و حداقل آن min-content است؛ از `minmax(0, 1fr)` استفاده کنید

Answer

`fr` در grid پشتیبانی کامل ندارد؛ از درصد استفاده کنید

Answer

`

` همیشه grid را می‌شکند؛ آن را با `` جایگزین کنید

Answer

باید `grid-auto-flow: dense` اضافه شود

Question 36

تفاوت کلیدی `overflow: clip` با `overflow: hidden` چیست؟

Accepted Answer

`clip` scroll container نمی‌سازد، پس `position: sticky` نوادگان را نمی‌شکند و اسکرول برنامه‌نویسی هم ممکن نیست

Answer

`clip` محتوای اضافه را کوچک می‌کند تا جا شود

Answer

`hidden` scrollbar نمایش می‌دهد و `clip` نه

Answer

هیچ تفاوتی ندارند؛ `clip` نام جدید `hidden` است

Question 37

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

Accepted Answer

scroll anchoring؛ مرورگر یک عنصر anchor را انتخاب و scroll offset را جبران می‌کند (با `overflow-anchor` قابل کنترل)

Answer

`scroll-behavior: smooth`

Answer

`scroll-snap-type`

Answer

هیچ مکانیزمی وجود ندارد و همیشه پرش رخ می‌دهد

Question 38

وقتی محتوای صفحه بلند می‌شود و scrollbar ظاهر می‌شود، کل layout چند پیکسل جابه‌جا می‌شود. راه‌حل مدرن چیست؟

Accepted Answer

`scrollbar-gutter: stable` تا فضای scrollbar از قبل رزرو شود

Answer

`overflow: hidden` روی `html`

Answer

`width: 100vw` روی body

Answer

`scroll-behavior: smooth`

Question 39

چگونه عنصری که از `display: none` به `display: block` می‌رود را با CSS خالص fade-in کنیم؟

Accepted Answer

با `@starting-style` برای مقدار اولیه‌ی `opacity` و `transition-behavior: allow-discrete` برای `display`

Answer

فقط با `transition: display 0.3s`

Answer

امکان‌پذیر نیست؛ حتماً JavaScript لازم است

Answer

با `animation-fill-mode: none`

Question 40

در View Transitions API، چرا دادن `view-transition-name: card` به همه‌ی کارت‌های یک لیست باعث شکست transition می‌شود؟

Accepted Answer

هر `view-transition-name` باید در یک snapshot یکتا باشد؛ تکراری بودن transition را لغو می‌کند

Answer

چون نام باید با `--` شروع شود

Answer

چون View Transitions فقط برای navigation بین صفحات است

Answer

چون باید `position: absolute` داشته باشند

Question 41

یک tooltip ساخته‌شده با attribute `popover` داخل container با `overflow: hidden` و `z-index` پایین قرار دارد. چه اتفاقی می‌افتد؟

Accepted Answer

در top layer render می‌شود و clip یا stacking context والد روی آن اثری ندارد

Answer

برش می‌خورد چون والد `overflow: hidden` دارد

Answer

زیر عناصر دیگر می‌ماند مگر `z-index: 9999` بگیرد

Answer

popover داخل container با overflow اصلاً باز نمی‌شود

Question 42

مزیت اصلی فضای رنگی `oklch()` نسبت به `hsl()` برای ساخت پالت رنگ چیست؟

Accepted Answer

روشنایی ادراکی یکنواخت است؛ رنگ‌های با `L` یکسان واقعاً هم‌روشن دیده می‌شوند و gamut گسترده (P3) را پوشش می‌دهد

Answer

فایل CSS را کوچک‌تر می‌کند

Answer

در مرورگرهای قدیمی بهتر پشتیبانی می‌شود

Answer

رنگ‌ها را خودکار برای dark mode معکوس می‌کند

Question 43

چرا استفاده از `@import` داخل فایل‌های CSS برای performance بد است؟

Accepted Answer

فایل import‌شده فقط پس از دانلود و parse فایل والد کشف می‌شود و یک waterfall سریالی render-blocking می‌سازد

Answer

`@import` استایل‌ها را دو بار اعمال می‌کند

Answer

`@import` cache مرورگر را غیرفعال می‌کند

Answer

`@import` فقط در HTTP/1 کار می‌کند

Question 44

در یک لیست که برخی آیتم‌ها `.hidden` هستند، چگونه فقط آیتم‌های قابل مشاهده را یکی‌درمیان رنگ کنیم؟

Accepted Answer

`li:nth-child(odd of :not(.hidden))`

Answer

`li:not(.hidden):nth-child(odd)`

Answer

`li:nth-of-type(odd):not(.hidden)`

Answer

`li.visible:nth-child(2n)`

Question 45

نام کاربری انگلیسی مثل `john_99!` داخل یک جمله‌ی فارسی، علامت‌گذاری اطرافش را به‌هم می‌ریزد. راه‌حل درست چیست؟

Accepted Answer

قرار دادن آن داخل `<bdi>` (یا `dir="auto"`) تا جهت متن ایزوله شود

Answer

تبدیل همه‌ی متن صفحه به `direction: ltr`

Answer

اضافه کردن فاصله‌ی اضافی قبل و بعد از نام

Answer

استفاده از `text-align: right`

Question 46

در یک سایت دوزبانه، `unicode-range` در `@font-face` چه مزیتی دارد؟

Accepted Answer

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

Answer

کاراکترهای خارج از محدوده را از متن حذف می‌کند

Answer

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

Answer

فونت را برای همه‌ی زبان‌ها اجباری می‌کند

Question 47

چرا Safari/VoiceOver یک `<ul>` با `list-style: none` را گاهی به‌عنوان لیست اعلام نمی‌کند؟

Accepted Answer

WebKit عمداً معنای لیست را برای لیست‌های بدون نشانگر حذف می‌کند؛ با `role="list"` قابل بازگرداندن است

Answer

چون `list-style: none` عنصر را از DOM حذف می‌کند

Answer

چون `

` باشد

Answer

این یک باگ است که با `display: block` رفع می‌شود

Question 48

یک `

` با `margin-top: 40px` داخل یک `
` با پس‌زمینه است، ولی فاصله بالای header (بیرون پس‌زمینه) ظاهر می‌شود. چرا؟

Accepted Answer

margin فرزند اول از والدی که padding، border یا BFC ندارد عبور می‌کند و با margin والد collapse می‌شود

Answer

چون `<h1>` همیشه `position: absolute` است

Answer

چون `<header>` margin منفی پیش‌فرض دارد

Answer

چون background فقط content box را رنگ می‌کند

Question 49

تفاوت `text-wrap: balance` و `text-wrap: pretty` چیست؟

Accepted Answer

`balance` طول خطوط را برابر می‌کند (برای عنوان‌های کوتاه)؛ `pretty` از کلمه‌ی تنها در خط آخر جلوگیری می‌کند (برای پاراگراف‌ها)

Answer

`balance` متن را justify می‌کند؛ `pretty` فونت را صاف‌تر می‌کند

Answer

هر دو دقیقاً یکسان‌اند

Answer

`pretty` فقط روی عنوان‌ها و `balance` فقط روی پاراگراف‌ها کار می‌کند

Question 50

CSS Anchor Positioning (`anchor-name` و `position-anchor`) چه مشکلی را حل می‌کند؟

Accepted Answer

موقعیت‌دهی tooltip یا منو نسبت به یک عنصر دلخواه، حتی بیرون از ساختار DOM آن، با fallback خودکار هنگام برخورد به لبه

Answer

لنگر انداختن اسکرول به یک عنصر هنگام لود محتوا

Answer

ساخت لینک‌های داخلی `#anchor`

Answer

ثابت کردن عنصر در viewport مانند `position: fixed`

HTML و CSS · سینیور · 50

Critical CSS به چه معناست؟