سبک و الگوی جعبه

ویژگی‌های سبک همان ویژگی‌های عنصرند

ویژگی سبک درست مثل هر ویژگی دیگر نوشته می‌شود: نام = مقدار درون عنصر. در نام‌ها به جای خط تیره‌ی CSS فاصله می‌آید، پس max-width می‌شود بیشینه عرض و border-radius می‌شود گردی کادر. نام غلط خطای ترجمه است و پیام نزدیک‌ترین نام درست را پیشنهاد می‌دهد. نام‌های انگلیسی هم در هر پرونده کار می‌کنند. برای بعضی ویژگی‌ها چند نام فارسی هست: فضا و حاشیه هر دو margin‌اند، و فاصله و فاصله داخلی هر دو padding. در این درس همیشه نام کوتاه‌تر را می‌بینید.

سبک‌ها روی خود عنصر نمی‌مانند. مترجم سبک‌های هر عنصر را در یک قاعده زیر یک کلاس کوتاه تولیدشده جمع می‌کند و قاعده‌ها را در برگه‌ی سبک می‌گذارد. جعبه: فاصله = 20 پس زمینه = "#eef" پایان به <div class="a"> و قاعده‌ی .a{padding:20px;background:#eef} تبدیل می‌شود. عنصرهایی که سبک‌هایشان یکی است یک کلاس را میان خود شریک می‌شوند و صفحه کوچک می‌ماند.

مقدارها

بیشتر مقدارها از چهار نوع‌اند. عدد تنها هر جا طول بخواهند پیکسل است: فاصله = 24 یعنی 24px و 1.5 یعنی 1.5px. ویژگی‌هایی که عدد ساده می‌گیرند، مثل ارتفاع خط و نسبت ابعاد، آن را همان عدد نگه می‌دارند. رشته هر چیز دیگری را در خود جا می‌دهد: یکا، رنگ‌هایی که با # شروع می‌شوند، چند کلمه. کلیدواژه را می‌شود بدون گیومه نوشت: نمایش = فلکس، سرریز = پنهان، رنگ = سفید؛ هر کلیدواژه را به فارسی یا همان واژه‌ی انگلیسی CSS می‌توانید نوشت، اما کلیدواژه‌ی فارسی چندکلمه‌ای مثل "جعبه کادر" باید میان گیومه باشد. و تابع با آرگومان ساده را هم می‌شود بی‌گیومه نوشت، مثل پس زمینه = rgb(37, 99, 235).

چند طول در یک رشته یک میان‌بر می‌سازند. فاصله = "8 40" یعنی 8px 40px: عدد اول برای بالا و پایین است و دوم برای چپ و راست. تا چهار مقدار مجاز است، عدد بی‌یکا px می‌گیرد و عددی که یکا دارد آن را نگه می‌دارد، پس "1rem 2" یعنی 1rem 2px.

صفحه:
    عنوان = "مقدارهای سبک"
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 پایان
    سراسری: گزینشگر = "p" فضا = "0 0 10px" جهت متن = ltr پایان
    پاراگراف: محتوا = "فاصله\u200e = 24" فاصله = 24 پس زمینه = "#e0f2fe" پایان
    پاراگراف: محتوا = "فاصله\u200e = 8 40" فاصله = "8 40" پس زمینه = "#dcfce7" پایان
    پاراگراف: محتوا = "کادر\u200e = 3px dashed" فاصله = 12 کادر = "3px dashed #0f766e" پایان
    پاراگراف: محتوا = "عرض\u200e = 60%" فاصله = 12 عرض = "60%" پس زمینه = "#fef9c3" پایان
    پاراگراف:
        محتوا = "پس زمینه\u200e = linear-gradient(...)"
        فاصله = 12
        رنگ = white
        پس زمینه = "linear-gradient(90deg, #0f766e, #2563eb)"
    پایان
پایان

مقدارها را می‌شود هنگام ترجمه هم حساب کرد: فاصله = گام * 2 + "px" از یک ثابت استفاده می‌کند (بخش «ثابت‌ها و بخش‌ها» پایین‌تر نشان می‌دهد چطور تعریف می‌شود) و + عدد و یکا را به متن می‌چسباند.

یکاها

طول یک عدد است و یک یکا. آنهایی که همیشه به کار می‌برید:

• px: یک پیکسل CSS. برای کادرها و جزئیات ریز خوب است.
• rem: اندازه‌ی قلم صفحه، به‌طور معمول ۱۶ پیکسل. اندازه‌ی بر پایه‌ی rem وقتی خواننده قلم مرورگر را بزرگ می‌کند بزرگ می‌شود، پس برای متن و فاصله‌ها از آن استفاده کنید.
• em: اندازه‌ی قلم خود عنصر، که باعث می‌شود فاصله‌ی درونی با اندازه‌ی متن همان جعبه تغییر کند.
• %: سهمی از والد. برای عرض و فاصله‌ها و فضاهای افقی پهنای والد است و برای ارتفاع، ارتفاع والد.
• vw و vh: یک صدم پهنا یا ارتفاع پنجره. vmin و vmax کوچک‌تر یا بزرگ‌تر آن دو را برمی‌دارند.
• ch: پهنای رقم 0 در قلم کنونی. بیشینه عرض = "65ch" سطرهای متن را در طولی خوانا نگه می‌دارد.
• cm و mm و in: طول‌های دنیای واقعی، برای چاپ.

صفحه:
    عنوان = "یکاها"
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 پایان
    سراسری: گزینشگر = "p" فضا = "0 0 8px" فاصله = "6px 10px" پس زمینه = "#99f6e4" فضای سفید = "بدون پیچش" جهت متن = ltr پایان
    پاراگراف: محتوا = "200px" عرض = "200px" پایان
    پاراگراف: محتوا = "12rem" عرض = "12rem" پایان
    پاراگراف: محتوا = "50%" عرض = "50%" پایان
    پاراگراف: محتوا = "40vw" عرض = "40vw" پایان
    پاراگراف: محتوا = "24ch" عرض = "24ch" پایان
    پاراگراف: محتوا = "5cm" عرض = "5cm" پایان
پایان

یکای fr، سهمی از فضای آزاد در شبکه، به درس چیدمان تعلق دارد.

رنگ‌ها

هر جا رنگ بخواهند می‌توانید آن را با هر نمادگذاری CSS بنویسید. رنگ متن، پس‌زمینه و پرکننده‌های پرزرق‌وبرق درس خودشان را دارند (پس‌زمینه‌ها و رنگ‌ها)؛ اینجا فقط فهرست راه‌های نوشتن مقدار است.

• نام: teal، crimson، white یا نام فارسی مثل سفید.
• هگز: "#0f766e"، شکل کوتاه "#fa0" و با شفافیت "#0f766e80".
• rgb(37, 99, 235): قرمز، سبز و آبی از ۰ تا ۲۵۵. برای شفافیت "rgb(37 99 235 / 50%)" بنویسید.
• hsl(160, 84%, 39%): فام به‌صورت زاویه روی چرخ رنگ، بعد اشباع و روشنایی. با دست تنظیمش آسان است.
• oklch(0.7 0.15 30): روشنایی، غلظت و فام در فضایی که گام‌های برابر برابر دیده می‌شوند.
• color-mix(in srgb, red 40%, white): آمیزه‌ی دو رنگ.
• transparent و currentColor. دومی رنگ متن خود عنصر است، پس کادری که با آن نوشته شود هم‌رنگ متن می‌ماند.

صفحه:
    عنوان = "رنگ‌ها"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 پایان
    سراسری: گزینشگر = "p" فضا = "0 0 6px" فاصله = "8px 12px" جهت متن = ltr پایان
    پاراگراف: محتوا = "teal" پس زمینه = teal رنگ = white پایان
    پاراگراف: محتوا = "#f59e0b" پس زمینه = "#f59e0b" پایان
    پاراگراف: محتوا = "rgb(37, 99, 235)" پس زمینه = rgb(37, 99, 235) رنگ = white پایان
    پاراگراف: محتوا = "hsl(160, 84%, 39%)" پس زمینه = "hsl(160, 84%, 39%)" پایان
    پاراگراف: محتوا = "oklch(0.7 0.15 30)" پس زمینه = "oklch(0.7 0.15 30)" پایان
    پاراگراف: محتوا = "color-mix(in srgb, red 40%, white)" پس زمینه = "color-mix(in srgb, red 40%, white)" پایان
    جعبه:
        پس زمینه = "#fde68a"
        فاصله = 6
        پاراگراف: محتوا = "transparent: دیدن آنچه پشت آن است" پس زمینه = transparent پایان
    پایان
    پاراگراف: محتوا = "currentColor: کادر هم‌رنگ متن" رنگ = "#7c3aed" کادر = "3px solid currentColor" پایان
پایان

الگوی جعبه

هر عنصر یک جعبه‌ی مستطیل است با چهار لایه، از درون به بیرون. محتوا متن یا فرزندان است. فاصله (padding) جای خالی میان محتوا و کادر است و پس‌زمینه‌ی عنصر در آن دیده می‌شود. کادر (border) خطی است که دور فاصله می‌کشد. فضا (margin) جای خالی بیرون کادر است که جعبه‌های دیگر را دور نگه می‌دارد. فاصله و فضا هر دو یک تا چهار مقدار می‌گیرند، به ترتیب بالا، راست، پایین، چپ، و هر طرف ویژگی خودش را هم دارد: فاصله بالا، فضا چپ و مانند آن.

صفحه:
    عنوان = "جعبه‌ی عنصر"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 پایان
    جعبه:
        پس زمینه = "#e5e7eb"
        عرض = 320
        جعبه:
            فضا = 24
            کادر = "8px solid #1d4ed8"
            فاصله = 24
            پس زمینه = "#bfdbfe"
            جعبه:
                پس زمینه = white
                فاصله = 8
                محتوا = "محتوا"
            پایان
        پایان
    پایان
    پاراگراف: محتوا = "خاکستری: فضای بیرون جعبه (فضا). خط آبی تیره: کادر. آبی روشن: فاصله‌ی درونی. سفید: محتوا." پایان
پایان

پرسش بعدی این است که عرض = 240 چه چیزی را اندازه می‌گیرد. به‌طور پیش‌فرض (content-box) فقط محتوا را، پس جعبه‌ای با ۲۰ پیکسل فاصله‌ی درونی و کادر ۶ پیکسلی در هر طرف در واقع 240 + 40 + 12 = 292 پیکسل پهنا دارد، و چیدمانی از چند جعبه‌ی این‌چنینی هرگز آن‌طور که نوشته‌اید جمع نمی‌شود. با اندازه جعبه = "border-box" عرض فاصله و کادر را هم شامل می‌شود و ۲۴۰ یعنی ۲۴۰. دکمه را بزنید تا همان جعبه را با هر دو روش اندازه‌گیری ببینید.

واردسازی دام

صفحه:
    عنوان = "اندازه جعبه"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 پایان
    سراسری: گزینشگر = ".border" اندازه جعبه = "border-box" پایان
    جعبه:
        شناسه = "b"
        عرض = 240
        فاصله = 20
        کادر = "6px solid #0f766e"
        پس زمینه = "#ccfbf1"
        محتوا = "عرض = 240"
    پایان
    پاراگراف: شناسه = "out" محتوا = "عرض جعبه اکنون 292 پیکسل است" پایان
    دکمه:
        محتوا = "تغییر اندازه جعبه"
        کلیک = ():
            دام.تعویض کلاس(دام.با شناسه("b")، "border")
            پهنا := دام.دریافت خاصیت عددی(دام.با شناسه("b")، "offsetWidth")
            دام.تنظیم متن(دام.با شناسه("out")، "عرض جعبه اکنون " + پهنا + " پیکسل است")
        پایان
    پایان
پایان

برای همین تقریباً هر صفحه با یک سطر ثابت شروع می‌شود. عنصر سراسری بدون گزینشگر روی همه‌ی عنصرهای صفحه اثر می‌گذارد:

سراسری: اندازه جعبه = "border-box" پایان

عرض، ارتفاع و حدشان

عرض و ارتفاع اندازه را تعیین می‌کنند. به‌طور پیش‌فرض یک بلوک به پهنای والدش است و به بلندی محتوایش، و auto نام همین پیش‌فرض است. درصد سهمی از والد است، هرچند ارتفاع درصدی فقط وقتی کار می‌کند که والد ارتفاع خودش را داشته باشد. چون اندازه‌ی ثابت با عوض شدن پنجره یا متن می‌شکند، بیشتر وقت‌ها به‌جایش حد می‌گذارید: کمینه عرض و بیشینه عرض، کمینه ارتفاع و بیشینه ارتفاع. کمینه بر بیشینه برتری دارد و بیشینه بر عرض. اندازه‌های min-content، max-content و fit-content جعبه را با متنش اندازه می‌کنند. نسبت ابعاد جعبه را در شکلش نگه می‌دارد ("16 / 9")، وقتی یک ضلع را بدهید و ضلع دیگر را آزاد بگذارید.

صفحه:
    عنوان = "اندازه‌ها"
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 پایان
    سراسری: گزینشگر = "p" فضا = "0 0 8px" فاصله = 10 پس زمینه = "#e0e7ff" جهت متن = ltr پایان
    پاراگراف: محتوا = "کمینه عرض\u200e = 12rem, بیشینه عرض\u200e = 24rem, عرض\u200e = 50%" عرض = "50%" کمینه عرض = "12rem" بیشینه عرض = "24rem" پایان
    پاراگراف: محتوا = "عرض\u200e = clamp(10rem, 40%, 20rem)" عرض = "clamp(10rem, 40%, 20rem)" پایان
    پاراگراف: محتوا = "ارتفاع\u200e = 4rem" ارتفاع = "4rem" پایان
    جعبه:
        عرض = 200
        نسبت ابعاد = "16 / 9"
        پس زمینه = "#c7d2fe"
        فاصله = 10
        جهت متن = ltr
        محتوا = "نسبت ابعاد\u200e = 16 / 9"
    پایان
پایان

دستور آماده‌ی بسیار رایج عرض = "100%" است با بیشینه عرض = "40rem"، و گاهی فضا = "0 auto" برای وسط‌چین: جعبه‌ای که روی تلفن همه‌ی صفحه را پر می‌کند و روی نمایشگر بزرگ از رشد می‌ایستد.

ویژگی‌های منطقی

چپ و راست جهت‌های فیزیکی‌اند. صفحه‌ی انگلیسی سطرهایش را از چپ شروع می‌کند، صفحه‌ی فارسی از راست، و چیدمانی که با فضا چپ ساخته شده برای زبان دیگر باید دوباره نوشته شود. ویژگی‌های منطقی سمت‌ها را با جریان متن نام می‌برند. راستای خطی (inline) راستایی است که متن در آن می‌رود و راستای بلوکی (block) راستایی است که سطرها در آن روی هم می‌نشینند. در فارسی و انگلیسی خطی افقی است و بلوکی عمودی، و آغاز جایی است که سطر از آن شروع می‌شود: در فارسی راست، در انگلیسی چپ.

پس اندازه خطی همان عرض است و اندازه بلوکی همان ارتفاع، فضا ابتدا و فاصله انتها سمت‌های آغاز و پایان سطرند، و فضا بلوکی و فاصله بلوکی بالا و پایین. نمونه‌ی زیر به دو جعبه دقیقاً یک سبک را می‌دهد و جهت را روی پوشش‌هایشان می‌گذارد: تورفتگی و خط کناری خودشان جابه‌جا می‌شوند.

صفحه:
    عنوان = "ویژگی‌های منطقی"
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 پایان
    سراسری: گزینشگر = "p" فضا = "0 0 12px" پایان
    جعبه:
        جهت = ltr
        پاراگراف:
            اندازه خطی = "70%"
            فضا ابتدا = 40
            فاصله خطی = "24 8"
            فاصله بلوکی = 10
            کادر خطی آغاز = "6px solid #0f766e"
            پس زمینه = "#ccfbf1"
            محتوا = "جهت چپ به راست: آغاز همان سمت چپ است"
        پایان
    پایان
    جعبه:
        جهت = rtl
        پاراگراف:
            اندازه خطی = "70%"
            فضا ابتدا = 40
            فاصله خطی = "24 8"
            فاصله بلوکی = 10
            کادر خطی آغاز = "6px solid #0f766e"
            پس زمینه = "#ccfbf1"
            محتوا = "جهت راست به چپ: همان سبک‌ها، آینه‌وار"
        پایان
    پایان
پایان

برای سایتی با هر دو زبان، ویژگی‌های منطقی معمولاً انتخاب بهتری‌اند. چپ و راست را وقتی به کار ببرید که واقعاً صفحه‌نمایش را می‌خواهید، مثلاً سایه‌ای که باید به راست بیفتد.

فضاها در عمل

چهار قاعده درباره‌ی فضا بیشتر شگفتی‌ها را توضیح می‌دهد.

• وسط‌چین کردن. بلوکی که عرض دارد و فضا = "0 auto" وسط می‌نشیند: auto فضای آزاد را میان دو سمت تقسیم می‌کند. بلوک بدون عرض همه‌ی والد را پر می‌کند و چیزی برای تقسیم نمی‌ماند.
• ادغام شدن. وقتی دو بلوک زیر هم‌اند، فضای میانشان مجموع دو فضا نیست، بزرگ‌تر از آن دو است. فضا پایین = 40 بالای فضا بالا = 20 فاصله‌ی ۴۰ می‌گذارد. همین میان والد و نخستین یا آخرین فرزندش هم رخ می‌دهد، وقتی چیزی (فاصله، کادر، ارتفاع) جدایشان نکند. فضاها درون چیدمان فلکس یا شبکه هرگز ادغام نمی‌شوند.
• فضای منفی. فضا می‌تواند منفی باشد و عنصر را به همسایه‌اش یا بیرون والدش می‌کشد. کم استفاده کنید؛ ساختار واقعی را پنهان می‌کند.
• کدام را به کار ببرم. فاصله وقتی که جا باید بخشی از جعبه باشد و پس‌زمینه‌اش را نشان دهد، فضا وقتی که باید جعبه‌های دیگر را دور کند.

صفحه:
    عنوان = "فضای بیرونی"
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 پایان
    سراسری: گزینشگر = "p" فضا = 0 فاصله = 10 پس زمینه = "#fed7aa" جهت متن = ltr پایان
    پاراگراف: محتوا = "عرض\u200e = 240, فضا\u200e = 0 auto 30px" عرض = 240 فضا = "0 auto 30px" پایان
    پاراگراف: محتوا = "فضا پایین\u200e = 40" فضا پایین = 40 پایان
    پاراگراف: محتوا = "فضا بالا\u200e = 20" فضا بالا = 20 پس زمینه = "#fdba74" پایان
    پاراگراف: محتوا = "فضا بالا\u200e = -12, فضا چپ\u200e = 40" فضا بالا = -12 فضا چپ = 40 پس زمینه = "#fb923c" پایان
پایان

نمایش و دیدپذیری

نمایش تعیین می‌کند عنصر چطور در چیدمان شرکت کند. بلوکی سطر تازه شروع می‌کند و همه‌ی پهنا را می‌گیرد، خطی درون سطر متن می‌نشیند و عرض و ارتفاع را نادیده می‌گیرد، و "خطی بلوکی" در سطر می‌نشیند ولی از آن‌ها پیروی می‌کند. فلکس و شبکه عنصر را به ظرفی تبدیل می‌کنند که فرزندانش را می‌چیند، که موضوع کامل درس چیدمان است. محتوایی (contents) جعبه‌ی خود عنصر را برمی‌دارد و می‌گذارد فرزندانش طوری در چیدمان والد شرکت کنند که انگار خودش نیست، و "ریشه جریان" (flow-root) جعبه‌ای می‌سازد که هر چه درونش است، شناورها هم، در خود نگه می‌دارد. هر عنصر پیش‌فرضی دارد: جعبه بلوکی است و تکه خطی.

صفحه:
    عنوان = "نمایش"
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 پایان
    سراسری: گزینشگر = "span" عرض = 90 ارتفاع = 40 فاصله = 6 فضا = 2 پس زمینه = "#bbf7d0" کادر = "1px solid #15803d" پایان
    سرتیتر: اندازه = 3 محتوا = "خطی (پیش‌فرض تکه)" پایان
    جعبه:
        تکه: محتوا = "یک" پایان
        تکه: محتوا = "دو" پایان
        تکه: محتوا = "سه" پایان
    پایان
    سرتیتر: اندازه = 3 محتوا = "خطی بلوکی" پایان
    جعبه:
        تکه: نمایش = "خطی بلوکی" محتوا = "یک" پایان
        تکه: نمایش = "خطی بلوکی" محتوا = "دو" پایان
        تکه: نمایش = "خطی بلوکی" محتوا = "سه" پایان
    پایان
    سرتیتر: اندازه = 3 محتوا = "بلوکی" پایان
    جعبه:
        تکه: نمایش = بلوکی محتوا = "یک" پایان
        تکه: نمایش = بلوکی محتوا = "دو" پایان
    پایان
پایان

برای پنهان کردن عنصر دو راه دارید که رفتارشان فرق دارد. نمایش = هیچ عنصر را کاملاً از صفحه برمی‌دارد: جعبه‌ای ندارد و عنصرهای بعدی بالا می‌آیند. دیدپذیری = پنهان فقط رسم شدنش را متوقف می‌کند: جایش می‌ماند. در هر دو حالت نمی‌شود روی عنصر کلیک کرد، صفحه‌کلید نمی‌تواند روی آن تمرکز کند و صفحه‌خوان‌ها از آن می‌گذرند. دو دکمه‌ی زیر سبک را از یک اسکریپت تنظیم می‌کنند تا بتوانید پاراگرافِ بعدی را تماشا کنید.

واردسازی دام

صفحه:
    عنوان = "پنهان کردن"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 پایان
    دکمه:
        محتوا = "نمایش: هیچ"
        کلیک = ():
            اگر دام.دریافت سبک(دام.با شناسه("target")، "display") == "none":
                دام.تنظیم سبک(دام.با شناسه("target")، "display"، "")
            وگرنه:
                دام.تنظیم سبک(دام.با شناسه("target")، "display"، "none")
            پایان
        پایان
    پایان
    دکمه:
        محتوا = "دیدپذیری: پنهان"
        کلیک = ():
            اگر دام.دریافت سبک(دام.با شناسه("target")، "visibility") == "hidden":
                دام.تنظیم سبک(دام.با شناسه("target")، "visibility"، "")
            وگرنه:
                دام.تنظیم سبک(دام.با شناسه("target")، "visibility"، "hidden")
            پایان
        پایان
    پایان
    پاراگراف: محتوا = "پیش از" پس زمینه = "#e5e7eb" پایان
    پاراگراف: شناسه = "target" محتوا = "عنصر هدف" پس زمینه = "#fca5a5" پایان
    پاراگراف: محتوا = "پس از" پس زمینه = "#e5e7eb" پایان
پایان

سرریز

وقتی محتوا از جعبه‌اش بزرگ‌تر است، سرریز تکلیف را روشن می‌کند. با نمایان (پیش‌فرض) بیرون می‌ریزد و روی همسایه‌ها می‌افتد. پنهان آن را در کادر می‌برد، پیمایشی همیشه نوار پیمایش نشان می‌دهد، و خودکار فقط وقتی چیزی برای پیمایش هست که تقریباً همیشه همان است که می‌خواهید. بریده مثل پنهان می‌برد ولی هرگز پیمایش را، حتی از یک اسکریپت، مجاز نمی‌کند، و تنها مقداری است که با فضا برش سرریز کار می‌کند. سرریز افقی و سرریز عمودی یک راستا را جدا تعیین می‌کنند و سرریز بلوکی و سرریز خطی شکل منطقی آن‌هایند که امروز مرورگرهای کمتری می‌شناسند.

صفحه:
    عنوان = "سرریز"
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 پایان
    جعبه:
        نمایش = فلکس
        پیچش آرایش = "wrap"
        شکاف = "40 24"
        جعبه: عرض = 150 ارتفاع = 90 فاصله = 8 کادر = "2px solid #6366f1" اندازه قلم = 14 سرریز = نمایان محتوا = "نمایان: متنی که از جعبه‌اش بلندتر است، پس یا بیرون می‌ریزد، یا بریده می‌شود، یا نوار پیمایش می‌گیرد." پایان
        جعبه: عرض = 150 ارتفاع = 90 فاصله = 8 کادر = "2px solid #6366f1" اندازه قلم = 14 سرریز = پنهان محتوا = "پنهان: متنی که از جعبه‌اش بلندتر است، پس یا بیرون می‌ریزد، یا بریده می‌شود، یا نوار پیمایش می‌گیرد." پایان
        جعبه: عرض = 150 ارتفاع = 90 فاصله = 8 کادر = "2px solid #6366f1" اندازه قلم = 14 سرریز = خودکار محتوا = "خودکار: متنی که از جعبه‌اش بلندتر است، پس یا بیرون می‌ریزد، یا بریده می‌شود، یا نوار پیمایش می‌گیرد." پایان
        جعبه: عرض = 150 ارتفاع = 90 فاصله = 8 کادر = "2px solid #6366f1" اندازه قلم = 14 سرریز = پیمایشی محتوا = "پیمایشی: متنی که از جعبه‌اش بلندتر است، پس یا بیرون می‌ریزد، یا بریده می‌شود، یا نوار پیمایش می‌گیرد." پایان
    پایان
پایان

calc و min و max و clamp و var

CSS هر جا طول بخواهد می‌تواند حساب هم بکند. calc() یکاها را قاطی می‌کند: "calc(100% - 80px)" یعنی همه‌چیز جز ۸۰ پیکسل، و فاصله دو طرف + و - لازم است. min() کوچک‌ترین آرگومان‌هایش را برمی‌دارد و max() بزرگ‌ترین را، پس "min(100%, 20rem)" یعنی «حداکثر 20rem». clamp(کمینه, مطلوب, بیشینه) هر دو در یکی است: "clamp(1rem, 4vw, 2rem)" اندازه‌ی قلمی است که با پنجره بزرگ و کوچک می‌شود ولی میان ۱ و ۲ rem می‌ماند.

var() یک ویژگی سفارشی CSS را می‌خواند، مقداری که خودتان نام می‌گذارید. این‌ها در CSS خام اعلان می‌شوند، که آن را به یک عنصر سبک بالای صفحه می‌دهید. نام با دو خط تیره شروع می‌شود و پایین‌تر با "var(--brand)" در هر جا به کار می‌رود.

صفحه:
    عنوان = "تابع‌های CSS"
    سبک: محتوا = ":root { --brand: #0f766e; --gap: 14px }" پایان
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 پایان
    سراسری: گزینشگر = "p" فضا = "0 0 10px" فاصله = "var(--gap)" جهت متن = ltr پایان
    پاراگراف: محتوا = "عرض‎ = calc(100% - 80px)" عرض = "calc(100% - 80px)" پس زمینه = "#e0f2fe" پایان
    پاراگراف: محتوا = "عرض‎ = min(100%, 20rem)" عرض = "min(100%, 20rem)" پس زمینه = "#dcfce7" پایان
    پاراگراف: محتوا = "عرض‎ = max(50%, 18rem)" عرض = "max(50%, 18rem)" پس زمینه = "#fef9c3" پایان
    پاراگراف: محتوا = "اندازه قلم‎ = clamp(1rem, 4vw, 2rem)" اندازه قلم = "clamp(1rem, 4vw, 2rem)" پس زمینه = "#fce7f3" پایان
    پاراگراف: محتوا = "پس زمینه‎ = var(--brand)" پس زمینه = "var(--brand)" رنگ = white پایان
پایان

تفاوتش با ثابت‌های سلام در این است که مقدار کِی معلوم می‌شود. ثابت هنگام ترجمه ثابت می‌شود. ویژگی سفارشی در مرورگر زندگی می‌کند، پس می‌تواند با اندازه‌ی پنجره، با قاعده‌ی حالت تاریک، یا از یک اسکریپت عوض شود.

قاعده‌های سراسری

سبک روی خود عنصر ابزار درست برای همان عنصر است. عنصر سراسری برای هر چیز دیگر است: قاعده برای یک نوع کامل عنصر، یا برای کل صفحه. گزینشگرش هر گزینشگر CSS است که به شکل متن نوشته می‌شود. نام برچسب همه‌ی عنصرهای آن نوع را سبک می‌دهد، ".tip" همه‌ی عنصرهای آن کلاس را، "#lead" یک عنصر با آن شناسه را، و "li:nth-child(odd)" یا "nav a" بر پایه‌ی جایگاه یا مکان برمی‌گزینند. گزینشگر را نگذارید تا قاعده برای هر عنصر اعمال شود، که همان کار سطر اندازه جعبه بالاست.

صفحه:
    عنوان = "قاعده‌های سراسری"
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 ارتفاع خط = 1.9 پایان
    سراسری: گزینشگر = "h2" رنگ = "#0f766e" فضا = "0 0 8px" پایان
    سراسری: گزینشگر = ".tip" پس زمینه = "#fef3c7" کادر راست = "4px solid #f59e0b" فاصله = "8px 12px" پایان
    سراسری: گزینشگر = "#lead" اندازه قلم = 20 پایان
    سراسری: گزینشگر = "li:nth-child(odd)" پس زمینه = "#f1f5f9" پایان
    سرتیتر: اندازه = 2 محتوا = "سه نوع گزینشگر" پایان
    پاراگراف: شناسه = "lead" محتوا = "یک برچسب، یک کلاس و یک شناسه، همه یک‌بار سبک می‌گیرند." پایان
    پاراگراف: کلاس = "tip" محتوا = "هر عنصری با کلاس tip این ظاهر را می‌گیرد." پایان
    فهرست:
        مورد: محتوا = "ردیف‌های فرد سایه دارند" پایان
        مورد: محتوا = "ردیف‌های زوج ندارند" پایان
        مورد: محتوا = "دوباره فرد" پایان
    پایان
پایان

دو نکته. گزینشگر همان‌طور که نوشته‌اید به برگه‌ی سبک می‌رود، پس مترجم نمی‌تواند بگوید غلط نوشته‌اید. و وقتی دو قاعده به یک عنصر برسند آن که اختصاصی‌تر است برنده می‌شود: کلاس بر برچسب می‌چربد و شناسه بر کلاس. سراسری را برای پیش‌فرض‌ها و کلاس‌های مشترک به کار ببرید و سبک خود عنصر را برای آنچه یکتاست.

ثابت‌ها و بخش‌ها

یک عدد را یک‌بار بنویسید و همه‌جا به کار ببرید. پایا (const) بالای صفحه مقداری را نگه می‌دارد که هنگام ترجمه حساب می‌شود، و مقدار سبک‌ها می‌توانند در عبارت از آن استفاده کنند: فاصله = گام * 2 + "px". بخش (component) همین کار را برای یک تکه‌ی کامل صفحه می‌کند: پارامتر می‌گیرد، درختی از عنصرهای سبک‌دار می‌سازد، و محتوا: پایان جایی را نشان می‌دهد که فرزندان هر بار استفاده در آن می‌نشینند. پارامترها در سبک‌ها هم کار می‌کنند: مقداری مثل سرریز = حالت پارامتر حالت را می‌خواند. استفاده‌هایی که سبک یکسان دارند یک کلاس تولیدشده را شریک می‌شوند، پس کارتی که ده بار به کار رود یک قاعده می‌افزاید.

پایا گام := 16
پایا رنگ‌اصلی := "#0f766e"

بخش کارت(عنوان، متن، فام):
    جعبه:
        فاصله = گام
        فضا = "0 0 " + گام + "px"
        کادر = "2px solid " + فام
        گردی کادر = گام / 2 + "px"
        سرتیتر: اندازه = 3 محتوا = عنوان رنگ = فام فضا = "0 0 6px" پایان
        پاراگراف: محتوا = متن فضا = 0 پایان
        محتوا: پایان
    پایان
پایان

صفحه:
    عنوان = "کارت‌های قابل استفاده‌ی دوباره"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = گام * 2 + "px" پایان
    کارت: عنوان = "سریع" متن = "به کد ماشین ساخته می‌شود." فام = رنگ‌اصلی پایان
    کارت: عنوان = "ایمن" متن = "هنگام ترجمه بررسی می‌شود." فام = "#2563eb"
        پاراگراف: محتوا = "حتی سبک‌های صفحه." رنگ = "#64748b" پایان
    پایان
پایان

نکردن کار اضافه در صفحه‌های بزرگ

سه ویژگی به بارگذاری و پیمایش سریع‌تر یک صفحه‌ی بلند کمک می‌کنند، به بهای چند قول. محدودسازی (contain) به مرورگر می‌گوید درون عنصر بر هیچ چیز بیرون اثر نمی‌گذارد، پس یک تغییر درونی هرگز لازم نمی‌کند همه‌ی صفحه دوباره چیده شود. دیدپذیری محتوا = خودکار جلوتر می‌رود: مرورگر تا وقتی عنصر دور از صفحه‌نمایش است آن را رسم و چیدمان نمی‌کند. چون عنصر کنار گذاشته‌شده ارتفاعی ندارد، با اندازه ذاتی محدود یک حدس اضافه کنید، auto 600px یعنی «پس از دیدن، اندازه‌ی واقعی را به کار ببر و پیش از آن ۶۰۰ پیکسل». آن را برای بخش‌های صفحه‌ای بلند به کار ببرید، نه صفحه‌های کوچک که فقط خطر می‌افزاید.

بخش:
    دیدپذیری محتوا = خودکار
    اندازه ذاتی محدود = "auto 600px"
    سرتیتر: اندازه = 2 محتوا = "پایین صفحه" پایان
    پاراگراف: محتوا = "فقط وقتی رسم می‌شود که خواننده نزدیکش برسد." پایان
پایان

بازنشانی و اندازه‌ی فیلد

همه ویژگی‌ها (all) همه‌ی ویژگی‌های یک عنصر را یک‌جا بازنشانی می‌کند. فقط کلیدواژه‌هایی که برای هر ویژگی کار می‌کنند مجازند: initial، inherit، unset و revert. اول آن را بنویسید و بعد سبک‌هایی را که می‌خواهید برگردانید، همان‌طور که نمونه‌ی مرجع دکمه‌ای را به جعبه‌ای ساده تبدیل می‌کند. اندازه فیلد = محتوا می‌گذارد کادر نوشتن با تایپ کاربر بزرگ شود، بی‌اسکریپت، در مرورگرهایی که آن را پشتیبانی می‌کنند. ویژگی‌های appearance، resize و zoom در درس واکنش‌گرا آمده‌اند.

صفحه:
    عنوان = "اندازه فیلد"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 پایان
    سراسری: گزینشگر = "p" فضا = "0 0 8px" پایان
    پاراگراف: محتوا = "در کادر بنویسید: با متن بزرگ می‌شود." پایان
    ورودی:
        شناسه = "name"
        اندازه فیلد = محتوا
        کمینه عرض = "6ch"
        بیشینه عرض = "100%"
        فاصله = 6
        اندازه قلم = 18
        جانگهدار = "نام شما"
    پایان
    پاراگراف: محتوا = "بدون آن، کادر نوشتن همیشه یک پهنای ثابت دارد:" فضا بالا = 24 پایان
    ورودی: فاصله = 6 اندازه قلم = 18 جانگهدار = "نام شما" پایان
پایان

مرجع: اندازه، فضا، نمایش و سرریز

همه‌ی ویژگی‌های این درس زیر آمده‌اند، با آنچه می‌پذیرند و یک نمونه‌ی کوتاه که مترجم بررسی کرده است. نام‌های انگلیسی در هر پرونده کار می‌کنند و درس‌های فارسی نام‌های فارسی را به کار می‌برند. اول عنصر سراسری، بعد ویژگی‌ها در گروه‌ها.

قاعده‌ی سراسری

سراسری (English: global)

قاعده‌ی سبک را برای کل صفحه می‌نویسد، نه برای یک عنصر. بدون گزینشگر قاعده برای همه‌ی عنصرها اعمال می‌شود و جای مناسبی برای بازنشانی‌هایی مثل اندازه جعبه است. با گزینشگر برای هر چیزی که گزینشگر پیدا کند اعمال می‌شود. هر ویژگی سبکی را می‌گیرد، با پیشوندهای اشاره، تمرکز و مانند آن.

سراسری: گزینشگر = ".tip" پس زمینه = "#fef3c7" فاصله = 12 اشاره پس زمینه = "#fde68a" پایان

عرض، ارتفاع و شکل

هر اندازه یک شکل فیزیکی دارد (عرض، ارتفاع) و یک شکل منطقی (اندازه خطی، اندازه بلوکی)، و از هر کدام یک کمینه و یک بیشینه.

فضا

جای خالی بیرون کادر. فضا همه‌ی سمت‌ها را تعیین می‌کند، شکل‌های بالا، راست، پایین و چپ یک سمت فیزیکی را، و شکل‌های بلوکی و خطی جهت متن را دنبال می‌کنند.

فاصله

جای خالی درون کادر. همان مجموعه‌ی سمت‌های فضا را دارد و هرگز auto یا مقدار منفی نمی‌گیرد.

سرریز

آنچه برای محتوایی که جا نمی‌شود رخ می‌دهد.

نمایش و محدودسازی

اینکه عنصر چطور در چیدمان شرکت می‌کند، رسم می‌شود یا نه، و مرورگر از چه چیزی می‌تواند بگذرد.

بازنشانی و اندازه‌ی فیلد

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

• کارتی بسازید با فاصله = 24، کادر و بیشینه عرض = "24rem". پنج تا از آن را در یک ستون بگذارید و فضا = "0 auto 16px" بدهید. فاصله‌ی میان دو کارت ۱۶ پیکسل است یا ۳۲؟
• نمونه‌ی جعبه را بردارید و بالایش سراسری: اندازه جعبه = "border-box" پایان بنویسید. کدام اندازه‌ها عوض می‌شوند و چرا جعبه کوچک‌تر به نظر می‌رسد؟
• جعبه‌ای ۱۵۰ در ۱۰۰ با یک جمله‌ی بلند درونش بسازید و همه‌ی مقدارهای سرریز را امتحان کنید. بعد ارتفاع = 100 را با کمینه ارتفاع = 100 عوض کنید.
• همه‌ی فضا چپ و فضا راست یک صفحه را با شکل‌های منطقی عوض کنید، بعد جهت = ltr را به صفحه بدهید و نتیجه را ببینید.