Html Questions

Semantic HTML

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

• header
• nav
• main
• section
• article
• footer
• aside
• figure

چرا مهمه؟

• خب SEO بهتر می‌شه
• و Accessibility بهتر می‌شه (Screen Reader می‌فهمه چیه کجا)
• کدت تمیزتر و قابل فهم‌تر می‌شه
• مرورگر ساختار صفحه رو بهتر درک می‌ک

CSS Questions

Box Model Vs Border-box

Box Model

در مدل استاندارد، وقتی به یک المان width می‌دی، اون عرض فقط برای محتواست. یعنی اگه padding و border اضافه کنی، عرض کل المان زیاد میشه و Layout به هم می‌ریزه.

border-box

اما در border-box، اون عرضی که تعیین کردی شامل padding و border هم می‌شه. یعنی المان از اون سایزی که گفتی بزرگتر نمی‌شه. (توصیه جدی: همیشه از box-sizing: border-box )

Specificity (اولویت انتخابگرها)

• Inline styles: مستقیم توی تگ (بیشترین اولویت).
• IDs: مثل #header.
• Classes, pseudo-classes, attributes: مثل .btn یا :hover.
• Elements and pseudo-elements: مثل div یا ::before.

نکته: !important هم که بمب اتمه و همه‌چی رو دور می‌زنه (ولی سعی کن ازش استفاده نکنی چون نشونه‌ی ضعفِ تسلط به Specificityـه! ).

Display: none Vs Visibility: hidden

هر دو المان رو غیب می‌کنن، اما:

display: none:

• المان رو کاملاً از ریشه (DOM) حذف نمی‌کنه ولی فضایی که اشغال کرده بود رو آزاد می‌کنه. انگار اصلاً وجود نداره.

visibility: hidden:

• المان غیب می‌شه ولی جا اشغال می‌کنه. مثل یه روح که دیده نمی‌شه ولی جاش اونجا رزرو شده!

Flexbox Vs CSS Grid

Flexbox

• برای طرح‌بندی یک‌بعدی (یا ردیف یا ستون). عالیه برای تراز کردن محتوا داخل یک نوار یا لیست.

CSS Grid

• برای طرح‌بندی دوبعدی (همزمان ردیف و ستون). برای ساختار کلیِ کلِ صفحه (Layout) استفاده می‌شه.

یه قانون نانوشته: فِلکس برای محتواست، گرید برای ساختار.

Rem Vs Em

rem (Root em)

• نسبت به سایز فونتِ (تگ ریشه) محاسبه می‌شه. معمولاً ۱۶ پیکسل. خیلی پیش‌بینی‌پذیر و تمیزه.

em

• نسبت به سایز فونتِ والدِ خودش (Parent) محاسبه می‌شه. اگه تو در تو بشه، سایزها می‌تونه به صورت تصاعدی بزرگ یا کوچک بشه و دیوونت کنه!

Position

Static :

• حالت پیش‌فرض.

Relative :

• نسبت به جایگاه اصلی خودش جابه‌جا می‌شه

Absolute :

• نسبت به نزدیک‌ترین والدی که پوزیشنش استاتیک نیست جابه‌جا می‌شه.

Fixed :

• نسبت به Viewport (پنجره مرورگر) می‌چسبه و با اسکرول تکون نمی‌خوره.

Sticky :

• ترکیبی از Relative و Fixed. تا وقتی اسکرول بهش نرسیده عادیه، وقتی رسید، مثل چسب می‌چسبه به لبه (مثلاً برای Header سایت).

چطوری یک div رو دقیقاً وسطِ صفحه قرار می‌دی؟

روش مدرن (Flexbox) :

• روی والد بنویس: display: flex; justify-content: center; align-items: center;.

روش Grid :

• روی والد بنویس: display: grid; place-items: center;.

روش قدیمی (Absolute) :

• transform: translate(-50%, -50%); top: 50%; left: 50%;.

مفهوم Reflow و Repaint در پرفورمنس CSS

Reflow :

• وقتی ساختار هندسی صفحه عوض می‌شه (مثلاً عوض کردن عرض یا پوزیشن). مرورگر باید دوباره کل Layout رو محاسبه کنه که سنگینه.

Repaint :

• وقتی فقط ظاهر عوض می‌شه (مثل رنگ یا Visibility) و ساختار تکون نمی‌خوره. سبک‌تره.

نکته : برای انیمیشن‌ها سعی کن از transform و opacity استفاده کنی چون مرورگر می‌تونه اون‌ها رو با GPU رندر کنه و Reflow ایجاد نمی‌کنه.

inline Vs inline-block Vs block

عناصر Block :

• هرچی دیدی یه تیکه از صفحه رو کامل قرق کرده، میشه Block!
• کل فضای موجود از چپ تا راست رو تصرف می‌کنه، حتی اگه محتواش یه سلام باشه.
• همیشه خودش تو خط جدید شروع میشه، آیتم بعدی هم میره خط پایین.
• مثال: (div, p, h1)

عناصر Inline :

• مثل رد شدن نینجاها از وسط پاراگراف: فقط به اندازه محتواشون فضا اشغال می‌کنن.
• خط رو نمی‌شکنن، کنارشون راحت میشه المنت دیگه بذاری.
• نمیشه ابعاد (width, height) مشخص کرد (گوشی موبایل هم بهشون حسودی می‌کنه از کوچیکی‌شون!)
• مثال: (span, a, strong)

عناصر Inline-block :

• هیبریدِ جالب ماجراست: هم رفتار inline داره (خط رو نمی‌شکنه، کنار بچه‌محلاش قرار می‌گیره)، هم المان block می‌تونه width و height داشته باشه و margin و padding دقیق!
• مثلا برای دکمه‌ها عالیه.
• مثال عملی: ـوقتی دلت می‌خواد یه عکس کوچولو وسط متن باشه، قشنگ و منظم!