صفحه‌ی واکنش‌گرا و حالت‌ها
صفحه‌ی وب را روی تلفن، لپ‌تاپ، تلویزیون و گاهی چاپگر باز می‌کنند، در حالت روشن یا تاریک، با موشواره، با انگشت یا فقط با صفحه‌کلید. این درس نشان می‌دهد چطور یک صفحه بنویسید که با همه‌ی این‌ها سازگار شود: اندازه‌های شناور، پرس‌وجوی رسانه، پرس‌وجوی نگهدارنده، حالت‌های تعامل و ویژگی‌هایی که اشاره‌گر، پیمایش و چاپ را کنترل می‌کنند.
یک صفحه، چند صفحه‌نمایش
تلفن صفحه‌نمایشی کوچک با پیکسل‌های فراوان است و مرورگرها این را با ناحیه‌ی دید (viewport) از شما پنهان می‌کنند: بخشی از صفحه که دیده می‌شود، بر حسب پیکسل CSS. اگر راهنمایی نباشد، تلفن وانمود می‌کند حدود ۹۸۰ پیکسل عرض دارد و صفحه را کوچک می‌کند تا جا شود. سلام این راهنما را خودش می‌نویسد: هر صفحه‌ای که می‌سازد <meta name="viewport" content="width=device-width, initial-scale=1"> دارد، پس صفحه با عرض واقعی صفحه‌نمایش چیده می‌شود.
یک کار برای شما می‌ماند: اندازه‌ی چیزها را ثابت نکنید. عرض = 800 روی لپ‌تاپ خوب است و از کل تلفن پهن‌تر. اندازه‌هایی را انتخاب کنید که خم شوند. چهار ابزار بیشتر نیاز را برآورده می‌کنند. بیشینه عرض سقفی می‌گذارد و می‌گذارد جعبه زیر آن کوچک شود. درصد سهمی از والد است. واحد vw یک صدم عرض ناحیه‌ی دید است. و clamp(کمینه، دلخواه، بیشینه) مقدار دلخواه را برمی‌دارد اما هرگز از کمینه کمتر یا از بیشینه بیشتر نمی‌شود، که برای اندازه‌ی قلم و فاصله عالی است. min() و max() همین‌طور روی فهرستی از مقدارها کار می‌کنند، و عرض = "min(100%, 24rem)" یعنی «به پهنای والد، اما نه بیشتر از ۲۴rem».
صفحه:
عنوان = "صفحه‌ی شناور"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 0 ارتفاع خط = 1.9 پایان
سراسری: اندازه جعبه = "border-box" پایان
جعبه:
بیشینه عرض = "40rem"
فضا = "0 auto"
فاصله = "clamp(1rem, 4vw, 3rem)"
سرتیتر:
اندازه = 1
اندازه قلم = "clamp(1.6rem, 6vw, 2.8rem)"
محتوا = "از پایه شناور"
پایان
پاراگراف: محتوا = "این جعبه بیشینه عرض دارد، پس در صفحه‌ی پهن بیشتر از آن بزرگ نمی‌شود. در صفحه‌ی باریک همراه صفحه کوچک می‌شود." پایان
جعبه:
عرض = "min(100%, 24rem)"
پس زمینه = "#dbeafe"
کادر = "2px solid #1d4ed8"
فاصله = 12
محتوا = "عرض: min(100%, 24rem)"
پایان
پایان
پایانخط سراسری: اندازه جعبه = "border-box" روی همه‌ی عنصرها اثر می‌گذارد تا فاصله‌ی درونی و کادر درون عرض حساب شوند. بدون آن، جعبه‌ای با بیشینه عرض = "40rem" به اندازه‌ی فاصله‌ی درونی‌اش از ۴۰rem پهن‌تر می‌شد، و جعبه‌ای با عرض = "100%" و فاصله‌ی درونی از والدش بیرون می‌زد. این نخستین قاعده‌ی بیشتر برگه‌های سبک است.
اگر صفحه‌ی شما روی تلفن به پهلو پیمایش می‌شود، چیزی عرض ثابت دارد، یا کلمه‌ی بلند یا تصویری پهن بیشینه عرض ندارد. پنجره‌ی مرورگر را باریک کنید تا پیدایش کنید.
پرس‌وجوی رسانه روی یک عنصر
اندازه‌های شناور کافی نیست وقتی خود چیدمان باید عوض شود: سه ستون روی لپ‌تاپ، یک ستون روی تلفن. CSS برای این کار پرس‌وجوی رسانه (media query) دارد. در سلام عنصر رسانه فرزند عنصری است که می‌خواهید عوضش کنید و ویژگی شرط آن همان پرس‌وجو است، میان پرانتز. ویژگی‌های سبکی که درون رسانه می‌نویسید برای والد اعمال می‌شوند، آن هم فقط تا وقتی شرط برقرار است.
صفحه:
عنوان = "پرس‌وجوی رسانه روی یک عنصر"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 16 پایان
سراسری: گزینشگر = ".tile" پس زمینه = "#dbeafe" گردی کادر = 8 فاصله = 16 ترازمتن = "center" پایان
جعبه:
نمایش = grid
ستون های شبکه = "repeat(3, 1fr)"
شکاف = 12
پس زمینه = "#f1f5f9"
فاصله = 12
رسانه:
شرط = "(max-width: 480px)"
ستون های شبکه = "1fr"
پس زمینه = "#fef3c7"
پایان
جعبه: کلاس = "tile" محتوا = "یک" پایان
جعبه: کلاس = "tile" محتوا = "دو" پایان
جعبه: کلاس = "tile" محتوا = "سه" پایان
پایان
پاراگراف: محتوا = "در صفحه‌ی پهن سه ستون، و زیر ۴۸۰ پیکسل یک ستون با زمینه‌ی زرد." پایان
پایاننمونه این‌طور خوانده می‌شود: این شبکه سه ستون هم‌اندازه و زمینه‌ی خاکستری دارد، و وقتی عرض ناحیه‌ی دید حداکثر ۴۸۰ پیکسل است یک ستون و زمینه‌ی زرد دارد. هر چه بیرون از عنصر رسانه باشد حالت عادی است، و رسانه فقط چیزهایی را فهرست می‌کند که فرق دارند.
پرس‌وجوها را از کدام سو بنویسید، به عادت برمی‌گردد. اول موبایل یعنی قاعده‌های عادی برای تلفن‌اند و پرس‌وجوهای min-width چیدمان بیشتر را برای صفحه‌نمایش‌های بزرگ‌تر اضافه می‌کنند. اول رایانه برعکس است و max-width به کار می‌برد، مثل بالا. اول موبایل معمولاً کد کمتری می‌شود، چون صفحه‌نمایش کوچک ساده‌ترین چیدمان را می‌خواهد. شرط می‌تواند چند آزمون را با and به هم بزند و ویرگول یعنی «یا»: (min-width: 600px) and (max-width: 900px) یک بازه است و (orientation: landscape), (min-width: 1200px) هر کدام از این دو. جز عرض می‌توانید درباره‌ی orientation (افقی یا عمودی)، اشاره‌گر ((pointer: coarse) یعنی انگشت) و اینکه دستگاه می‌تواند اشاره (hover) داشته باشد یا نه هم بپرسید.
دکمه:
فاصله = "6 12"
محتوا = "خرید"
رسانه: شرط = "(hover: none)" فاصله = "14 22" اندازه قلم = 18 پایان
پایانصفحهی لمسی اشاره ندارد و انگشت از موشواره نادقیق‌تر است، پس قاعده‌ی بالا دکمه را آنجا بزرگ‌تر می‌کند. توانایی را آزمون کنید (hover: none، pointer: coarse)، نه نام دستگاه یا عرض را: تبلت با صفحه‌کلید و پنجره‌ی کوچک لپ‌تاپ هر دو واقعی‌اند.
پرس‌وجو برای کل صفحه
عنصر رسانه والد خودش را سبک می‌دهد. قاعده‌های کل صفحه، مثل رنگ‌های حالت تاریک یا چیزی که روی کاغذ باید پنهان شود، CSS خام‌اند و در عنصر سبک می‌روند که محتوای آن یک رشته‌ی CSS است. بیشتر کاربران حالت تاریک را در تنظیم‌های دستگاهشان انتخاب می‌کنند و صفحه می‌تواند این انتخاب را با پرس‌وجوی prefers-color-scheme بخواند. روش معمول این است که رنگ‌ها را در متغیرهای CSS نگه دارید، یعنی نام‌هایی که با دو خط تیره شروع می‌شوند و با var() خوانده می‌شوند، و مقدارشان را در پرس‌وجو عوض کنید. آن‌وقت هر قاعده‌ای که از آن‌ها استفاده کند بی‌آنکه دوبار نوشته شود پیروی می‌کند.
صفحه:
عنوان = "روشن و تاریک"
سبک:
محتوا = ":root { color-scheme: light dark; --bg: #ffffff; --fg: #111827; --card: #e5e7eb } @media (prefers-color-scheme: dark) { :root { --bg: #111827; --fg: #f9fafb; --card: #1f2937 } }"
پایان
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 0 پس زمینه = "var(--bg)" رنگ = "var(--fg)" پایان
جعبه:
فاصله = 24
سرتیتر: اندازه = 2 محتوا = "از دستگاه شما پیروی می‌کند" پایان
پاراگراف: محتوا = "رنگ‌ها متغیرهای CSS هستند. وقتی دستگاه در حالت تاریک است، یک پرس‌وجوی رسانه آن‌ها را عوض می‌کند." پایان
جعبه: پس زمینه = "var(--card)" فاصله = 16 گردی کادر = 8 محتوا = "کارتی که از همین متغیرها می‌خواند" پایان
پایان
پایانویژگی طرح رنگ، اینجا color-scheme: light dark روی :root، به مرورگر می‌گوید صفحه هر دو را بلد است. آن‌وقت مرورگر بخش‌های خودش، یعنی کنترل‌های فرم، نوار پیمایش و رنگ پیش‌فرض صفحه را، با رنگ‌های هماهنگ می‌کشد. بدون آن، صفحه‌ی تاریک هم نوار پیمایش روشن و ورودی سفید دارد.
پرس‌وجوهای دیگری که به کار می‌برید: prefers-reduced-motion: reduce برای کسانی که حرکت حالشان را بد می‌کند و از دستگاه خواسته‌اند آن را کم کند (درس بعد از آن استفاده می‌کند)، prefers-contrast: more، و print برای کاغذ. عنصر سبک در سلام یک ویژگی رسانه هم دارد که CSS آن را درون یک پرس‌وجو می‌گذارد: سبک: رسانه = "print" محتوا = "..." پایان.
عنصر سبک با ویژگی رسانه پیش از همه‌ی قاعده‌های دیگر در صفحه نوشته می‌شود، پس در برابر قاعده‌ی هم‌ویژگی که بعدتر بیاید می‌بازد. آن را برای قاعده‌هایی به کار ببرید که فقط چیزی اضافه یا پنهان می‌کنند، و برای همین در قاعده‌های چاپ !important بگذارید. وقتی باید قاعده‌ای عادی را لغو کنید، مثل حالت تاریک، بلوک @media را درون همان رشته‌ی محتوا و بعد از قاعده‌ی عادی بنویسید.
پرس‌وجوی نگهدارنده
پرس‌وجوی ناحیه‌ی دید درباره‌ی کل پنجره می‌پرسد، اما کارت یک کالا نمی‌داند کجا گذاشته می‌شود. در ستون اصلی پهن می‌تواند تصویر و متنش را کنار هم بچیند و در نوار کناری باریک باید آن‌ها را زیر هم بگذارد، پنجره هر اندازه‌ای که باشد. پرس‌وجوی نگهدارنده (container query) درباره‌ی اندازه‌ی نزدیک‌ترین نیایی می‌پرسد که نگهدارنده اعلام شده است. نوع نگهدارنده = "inline-size" عنصر را نگهدارنده‌ی پرس‌وجو درباره‌ی عرضش می‌کند، نام نگهدارنده به آن نام می‌دهد و نگهدارنده هر دو را به شکل نام / نوع می‌گذارد. خود پرس‌وجو CSS خام است، چون مثل پرس‌وجوی رسانه یک بلوک قاعده است: @container name (min-width: 22rem) { ... }.
صفحه:
عنوان = "پرس‌وجوی نگهدارنده"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 16 پایان
سبک:
محتوا = ".item { flex-direction: column } @container product (min-width: 22rem) { .item { flex-direction: row; align-items: center } }"
پایان
جعبه:
نمایش = flex
شکاف = 16
ترازعمودی = "flex-start"
پیچش فلکس = wrap
جعبه:
عرض = 200
نوع نگهدارنده = "inline-size"
نام نگهدارنده = "product"
کادر = "1px dashed #94a3b8"
جعبه:
کلاس = "item"
نمایش = flex
شکاف = 8
فاصله = 8
جعبه: عرض = 48 ارتفاع = 48 پس زمینه = "#0f766e" گردی کادر = 8 پایان
پاراگراف: فضا = 0 محتوا = "نگهدارنده‌ی باریک: زیر هم" پایان
پایان
پایان
جعبه:
عرض = 380
نوع نگهدارنده = "inline-size"
نام نگهدارنده = "product"
کادر = "1px dashed #94a3b8"
جعبه:
کلاس = "item"
نمایش = flex
شکاف = 8
فاصله = 8
جعبه: عرض = 48 ارتفاع = 48 پس زمینه = "#0f766e" گردی کادر = 8 پایان
پاراگراف: فضا = 0 محتوا = "نگهدارنده‌ی پهن: کنار هم" پایان
پایان
پایان
پایان
پایانهمان کارت، .item، در دو نگهدارنده نشسته است. در نگهدارنده‌ی ۲۰۰ پیکسلی زیر هم می‌چیند و در نگهدارنده‌ی ۳۸۰ پیکسلی یک ردیف می‌شود، بی‌آنکه چیزی از پنجره بداند. اگر پنجره را آن‌قدر باریک کنید که خود نگهدارنده‌ی دوم زیر ۲۲rem کوچک شود، آن هم زیر هم می‌چیند. نگهدارنده را نمی‌شود با پرس‌وجوی خودش سبک داد، فقط نوادگانش را، و نگهدارنده‌ی inline-size نمی‌تواند عرضش را از محتوایش بگیرد، پس عرضی به آن بدهید یا بگذارید والدش را پر کند.
اشاره، تمرکز و فشردن
عنصرها با کار کاربر ظاهرشان را عوض می‌کنند. هر ویژگی سبک را می‌شود با یک حالت پیش از آن نوشت، و آن ویژگی فقط در آن حالت اعمال می‌شود. اشاره (hover) وقتی است که اشاره‌گر روی عنصر باشد. تمرکز (focus) وقتی است که عنصر صفحه‌کلید را بگیرد: پیوند، دکمه یا ورودی‌ای که با Tab به آن رسیده‌اند یا کلیکش کرده‌اند. فشردن (active) لحظه‌ای است که فشرده می‌شود. در پرونده‌ی انگلیسی همین‌ها hover، focus و active نوشته می‌شوند. آن‌ها را با گذار (درس بعد) بزنید تا تغییر نرم شود.
صفحه:
عنوان = "اشاره، تمرکز و فشردن"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 24 پایان
دکمه:
فاصله = "10 22"
پس زمینه = "#1d4ed8"
رنگ = white
کادر = none
گردی کادر = 8
اندازه قلم = 16
نشانگر = pointer
گذار = "background 150ms, transform 100ms"
اشاره پس زمینه = "#1e40af"
تمرکز دورخط = "3px solid #f59e0b"
تمرکز فاصله دورخط = 2
فشردن دگرگونی = "scale(0.95)"
محتوا = "ذخیره‌ی تغییرها"
پایان
پاراگراف: محتوا = "موشواره را روی دکمه ببرید، آن را فشار دهید، یا با کلید Tab به آن برسید." پایان
پایاناشاره یک امکان اضافی است و هرگز شرط نیست. صفحه‌ی لمسی اشاره ندارد و کاربر صفحه‌کلید هیچ‌وقت اشاره نمی‌کند، پس هر چه با اشاره پیدا می‌شود باید با تمرکز هم دست‌یافتنی باشد، و دکمه باید بی‌آنکه موشواره رویش باشد دکمه به نظر برسد. روی چیزهای کلیک‌شدنی نشانگر = pointer بگذارید تا موشواره هم همین را بگوید.
تمرکز مراقبت می‌خواهد، چون راهی است که کاربر صفحه‌کلید می‌بیند کجاست. هرگز دورخط = none را تنها ننویسید: تنها نشانه را پاک می‌کند. اگر دورخط پیش‌فرض را برمی‌دارید، چیزی دست‌کم به همان اندازه دیدنی جایش بگذارید، مثل حلقه‌ی کلفت‌تر، سایه یا کادر عوض‌شده، همان‌طور که نمونه‌ی بعد برای ورودی می‌کند. شبه‌کلاس :focus-visible برای حلقه ماشه‌ی بهتری است، چون وقتی درست است که مرورگر فکر می‌کند تمرکز باید دیده شود، یعنی همیشه برای صفحه‌کلید و به‌ندرت برای کلیک موشواره. حالت‌های بالا فقط پنج نام‌اند، پس هر شبه‌کلاس دیگر، مثل :focus-visible، :disabled یا :first-child، در یک قاعده‌ی سراسری با گزینشگر می‌رود.
صفحه:
عنوان = "تمرکز دیدنی"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 24 پایان
سراسری: گزینشگر = "a:focus-visible, button:focus-visible" دورخط = "3px solid #7c3aed" فاصله دورخط = 3 پایان
جعبه:
نمایش = flex
جهت فلکس = column
شکاف = 12
بیشینه عرض = 320
برچسب:
محتوا = "نام شما"
ورودی:
شناسه = "name"
نمایش = block
عرض = "100%"
اندازه جعبه = "border-box"
فضا بالا = 4
فاصله = 8
کادر = "2px solid #94a3b8"
گردی کادر = 6
دورخط = none
تمرکز رنگ کادر = "#1d4ed8"
تمرکز سایه کادر = "0 0 0 4px #bfdbfe"
پایان
پایان
دکمه: فاصله = "8 16" محتوا = "فرستادن" پایان
پیوند: نشانی = "#top" خود تراز = "flex-start" محتوا = "پیوندی برای رسیدن با Tab" پایان
پایان
پایاندر پیش‌نمایش Tab بزنید تا از ورودی به دکمه و پیوند بروید. هر کدام نشانه‌ی دیدنی می‌گیرد و ورودی از تمرکز سایه کادر حلقه هم می‌گیرد. دورخط برخلاف کادر جایی نمی‌گیرد، پس نشان دادنش چیدمان را جابه‌جا نمی‌کند.
محتوای تولیدی
CSS می‌تواند تکه‌ای محتوا بسازد که در صفحه نیست: پیش‌از آن را جلوی محتوای عنصر می‌گذارد و پس‌از پشت آن. در سلام این‌ها مثل اشاره پیشوند حالت‌اند و متن با پیش‌از محتوا یا پس‌از محتوا تعیین می‌شود. تکه‌ی تولیدی می‌تواند رنگ و اندازه‌ی خودش را داشته باشد، هر چیز دیگر هم: پیش‌از رنگ = "#15803d". این بخشی از ظاهر است نه از صفحه: صفحه‌خوان‌ها شاید بخوانندش و شاید نه، موتورهای جستجو نمی‌بینندش و کاربر نمی‌تواند انتخابش کند. پس برای تزیین به کار ببریدش، مثل تیک، پیکان، نشانه‌ی الزامی و گیومه، و هرگز برای خود اطلاعات.
صفحه:
عنوان = "محتوای تولیدی"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 24 ارتفاع خط = 2 پایان
فهرست:
سبک فهرست = none
فاصله = 0
مورد: پیش‌از محتوا = "✔ " پیش‌از رنگ = "#15803d" محتوا = "بدون هشدار ترجمه شد" پایان
مورد: پیش‌از محتوا = "✔ " پیش‌از رنگ = "#15803d" محتوا = "در مرورگر آزموده شد" پایان
مورد: پیش‌از محتوا = "✘ " پیش‌از رنگ = "#b91c1c" محتوا = "هنوز منتشر نشده" پایان
پایان
برچسب:
محتوا = "رایانامه"
پس‌از محتوا = " (الزامی)"
پس‌از رنگ = "#b91c1c"
پس‌از اندازه قلم = 13
پایان
پاراگراف:
محتوا = "راهنمای کامل را "
تکه: رنگ = "#1d4ed8" پس‌از محتوا = " ↗" محتوا = "اینجا" پایان
تکه: محتوا = " بخوانید." پایان
پایان
پایانبرای دو مورد اول فهرست یک قاعده به کار می‌رود، چون سبکشان یکی است و مترجم یک کلاس به آن‌ها می‌دهد. مقدار محتوا رشته است؛ برای کلمه‌ی کلیدی CSS مثل open-quote یا none بنویسید پیش‌از محتوای تولیدی = open-quote. تکه‌ی تولیدی فقط وقتی دیده می‌شود که محتوا داشته باشد، حتی تهی: پس‌از محتوا = "" همان clearfix کلاسیک است، یک بلوک تهی پس از فرزندان شناور که پدر را وادار می‌کند آن‌ها را دربر بگیرد.
تابع CSS به نام attr() یک ویژگی عنصر را در متن تولیدی می‌خواند و پایه‌ی راهنمای شناور (tooltip) بدون عنصر اضافه است. آن را نمی‌شود با پیش‌از محتوا نوشت که همیشه رشته می‌سازد، پس کار یک سبک خام است. سلام هر ویژگی را که با داده شروع شود به شکل ویژگی data- می‌نویسد، پس داده tip = "..." می‌شود data-tip.
صفحه:
عنوان = "راهنمای شناور با attr()"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 60 پایان
سبک:
محتوا = ".tip { position: relative; cursor: help; border-bottom: 1px dotted } .tip::after { content: attr(data-tip); position: absolute; right: 0; bottom: 130%; background: #111827; color: white; padding: 6px 10px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 150ms } .tip:hover::after, .tip:focus::after { opacity: 1 }"
پایان
پاراگراف:
محتوا = "سلام به "
تکه: کلاس = "tip" ترتیب جهش = 0 داده tip = "زبان نشانه‌گذاری ابرمتن" محتوا = "HTML" پایان
تکه: محتوا = " و CSS ترجمه می‌شود." پایان
پایان
پایانراهنما با opacity: 0 و pointer-events: none پنهان است تا خودش هرگز موشواره را نگیرد، و روی :hover و :focus نشان داده می‌شود. ترتیب جهش = 0 روی تکه آن را با صفحه‌کلید دست‌یافتنی می‌کند، پس راهنما فقط برای کاربران موشواره نیست.
رفتار اشاره‌گر و لمس
گروهی از ویژگی‌ها ظاهر عنصر را عوض نمی‌کنند، بلکه رفتار موشواره، انگشت یا انتخاب متن با آن را. نشانگر شکل اشاره‌گر موشواره را برمی‌گزیند: pointer دست است برای چیزهای کلیک‌شدنی، text خط عمودی متن، not-allowed نشان ممنوع، grab و grabbing برای چیزهایی که می‌کشید، help، zoom-in و بسیاری دیگر، و url(...) با یک کلمه‌ی جایگزین تصویر خودتان را می‌گذارد. انتخاب کاربر می‌گوید متن را می‌شود انتخاب کرد یا نه: none برای برچسب دکمه یا بازی، all برای انتخاب یک کد یا شناسه‌ی کامل با یک کلیک، و auto پیش‌فرض همه‌جای دیگر، تا مردم بتوانند آنچه می‌خوانند را رونوشت کنند.
رویدادهای اشاره‌گر = none عنصر را برای اشاره‌گر نامرئی می‌کند: کلیک و اشاره به هر چه زیرش است می‌رسد. راهنمای بالا همین‌طور موشواره را از خودش رد می‌کند و تزیینی را روی دکمه می‌گذارید. اما راه غیرفعال کردن دکمه نیست، چون صفحه‌کلید هنوز به آن می‌رسد؛ برای آن ویژگی disabled را به کار ببرید. تغییر اندازه دستگیره‌ای در گوشه نشان می‌دهد تا کاربر جعبه را بزرگ‌تر بکشد: vertical، horizontal یا both روی کادر متن، و روی هر عنصری که سرریزش چیزی جز visible باشد.
واردسازی دام
واردسازی تبدیل
ناپایا شمار := 0
تابع شمردن():
شمار += 1
دام.تنظیم متن(دام.با شناسه("n"), "کلیک‌های رسیده: " + تبدیل.قالب عدد(شمار))
پایان
بخش خانه(نشان):
جعبه: فاصله = "8 12" پس زمینه = "#e0f2fe" گردی کادر = 6 ترازمتن = center نشانگر = نشان محتوا = نشان پایان
پایان
صفحه:
عنوان = "نشانگر و کنترل اشاره"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 پایان
جعبه:
نمایش = grid
ستون های شبکه = "repeat(auto-fit, minmax(110px, 1fr))"
شکاف = 8
خانه: نشان = "pointer" پایان
خانه: نشان = "not-allowed" پایان
خانه: نشان = "grab" پایان
خانه: نشان = "zoom-in" پایان
پایان
پاراگراف: انتخاب کاربر = none محتوا = "این جمله را با موشواره نمی‌شود انتخاب کرد." پایان
جعبه:
نمایش = flex
شکاف = 8
دکمه: شناسه = "on" کلیک = شمردن محتوا = "کار می‌کند" پایان
دکمه: شناسه = "off" رویدادهای اشاره‌گر = none شفافیت = 0.5 کلیک = شمردن محتوا = "pointer-events: none" پایان
پایان
پاراگراف: شناسه = "n" محتوا = "کلیک‌های رسیده: ۰" پایان
متن بلند: تغییر اندازه = vertical ردیف‌ها = 2 محتوا = "گوشه را بکشید تا اندازه عوض شود" پایان
پایانپیشنمایش دو دکمه دارد که یک تابع را اجرا می‌کنند. دومی رویدادهای اشاره‌گر = none دارد، پس کلیک از آن رد می‌شود و شمار عوض نمی‌شود. گروه دیگری برای صفحه‌های لمسی است. کنش لمسی به مرورگر می‌گوید کدام حرکت‌های انگشت را خودش اداره کند: manipulation پیمایش و بزرگ‌نمایی با دو انگشت را اجازه می‌دهد اما بزرگ‌نمایی با دو ضربه و تأخیر کوچکش را برمی‌دارد، و none هر حرکت را به برنامه‌ی خودتان می‌سپارد، که ناحیه‌ی نقاشی یا لغزنده لازم دارد. رنگ برجسته لمس رنگ چشمکی را تعیین می‌کند که بعضی مرورگرهای موبایل روی پیوند لمس‌شده می‌کشند، و transparent خاموشش می‌کند. ظاهر = none ظاهر سیستمی دکمه، تیک یا فهرست کشویی را برمی‌دارد تا ظاهر خودتان را بکشید، و بزرگ‌نمایی عنصر و جعبه‌ی چیدمانش را با هم مقیاس می‌دهد (بزرگ‌نمایی = 1.2)، بر خلاف transform: scale که فقط تصویر را مقیاس می‌دهد.
دو ویژگی تازه هنوز در همه‌ی مرورگرها نیست. تعامل‌پذیری = inert عنصر و هر چه درونش است را کلیک‌ناپذیر، تمرکزناپذیر و انتخاب‌ناپذیر می‌کند، مثل ویژگی inert، و پویانمایی نشانگر = manual چشمک زدن نشانگر متن را متوقف می‌کند تا خودتان رنگش را پویانمایی کنید. پیش از تکیه بر آن‌ها آزمایششان کنید.
پیمایش
عنصری که سرریز = auto و ارتفاع ثابت دارد ظرف پیمایش می‌شود و چند ویژگی چگونگی پیمایش آن را شکل می‌دهند. رفتار پیمایش = smooth پرش به یک موقعیت را روان می‌کند، چه از پیوندی به شناسه باشد، چه از scrollIntoView و چه از مقداردهی scrollTop، مثل دکمه‌ی پایین. عرض نوار پیمایش می‌تواند thin یا none باشد، رنگ نوار پیمایش رنگ دسته و بعد رنگ مسیر را می‌گیرد، و حاشیه نوار پیمایش = stable جای نوار را حتی وقتی لازم نیست نگه می‌دارد تا وقتی متن بلند آن را پیدا می‌کند محتوا به پهلو نپرد.
وقتی در جعبه‌ی درونی به انتها می‌رسید، مرورگرها ادامه می‌دهند و صفحه‌ی پشتش را پیمایش می‌کنند. به این زنجیره‌ای شدن پیمایش (scroll chaining) می‌گویند، و رفتار فراپیمایش = contain آن را لب جعبه می‌ایستاند، که به منو، پنجره‌ی گفتگو و مودال می‌خورد. none جهش لبه و کشیدن برای نوسازی را هم خاموش می‌کند. نسخه‌های رفتار فراپیمایش افقی و عمودی برای محورهای فیزیکی‌اند و بلوکی و خطی جهت نوشتن را دنبال می‌کنند.
واردسازی دام
تابع بالا():
دام.تنظیم خاصیت عددی(دام.با شناسه("log"), "scrollTop", 0.0)
پایان
صفحه:
عنوان = "ظرف‌های پیمایشی"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 پایان
جعبه:
شناسه = "log"
عرض = 280
ارتفاع = 120
فاصله = 8
کادر = "1px solid #94a3b8"
سرریز عمودی = auto
رفتار پیمایش = smooth
رفتار فراپیمایش = contain
عرض نوار پیمایش = thin
رنگ نوار پیمایش = "#0f766e #e2e8f0"
حاشیه نوار پیمایش = stable
پاراگراف: تکرار = 12 فضا = "0 0 6" محتوا = "یک سطر از گزارش" پایان
پایان
دکمه: فضا بالا = 10 کلیک = بالا محتوا = "برگشت به بالا" پایان
پایانپیمایش روان حرکت است. کسانی که از دستگاه خواسته‌اند حرکت را کم کند باید پرش فوری ببینند، پس آن را مشروط کنید: قاعده‌ی scroll-behavior: smooth را درون بلوک @media (prefers-reduced-motion: no-preference) بنویسید. درس حرکت همین کار را برای پویانمایی‌ها می‌کند.
کاغذ و حالت‌های ویژه
مردم صفحه چاپ می‌کنند: بلیت، فاکتور، دستور پخت. یک سبک با رسانه = "print" قاعده‌هایی را نگه می‌دارد که فقط روی کاغذ اعمال می‌شوند. منو و دکمه‌ها را پنهان کنید، متن را سیاه بگذارید و تصمیم بگیرید صفحه‌ها کجا بشکنند. شکستن صفحه پیش از و شکستن صفحه پس از مقدار always می‌گیرند تا برگه‌ی تازه اجبار شود و avoid تا عنصر با همسایه‌اش بماند، و شکستن صفحه درون = avoid نمی‌گذارد ردیف جدول یا کارتی نصف شود. برگه به عنصر یک نوع برگه‌ی نام‌دار می‌دهد که قاعده‌ی @page می‌تواند اندازه یا جهتش را تعیین کند، مثلاً یک برگه‌ی افقی برای جدول پهن.
صفحه:
عنوان = "چاپ یک صفحه"
سبک: رسانه = "print" محتوا = ".screen-only { display: none !important } body { font-size: 11pt }" پایان
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 ارتفاع خط = 1.9 پایان
جعبه:
کلاس = "screen-only"
پس زمینه = "#fef3c7"
فاصله = 10
محتوا = "این یادداشت روی صفحه‌نمایش دیده می‌شود و از روی کاغذ حذف می‌شود."
پایان
جعبه:
پس زمینه = "#0f766e"
رنگ = white
فاصله = 12
تنظیم رنگ کاغذی = exact
محتوا = "نوار بالا هنگام چاپ هم رنگش را نگه می‌دارد"
پایان
سرتیتر: اندازه = 2 محتوا = "فصل یک" پایان
پاراگراف: محتوا = "متن فصل نخست." پایان
سرتیتر: اندازه = 2 شکستن صفحه پیش از = always محتوا = "فصل دو" پایان
پاراگراف: محتوا = "فصل دو از ورق تازه شروع می‌شود." پایان
پایانمرورگرها معمولاً هنگام چاپ رنگ زمینه را برای صرفه‌جویی در جوهر نمی‌کشند. تنظیم رنگ کاغذی = exact از آن‌ها می‌خواهد رنگ‌های این عنصر را نگه دارند، که برای نوار بالا یا نمودار مهم است. برای دیدن نسخه‌ی کاغذی صفحه‌ی بالا پیش‌نمایش چاپ مرورگر را باز کنید، یا در ابزارهای مرورگر رسانه‌ی print را شبیه‌سازی کنید.
دو ویژگی دیگر درباره‌ی دستگاه‌هایی است که رنگ یا اندازه‌ی شما را عوض می‌کنند. در حالت کنتراست بالای سیستم‌عامل، مرورگرها رنگ‌های شما را با رنگ‌های خود کاربر عوض می‌کنند و تنظیم رنگ اجباری = none عنصری را از آن بیرون می‌برد. این کار را فقط برای چیزی مثل نمونه‌ی رنگ بکنید که خود رنگ معنایش است. روی تلفن‌ها مرورگر ممکن است متن صفحه‌ای را که خواندنش را سخت می‌داند بزرگ کند، و تنظیم اندازه متن = "100%" یا none اندازه‌هایی را که نوشته‌اید نگه می‌دارد.
مرجع: ویژگی‌های واکنش‌گرا و تعامل
نخست عنصر رسانه می‌آید و بعد ویژگی‌ها در گروه‌هایی. نمونه‌ها را مترجم بررسی کرده است، پس هر کدام را می‌توانید درون یک بلوک صفحه: بگذارید. مقدارهای پذیرفته شده بعد از هر توضیح میان قلاب نوشته شده‌اند.
پرس‌وجوها و نگهدارنده‌ها
رسانه (English: media)
ویژگی‌های سبک را فقط تا وقتی یک شرط رسانه برقرار است برای والدش اعمال می‌کند. به‌عنوان فرزند همان عنصری نوشته می‌شود که تغییر می‌دهد و ویژگی‌های خودش همان‌هایی‌اند که در آن حالت فرق دارند.
جعبه:
عرض = 320
پس زمینه = "#e0f2fe"
فاصله = 16
محتوا = "در پنجره‌ی باریک سرخ می‌شوم"
رسانه: شرط = "(max-width: 600px)" پس زمینه = "#fee2e2" پایان
پایان| ویژگی | کار آن | نمونه |
|---|---|---|
شرطcondition | پرس‌وجوی رسانه، مثل CSS میان پرانتز، برای نمونه (max-width: 600px)، (orientation: landscape) یا (prefers-color-scheme: dark). آزمون‌ها را می‌شود با and به هم بست و ویرگول یعنی «یا». [string] | جعبه:
فاصله = 20
محتوا = "با حالت تاریک سازگار می‌شود"
رسانه: شرط = "(prefers-color-scheme: dark)" پس زمینه = "#111827" رنگ = "white" پایان
پایان |
| ویژگی | کار آن و مقدارهای قابل قبول | نمونه |
|---|---|---|
طرح رنگcolor scheme color-scheme | به مرورگر می‌گوید صفحه کدام طرح‌های رنگ را پشتیبانی می‌کند تا کنترل‌های فرم، نوار پیمایش و پس‌زمینه‌ی پیش‌فرض را هماهنگ با آن بکشد. normal پیش‌فرض است، light و dark یک طرح را نام می‌برند، light dark انتخاب را به سیستم کاربر می‌سپارد و only نمی‌گذارد مرورگر طرح صفحه را لغو کند. [normal, light, dark, only; up to 3 values] | جعبه:
طرح رنگ = dark
پس زمینه = "#111827"
رنگ = "#f9fafb"
فاصله = 12
محتوا = "کنترل‌های تاریک فرم:"
ورودی: نوع = "متن" پایان
پایان |
نگهدارندهcontainer container | میان‌بُری که عنصر را نگهدارنده‌ی پرس‌وجو می‌کند. مقدار، نام نگهدارنده است و بعد یک خط مورب و نوع: sidebar / inline-size. نام اختیاری است. [name; up to 4 values] | جعبه:
نگهدارنده = "panel / inline-size"
کادر = "1px dashed #64748b"
فاصله = 8
محتوا = "نگهدارنده‌ای به نام panel"
پایان |
نام نگهدارندهcontainer name container-name | به عنصر نامی می‌دهد که قاعده‌ی @container با آن انتخابش کند. بی‌نام، پرس‌وجو از نزدیک‌ترین نگهدارنده می‌پرسد. نام یک کلمه است و می‌شود چند نام را پشت هم نوشت. [name / none; up to 4 values] | جعبه:
نام نگهدارنده = "sidebar"
نوع نگهدارنده = "inline-size"
فاصله = 8
محتوا = "با نام sidebar پرسیده می‌شود"
پایان |
نوع نگهدارندهcontainer type container-type | عنصر را نگهدارنده‌ای می‌کند که نوادگانش می‌توانند از آن بپرسند. inline-size پرس‌وجو درباره‌ی عرض را ممکن می‌کند، size درباره‌ی عرض و ارتفاع (آن‌وقت عنصر اندازه‌ی خودش را لازم دارد) و normal پیش‌فرض است، یعنی جعبه‌ای که نگهدارنده نیست. [normal, size, inline-size] | جعبه:
نوع نگهدارنده = "inline-size"
عرض = "50%"
کادر = "1px dashed #64748b"
محتوا = "نوادگان می‌توانند بپرسند من چقدر پهنم"
پایان |
محتوای تولیدیgenerated content content | متن، گیومه یا شمارنده‌ای که پیش‌از و پس‌از درج می‌کنند. با پیش‌از محتوا یک رشته‌ی ساده کافی است. با محتوای تولیدی رشته باید علامت نقل خودش را داشته باشد و کلمه‌های open-quote، close-quote و none بدون نقل نوشته می‌شوند. بدون پیش‌از یا پس‌از اثری ندارد. [normal / none, or strings, images, counter(), with optional quote marks] | جعبه:
پیش‌از محتوای تولیدی = open-quote
پس‌از محتوای تولیدی = close-quote
محتوا = "متن نقل‌شده"
پایان |
اشاره‌گر، لمس و ظاهر
| ویژگی | کار آن و مقدارهای قابل قبول | نمونه |
|---|---|---|
نشانگرcursor cursor | شکل اشاره‌گر موشواره روی عنصر. مقدارهای رایج pointer (دست، برای چیزهای کلیک‌شدنی)، text، not-allowed، grab، grabbing، move، help، wait، crosshair و zoom-in هستند. url(...) تصویر خودتان را می‌گذارد و باید با یک کلمه‌ی جایگزین تمام شود. [image / number / auto, default, none, pointer, text, move, ...; up to 3 values; comma list] | جعبه:
نشانگر = "not-allowed"
فاصله = 12
پس زمینه = "#f1f5f9"
محتوا = "این کار در دسترس نیست"
پایان |
رویدادهای اشاره‌گرpointer events pointer-events | تعیین می‌کند عنصر اصلاً به موشواره و لمس واکنش نشان دهد یا نه. none آن را برای اشاره‌گر شفاف می‌کند، پس کلیک و اشاره به هر چه زیرش است می‌رسد، و auto رفتار عادی است. تمرکز صفحه‌کلید تغییری نمی‌کند. [auto, none] | دکمه:
رویدادهای اشاره‌گر = none
شفافیت = 0.5
محتوا = "کلیک‌ها یکراست رد می‌شوند"
پایان |
انتخاب کاربرuser select user-select | تعیین می‌کند کاربر بتواند متن عنصر را انتخاب کند یا نه. none ممنوع می‌کند، text اجازه می‌دهد، all با یک کلیک کل عنصر را انتخاب می‌کند، contain انتخاب را درون عنصر نگه می‌دارد و auto پیش‌فرض است. [auto, none, text, all, contain] | جعبه:
انتخاب کاربر = all
خانواده قلم = monospace
فاصله = 8
پس زمینه = "#f1f5f9"
محتوا = "sk_live_0123456789 (با یک کلیک همه‌اش انتخاب می‌شود)"
پایان |
کنش لمسیtouch action touch-action | به مرورگر می‌گوید روی عنصر کدام حرکت‌های لمسی را خودش اداره کند. auto همه را، manipulation پیمایش و بزرگ‌نمایی با دو انگشت را اما نه بزرگ‌نمایی با دو ضربه را، pan-x و pan-y یک جهت را، و none همه‌ی حرکت‌ها را به برنامه‌ی شما می‌سپارد. [auto, none, manipulation, pan-x, pan-y, pan-left, ...; up to 3 values] | جعبه:
کنش لمسی = "pan-y"
ارتفاع = 80
پس زمینه = "#e0f2fe"
فاصله = 12
محتوا = "اینجا بالا و پایین بکشید، کشیدن به پهلو با برنامه است"
پایان |
رنگ برجسته لمسtap highlight color -webkit-tap-highlight-color | رنگ چشمکی که بعضی مرورگرهای موبایل هنگام لمس پیوند یا دکمه روی آن می‌کشند. هر رنگی؛ transparent چشمک را برمی‌دارد. [color] | دکمه:
رنگ برجسته لمس = "transparent"
فاصله = "10 20"
محتوا = "مرا لمس کنید"
پایان |
ظاهرappearance appearance | ظاهر سیستمی کنترل فرم را برمی‌دارد یا برمی‌گرداند. none آن را می‌کَند تا ظاهر خودتان را بکشید، auto ظاهر عادی است، و مقدارهایی مثل button، checkbox یا textfield عنصر را شبیه آن کنترل می‌کنند. کنترلی که none دارد کادر، زمینه و سبک تمرکز خودش را لازم دارد. [none, auto, menulist-button, textfield, button, checkbox, ...] | دکمه:
ظاهر = none
کادر = "2px solid #1d4ed8"
پس زمینه = white
رنگ = "#1d4ed8"
گردی کادر = 20
فاصله = "6 18"
محتوا = "دکمه‌ای تخت"
پایان |
تغییر اندازهresize resize | در گوشه‌ی جعبه دستگیره‌ای نشان می‌دهد تا کاربر آن را بزرگ‌تر یا کوچک‌تر بکشد. both، horizontal، vertical، block و inline جهت‌ها را برمی‌گزینند و none دستگیره را برمی‌دارد. سرریزی جز visible لازم دارد که کادر متن از قبل دارد. [none, both, horizontal, vertical, block, inline] | متن بلند:
تغییر اندازه = vertical
ردیف‌ها = 3
محتوا = "گوشه را به پایین بکشید"
پایان |
بزرگ‌نماییzoom zoom | عنصر و جعبه‌ی چیدمانش را با هم مقیاس می‌دهد، پس چیزهای اطرافش کنار می‌روند. یک عدد (1.5) یا درصد (150%). transform: scale فقط تصویر را مقیاس می‌دهد و جا همان می‌ماند که بود. [number / percentage / normal] | جعبه:
بزرگ‌نمایی = 1.3
کادر = "1px solid #64748b"
فاصله = 8
محتوا = "سی درصد بزرگ‌تر، و چیدمان دنبالش می‌آید"
پایان |
تعامل‌پذیریinteractivity interactivity | عنصر و هر چه درونش است را بی‌اثر (inert) می‌کند: نه کلیک‌شدنی، نه قابل تمرکز و نه قابل انتخاب. inert روشنش می‌کند و auto پیش‌فرض است. ویژگی تازه‌ای است که هنوز همه‌ی مرورگرها ندارند. [auto / inert] | جعبه:
تعامل‌پذیری = inert
شفافیت = 0.6
محتوا = "بخشی که کاربر نمی‌تواند با آن کاری بکند"
دکمه: محتوا = "قفل" پایان
پایان |
پویانمایی نشانگرcaret animation caret-animation | چشمک زدن نشانگر متن را در ورودی‌ها کنترل می‌کند. auto می‌گذارد مرورگر چشمک بزند و manual چشمک را متوقف می‌کند تا پویانمایی خودتان برای caret-color به کار رود. ویژگی تازه‌ای است که هنوز همه‌ی مرورگرها ندارند. [auto / manual] | ورودی:
نوع = "متن"
پویانمایی نشانگر = manual
جانگهدار = "نشانگر چشمک نمی‌زند"
پایان |
پیمایش
| ویژگی | کار آن و مقدارهای قابل قبول | نمونه |
|---|---|---|
رفتار پیمایشscroll behavior scroll-behavior | تعیین می‌کند مرورگر چگونه به موقعیت تازه‌ی پیمایش می‌رود. smooth وقتی از پیوندی به شناسه می‌روید، scrollIntoView را صدا می‌زنید یا scrollTop را مقدار می‌دهید حرکت را روان می‌کند، و auto یکباره می‌پرد. آن را برای کسانی نگه دارید که کاهش حرکت نخواسته‌اند. [auto, smooth] | جعبه:
ارتفاع = 80
سرریز عمودی = auto
رفتار پیمایش = smooth
پاراگراف: محتوا = "پرش‌های این جعبه" پایان
پاراگراف: محتوا = "به‌جای ناگهانی بودن، می‌لغزند" پایان
پاراگراف: محتوا = "وقتی برنامه جابه‌جایشان می‌کند" پایان
پایان |
رنگ نوار پیمایشscrollbar color scrollbar-color | رنگ‌های نوار پیمایش، نخست دسته و بعد مسیر، مثلاً #0f766e #e2e8f0. auto ظاهر سیستمی است. [color / auto; up to 2 values] | جعبه:
ارتفاع = 80
سرریز عمودی = scroll
رنگ نوار پیمایش = "#0f766e #e2e8f0"
پاراگراف: محتوا = "مرا بکشید" پایان
پاراگراف: محتوا = "سطر دوم" پایان
پاراگراف: محتوا = "سطر سوم" پایان
پاراگراف: محتوا = "سطر چهارم" پایان
پایان |
حاشیه نوار پیمایشscrollbar gutter scrollbar-gutter | برای نوار پیمایش جا نگه می‌دارد تا وقتی ظاهر می‌شود محتوا جابه‌جا نشود. stable همیشه جا را نگه می‌دارد، stable both-edges در هر دو سو، و auto فقط وقتی نوار نشان داده می‌شود جا می‌دهد. [auto, stable, both-edges; up to 2 values] | جعبه:
ارتفاع = 80
سرریز عمودی = auto
حاشیه نوار پیمایش = stable
محتوا = "متن کوتاه است، اما جای نوار نگه داشته می‌شود"
پایان |
عرض نوار پیمایشscrollbar width scrollbar-width | ضخامت نوار پیمایش. thin نوار باریک‌تر است، none آن را پنهان می‌کند و جعبه هنوز پیمایش می‌شود، و auto پیش‌فرض سیستم است. [auto, thin, none] | جعبه:
ارتفاع = 60
سرریز عمودی = auto
عرض نوار پیمایش = thin
پاراگراف: محتوا = "نوار باریک" پایان
پاراگراف: محتوا = "کنار" پایان
پاراگراف: محتوا = "این جعبه" پایان
پایان |
رفتار فراپیمایشoverscroll behavior overscroll-behavior | وقتی جعبه‌ی پیمایش‌شدنی از انتهایش فراتر پیمایش شود چه می‌شود. auto پیمایش را به صفحه‌ی پشتش می‌سپارد، contain آن را درون جعبه نگه می‌دارد و none جهش لبه و کشیدن برای نوسازی را هم برمی‌دارد. با دو مقدار، محور افقی و عمودی جدا تعیین می‌شوند. [auto, contain, none; up to 2 values] | جعبه:
ارتفاع = 60
سرریز عمودی = auto
رفتار فراپیمایش = contain
پاراگراف: محتوا = "صفحه‌ی پشت" پایان
پاراگراف: محتوا = "تکان نمی‌خورد" پایان
پاراگراف: محتوا = "وقتی این جعبه تمام شود" پایان
پایان |
رفتار فراپیمایش بلوکیoverscroll behavior block overscroll-behavior-block | رفتار فراپیمایش در محور بلوکی، یعنی جهتی که سطرها روی هم قرار می‌گیرند (در فارسی و انگلیسی عمودی). مقدارها: auto، contain، none. [auto, contain, none] | جعبه:
ارتفاع = 60
سرریز عمودی = auto
رفتار فراپیمایش بلوکی = contain
پاراگراف: محتوا = "محور بلوکی" پایان
پاراگراف: محتوا = "درون همین جعبه" پایان
پاراگراف: محتوا = "می‌ماند" پایان
پایان |
رفتار فراپیمایش خطیoverscroll behavior inline overscroll-behavior-inline | رفتار فراپیمایش در محور خطی، یعنی جهتی که متن می‌رود (در فارسی و انگلیسی افقی). مقدارها: auto، contain، none. [auto, contain, none] | جعبه:
عرض = 200
سرریز افقی = auto
رفتار فراپیمایش خطی = none
فضای سفید = nowrap
محتوا = "سطری بلند که به پهلو پیمایش می‌شود و صفحه را با خود نمی‌کشد"
پایان |
رفتار فراپیمایش افقیoverscroll behavior x overscroll-behavior-x | رفتار فراپیمایش در محور افقی، هر جهتی که نوشتن داشته باشد. مقدارها: auto، contain، none. [auto, contain, none] | جعبه:
عرض = 200
سرریز افقی = auto
رفتار فراپیمایش افقی = contain
فضای سفید = nowrap
محتوا = "نواری افقی که کشیدن‌هایش را برای خودش نگه می‌دارد"
پایان |
رفتار فراپیمایش عمودیoverscroll behavior y overscroll-behavior-y | رفتار فراپیمایش در محور عمودی، هر جهتی که نوشتن داشته باشد. مقدارها: auto، contain، none. [auto, contain, none] | جعبه:
ارتفاع = 60
سرریز عمودی = auto
رفتار فراپیمایش عمودی = none
پاراگراف: محتوا = "بدون جهش لبه" پایان
پاراگراف: محتوا = "و بدون کشیدن برای نوسازی" پایان
پاراگراف: محتوا = "از این جعبه" پایان
پایان |
چاپ و حالت‌های نمایش
| ویژگی | کار آن و مقدارهای قابل قبول | نمونه |
|---|---|---|
برگهpage page | عنصر را به نوعی برگه‌ی نام‌دار می‌سپارد. قاعده‌ی @page با همان نام، که در عنصر سبک نوشته می‌شود، می‌تواند اندازه یا جهت برگه‌هایی را که این عنصر روی آن‌ها چاپ می‌شود تعیین کند. پیش‌فرض auto است. [an ident / auto] | جعبه:
برگه = "wide"
سرریز افقی = auto
محتوا = "جدول پهن می‌تواند روی برگه‌ی افقی wide چاپ شود"
پایان |
شکستن صفحه پس ازpage break after page-break-after | می‌گوید هنگام چاپ پس از عنصر می‌شود صفحه را شکست یا نه. always برگه‌ی تازه را اجبار می‌کند، avoid می‌کوشد عنصر را با آنچه پس از آن می‌آید نگه دارد، left و right شکستن به صفحه‌ی چپ یا راست را اجبار می‌کنند و auto را به مرورگر می‌سپارد. [auto, always, avoid, left, right] | سرتیتر:
اندازه = 2
شکستن صفحه پس از = avoid
محتوا = "سرتیتری که با متنش می‌ماند"
پایان |
شکستن صفحه پیش ازpage break before page-break-before | می‌گوید هنگام چاپ پیش از عنصر می‌شود صفحه را شکست یا نه. always عنصر را از برگه‌ی تازه شروع می‌کند، avoid آن را با آنچه پیش از آن است نگه می‌دارد، left و right از صفحه‌ی چپ یا راست آغازش می‌کنند و auto را به مرورگر می‌سپارد. [auto, always, avoid, left, right] | سرتیتر:
اندازه = 2
شکستن صفحه پیش از = always
محتوا = "فصل دو از برگه‌ی تازه شروع می‌شود"
پایان |
شکستن صفحه درونpage break inside page-break-inside | می‌گوید هنگام چاپ درون عنصر می‌شود صفحه را شکست یا نه. avoid کارت، ردیف جدول یا شکل را یک‌تکه نگه می‌دارد و auto اجازه‌ی شکستن در هر جا را می‌دهد. [auto, avoid] | جعبه:
شکستن صفحه درون = avoid
کادر = "1px solid #94a3b8"
فاصله = 12
محتوا = "کارتی که روی کاغذ هرگز دو نیم نمی‌شود"
پایان |
تنظیم رنگ کاغذیprint color adjust print-color-adjust | انتخاب می‌کند مرورگر هنگام چاپ رنگ زمینه و تصویر زمینه‌ی عنصر را نگه دارد یا نه. economy پیش‌فرض است و اجازه می‌دهد برای صرفه‌جویی در جوهر نادیده گرفته شوند و exact آن‌ها را همان‌طور که نوشته‌اید نگه می‌دارد. [economy, exact] | جعبه:
تنظیم رنگ کاغذی = exact
پس زمینه = "#0f766e"
رنگ = white
فاصله = 12
محتوا = "این نوار روی کاغذ هم رنگش را نگه می‌دارد"
پایان |
تنظیم رنگ اجباریforced color adjust forced-color-adjust | تعیین می‌کند مرورگر در حالت رنگ اجباری، مثل کنتراست بالای ویندوز، می‌تواند رنگ‌های شما را عوض کند یا نه. auto اجازه می‌دهد، none رنگ‌های شما را برای این عنصر نگه می‌دارد و preserve-parent-color رنگ متن والد را حفظ می‌کند. فقط جایی بیرون بروید که خود رنگ معناست. [auto, none, preserve-parent-color] | جعبه:
تنظیم رنگ اجباری = none
پس زمینه = "#16a34a"
رنگ = white
فاصله = 8
محتوا = "وضعیت: آنلاین"
پایان |
تنظیم اندازه متنtext size adjust text-size-adjust | بزرگ‌کردن خودکار متن را که بعضی مرورگرهای موبایل روی صفحه‌های سخت‌خوان انجام می‌دهند کنترل می‌کند. درصد، میزان این تنظیم را مقیاس می‌دهد و none (یا 100%) اندازه‌هایی را که نوشته‌اید نگه می‌دارد. پیش‌فرض auto است. [a percentage / none] | پاراگراف:
تنظیم اندازه متن = "100%"
اندازه قلم = 16
محتوا = "مرورگر موبایل این متن را خودسرانه بزرگ نمی‌کند"
پایان |
خودتان امتحان کنید
- صفحه‌ای با سرصفحه، نوار کناری و بخش اصلی در یک شبکه بسازید. در ۷۰۰ پیکسل و کمتر با عنصر
رسانههمه را در یک ستون زیر هم بگذارید، و با باریک کردن پنجره آزمایشش کنید. - به یک دکمه سبک
اشارهوتمرکزبدهید، بعددورخط = noneرویش بگذارید و Tab بزنید. هنوز می‌بینید کجا هستید؟ جانشینی دیدنی را برگردانید. - به یکی از صفحه‌هایتان با متغیرهای CSS و
prefers-color-schemeحالت تاریک بدهید، و دستگاهتان را میان روشن و تاریک عوض کنید تا تغییر را ببینید. - قاعده‌ای برای چاپ بنویسید که هر پیوند منو را پنهان کند و هر
h2را از برگه‌ی تازه شروع کند، و در پیش‌نمایش چاپ نگاهش کنید.