بقیه‌ی CSS
درس‌های پیشین متن، جعبه، رنگ و چیدمان را پوشاندند. این درس فهرست را کامل می‌کند: ویژگی‌های فهرست شماره‌دار و شمارنده‌ها، جدول، پیمایشی که سر جای خودش می‌چسبد، راهنمایی که به یک لنگر بسته است، و نقاشی با SVG. برای هر کدام نمونه‌ای کوتاه هست و مرجع آخر درس هر ۹۴ ویژگی را با مقدارهایی که می‌پذیرند فهرست می‌کند.
فهرست‌ها و نشانه‌هایشان
هر مورد یک فهرست نشانه دارد: گلوله‌ی فهرست یا عدد فهرست شماره‌دار. مرورگر آن را می‌کشد و شما با سه ویژگی شکلش را برمی‌گزینید. نوع نشانه فهرست (list-style-type) ظاهر را تعیین می‌کند. یک واژه‌ی کلیدی مثل disc، square، decimal، lower-roman یا upper-alpha می‌گیرد، یا none برای بدون نشانه، یا متنی از خودتان. متن باید گیومه‌هایش را در CSS نگه دارد، پس در سلام آن را میان بک‌تیک بنویسید: نوع نشانه فهرست = `"» "`. جای نشانه فهرست می‌گوید نشانه بیرون از متن آویزان باشد (outside، پیش‌فرض) یا در سطر اول متن بنشیند (inside). تصویر نشانه فهرست به جای نویسه، تصویر یا شیب رنگ می‌گذارد.
سبک فهرست میان‌بر هر سه است و به شکل یک رشته مثل "square outside" نوشته می‌شود. دو فهرست آخر پیش‌نمایش را ببینید: وقتی نشانه بیرون است، همه‌ی سطرهای یک مورد بلند از یک لبه شروع می‌شوند، و وقتی نشانه درون است، سطر دوم زیر نشانه می‌پیچد.
صفحه:
عنوان = "نشانه‌های فهرست"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" ارتفاع خط = 1.8 پایان
سرتیتر: اندازه = 3 محتوا = "شماره‌های رومی" پایان
فهرست شماره‌دار: نوع نشانه فهرست = lower-roman
مورد: محتوا = "پیشگفتار" پایان
مورد: محتوا = "فصل‌ها" پایان
مورد: محتوا = "نمایه" پایان
پایان
سرتیتر: اندازه = 3 محتوا = "نشانه‌ی دلخواه" پایان
فهرست: نوع نشانه فهرست = `"» "`
مورد: محتوا = "جعبه را باز کنید" پایان
مورد: محتوا = "برچسب را بخوانید" پایان
پایان
سرتیتر: اندازه = 3 محتوا = "درون و بیرون" پایان
فهرست: جای نشانه فهرست = inside پس زمینه = "#ccfbf1" بیشینه عرض = "20rem" فاصله = 8
مورد: محتوا = "نشانه درون متن است و سطر دوم زیر آن شروع می‌شود." پایان
پایان
فهرست: سبک فهرست = "square outside" پس زمینه = "#e2e8f0" بیشینه عرض = "20rem" فاصله = 8 فاصله ابتدا = 32
مورد: محتوا = "نشانه بیرون از متن آویزان است و همه‌ی سطرها از یک لبه شروع می‌شوند." پایان
پایان
فهرست: تصویر نشانه فهرست = "linear-gradient(#0f766e, #38bdf8)"
مورد: محتوا = "یک تصویر به جای نشانه" پایان
پایان
پایاناین ویژگی‌ها نشانه را یک‌پارچه آرایش می‌کنند و نمی‌شود با آن‌ها به یک نشانه رنگی جدا داد. نشانه رنگ و قلم مورد خودش را می‌گیرد، پس برای عوض‌کردنش مورد را عوض کنید.
شمارنده‌ها: شماره‌گذاری با CSS
شمارنده عددی است که مرورگر آن را زیر یک نام نگه می‌دارد. سه ویژگی با آن کار می‌کنند. بازنشانی شمارنده (counter-reset) آن را روی یک عنصر می‌سازد یا به یک مقدار آغازین برمی‌گرداند: "chapter" از ۰ شروع می‌کند و "chapter 4" از ۴. افزایش شمارنده (counter-increment) هر بار که عنصری با این ویژگی کشیده شود به آن می‌افزاید، یکی یا هر عددی که بدهید. تنظیم شمارنده (counter-set) بی‌آنکه چیزی بیفزاید مقدار می‌گذارد. اگر افزایش و تنظیم هر دو روی یک عنصر باشند، تنظیم برنده است.
شمارنده تا وقتی چاپش نکنید دیده نمی‌شود. برای چاپ، counter(chapter) را در محتوای تولیدی یک قاعده‌ی پیش‌از یا پس‌از بنویسید، که متنی را جلو یا پشت عنصر می‌افزاید. متن کنار آن درون همان رشته و میان گیومه می‌آید: "counter(chapter) \". \"". اگر شمارنده‌ی درس را روی هر سرتیتر فصل بازنشانی کنید، در هر فصل از نو شروع می‌کند و ۱.۱، ۱.۲، ۲.۱ می‌دهد. نمونه دقیقاً همین کار را می‌کند: هر سرتیتر فصل شمارنده‌ی درس را بازنشانی می‌کند و هر پاراگراف درس آن را می‌افزاید.
صفحه:
عنوان = "طرح شماره‌دار"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" ارتفاع خط = 1.8 پایان
جعبه: بازنشانی شمارنده = chapter
سرتیتر:
اندازه = 3
افزایش شمارنده = chapter
بازنشانی شمارنده = lesson
پیش‌از محتوای تولیدی = "counter(chapter, persian) \". \""
محتوا = "آغاز کار"
پایان
پاراگراف: افزایش شمارنده = lesson پیش‌از محتوای تولیدی = "counter(chapter, persian) \".\" counter(lesson, persian) \" \"" محتوا = "نصب مترجم" پایان
پاراگراف: افزایش شمارنده = lesson پیش‌از محتوای تولیدی = "counter(chapter, persian) \".\" counter(lesson, persian) \" \"" محتوا = "نخستین صفحه" پایان
سرتیتر:
اندازه = 3
افزایش شمارنده = chapter
بازنشانی شمارنده = lesson
پیش‌از محتوای تولیدی = "counter(chapter, persian) \". \""
محتوا = "سبک‌دهی"
پایان
پاراگراف: افزایش شمارنده = lesson پیش‌از محتوای تولیدی = "counter(chapter, persian) \".\" counter(lesson, persian) \" \"" محتوا = "رنگ و قلم" پایان
سرتیتر:
اندازه = 3
تنظیم شمارنده = "chapter 9"
بازنشانی شمارنده = lesson
پیش‌از محتوای تولیدی = "counter(chapter, persian) \". \""
محتوا = "پیوست"
پایان
پاراگراف: افزایش شمارنده = lesson پیش‌از محتوای تولیدی = "counter(chapter, persian) \".\" counter(lesson, persian) \" \"" محتوا = "واژه‌نامه" پایان
پایان
پایانسرتیتر پیوست از تنظیم شمارنده = "chapter 9" استفاده می‌کند: به ۹ می‌پرد و درس‌هایش به شکل ۹.۱ دنبالش می‌آیند. تابع counter() مقدار دومی هم می‌گیرد، یک سبک فهرست، و نسخه‌ی فارسی نمونه آن را به شکل counter(chapter, persian) به کار برده تا عددها با رقم فارسی چاپ شوند. برای عددهای تودرتو مثل ۱.۲.۳ در یک گام، counters(name, ".") همه‌ی سطح‌های شمارنده را با یک جداکننده به هم می‌چسباند.
پیشوندهای پیش‌از و پس‌از روی عنصرها و بخش‌ها کار می‌کنند، اما درون یک قاعده‌ی سراسری بی‌سروصدا کنار گذاشته می‌شوند. اگر شماره‌ها پیدا نشدند، ببینید قاعده را کجا نوشته‌اید. این را هم بدانید که دو عنصر با ظاهر یکسان یک کلاس CSS مشترک می‌گیرند، اما دو عنصر با ظاهر متفاوت که با کلاس یک نام داده‌اید خطای ترجمه است؛ پس فقط روی عنصرهایی که واقعاً شبیه‌اند کلاس نام ببرید.
گیومه
عنصر نقل قول دور متنش گیومه می‌گذارد و گیومه‌ای که به کار می‌رود از ویژگی نقل قول‌ها (quotes) می‌آید. مقدار، جفت‌هایی از رشته است: جفت اول سطح بیرونی، جفت دوم برای نقل قول درون نقل قول، و همین‌طور بعدی‌ها. گیومه‌های درون مقدار هم بک‌تیک می‌خواهند. دو پاراگراف اول نمونه یک جمله‌ی تودرتو را با دو دست گیومه نشان می‌دهند. نقل قول‌ها = "none" گیومه را برمی‌دارد، و برای نقل قول بلند که خودش گیومه ندارد، می‌توانید با واژه‌های open-quote و close-quote در محتوای تولیدی گیومه بیفزایید، مثل سطر آخر نمونه. این واژه‌ها از همان جفت‌های نقل قول‌ها می‌خوانند، پس گیومه‌ها یکدست می‌مانند.
صفحه:
عنوان = "گیومه‌ها"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" ارتفاع خط = 1.8 پایان
پاراگراف: نقل قول‌ها = `"«" "»" "‹" "›"`
محتوا = "سارا گفت: "
نقل قول: محتوا = "امید به من گفت: "
نقل قول: محتوا = "هرگز نایست" پایان
پایان
تکه: محتوا = "." پایان
پایان
پاراگراف: نقل قول‌ها = `"“" "”" "‘" "’"`
محتوا = "همان جمله با نشانه‌های دیگر: "
نقل قول: محتوا = "امید به من گفت: "
نقل قول: محتوا = "هرگز نایست" پایان
پایان
پایان
نقل قول بلند: نقل قول‌ها = "none" کادر = "none" فضا = "1rem 0" رنگ = "#475569"
محتوا = "بدون گیومه."
پایان
نقل قول بلند: نقل قول‌ها = `"[" "]"` رنگ = "#0f766e"
پیش‌از محتوای تولیدی = open-quote
پس‌از محتوای تولیدی = close-quote
محتوا = "با open-quote و close-quote افزوده شده."
پایان
پایانمرز و چیدمان جدول
مرز جدول دو الگو دارد. با ادغام کادر = separate (پیش‌فرض) هر خانه مرز کامل خودش را نگه می‌دارد و فاصله‌ی میان خانه‌ها با فاصله کادرها (border-spacing) تنظیم می‌شود: یک اندازه برای هر دو جهت، یا دو اندازه برای افقی و عمودی. با collapse مرزهای همسایه در یک خط ادغام می‌شوند و فاصله کادرها اثری ندارد. خانه‌های خالی = hide مرز و پس‌زمینه‌ی خانه‌ی بی‌محتوا را حذف می‌کند، اما فقط در الگوی جدا. جای عنوان جدول عنوان جدول را به پایین می‌برد. جدول اول زیر الگوی جدا را با خانه‌ی خالی پنهانش نشان می‌دهد و جدول دوم مرزهای ادغام‌شده را.
صفحه:
عنوان = "تنظیم‌های جدول"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" ارتفاع خط = 1.8 پایان
سراسری: گزینشگر = "td, th" کادر = "2px solid #0f766e" فاصله = "6 14" پایان
جدول: ادغام کادر = separate فاصله کادرها = "10 4" خانه‌های خالی = hide جای عنوان جدول = bottom فضا = "0 0 1.5rem"
عنوان جدول: محتوا = "مرزهای جدا، خانه‌های خالی پنهان" پایان
سرصفحه:
ردیف:
ستون: محتوا = "کالا" پایان
ستون: محتوا = "توضیح" پایان
پایان
پایان
ردیف:
ستون: محتوا = "چای" پایان
ستون: پایان
پایان
پایان
جدول: ادغام کادر = collapse چیدمان جدول = fixed عرض = "22rem"
عنوان جدول: محتوا = "مرزهای ادغام‌شده، چیدمان ثابت" پایان
سرصفحه:
ردیف:
ستون: محتوا = "کالا" پایان
ستون: محتوا = "سرتیتری بلند در ستونی با پهنای ثابت" پایان
پایان
پایان
پایان
پایانجدول دوم چیدمان جدول = fixed دارد. با چیدمان پیش‌فرض auto مرورگر پیش از تعیین پهنای ستون‌ها همه‌ی خانه‌ها را اندازه می‌گیرد، پس یک خانه‌ی بلند می‌تواند ستونش را بکشد و جدول از آنچه خواسته‌اید پهن‌تر شود. چیدمان ثابت فقط پهنای جدول و سطر اول را می‌خواند و جا را تقسیم می‌کند، پس ستون‌ها سر جایشان می‌مانند و متن بلند درونشان می‌پیچد. جدول بزرگ را هم سریع‌تر می‌کشد. برای اثر داشتن به یک عرض روی جدول نیاز دارد.
پیمایشی که می‌چسبد
چسبیدن در پیمایش باعث می‌شود جعبه‌ی پیمایشی به جای ایستادن هر جایی، روی نقطه‌هایی که شما برگزیده‌اید بایستد، مثل برگه‌های یک نگارخانه. دو طرف دارد. روی ظرف پیمایش، نوع چسبیدن پیمایش (scroll-snap-type) آن را روشن می‌کند: یک محور (x، y یا both) و یک میزان سخت‌گیری. mandatory همیشه روی یک نقطه می‌ایستد و proximity فقط وقتی پیمایش نزدیک یکی تمام شود. روی هر فرزند، تراز چسبیدن پیمایش می‌گوید کدام لبه‌ی فرزند با ظرف هم‌تراز شود: start، center یا end. توقف چسبیدن پیمایش = "always" می‌افزاید که یک ضربه‌ی تند هم نباید از فرزند بگذرد، که برای اسلایدشو همان است که می‌خواهید.
نمونه‌ی زیر نواری از چهار برگه است. ظرف سرریز افقی = auto دارد تا پیمایش شود و نوع چسبیدن پیمایش = "x mandatory". برگه‌ها با یک قاعده‌ی سراسری و گزینشگر #strip > * آرایش شده‌اند، که کوتاه‌تر از تکرار یک سطر روی چهار جعبه است. نوار را با انگشت، چرخ ماوس یا کلیدها بکشید و ببینید روی یک برگه آرام می‌گیرد.
صفحه:
عنوان = "برگه‌های چسبنده"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" ارتفاع خط = 1.8 پایان
سراسری: گزینشگر = "#strip > *" فلکس = "0 0 80%" ارتفاع = 120 رنگ = white اندازه قلم = "1.6rem" نمایش = flex ترازعمودی = center چینش = center گردی کادر = 12 تراز چسبیدن پیمایش = start توقف چسبیدن پیمایش = always پایان
ظاهر سفارشی: محتوا = "#strip::scroll-marker-group { display: flex; gap: 8px; justify-content: center; padding: 8px } #strip > *::scroll-marker { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #94a3b8 } #strip > *::scroll-marker:target-current { background: #0f766e }" پایان
جعبه: شناسه = "strip" نمایش = flex شکاف = 12 سرریز افقی = auto فاصله = "0 20" نوع چسبیدن پیمایش = "x mandatory" فاصله پیمایش = "0 20" گروه نشانگر پیمایش = after
جعبه: پس زمینه = "#0f766e" محتوا = "یک" پایان
جعبه: پس زمینه = "#2563eb" محتوا = "دو" پایان
جعبه: پس زمینه = "#c2410c" محتوا = "سه" پایان
جعبه: پس زمینه = "#7c3aed" محتوا = "چهار" پایان
پایان
پاراگراف: محتوا = "نوار را به پهلو بکشید. همیشه با یک برگه در لبه می‌ایستد." پایان
پایاندو ویژگی دیگر جای «آغاز» را تنظیم می‌کنند. فاصله پیمایش (scroll-padding) روی ظرف می‌نشیند و ناحیه‌ی به‌حساب‌آمده را کوچک می‌کند: "0 20" برگه را ۲۰ پیکسل از لبه‌های راست و چپ دور نگه می‌دارد تا برگه‌ی بعدی سرک بکشد، و جلو می‌گیرد که سرصفحه‌ی ثابت سرتیتری را که صفحه به آن می‌پرد بپوشاند. فضا پیمایش (scroll-margin) روی فرزند می‌نشیند و ناحیه‌ی چسبیدن همان فرزند را بزرگ می‌کند. هر دو سمت دارند: top، right، bottom و left، و سمت‌های منطقی، یعنی block و inline با start و end، که در صفحه‌ی راست‌به‌چپ برعکس می‌شوند. برای هر چیزی که به پهلو پیمایش می‌شود از منطقی‌ها استفاده کنید، چون در صفحه‌ی فارسی برگه‌ی اول در سمت راست است.
نقطه‌های کوچک پیش‌نمایش را مرورگر می‌سازد، نه عنصرها. گروه نشانگر پیمایش = "after" ردیفی از نشانگرها پس از ظرف می‌خواهد، برای هر فرزند یکی، و عنصر خام سبک آن‌ها را با ::scroll-marker و ::scroll-marker-group آرایش می‌کند، که زبان صفحه برایشان نام ندارد. نقطه‌ی برگه‌ای که در دید است با :target-current هم جور می‌شود، پس می‌تواند رنگ خودش را داشته باشد، و کلیک روی یک نقطه به برگه‌اش می‌پیماید. گروه هدف پیمایش = "auto" همین کار را برای فهرستی از پیوندها می‌کند، مثلاً فهرست مطلبی که بخشِ در حال خواندن را پررنگ می‌کند. هر دو فعلاً فقط در مرورگرهای Chromium هستند، پس صفحه را طوری بسازید که بدون آن‌ها هم قابل استفاده باشد.
چسبیدن فقط به خواننده‌ای کمک می‌کند که پیمایش می‌کند. با آن محتوا را پنهان نکنید: هرچه خواننده لازم دارد باید با یک پیمایش ساده در دسترس باشد، و صفحه را با صفحه‌کلید هم امتحان کنید که ظرف را به همان شکل جابه‌جا می‌کند.
جایگذاری لنگری
راهنمای شناور، فهرست یا پنجره‌ی بازشو باید کنار چیزی باشد که توضیحش می‌دهد. سال‌ها این کار JavaScript می‌خواست که صفحه را اندازه بگیرد. جایگذاری لنگری آن را در CSS انجام می‌دهد. با نام لنگر (anchor-name) به یک عنصر نامی می‌دهید که باید با دو خط تیره شروع شود، مثل "--target". عنصر دیگری که موقعیت = absolute است آن نام را با لنگر جایگاه برمی‌گزیند و با ناحیه جایگاه می‌گوید کجا بنشیند. ناحیه یکی از خانه‌های شبکه‌ای سه در سه دور لنگر است: top، bottom، left، right، center، گوشه‌هایی مثل top right و خانه‌های کشیده‌ای مثل top span-right.
نمونه چهار دکمه دارد. هر کدام با کلیک تابعی کوچک را اجرا می‌کند و آن تابع با دام.تنظیم سبک مقدار position-area راهنما را می‌گذارد. راهنما دور لنگر می‌پرد و هیچ مختصاتی هیچ‌جا حساب نمی‌شود. تابع‌های دام در صفحه‌ی dom توضیح داده شده‌اند.
واردسازی دام
صفحه:
عنوان = "راهنمای لنگردار"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" ارتفاع خط = 1.8 پایان
جعبه: نمایش = flex شکاف = 8 فضا = "0 0 1rem"
دکمه: کلیک = (): دام.تنظیم سبک(دام.با شناسه("tip")، "position-area"، "top") پایان محتوا = "بالا" پایان
دکمه: کلیک = (): دام.تنظیم سبک(دام.با شناسه("tip")، "position-area"، "right") پایان محتوا = "راست" پایان
دکمه: کلیک = (): دام.تنظیم سبک(دام.با شناسه("tip")، "position-area"، "bottom") پایان محتوا = "پایین" پایان
دکمه: کلیک = (): دام.تنظیم سبک(دام.با شناسه("tip")، "position-area"، "left") پایان محتوا = "چپ" پایان
پایان
جعبه: موقعیت = relative ارتفاع = 220 کادر = "1px dashed #94a3b8" گردی کادر = 8
جعبه: شناسه = "target" نام لنگر = "--target" فضا = "80 auto 0" عرض = 120 فاصله = 12 ترازمتن = center پس زمینه = "#0f766e" رنگ = white گردی کادر = 6 محتوا = "لنگر" پایان
جعبه: شناسه = "tip" موقعیت = absolute لنگر جایگاه = "--target" ناحیه جایگاه = top جایگزین های جایگاه = flip-block پیدایی جایگاه = anchors-visible فضا = 6 فاصله = "4 10" پس زمینه = "#0f172a" رنگ = white گردی کادر = 6 محتوا = "راهنما" پایان
پایان
پایاندو ویژگی دیگر راهنما را در لبه‌ی صفحه خوش‌رفتار می‌کنند. جایگزین های جایگاه = "flip-block" جای‌های دیگری را فهرست می‌کند که وقتی جای اول از صفحه بیرون بزند امتحان شوند: flip-block آن را به سوی دیگر قرینه می‌کند و flip-inline به پهلو. پیدایی جایگاه = "anchors-visible" وقتی لنگر از دید بیرون برود راهنما را پنهان می‌کند تا تنها شناور نماند. ترتیب تلاش جایگاه و میان‌بر تلاش جایگاه گزینه‌ها را بر پایه‌ی جایی که باقی می‌گذارند رتبه می‌دهند. و بالاخره دامنه لنگر نام‌ها را به یک بخش از صفحه محدود می‌کند، تا بخشی که ده بار به کار رفته در هر نسخه همان نام را بی‌قاطی‌شدن داشته باشد.
جایگذاری لنگری تازه است. مرورگرهای Chromium دارندش و بقیه در حال رسیدن‌اند، و مرورگری که ندارد این سطرها را نادیده می‌گیرد، پس راهنما همان‌جایی می‌ماند که بدون آن‌ها بود. آن را در مرورگرهایی که خواننده‌هایتان به کار می‌برند امتحان کنید و یک جایگزین ساده، مثل نشان‌دادن متن زیر دکمه، در دست داشته باشید.
ویژگی‌های ظاهری SVG
عنصر اس‌وی‌جی یک نقاشی را نگه می‌دارد. محتوای آن نشانه‌گذاری خام SVG است که مترجم بی‌تغییر می‌گذراندش، پس شکل‌هایی مثل <circle> و <path> به صورت متن نوشته می‌شوند. آنچه زبان صفحه می‌افزاید آرایش است. ویژگی‌های این بخش ویژگی‌های ظاهری SVG هستند و از دو راه به شکل‌ها می‌رسند.
راه اول ارث‌بری است. پرکردن، خط دور، ضخامت خط دور، ترتیب نقاشی، لنگر متن و ویژگی‌های نشانه به ارث می‌رسند، پس یک سطر روی عنصر اس‌وی‌جی همه‌ی شکل‌های درونش را آرایش می‌کند. پرکردن رنگ درون شکل است و خط دور خطی که لبه‌اش را می‌کشد؛ بدون خط دور فقط پرشدگی دیده می‌شود. نمونه‌ی اول آن‌ها را روی سه نقاشی می‌گذارد. قاعده پرکردن = "evenodd" جایی که خط‌های ستاره همدیگر را قطع می‌کنند حفره می‌گذارد. الگوی خط‌چین خط دور (stroke-dasharray) خط و فاصله را به‌نوبت می‌آورد، فاصله خط‌چین الگو را جابه‌جا می‌کند و سر خط دور گرد خط‌چین را نقطه‌چین می‌کند. اتصال خط دور گوشه را شکل می‌دهد و حد گوشه خط دور نوک تیزی را که بیش از اندازه بیرون می‌زند صاف می‌برد.
صفحه:
عنوان = "پرکردن و خط دور"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" ارتفاع خط = 1.8 پایان
جعبه: نمایش = flex شکاف = 24 پیچش آرایش = wrap
جعبه:
اس‌وی‌جی: جعبه دید = "0 0 100 100" عرض = 120 ارتفاع = 120 پرکردن = "#5eead4" شفافیت پرکردن = 0.6 قاعده پرکردن = evenodd خط دور = "#0f766e" ضخامت خط دور = 3 اتصال خط دور = round
محتوا = "<polygon points='50,5 80,95 5,35 95,35 20,95'/>"
پایان
پاراگراف: محتوا = "پرکردن زوج و فرد" پایان
پایان
جعبه:
اس‌وی‌جی: جعبه دید = "0 0 100 100" عرض = 120 ارتفاع = 120 پرکردن = none خط دور = "#c2410c" ضخامت خط دور = 8 سر خط دور = round الگوی خط‌چین خط دور = "1 14" فاصله خط‌چین = 4
محتوا = "<circle cx='50' cy='50' r='38'/>"
پایان
پاراگراف: محتوا = "خط نقطه‌چین" پایان
پایان
جعبه:
اس‌وی‌جی: جعبه دید = "0 0 100 100" عرض = 120 ارتفاع = 120 پرکردن = none خط دور = "#2563eb" ضخامت خط دور = 14 اتصال خط دور = miter حد گوشه خط دور = 2
محتوا = "<polyline points='15,85 50,15 85,85'/>"
پایان
پاراگراف: محتوا = "گوشه‌ی تیز که حد آن را می‌برد" پایان
پایان
پایان
پایانمتن در SVG قاعده‌های خودش را دارد. لنگر متن تعیین می‌کند کدام بخش متن روی نقطه‌ی x خودش بنشیند: middle آن را وسط می‌گذارد. ترتیب نقاشی = "stroke fill" اول خط دور را می‌کشد، پس پرشدگی نیمه‌ی درونی آن را می‌پوشاند و حرف‌های قابدار کلفت می‌مانند. خط پایه غالب و جابه‌جایی خط پایه خطی را که حرف‌ها روی آن می‌نشینند عوض می‌کنند و به ارث نمی‌رسند، پس فقط روی یک متن می‌نشینند. این راه دوم رسیدن به یک شکل است: قاعده‌ی سراسری با یک گزینشگر مثل "#b". زبان صفحه شکل‌های درون نشانه‌گذاری خام را نام نمی‌برد، اما CSS هنوز می‌تواند با شناسه، کلاس یا برچسب پیدایشان کند.
صفحه:
عنوان = "متن در اس‌وی‌جی"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" ارتفاع خط = 1.8 پایان
سراسری: گزینشگر = "#a" خط پایه غالب = hanging پایان
سراسری: گزینشگر = "#b" خط پایه غالب = middle پایان
سراسری: گزینشگر = "#sup" جابه‌جایی خط پایه = super اندازه قلم = 14 پایان
اس‌وی‌جی: جعبه دید = "0 0 360 140" عرض = 360 ارتفاع = 140 اندازه قلم = 20 وزن قلم = bold پرکردن = "#fde68a" خط دور = "#0f172a" ضخامت خط دور = 4 ترتیب نقاشی = "stroke fill" لنگر متن = middle
محتوا = "<line x1='0' y1='45' x2='360' y2='45' stroke='#ef4444' stroke-width='1'/><text id='a' x='60' y='45'>آویزان</text><text id='b' x='180' y='45'>میانه</text><text x='300' y='45'>پایه</text><text x='180' y='110'>E = mc<tspan id='sup'>2</tspan></text>"
پایان
پایانهمین راه برای ویژگی‌هایی کار می‌کند که فقط یک شکل دارد. مرکز x (cx)، مرکز y (cy) و شعاع (r) یک دایره را جا و اندازه می‌دهند، شعاع x و شعاع y این کار را برای بیضی می‌کنند یا گوشه‌های مستطیل را گرد می‌کنند، مختصات x و مختصات y مستطیل را جابه‌جا می‌کنند و داده مسیر (d) طرح یک مسیر را نگه می‌دارد. این‌ها در SVG قدیمی ویژگی (attribute) بودند و در مرورگرهای امروزی ویژگی CSS هستند، که همان چیزی است که اجازه می‌دهد یک قاعده‌ی اشاره دایره‌ی زیر را بزرگ کند و یک گذار (transition) آن را انیمیت.
صفحه:
عنوان = "شکل از راه CSS"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" ارتفاع خط = 1.8 پایان
سراسری: گزینشگر = "#c" مرکز x = 60 مرکز y = 60 شعاع = 30 گذار = "r 0.2s" پایان
سراسری: گزینشگر = "#c:hover" شعاع = 48 پایان
سراسری: گزینشگر = "#e" مرکز x = 170 مرکز y = 60 شعاع x = 40 شعاع y = 22 پایان
سراسری: گزینشگر = "#r" مختصات x = 230 مختصات y = 30 شعاع x = 14 شعاع y = 14 پایان
سراسری: گزینشگر = "#p" داده مسیر = "path('M 10 135 C 70 112 130 112 190 135 L 290 135')" پایان
اس‌وی‌جی: جعبه دید = "0 0 300 140" عرض = 300 ارتفاع = 140 خط دور = "#0f172a" ضخامت خط دور = 2
محتوا = "<circle id='c' fill='#5eead4'/><ellipse id='e' fill='#fde68a'/><rect id='r' width='60' height='60' fill='#fca5a5'/><path id='p' fill='none'/>"
پایان
پاراگراف: محتوا = "ماوس را روی دایره ببرید: شعاع آن اینجا یک ویژگی CSS است." پایان
پایانمسیر را در d با C یا L بنویسید نه Q. عددی که پس از آن فاصله و Q بیاید ممکن است مترجم صفحه آن را یکای طول q بخواند و مسیر را خراب کند. این فقط در CSS نوشته‌شده با زبان صفحه رخ می‌دهد: ویژگی d درون نشانه‌گذاری خام دست‌نخورده می‌گذرد.
شیب رنگ‌ها و پالایه‌ها هم در نشانه‌گذاری خام نوشته می‌شوند، اما رنگ‌هایشان ویژگی CSS هستند. رنگ ایست و شفافیت ایست یک ایست شیب را رنگ می‌کنند، رنگ سیل و شفافیت سیل گام feFlood یک پالایه را، و رنگ نورپردازی گام‌های نورپردازی را. میان‌یابی رنگ پالایه فضای رنگی را که پالایه در آن کار می‌کند برمی‌گزیند، sRGB یا linearRGB. چون ایست‌ها و گام‌های پالایه به ارث نمی‌رسند، باز هم با قاعده‌ی سراسری به آن‌ها می‌رسید.
صفحه:
عنوان = "ایست‌های شیب و پالایه‌ها"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" ارتفاع خط = 1.8 پایان
سراسری: گزینشگر = ".s1" رنگ ایست = "#0f766e" شفافیت ایست = 1 پایان
سراسری: گزینشگر = ".s2" رنگ ایست = "#2563eb" شفافیت ایست = 0.25 پایان
سراسری: گزینشگر = ".tint" رنگ سیل = "#7c3aed" شفافیت سیل = 0.5 پایان
سراسری: گزینشگر = "filter" میان‌یابی رنگ پالایه = sRGB پایان
اس‌وی‌جی: جعبه دید = "0 0 220 120" عرض = 220 ارتفاع = 120
محتوا = "<defs><linearGradient id='g' x1='0' x2='1'><stop class='s1' offset='0'/><stop class='s2' offset='1'/></linearGradient><filter id='f'><feFlood class='tint' result='c'/><feComposite in='c' in2='SourceGraphic' operator='in' result='t'/><feMerge><feMergeNode in='SourceGraphic'/><feMergeNode in='t'/></feMerge></filter></defs><rect x='5' y='10' width='100' height='100' rx='10' fill='url(#g)'/><rect x='115' y='10' width='100' height='100' rx='10' fill='#38bdf8' filter='url(#f)'/>"
پایان
پاراگراف: محتوا = "چپ: شیبی که رنگ ایست‌هایش با CSS داده شده. راست: پالایه‌ای که رنگ سیلش از CSS می‌آید." پایان
پایاننشانگرها شکل‌های کوچکی هستند که روی نقطه‌های یک خط کشیده می‌شوند. نشانگر آغاز، نشانگر میانه و نشانگر انتها نشانی url(#id) یک عنصر marker را می‌گیرند و میان‌بر نشانه هر سه را یک‌جا می‌گذارد. عنصرهای marker را مثل نمونه در یک اس‌وی‌جی جدا بگذارید، چون نشانگرها خط دور و ویژگی‌های نشانگر نقاشی‌ای را که درونش هستند به ارث می‌برند. جلوه برداری = "non-scaling-stroke" وقتی نقاشی مقیاس می‌گیرد ضخامت خط را ثابت نگه می‌دارد، و پرداخت شکل و میان‌یابی رنگ راهنمایی برای نحوه‌ی کشیدن لبه‌ها و شیب‌ها هستند.
صفحه:
عنوان = "نشانگر روی خط"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" ارتفاع خط = 1.8 پایان
اس‌وی‌جی: عرض = 0 ارتفاع = 0 موقعیت = absolute
محتوا = "<defs><marker id='start' viewBox='0 0 10 10' refX='5' refY='5' markerWidth='6' markerHeight='6'><circle cx='5' cy='5' r='5' fill='#2563eb'/></marker><marker id='mid' viewBox='0 0 10 10' refX='5' refY='5' markerWidth='5' markerHeight='5'><rect width='10' height='10' fill='#f59e0b'/></marker><marker id='end' viewBox='0 0 10 10' refX='8' refY='5' markerWidth='8' markerHeight='8' orient='auto'><path d='M0 0 L10 5 L0 10 z' fill='#dc2626'/></marker></defs>"
پایان
اس‌وی‌جی: جعبه دید = "0 0 300 120" عرض = 300 ارتفاع = 120 پرکردن = none خط دور = "#0f766e" ضخامت خط دور = 3 نشانگر آغاز = "url(#start)" نشانگر میانه = "url(#mid)" نشانگر انتها = "url(#end)"
محتوا = "<polyline points='20,90 100,30 180,80 270,30'/>"
پایان
پاراگراف: محتوا = "یک نقطه در آغاز، مربع‌ها در گوشه‌ها و یک پیکان در پایان." پایان
پایانریاضی
عنصر ریاضی یک فرمول می‌کشد. مثل اس‌وی‌جی محتوایش نشانه‌گذاری خام است، اینجا MathML، مثل <mfrac> برای کسر و <msup> برای توان. سه ویژگی شیوه‌ی چیدنش را عوض می‌کنند. سبک ریاضی برای فرمول نمایشی normal است، با عملگرهای بزرگ و حدها بالا و پایین، یا compact برای فرمولی میان سطر متن، که همه‌چیز در آن فشرده‌تر است. عمق ریاضی می‌گوید فرمول چقدر تودرتوست تا کوچک‌تر کشیده شود. اندازه را فقط جایی عوض می‌کند که font-size برابر واژه‌ی math باشد، که زبان صفحه هنوز نمی‌پذیرد، پس نمونه آن را در یک عنصر خام سبک می‌گذارد. جابه‌جایی ریاضی تعیین می‌کند بالانویس‌ها چقدر بالا بروند: compact کمتر بالا می‌برد، مثل مخرج یک کسر.
صفحه:
عنوان = "سبک‌های ریاضی"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" ارتفاع خط = 1.8 پایان
سراسری: گزینشگر = "math" اندازه قلم = "1.6rem" فضا = "0 1.5rem 0 0" پایان
پاراگراف: محتوا = "سبک ریاضی: عادی، سپس فشرده" پایان
جعبه: نمایش = flex
ریاضی: سبک ریاضی = normal
محتوا = "<munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mi>n</mi></munderover><mfrac><mn>1</mn><mi>i</mi></mfrac>"
پایان
ریاضی: سبک ریاضی = compact
محتوا = "<munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mi>n</mi></munderover><mfrac><mn>1</mn><mi>i</mi></mfrac>"
پایان
پایان
ظاهر سفارشی: محتوا = "#d0, #d1, #d2 { font-size: math }" پایان
پاراگراف: محتوا = "عمق ریاضی ۰ و ۱ و ۲ در کنار هم" پایان
جعبه: نمایش = flex ترازعمودی = baseline اندازه قلم = "3rem"
ریاضی: شناسه = "d0" عمق ریاضی = 0 محتوا = "<mi>x</mi><mo>+</mo><mn>1</mn>" پایان
ریاضی: شناسه = "d1" عمق ریاضی = 1 محتوا = "<mi>x</mi><mo>+</mo><mn>1</mn>" پایان
ریاضی: شناسه = "d2" عمق ریاضی = 2 محتوا = "<mi>x</mi><mo>+</mo><mn>1</mn>" پایان
پایان
پایانترتیب خواندن، لایه‌ی بالا و HDR
فوکوس صفحه‌کلید و صفحه‌خوان‌ها صفحه را به ترتیب نوشته‌شدن در متن می‌پیمایند. وقتی چیدمانی ترتیب دیداری را عوض کند، مثلاً با جهت فلکس = row-reverse، این دو با هم نمی‌خوانند و کاربر صفحه‌کلید روی صفحه این‌سو و آن‌سو می‌پرد. جریان خواندن (reading-flow) روی ظرف این را درست می‌کند: flex-visual آنچه کشیده شده را دنبال می‌کند، grid-rows و grid-columns همین را برای شبکه می‌کنند و source-order تصمیم را به عدد ترتیب خواندن هر فرزند می‌سپارد، کوچک‌ترین اول. در نمونه کلید Tab را بزنید: ردیف اول به ترتیب نوشته‌شدن خوانده می‌شود و ردیف دوم به ترتیبی که می‌بینید.
واردسازی دام
صفحه:
عنوان = "ترتیب خواندن"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" ارتفاع خط = 1.8 پایان
پاراگراف: شناسه = "out" محتوا = "کلید Tab را بزنید و فوکوس را ببینید." پایان
جعبه: نمایش = flex جهت فلکس = row-reverse شکاف = 8 فضا = "0 0 1rem"
دکمه: فوکوس = (): دام.تنظیم متن(دام.با شناسه("out")، "تمرکز: الف") پایان محتوا = "الف" پایان
دکمه: فوکوس = (): دام.تنظیم متن(دام.با شناسه("out")، "تمرکز: ب") پایان محتوا = "ب" پایان
دکمه: فوکوس = (): دام.تنظیم متن(دام.با شناسه("out")، "تمرکز: پ") پایان محتوا = "پ" پایان
پایان
جعبه: نمایش = flex جهت فلکس = row-reverse شکاف = 8 جریان خواندن = flex-visual
دکمه: فوکوس = (): دام.تنظیم متن(دام.با شناسه("out")، "تمرکز: ت") پایان محتوا = "ت" پایان
دکمه: فوکوس = (): دام.تنظیم متن(دام.با شناسه("out")، "تمرکز: ث") پایان محتوا = "ث" پایان
دکمه: فوکوس = (): دام.تنظیم متن(دام.با شناسه("out")، "تمرکز: ج") پایان محتوا = "ج" پایان
پایان
پایاندر صفحه‌ی راست‌به‌چپ ترتیب دیداری از راست شروع می‌شود، پس همین ویژگی دنباله‌ی دیگری می‌دهد، و نسخه‌ی فارسی همین نمونه آن را نشان می‌دهد. دو ویژگی دیگر برای حالت‌های ویژه‌اند. روکش (overlay) گزارش می‌دهد عنصری در لایه‌ی بالا هست یا نه، همان‌جا که پنجره‌های بازشو و دیالوگ‌ها کشیده می‌شوند؛ آن را در یک گذار فهرست می‌کنید تا عنصری که از لایه‌ی بالا بیرون می‌رود بتواند نخست انیمیشن خروجش را تمام کند. حد بازه پویا محدود می‌کند تصویر و ویدیوی HDR روی صفحه‌ای که آن را پشتیبانی می‌کند تا چه حد روشن شوند، از standard تا no-limit.
مرجع: ویژگی‌های باقی‌مانده
هر ویژگی این درس زیر آمده، با نام فارسی، نام CSS، آنچه می‌پذیرد و نمونه‌ای که مترجم بررسی کرده است. عدد بی‌گیومه اندازه‌ی پیکسلی است و هر واژه‌ی کلیدی CSS را می‌شود بی‌گیومه نوشت، مگر اینکه واژه‌ای از خود زبان صفحه هم باشد، مثل end، که آن را میان گیومه بگذارید.
فهرست‌ها، شمارنده‌ها و گیومه
| ویژگی | کار آن و مقدارهای قابل قبول | نمونه |
|---|---|---|
سبک فهرستlist style list-style | میان‌بر برای list-style-type، list-style-position و list-style-image. بخش‌ها را به هر ترتیبی بنویسید، مثلاً square inside؛ بخشی که نیاید مقدار پیش‌فرضش را می‌گیرد. [CSS-wide keywords only] | فهرست: سبک فهرست = "square inside" پس زمینه = "#ccfbf1" فاصله = 8
مورد: محتوا = "شکر" پایان
مورد: محتوا = "آرد" پایان
پایان |
نوع نشانه فهرستlist style type list-style-type | شکل نشانه. یک واژه‌ی کلیدی مثل disc، circle، square، decimal، decimal-leading-zero، lower-roman، upper-alpha، persian یا none بدهید. متن میان گیومه همان‌طور که هست به کار می‌رود. آن را روی فهرست بگذارید تا موردها به ارث ببرند. [string / disc, circle, square, decimal, decimal-leading-zero, lower-roman, ...] | فهرست شماره‌دار: نوع نشانه فهرست = "upper-alpha"
مورد: محتوا = "سوپ" پایان
مورد: محتوا = "سالاد" پایان
پایان |
جای نشانه فهرستlist style position list-style-position | نشانه کجا بنشیند. outside (پیش‌فرض) آن را بیرون از جعبه‌ی متن می‌آویزد و سطرهای بعدی هم‌تراز می‌مانند. inside آن را در سطر اول متن می‌گذارد و سطرهای بعدی زیر آن شروع می‌شوند. [inside, outside] | فهرست شماره‌دار: جای نشانه فهرست = "درون" پس زمینه = "#e2e8f0" بیشینه عرض = 220
مورد: محتوا = "گامی بلند که به سطر دوم هم می‌رسد" پایان
پایان |
تصویر نشانه فهرستlist style image list-style-image | یک تصویر را به جای نشانه‌ی هر مورد فهرست می‌گذارد. مقدار یک تصویر است، مثل url(star.png) یا یک شیب رنگ، یا none برای برگشتن به list-style-type. [image / none] | فهرست: تصویر نشانه فهرست = "linear-gradient(#f59e0b, #dc2626)"
مورد: محتوا = "نشانه‌ی رنگی" پایان
مورد: محتوا = "باز همان نشانه" پایان
پایان |
نشانهmarker marker | یک میان‌بر SVG که marker-start، marker-mid و marker-end را یک‌جا روی یک نشانگر می‌گذارد، مثلاً url(#dot). روی شکل‌های path، line، polyline و polygon کار می‌کند و به ::marker موردهای فهرست ربطی ندارد. [image] | اس‌وی‌جی: جعبه دید = "0 0 60 40" عرض = 120 ارتفاع = 80 پرکردن = none خط دور = "#0f766e" نشانه = "url(#dot)"
محتوا = "<defs><marker id='dot' viewBox='0 0 10 10' refX='5' refY='5' markerWidth='5' markerHeight='5'><circle cx='5' cy='5' r='5' fill='#dc2626'/></marker></defs><polyline points='5,30 30,8 55,30'/>"
پایان |
نقل قول‌هاquotes quotes | گیومه‌هایی که نقل قول و مقدارهای open-quote و close-quote به کار می‌برند. جفت‌هایی از رشته بدهید: جفت اول برای سطح بیرونی، جفت دوم برای نقل قول درون نقل قول و همین‌طور بعدی‌ها. none گیومه نشان نمی‌دهد و auto گیومه‌ی زبان را برمی‌گزیند. [string; up to 99 values] | نقل قول: نقل قول‌ها = `"«" "»"` محتوا = "آهسته و پیوسته" پایان |
بازنشانی شمارندهcounter reset counter-reset | روی عنصر یک شمارنده می‌سازد یا شمارنده‌ای را که هست به عددی برمی‌گرداند. نام و، اگر خواستید، مقدار آغاز را بنویسید: chapter از ۰ شروع می‌کند و chapter 4 از ۴. چند شمارنده را می‌شود کنار هم نوشت و none کاری نمی‌کند. [name / integer; up to 99 values] | جعبه: بازنشانی شمارنده = "n 4"
پاراگراف: افزایش شمارنده = n پیش‌از محتوای تولیدی = "counter(n) \". \"" محتوا = "پنجم" پایان
پاراگراف: افزایش شمارنده = n پیش‌از محتوای تولیدی = "counter(n) \". \"" محتوا = "ششم" پایان
پایان |
افزایش شمارندهcounter increment counter-increment | هر بار که عنصر کشیده می‌شود به یک شمارنده می‌افزاید. نام و، اگر خواستید، گام را بنویسید: step یکی اضافه می‌کند، step 2 دو تا و step -1 به عقب می‌شمارد. عدد را با counter() در محتوای تولیدی نشان می‌دهید. [name / integer; up to 99 values] | جعبه: بازنشانی شمارنده = step
پاراگراف: افزایش شمارنده = "step 2" پیش‌از محتوای تولیدی = "counter(step) \". \"" محتوا = "دو" پایان
پاراگراف: افزایش شمارنده = "step 2" پیش‌از محتوای تولیدی = "counter(step) \". \"" محتوا = "چهار" پایان
پایان |
تنظیم شمارندهcounter set counter-set | یک شمارنده را بی‌آنکه چیزی به آن بیفزاید روی عددی می‌گذارد. نام و مقدار را بنویسید: page 41. عنصرهای بعد از آن از همان عدد ادامه می‌دهند. اگر شمارنده‌ای با آن نام نباشد، ساخته می‌شود. [name / integer; up to 99 values] | جعبه: بازنشانی شمارنده = page
پاراگراف: تنظیم شمارنده = "page 41" پیش‌از محتوای تولیدی = "\"p. \" counter(page)" محتوا = "پرش به صفحه‌ی ۴۱" پایان
پایان |
جدول‌ها
| ویژگی | کار آن و مقدارهای قابل قبول | نمونه |
|---|---|---|
ادغام کادرborder collapse border-collapse | مرز خانه‌های جدول چگونه به هم برسند. collapse مرزهای همسایه را در یک خط ادغام می‌کند. separate (پیش‌فرض) به هر خانه مرز خودش را می‌دهد و میانشان فاصله می‌ماند که با border-spacing تنظیم می‌شود. [collapse, separate] | جدول: ادغام کادر = "جمع‌شده"
ردیف:
ستون: کادر = "2px solid #0f766e" محتوا = "یک" پایان
ستون: کادر = "2px solid #0f766e" محتوا = "دو" پایان
پایان
پایان |
فاصله کادرهاborder spacing border-spacing | فاصله‌ی میان خانه‌ها وقتی مرزها جدا هستند. یک اندازه برای هر دو جهت به کار می‌رود و دو اندازه یعنی اول افقی و بعد عمودی. اگر border-collapse برابر collapse باشد اثری ندارد. [length; up to 2 values] | جدول: ادغام کادر = separate فاصله کادرها = "12 4"
ردیف:
ستون: کادر = "2px solid #2563eb" محتوا = "چپ" پایان
ستون: کادر = "2px solid #2563eb" محتوا = "راست" پایان
پایان
پایان |
جای عنوان جدولcaption side caption-side | عنوان جدول را بالای جدول (top، پیش‌فرض) یا پایین آن (bottom) می‌گذارد. آن را روی عنوان جدول بگذارید. [top, bottom] | جدول:
عنوان جدول: جای عنوان جدول = "پایین" محتوا = "قیمت‌ها به یورو" پایان
ردیف: ستون: محتوا = "چای ۲" پایان پایان
پایان |
خانه‌های خالیempty cells empty-cells | در جدولی که مرزهایش جداست، مرز و پس‌زمینه‌ی خانه‌های خالی کشیده شود یا نه. show (پیش‌فرض) آن‌ها را می‌کشد و hide خانه‌ی خالی را تهی می‌گذارد. [show, hide] | جدول: ادغام کادر = separate خانه‌های خالی = "پنهان‌سازی"
ردیف:
ستون: کادر = "2px solid #c2410c" محتوا = "پر" پایان
ستون: کادر = "2px solid #c2410c" پایان
پایان
پایان |
چیدمان جدولtable layout table-layout | پهنای ستون‌ها چگونه به دست بیاید. auto (پیش‌فرض) همه‌ی محتوا را اندازه می‌گیرد و یک خانه‌ی بلند می‌تواند ستونش را پهن کند. fixed پهنا را فقط از پهنای جدول و سطر اول می‌گیرد، که سریع‌تر است و جدول را در اندازه‌ای که داده‌اید نگه می‌دارد. [auto, fixed] | جدول: چیدمان جدول = "ثابت" عرض = 200
ردیف:
ستون: کادر = "1px solid #64748b" محتوا = "واژه‌ای بسیار بلند در خانه‌ای باریک" پایان
ستون: کادر = "1px solid #64748b" محتوا = "کوتاه" پایان
پایان
پایان |
پیمایش چسبنده و نشانگرهای پیمایش
سه تای اول همان‌طور که بالا گفته شد روی ظرف و فرزندهایش می‌نشینند. دو تای آخر نقطه‌ها و پیوندهای پررنگ‌شونده را می‌سازند که پیمایش را دنبال می‌کنند.
| ویژگی | کار آن و مقدارهای قابل قبول | نمونه |
|---|---|---|
نوع چسبیدن پیمایشscroll snap type scroll-snap-type | یک ظرف پیمایش را چسبنده می‌کند. محور را بدهید (x، y، block، inline یا both) و میزان سخت‌گیری را: mandatory همیشه روی یک نقطه‌ی چسبیدن می‌ایستد و proximity فقط وقتی نزدیک یکی تمام شود. none چسبیدن را خاموش می‌کند. فرزندها نقطه‌ها را با scroll-snap-align انتخاب می‌کنند. [CSS-wide keywords only] | جعبه: نوع چسبیدن پیمایش = "y mandatory" سرریز عمودی = auto ارتفاع = 80
جعبه: ارتفاع = 80 تراز چسبیدن پیمایش = "start" پس زمینه = "#99f6e4" محتوا = "نخست" پایان
جعبه: ارتفاع = 80 تراز چسبیدن پیمایش = "start" پس زمینه = "#bae6fd" محتوا = "دوم" پایان
پایان |
تراز چسبیدن پیمایشscroll snap align scroll-snap-align | کدام بخش فرزند با ناحیه‌ی چسبیدن ظرفش هم‌تراز شود: start، center یا end، یا none برای بدون نقطه‌ی چسبیدن. دو مقدار جهت بلوکی و خطی را جدا تنظیم می‌کنند. فقط درون ظرفی کار می‌کند که scroll-snap-type دارد. [none, start, end, center; up to 2 values] | جعبه: نوع چسبیدن پیمایش = "x mandatory" سرریز افقی = auto نمایش = flex عرض = 220
جعبه: فلکس = "0 0 120" تراز چسبیدن پیمایش = "وسط" پس زمینه = "#fde68a" محتوا = "وسط" پایان
جعبه: فلکس = "0 0 120" تراز چسبیدن پیمایش = "وسط" پس زمینه = "#fecaca" محتوا = "او هم وسط" پایان
پایان |
توقف چسبیدن پیمایشscroll snap stop scroll-snap-stop | پیمایش تند بتواند از این نقطه‌ی چسبیدن بگذرد یا نه. normal اجازه می‌دهد بگذرد و always هر بار روی این فرزند می‌ایستد، که برای اسلایدشو و انتخابگرها خوب است. [normal, always] | جعبه: نوع چسبیدن پیمایش = "x mandatory" سرریز افقی = auto نمایش = flex عرض = 200
جعبه: فلکس = "0 0 100%" تراز چسبیدن پیمایش = "start" توقف چسبیدن پیمایش = "همیشه" محتوا = "یک" پایان
جعبه: فلکس = "0 0 100%" تراز چسبیدن پیمایش = "start" توقف چسبیدن پیمایش = "همیشه" محتوا = "دو" پایان
پایان |
گروه نشانگر پیمایشscroll marker group scroll-marker-group | فقط Chromium. روی یک ظرف پیمایش، مرورگر را وادار می‌کند گروهی از نشانگرهای کوچک و کلیک‌پذیر بسازد، برای هر فرزندی که ::scroll-marker دارد یکی. before یا after می‌گوید گروه کجای ظرف بنشیند و none آن را خاموش می‌کند. گروه را با ::scroll-marker-group در CSS خام آرایش کنید. [none / before / after] | جعبه: گروه نشانگر پیمایش = "پس" سرریز افقی = auto نمایش = flex نوع چسبیدن پیمایش = "x mandatory" عرض = 200
جعبه: فلکس = "0 0 100%" تراز چسبیدن پیمایش = "start" محتوا = "برگه‌ی یک" پایان
جعبه: فلکس = "0 0 100%" تراز چسبیدن پیمایش = "start" محتوا = "برگه‌ی دو" پایان
پایان |
گروه هدف پیمایشscroll target group scroll-target-group | فقط Chromium. auto عنصری را که پیوند دارد به گروهی از مقصدهای پیمایش بدل می‌کند: هر پیوندی درون آن که به جایی در همان صفحه برود یک نشانگر پیمایش حساب می‌شود و پیوندی که مقصدش در دید است با :target-current جور می‌شود، پس می‌توانید آن را پررنگ کنید. none (پیش‌فرض) کاری نمی‌کند. برای فهرست مطلب‌هایی که با پیمایش حرکت می‌کنند. [auto / none] | فهرست: گروه هدف پیمایش = "خودکار"
مورد: پیوند: نشانی = "#intro" محتوا = "درآمد" پایان پایان
مورد: پیوند: نشانی = "#usage" محتوا = "کاربرد" پایان پایان
پایان |
فضای پیمایش
روی فرزند گذاشته می‌شود. سمت‌ها فیزیکی‌اند (top، right، bottom، left) یا منطقی (block و inline، با start و end).
| ویژگی | کار آن و مقدارهای قابل قبول | نمونه |
|---|---|---|
فضا پیمایشscroll margin scroll-margin | فضای اضافه دور فرزند که جزو ناحیه‌ی چسبیدنش حساب می‌شود، تا چسبیدن یا پریدن به آن کمی زودتر بایستد. یک تا چهار اندازه، مثل margin. آن را روی فرزند بگذارید، نه روی ظرف. [length; up to 4 values] | جعبه: تراز چسبیدن پیمایش = "start" فضا پیمایش = 16 پس زمینه = "#ddd6fe" فاصله = 12 محتوا = "۱۶ پیکسل زودتر می‌ایستد" پایان |
فضا پیمایش بالاscroll margin top scroll-margin-top | فاصله‌ی چسبیدن در لبه‌ی بالای فرزند. یک اندازه. کاربرد رایج آن این است که وقتی صفحه به یک سرتیتر پیوند‌شده می‌پرد، سرتیتر زیر سرصفحه‌ی ثابت نرود. [length] | سرتیتر: اندازه = 2 شناسه = "prices" فضا پیمایش بالا = 72 محتوا = "قیمت‌ها" پایان |
فضا پیمایش راستscroll margin right scroll-margin-right | فاصله‌ی چسبیدن در لبه‌ی راست فرزند، هر جهت نوشتاری که باشد. یک اندازه. [length] | جعبه: تراز چسبیدن پیمایش = "end" فضا پیمایش راست = 24 پس زمینه = "#fecdd3" فاصله = 12 محتوا = "۲۴ پیکسل از راست" پایان |
فضا پیمایش پایینscroll margin bottom scroll-margin-bottom | فاصله‌ی چسبیدن در لبه‌ی پایین فرزند. یک اندازه. [length] | جعبه: تراز چسبیدن پیمایش = "end" فضا پیمایش پایین = 10 پس زمینه = "#e9d5ff" فاصله = 10 محتوا = "فاصله‌ی پایین ۱۰" پایان |
فضا پیمایش چپscroll margin left scroll-margin-left | فاصله‌ی چسبیدن در لبه‌ی چپ فرزند، هر جهت نوشتاری که باشد. یک اندازه. [length] | جعبه: تراز چسبیدن پیمایش = "start" فضا پیمایش چپ = 24 پس زمینه = "#bfdbfe" فاصله = 12 محتوا = "۲۴ پیکسل از چپ" پایان |
فضا پیمایش بلوکیscroll margin block scroll-margin-block | فاصله‌ی چسبیدن در جهت بلوکی، آغاز و انتها با هم: یک اندازه برای هر دو سو یا دو اندازه، اول آغاز و بعد انتها. در متن انگلیسی جهت بلوکی همان بالا و پایین است. [length; up to 2 values] | جعبه: تراز چسبیدن پیمایش = "start" فضا پیمایش بلوکی = "8 24" پس زمینه = "#bbf7d0" فاصله = 12 محتوا = "فضا از بالا و پایین" پایان |
فضا پیمایش بلوکی ابتداscroll margin block start scroll-margin-block-start | فاصله‌ی چسبیدن در آغاز جهت بلوکی، که در متن افقی انگلیسی همان بالاست. برای سرتیتری که نباید زیر یک نوار چسبان پنهان شود به کار می‌آید. [length] | سرتیتر: اندازه = 3 فضا پیمایش بلوکی ابتدا = 64 محتوا = "عنوان بخش" پایان |
فضا پیمایش بلوکی انتهاscroll margin block end scroll-margin-block-end | فاصله‌ی چسبیدن در انتهای جهت بلوکی، که در متن افقی انگلیسی همان پایین است. [length] | جعبه: تراز چسبیدن پیمایش = "end" فضا پیمایش بلوکی انتها = 20 پس زمینه = "#fed7aa" فاصله = 12 محتوا = "۲۰ پیکسل در انتها" پایان |
فضا پیمایش خطیscroll margin inline scroll-margin-inline | فاصله‌ی چسبیدن در جهت خطی، آغاز و انتها با هم: یک اندازه برای هر دو یا دو اندازه، اول آغاز و بعد انتها. در متن انگلیسی جهت خطی همان چپ و راست است. [length; up to 2 values] | جعبه: تراز چسبیدن پیمایش = center فضا پیمایش خطی = "12 12" پس زمینه = "#a5f3fc" فاصله = 12 محتوا = "فضا از دو پهلو" پایان |
فضا پیمایش ابتداscroll margin inline start scroll-margin-inline-start | فاصله‌ی چسبیدن در آغاز جهت خطی: در متن چپ‌به‌راست سمت چپ و در متن راست‌به‌چپ سمت راست. [length] | جعبه: تراز چسبیدن پیمایش = "start" فضا پیمایش ابتدا = 30 پس زمینه = "#fef08a" فاصله = 12 محتوا = "فضا در آغاز" پایان |
فضا پیمایش انتهاscroll margin inline end scroll-margin-inline-end | فاصله‌ی چسبیدن در انتهای جهت خطی: در متن چپ‌به‌راست سمت راست و در متن راست‌به‌چپ سمت چپ. [length] | جعبه: تراز چسبیدن پیمایش = "end" فضا پیمایش انتها = 30 پس زمینه = "#fbcfe8" فاصله = 12 محتوا = "فضا در انتها" پایان |
فاصله‌ی پیمایش
روی ظرف پیمایش گذاشته می‌شود، با همان سمت‌های فضای پیمایش. درصدها به اندازه‌ی ظرف برمی‌گردند.
| ویژگی | کار آن و مقدارهای قابل قبول | نمونه |
|---|---|---|
فاصله پیمایشscroll padding scroll-padding | فضایی که هنگام چسبیدن یا پریدن به یک فرزند در لبه‌های ظرف پیمایش خالی می‌ماند، تا فرزند به لبه نچسبد یا زیر نوار ثابت نرود. یک تا چهار اندازه یا درصد، مثل padding، یا auto. آن را روی ظرف بگذارید. [length / percentage / auto; up to 4 values] | جعبه: نوع چسبیدن پیمایش = "x mandatory" فاصله پیمایش = "0 24" سرریز افقی = auto نمایش = flex عرض = 200
جعبه: فلکس = "0 0 160" تراز چسبیدن پیمایش = "start" پس زمینه = "#99f6e4" محتوا = "یک" پایان
جعبه: فلکس = "0 0 160" تراز چسبیدن پیمایش = "start" پس زمینه = "#bae6fd" محتوا = "دو" پایان
پایان |
فاصله پیمایش بالاscroll padding top scroll-padding-top | فاصله‌ی ظرف پیمایش در لبه‌ی بالا. آن را برابر بلندی یک سرصفحه‌ی چسبان بگذارید تا پریدن یا چسبیدن مقصد را زیر آن پنهان نکند. اندازه، درصد یا auto. [length / percentage / auto] | سراسری: گزینشگر = "html" فاصله پیمایش بالا = 64 پایان
سرتیتر: اندازه = 2 شناسه = "faq" محتوا = "پرسش‌ها" پایان |
فاصله پیمایش راستscroll padding right scroll-padding-right | فاصله‌ی ظرف پیمایش در لبه‌ی راست، هر جهت نوشتاری که باشد. اندازه، درصد یا auto. [length / percentage / auto] | جعبه: نوع چسبیدن پیمایش = "x mandatory" فاصله پیمایش راست = 40 سرریز افقی = auto نمایش = flex عرض = 200
جعبه: فلکس = "0 0 150" تراز چسبیدن پیمایش = "end" پس زمینه = "#fecdd3" محتوا = "فاصله‌ی راست ۴۰" پایان
پایان |
فاصله پیمایش پایینscroll padding bottom scroll-padding-bottom | فاصله‌ی ظرف پیمایش در لبه‌ی پایین. اندازه، درصد یا auto. [length / percentage / auto] | جعبه: فاصله پیمایش پایین = "20%" سرریز عمودی = auto ارتفاع = 100 کادر = "1px solid #94a3b8"
پاراگراف: محتوا = "آخرین پاراگراف بالای لبه‌ی پایین می‌ایستد." پایان
پایان |
فاصله پیمایش چپscroll padding left scroll-padding-left | فاصله‌ی ظرف پیمایش در لبه‌ی چپ، هر جهت نوشتاری که باشد. اندازه، درصد یا auto. [length / percentage / auto] | جعبه: نوع چسبیدن پیمایش = "x mandatory" فاصله پیمایش چپ = "10%" سرریز افقی = auto نمایش = flex عرض = 200
جعبه: فلکس = "0 0 150" تراز چسبیدن پیمایش = "start" پس زمینه = "#bfdbfe" محتوا = "فاصله‌ی چپ ۱۰ درصد" پایان
پایان |
فاصله پیمایش بلوکیscroll padding block scroll-padding-block | فاصله‌ی ظرف پیمایش در جهت بلوکی، آغاز و انتها با هم: یک مقدار برای هر دو یا دو مقدار، اول آغاز و بعد انتها. اندازه، درصد یا auto. [length / percentage / auto; up to 2 values] | جعبه: نوع چسبیدن پیمایش = "y mandatory" فاصله پیمایش بلوکی = "10 20" سرریز عمودی = auto ارتفاع = 100
جعبه: ارتفاع = 90 تراز چسبیدن پیمایش = "start" پس زمینه = "#fde68a" محتوا = "سطر یک" پایان
جعبه: ارتفاع = 90 تراز چسبیدن پیمایش = "start" پس زمینه = "#fecaca" محتوا = "سطر دو" پایان
پایان |
فاصله پیمایش بلوکی ابتداscroll padding block start scroll-padding-block-start | فاصله‌ی ظرف پیمایش در آغاز جهت بلوکی، که در متن افقی انگلیسی همان بالاست. اندازه، درصد یا auto. [length / percentage / auto] | جعبه: فاصله پیمایش بلوکی ابتدا = 48 سرریز عمودی = auto ارتفاع = 120
سرتیتر: اندازه = 3 شناسه = "part" محتوا = "یک بخش" پایان
پایان |
فاصله پیمایش بلوکی انتهاscroll padding block end scroll-padding-block-end | فاصله‌ی ظرف پیمایش در انتهای جهت بلوکی، که در متن افقی انگلیسی همان پایین است. اندازه، درصد یا auto. [length / percentage / auto] | جعبه: نوع چسبیدن پیمایش = "y proximity" فاصله پیمایش بلوکی انتها = 40 سرریز عمودی = auto ارتفاع = 100
جعبه: ارتفاع = 90 تراز چسبیدن پیمایش = "end" پس زمینه = "#bbf7d0" محتوا = "۴۰ پیکسل پایین را خالی نگه می‌دارد" پایان
پایان |
فاصله پیمایش خطیscroll padding inline scroll-padding-inline | فاصله‌ی ظرف پیمایش در جهت خطی، آغاز و انتها با هم: یک مقدار برای هر دو یا دو مقدار، اول آغاز و بعد انتها. اندازه، درصد یا auto. [length / percentage / auto; up to 2 values] | جعبه: نوع چسبیدن پیمایش = "x mandatory" فاصله پیمایش خطی = "16 32" سرریز افقی = auto نمایش = flex عرض = 200
جعبه: فلکس = "0 0 150" تراز چسبیدن پیمایش = center پس زمینه = "#a5f3fc" محتوا = "کارت" پایان
پایان |
فاصله پیمایش ابتداscroll padding inline start scroll-padding-inline-start | فاصله‌ی ظرف پیمایش در آغاز جهت خطی: در متن چپ‌به‌راست سمت چپ. اندازه، درصد یا auto. [length / percentage / auto] | جعبه: نوع چسبیدن پیمایش = "x mandatory" فاصله پیمایش ابتدا = 30 سرریز افقی = auto نمایش = flex عرض = 200
جعبه: فلکس = "0 0 150" تراز چسبیدن پیمایش = "start" پس زمینه = "#fef08a" محتوا = "کارت اول" پایان
پایان |
فاصله پیمایش انتهاscroll padding inline end scroll-padding-inline-end | فاصله‌ی ظرف پیمایش در انتهای جهت خطی: در متن چپ‌به‌راست سمت راست. اندازه، درصد یا auto. [length / percentage / auto] | جعبه: نوع چسبیدن پیمایش = "x proximity" فاصله پیمایش انتها = 30 سرریز افقی = auto نمایش = flex عرض = 200
جعبه: فلکس = "0 0 150" تراز چسبیدن پیمایش = "end" پس زمینه = "#fbcfe8" محتوا = "کارت آخر" پایان
پایان |
جایگذاری لنگری
| ویژگی | کار آن و مقدارهای قابل قبول | نمونه |
|---|---|---|
نام لنگرanchor name anchor-name | ویژگی تازه‌ای است: مرورگرهای Chromium دارندش و بقیه در حال رسیدن‌اند. به یک عنصر نامی می‌دهد که عنصرهای دیگر می‌توانند خود را نسبت به آن جای بدهند. نام با دو خط تیره شروع می‌شود، مثل --menu. فهرستی از نام‌ها چند نام به عنصر می‌دهد و none آن‌ها را برمی‌دارد. [dashed ident list / none] | دکمه: نام لنگر = "--menu" محتوا = "فهرست" پایان |
دامنه لنگرanchor scope anchor-scope | ویژگی تازه‌ای است: مرورگرهای Chromium دارندش و بقیه در حال رسیدن‌اند. جایی را که نام‌های لنگر دیده می‌شوند محدود می‌کند. با چند نام، فقط زیردرخت همین عنصر آن لنگرها را می‌بیند؛ با all هر نامی که درون تعریف شود همان‌جا می‌ماند. به این ترتیب چند نسخه از یک مؤلفه می‌توانند هر کدام همان نام را بی‌آنکه قاطی شوند به کار ببرند. [dashed ident list / all] | جعبه: دامنه لنگر = "همه"
دکمه: نام لنگر = "--tip" محتوا = "راهنما" پایان
پایان |
لنگر جایگاهposition anchor position-anchor | ویژگی تازه‌ای است: مرورگرهای Chromium دارندش و بقیه در حال رسیدن‌اند. مشخص می‌کند عنصری با جایگاه مطلق یا ثابت نسبت به کدام نام لنگر جا بگیرد. یک نام با دو خط تیره مثل --menu بدهید، یا auto تا لنگری که مرورگر به آن پیوند داده به کار رود، مثل دکمه‌ی یک پنجره‌ی شناور. [dashed ident / auto] | جعبه: موقعیت = absolute لنگر جایگاه = "--menu" ناحیه جایگاه = bottom پس زمینه = "#0f172a" رنگ = white فاصله = 6 محتوا = "زیر دکمه‌ی فهرست" پایان |
ناحیه جایگاهposition area position-area | ویژگی تازه‌ای است: مرورگرهای Chromium دارندش و بقیه در حال رسیدن‌اند. عنصر لنگردار را در یکی از خانه‌های یک شبکه‌ی ۳ در ۳ دور لنگرش جا می‌دهد. از top، bottom، left، right و center یا دوتایی‌شان مثل top right استفاده کنید. واژه‌ای با span- دو خانه را می‌گیرد، مثلاً top span-right. [up to 2 keywords (top, span-right, center, ...)] | جعبه: موقعیت = absolute لنگر جایگاه = "--card" ناحیه جایگاه = "top span-right" پس زمینه = "#0f766e" رنگ = white فاصله = 6 محتوا = "بالا و کشیده به راست" پایان |
جایگزین های جایگاهposition try fallbacks position-try-fallbacks | ویژگی تازه‌ای است: مرورگرهای Chromium دارندش و بقیه در حال رسیدن‌اند. فهرستی جداشده با ویرگول از جایگاه‌های دیگر برای وقتی که عنصر از صفحه بیرون می‌زند. از ترفندهای flip-block، flip-inline و flip-start، از یک مقدار position-area یا از نام یک قاعده‌ی @position-try استفاده کنید. نخستین گزینه‌ای که جا شود به کار می‌رود. [comma list of tactics and/or position-area values] | جعبه: موقعیت = absolute لنگر جایگاه = "--tip" ناحیه جایگاه = top جایگزین های جایگاه = "flip-block, bottom" محتوا = "اگر جا نباشد به پایین می‌رود" پایان |
ترتیب تلاش جایگاهposition try order position-try-order | ویژگی تازه‌ای است: مرورگرهای Chromium دارندش و بقیه در حال رسیدن‌اند. تعیین می‌کند گزینه‌های position-try-fallbacks چگونه رتبه‌بندی شوند. normal به همان ترتیبی که نوشته‌اید امتحانشان می‌کند. most-width، most-height، most-block-size و most-inline-size آن را که در آن جهت بیشترین جا را می‌دهد برمی‌گزینند. [normal / most-width / most-height / most-block-size / most-inline-size] | جعبه: موقعیت = absolute لنگر جایگاه = "--tip" ناحیه جایگاه = left ترتیب تلاش جایگاه = "بیشترین‌عرض" جایگزین های جایگاه = "right, top" محتوا = "پهن‌ترین سو را برمی‌گزیند" پایان |
تلاش جایگاهposition try position-try | ویژگی تازه‌ای است: مرورگرهای Chromium دارندش و بقیه در حال رسیدن‌اند. میان‌بر برای position-try-order و position-try-fallbacks. واژه‌ی ترتیب، اگر باشد، اول می‌آید و بعد فهرست گزینه‌ها. [position-try-order then position-try-fallbacks, shorthand] | جعبه: موقعیت = absolute لنگر جایگاه = "--tip" ناحیه جایگاه = top تلاش جایگاه = "most-height flip-block" محتوا = "نخست سوی بلندتر را امتحان می‌کند" پایان |
پیدایی جایگاهposition visibility position-visibility | ویژگی تازه‌ای است: مرورگرهای Chromium دارندش و بقیه در حال رسیدن‌اند. چه وقت عنصر لنگردار پنهان شود. always هرگز پنهانش نمی‌کند، anchors-visible وقتی لنگرش از دید بیرون برود پنهانش می‌کند و no-overflow وقتی از بلوک حاویش بیرون بزند. [up to 2 of always, anchors-visible, no-overflow] | جعبه: موقعیت = absolute لنگر جایگاه = "--note" ناحیه جایگاه = right پیدایی جایگاه = "لنگر‌پیدا" محتوا = "وقتی لنگر از دید برود پنهان می‌شود" پایان |
پرکردن و خط دور در SVG
| ویژگی | کار آن و مقدارهای قابل قبول | نمونه |
|---|---|---|
پرکردنfill fill | رنگی که درون یک شکل یا متن SVG را پر می‌کند. یک رنگ، none برای بی‌رنگ، یا url(#id) برای به‌کاربردن یک شیب رنگ یا الگو. به ارث می‌رسد، پس گذاشتنش روی عنصر svg همه‌ی شکل‌های درون آن را رنگ می‌کند. [color / none] | اس‌وی‌جی: جعبه دید = "0 0 40 40" عرض = 80 ارتفاع = 80 پرکردن = "#f97316"
محتوا = "<circle cx='20' cy='20' r='16'/>"
پایان |
شفافیت پرکردنfill opacity fill-opacity | رنگ پرشدگی یک شکل SVG چقدر شفاف باشد، از ۰ (نامرئی) تا ۱ (توپر) یا به صورت درصد. خط دور را تغییر نمی‌دهد. [number / percentage] | اس‌وی‌جی: جعبه دید = "0 0 40 40" عرض = 80 ارتفاع = 80 پرکردن = "#2563eb" شفافیت پرکردن = 0.4 خط دور = "#1e3a8a" ضخامت خط دور = 2
محتوا = "<rect x='6' y='6' width='28' height='28' rx='4'/>"
پایان |
قاعده پرکردنfill rule fill-rule | تعیین می‌کند در شکلی که خودش را قطع می‌کند کدام نقطه‌ها «درون» حساب شوند. nonzero (پیش‌فرض) هرچه را مسیر دور آن می‌پیچد پر می‌کند. evenodd هر جا مسیر خودش را قطع کند حفره می‌گذارد، مثل میانه‌ی یک ستاره. [nonzero, evenodd] | اس‌وی‌جی: جعبه دید = "0 0 40 40" عرض = 80 ارتفاع = 80 پرکردن = "#14b8a6" قاعده پرکردن = "زوج‌وفرد"
محتوا = "<polygon points='20,3 32,37 3,15 37,15 8,37'/>"
پایان |
قاعده برشclip rule clip-rule | همان انتخاب fill-rule، اما برای شکلی که درون یک clipPath به کار می‌رود: nonzero یا evenodd تعیین می‌کند کدام بخش‌های شکل برش اجازه می‌دهند تصویر دیده شود. [nonzero, evenodd] | اس‌وی‌جی: جعبه دید = "0 0 40 40" عرض = 80 ارتفاع = 80 قاعده برش = "زوج‌وفرد"
محتوا = "<defs><clipPath id='c'><polygon points='20,3 32,37 3,15 37,15 8,37' style='clip-rule:inherit'/></clipPath></defs><rect width='40' height='40' fill='#7c3aed' clip-path='url(#c)'/>"
پایان |
خط دورstroke stroke | رنگ خطی که لبه‌ی یک شکل یا متن SVG را می‌کشد. یک رنگ، none برای بدون خط، یا url(#id) برای شیب رنگ. بدون خط دور فقط پرشدگی دیده می‌شود. به ارث می‌رسد. [color / none] | اس‌وی‌جی: جعبه دید = "0 0 40 40" عرض = 80 ارتفاع = 80 پرکردن = none خط دور = "#dc2626" ضخامت خط دور = 3
محتوا = "<circle cx='20' cy='20' r='14'/>"
پایان |
ضخامت خط دورstroke width stroke-width | ضخامت خط دور یک شکل SVG، به صورت اندازه یا درصدی از اندازه‌ی نقاشی. پیش‌فرض ۱ است. خط روی لبه وسط‌چین می‌شود، پس نیمی از آن درون شکل می‌افتد. [length / percentage] | اس‌وی‌جی: جعبه دید = "0 0 40 40" عرض = 80 ارتفاع = 80 پرکردن = none خط دور = "#0f766e" ضخامت خط دور = 6
محتوا = "<rect x='8' y='8' width='24' height='24'/>"
پایان |
شفافیت خط دورstroke opacity stroke-opacity | خط دور یک شکل SVG چقدر شفاف باشد، از ۰ تا ۱ یا به صورت درصد. پرشدگی را تغییر نمی‌دهد. [number / percentage] | اس‌وی‌جی: جعبه دید = "0 0 40 40" عرض = 80 ارتفاع = 80 پرکردن = "#fde68a" خط دور = "#7c2d12" ضخامت خط دور = 6 شفافیت خط دور = 0.35
محتوا = "<circle cx='20' cy='20' r='13'/>"
پایان |
الگوی خط‌چین خط دورstroke dasharray stroke-dasharray | خط دور را به خط‌چین تبدیل می‌کند. فهرستی از اندازه‌ها که به‌نوبت یک خط و یک فاصله‌اند، مثلاً 6 3. تعداد فرد مقدار برای زوج‌شدن تکرار می‌شود. none خط پیوسته می‌کشد. [length / percentage / number; up to 99 values; comma list] | اس‌وی‌جی: جعبه دید = "0 0 40 40" عرض = 80 ارتفاع = 80 پرکردن = none خط دور = "#2563eb" ضخامت خط دور = 3 الگوی خط‌چین خط دور = "6 3"
محتوا = "<line x1='4' y1='20' x2='36' y2='20'/>"
پایان |
فاصله خط‌چینstroke dashoffset stroke-dashoffset | الگوی خط‌چین از کجا شروع شود: اندازه یا درصدی که الگو را در امتداد خط جابه‌جا می‌کند. تغییر آن در گذر زمان انیمیشن‌های مورچه‌های در حرکت و خط‌کشیدن را می‌سازد. [length / percentage] | اس‌وی‌جی: جعبه دید = "0 0 40 40" عرض = 80 ارتفاع = 80 پرکردن = none خط دور = "#c2410c" ضخامت خط دور = 3 الگوی خط‌چین خط دور = "8 4" فاصله خط‌چین = 6
محتوا = "<line x1='4' y1='20' x2='36' y2='20'/>"
پایان |
سر خط دورstroke linecap stroke-linecap | شکل دو سر یک خط باز: butt (تخت، پیش‌فرض)، round (نیم‌دایره) یا square (تخت اما به اندازه‌ی نیمی از ضخامت بلندتر). [butt, round, square] | اس‌وی‌جی: جعبه دید = "0 0 40 40" عرض = 80 ارتفاع = 80 پرکردن = none خط دور = "#0f766e" ضخامت خط دور = 8 سر خط دور = "گرد"
محتوا = "<line x1='10' y1='20' x2='30' y2='20'/>"
پایان |
اتصال خط دورstroke linejoin stroke-linejoin | شکل گوشه‌ای که دو پاره‌ی یک خط در آن به هم می‌رسند: miter (نوک تیز، پیش‌فرض)، round (گرد) یا bevel (صاف بریده). [miter, round, bevel] | اس‌وی‌جی: جعبه دید = "0 0 40 40" عرض = 80 ارتفاع = 80 پرکردن = none خط دور = "#7c3aed" ضخامت خط دور = 8 اتصال خط دور = "گرد"
محتوا = "<polyline points='6,32 20,8 34,32'/>"
پایان |
حد گوشه خط دورstroke miterlimit stroke-miterlimit | مشخص می‌کند نوک یک گوشه‌ی تیز چقدر می‌تواند دراز شود. اگر نوک از این عدد ضرب در ضخامت خط درازتر شود، گوشه مثل bevel صاف بریده می‌شود. عددی ۱ یا بیشتر؛ پیش‌فرض ۴ است. [number] | اس‌وی‌جی: جعبه دید = "0 0 40 40" عرض = 80 ارتفاع = 80 پرکردن = none خط دور = "#be123c" ضخامت خط دور = 6 اتصال خط دور = miter حد گوشه خط دور = 1.5
محتوا = "<polyline points='6,34 20,6 34,34'/>"
پایان |
ترتیب نقاشیpaint order paint-order | ترتیبی که پرشدگی، خط دور و نشانگرهای یک شکل یا متن SVG کشیده می‌شوند. normal یعنی پرشدگی، بعد خط دور، بعد نشانگرها. stroke fill اول خط دور را می‌کشد، پس پرشدگی نیمه‌ی درونی آن را می‌پوشاند و متن بدون نازک‌شدن قابدار دیده می‌شود. [up to 3 values] | اس‌وی‌جی: جعبه دید = "0 0 40 40" عرض = 80 ارتفاع = 80 اندازه قلم = 28 وزن قلم = bold پرکردن = "#fde68a" خط دور = "#0f172a" ضخامت خط دور = 5 ترتیب نقاشی = "stroke fill"
محتوا = "<text x='4' y='30'>Ab</text>"
پایان |
متن و خط پایه در SVG
| ویژگی | کار آن و مقدارهای قابل قبول | نمونه |
|---|---|---|
لنگر متنtext anchor text-anchor | کدام بخش از یک متن SVG روی نقطه‌ی x خودش بنشیند: start (متن از آنجا شروع شود)، middle (متن بر آن وسط‌چین شود) یا end (متن آنجا تمام شود). به ارث می‌رسد. [start / middle / end] | اس‌وی‌جی: جعبه دید = "0 0 40 40" عرض = 80 ارتفاع = 80 اندازه قلم = 10 لنگر متن = "میانه"
محتوا = "<text x='20' y='24'>Mid</text>"
پایان |
خط پایه غالبdominant baseline dominant-baseline | متن SVG کدام خط پایه را برای هم‌تراز کردن حرف‌هایش با نقطه‌ی y به کار ببرد. auto و alphabetic ته حرف‌ها را می‌گیرند، middle و central میانه را و hanging خط بالای خط‌هایی مثل دوانگری را. [a baseline keyword (middle, central, alphabetic, ...)] | سراسری: گزینشگر = "text" خط پایه غالب = "میانه" پایان
اس‌وی‌جی: جعبه دید = "0 0 60 30" عرض = 120 ارتفاع = 60 اندازه قلم = 12
محتوا = "<line x1='0' y1='15' x2='60' y2='15' stroke='#ef4444' stroke-width='0.5'/><text x='4' y='15'>Mid</text>"
پایان |
خط پایه ترازalignment baseline alignment-baseline | یک تکه محتوای درون‌خطی، مثل tspan، خط پایه‌ی خودش را چگونه با خط پایه‌ی والدش هم‌تراز کند. baseline پیش‌فرض است؛ middle، central، alphabetic و text-top مورد دیگری را برمی‌گزینند. [a baseline keyword (middle, central, alphabetic, ...)] | سراسری: گزینشگر = "tspan" خط پایه تراز = "میانه" اندازه قلم = 8 پایان
اس‌وی‌جی: جعبه دید = "0 0 80 30" عرض = 160 ارتفاع = 60 اندازه قلم = 16
محتوا = "<text x='4' y='20'>Big<tspan>small</tspan></text>"
پایان |
جابه‌جایی خط پایهbaseline shift baseline-shift | متن را نسبت به خط پایه‌اش بالا یا پایین می‌برد. یک اندازه یا درصد (مثبت یعنی بالا)، یا واژه‌های sub، super، top، center و bottom. متن SVG توان و اندیس را با همین می‌سازد. [length / percentage / sub / super / top / center / bottom] | سراسری: گزینشگر = "tspan" جابه‌جایی خط پایه = "بالانویس" اندازه قلم = 9 پایان
اس‌وی‌جی: جعبه دید = "0 0 60 30" عرض = 120 ارتفاع = 60 اندازه قلم = 16
محتوا = "<text x='6' y='22'>m<tspan>2</tspan></text>"
پایان |
منبع خط پایهbaseline source baseline-source | همه‌ی مرورگرها ندارندش (Chromium دارد). برای یک بلوک درون‌خطی با چند سطر می‌گوید خط پایه‌ی کدام سطر با متن اطراف هم‌تراز شود: first، last یا auto که به نوع جعبه بستگی دارد. [auto / first / last] | پاراگراف:
محتوا = "متن پیش از آن"
تکه: نمایش = inline-block منبع خط پایه = "آخر" کادر = "1px solid #64748b" محتوا = "سطر اول و سطر دوم" بیشینه عرض = 80 پایان
پایان |
شکل و راهنمای نقاشی در SVG
| ویژگی | کار آن و مقدارهای قابل قبول | نمونه |
|---|---|---|
مرکز xcx cx | جای x مرکز یک circle یا ellipse در SVG، به صورت اندازه یا درصدی از پهنا. در مرورگرهای امروزی یک ویژگی CSS است، پس یک قاعده می‌تواند شکل را بی‌دست‌زدن به نشانه‌گذاری جابه‌جا کند. [length / percentage] | سراسری: گزینشگر = "#dot" مرکز x = 30 پایان
اس‌وی‌جی: جعبه دید = "0 0 60 40" عرض = 120 ارتفاع = 80
محتوا = "<circle id='dot' cy='20' r='12' fill='#14b8a6'/>"
پایان |
مرکز ycy cy | جای y مرکز یک circle یا ellipse در SVG، به صورت اندازه یا درصدی از ارتفاع. [length / percentage] | سراسری: گزینشگر = "#dot" مرکز y = "25%" پایان
اس‌وی‌جی: جعبه دید = "0 0 60 40" عرض = 120 ارتفاع = 80
محتوا = "<circle id='dot' cx='30' r='9' fill='#f97316'/>"
پایان |
شعاعr r | شعاع یک circle در SVG، به صورت اندازه یا درصد. درصد به قطر ناحیه‌ی نقاشی مربوط است. [length / percentage] | سراسری: گزینشگر = "#dot" شعاع = 15 پایان
اس‌وی‌جی: جعبه دید = "0 0 60 40" عرض = 120 ارتفاع = 80
محتوا = "<circle id='dot' cx='30' cy='20' fill='#6366f1'/>"
پایان |
شعاع xrx rx | شعاع افقی یک ellipse در SVG، یا گردی افقی گوشه‌های یک rect. اندازه، درصد یا auto. [length / percentage / auto] | سراسری: گزینشگر = "#r" شعاع x = 12 پایان
اس‌وی‌جی: جعبه دید = "0 0 60 40" عرض = 120 ارتفاع = 80
محتوا = "<rect id='r' x='8' y='8' width='44' height='24' fill='#ec4899'/>"
پایان |
شعاع yry ry | شعاع عمودی یک ellipse در SVG، یا گردی عمودی گوشه‌های یک rect. اندازه، درصد یا auto. [length / percentage / auto] | سراسری: گزینشگر = "#e" شعاع x = 24 شعاع y = 10 پایان
اس‌وی‌جی: جعبه دید = "0 0 60 40" عرض = 120 ارتفاع = 80
محتوا = "<ellipse id='e' cx='30' cy='20' fill='#84cc16'/>"
پایان |
مختصات xx x | جای x گوشه‌ی بالا و چپ یک rect، image، svg تودرتو یا foreignObject در SVG، به صورت اندازه یا درصد. [length / percentage] | سراسری: گزینشگر = "#r" مختصات x = 20 پایان
اس‌وی‌جی: جعبه دید = "0 0 60 40" عرض = 120 ارتفاع = 80
محتوا = "<rect id='r' y='10' width='24' height='20' fill='#f43f5e'/>"
پایان |
مختصات yy y | جای y گوشه‌ی بالا و چپ یک rect، image، svg تودرتو یا foreignObject در SVG، به صورت اندازه یا درصد. [length / percentage] | سراسری: گزینشگر = "#r" مختصات y = 15 پایان
اس‌وی‌جی: جعبه دید = "0 0 60 40" عرض = 120 ارتفاع = 80
محتوا = "<rect id='r' x='18' width='24' height='20' fill='#0ea5e9'/>"
پایان |
داده مسیرd d | طرح کلی یک path در SVG که در CSS نوشته می‌شود: path("M 10 30 L 30 10 L 50 30")، با همان دستورهای ویژگی d، یا none. چون CSS است می‌شود آن را انیمیت کرد و با رفتن ماوس عوضش کرد. دستور Q را درست بعد از یک عدد ننویسید: مترجم صفحه ممکن است آن جفت را یکای طول q بخواند؛ به جایش C یا L بگذارید. [path() / none] | سراسری: گزینشگر = "#p" داده مسیر = "path('M 5 30 L 20 8 L 35 30 Z')" پایان
اس‌وی‌جی: جعبه دید = "0 0 40 40" عرض = 80 ارتفاع = 80 پرکردن = "#fb923c"
محتوا = "<path id='p'/>"
پایان |
جلوه برداریvector effect vector-effect | نحوه‌ی کشیده‌شدن یک شکل SVG را وقتی مقیاسش عوض می‌شود تغییر می‌دهد. none همه‌چیز را مقیاس می‌دهد. non-scaling-stroke پهنای خط را روی صفحه ثابت نگه می‌دارد در حالی که شکل بزرگ یا کوچک می‌شود. [none / non-scaling-stroke] | سراسری: گزینشگر = "rect" جلوه برداری = "non-scaling-stroke" پایان
اس‌وی‌جی: جعبه دید = "0 0 10 10" عرض = 100 ارتفاع = 100 پرکردن = "#bae6fd" خط دور = "#0369a1" ضخامت خط دور = 2
محتوا = "<rect x='1' y='1' width='8' height='8'/>"
پایان |
پرداخت شکلshape rendering shape-rendering | یک راهنما برای نحوه‌ی کشیدن لبه‌ی شکل‌های SVG. auto پیش‌فرض است، optimizeSpeed هموارسازی را رها می‌کند، crispEdges از تاری خط‌های راست جلوگیری می‌کند و geometricPrecision شکل دقیق را ترجیح می‌دهد. مرورگرها ممکن است بعضی مقدارها را یکسان بگیرند. [auto / optimizeSpeed / crispEdges / geometricPrecision] | اس‌وی‌جی: جعبه دید = "0 0 40 40" عرض = 80 ارتفاع = 80 پرکردن = "#bbf7d0" خط دور = "#166534" پرداخت شکل = "crispEdges"
محتوا = "<rect x='5.5' y='5.5' width='29' height='29'/>"
پایان |
میان‌یابی رنگcolor interpolation color-interpolation | فضای رنگی که SVG برای مواردی مثل شیب رنگ و نقاب در آن رنگ‌ها را درهم می‌آمیزد: sRGB، linearRGB یا auto. پشتیبانی‌اش یکدست نیست، پس نتیجه را در مرورگرهای مورد نظرتان وارسی کنید. [auto / sRGB / linearRGB] | سراسری: گزینشگر = "linearGradient" میان‌یابی رنگ = "linearRGB" پایان
اس‌وی‌جی: جعبه دید = "0 0 40 20" عرض = 120 ارتفاع = 60
محتوا = "<defs><linearGradient id='g'><stop offset='0' stop-color='red'/><stop offset='1' stop-color='blue'/></linearGradient></defs><rect width='40' height='20' fill='url(#g)'/>"
پایان |
شیب رنگ، پالایه و نشانگر
| ویژگی | کار آن و مقدارهای قابل قبول | نمونه |
|---|---|---|
رنگ ایستstop color stop-color | رنگ یک ایست در شیب رنگ SVG، که روی عنصر stop گذاشته می‌شود. هر رنگی. همراه با offset ایست می‌گوید شیب در آن نقطه چه رنگی دارد. [color] | سراسری: گزینشگر = "#s2" رنگ ایست = "#0ea5e9" پایان
اس‌وی‌جی: جعبه دید = "0 0 40 20" عرض = 120 ارتفاع = 60
محتوا = "<defs><linearGradient id='g'><stop offset='0' stop-color='#fde047'/><stop id='s2' offset='1'/></linearGradient></defs><rect width='40' height='20' fill='url(#g)'/>"
پایان |
شفافیت ایستstop opacity stop-opacity | یک ایست شیب رنگ چقدر شفاف باشد، از ۰ تا ۱ یا به صورت درصد. شیب می‌تواند با ایستی با شفافیت ۰ در پایان محو شود. [number / percentage] | سراسری: گزینشگر = "#e" رنگ ایست = "#dc2626" شفافیت ایست = 0 پایان
اس‌وی‌جی: جعبه دید = "0 0 40 20" عرض = 120 ارتفاع = 60
محتوا = "<defs><linearGradient id='g'><stop offset='0' stop-color='#dc2626'/><stop id='e' offset='1'/></linearGradient></defs><rect width='40' height='20' fill='url(#g)'/>"
پایان |
رنگ سیلflood color flood-color | رنگ گام feFlood در یک پالایه، که تمام ناحیه‌ی پالایه را با یک رنگ پر می‌کند. هر رنگی. [color] | سراسری: گزینشگر = "feFlood" رنگ سیل = "#f59e0b" پایان
اس‌وی‌جی: جعبه دید = "0 0 40 40" عرض = 80 ارتفاع = 80
محتوا = "<defs><filter id='f'><feFlood result='c'/><feComposite in='c' in2='SourceGraphic' operator='in'/></filter></defs><circle cx='20' cy='20' r='14' fill='black' filter='url(#f)'/>"
پایان |
شفافیت سیلflood opacity flood-opacity | رنگ گام feFlood چقدر شفاف باشد، از ۰ تا ۱ یا به صورت درصد. [number / percentage] | سراسری: گزینشگر = "feFlood" رنگ سیل = "#7c3aed" شفافیت سیل = 0.4 پایان
اس‌وی‌جی: جعبه دید = "0 0 40 40" عرض = 80 ارتفاع = 80
محتوا = "<defs><filter id='f'><feFlood result='c'/><feComposite in='c' in2='SourceGraphic' operator='in'/></filter></defs><rect x='6' y='6' width='28' height='28' fill='black' filter='url(#f)'/>"
پایان |
رنگ نورپردازیlighting color lighting-color | رنگ نور در گام‌های پالایه‌ی feDiffuseLighting و feSpecularLighting. هر رنگی؛ پیش‌فرض سفید است. [color] | سراسری: گزینشگر = "feDiffuseLighting" رنگ نورپردازی = "#fde68a" پایان
اس‌وی‌جی: جعبه دید = "0 0 40 40" عرض = 80 ارتفاع = 80
محتوا = "<defs><filter id='l'><feDiffuseLighting surfaceScale='3'><feDistantLight azimuth='45' elevation='50'/></feDiffuseLighting></filter></defs><rect width='40' height='40' filter='url(#l)'/>"
پایان |
میان‌یابی رنگ پالایهcolor interpolation filters color-interpolation-filters | فضای رنگی که گام‌های یک پالایه‌ی SVG در آن کار می‌کنند: linearRGB (پیش‌فرض پالایه‌ها)، sRGB یا auto. رفتن به sRGB محو و آمیخته را به آنچه ابزارهای طراحی نشان می‌دهند نزدیک‌تر می‌کند. [auto / sRGB / linearRGB] | سراسری: گزینشگر = "filter" میان‌یابی رنگ پالایه = "sRGB" پایان
اس‌وی‌جی: جعبه دید = "0 0 40 40" عرض = 80 ارتفاع = 80
محتوا = "<defs><filter id='b'><feGaussianBlur stdDeviation='2'/></filter></defs><circle cx='20' cy='20' r='10' fill='#2563eb' filter='url(#b)'/>"
پایان |
نشانگر آغازmarker start marker-start | نشانگری که در نقطه‌ی نخست یک path، line، polyline یا polygon در SVG کشیده می‌شود. url(#id) یک عنصر marker، یا none. [image / none] | اس‌وی‌جی: جعبه دید = "0 0 40 40" عرض = 80 ارتفاع = 80 پرکردن = none خط دور = "#0f766e" ضخامت خط دور = 2 نشانگر آغاز = "url(#a)"
محتوا = "<defs><marker id='a' viewBox='0 0 10 10' refX='5' refY='5' markerWidth='5' markerHeight='5'><circle cx='5' cy='5' r='5' fill='#dc2626'/></marker></defs><polyline points='6,32 20,8 34,32'/>"
پایان |
نشانگر میانهmarker mid marker-mid | نشانگری که در هر نقطه‌ی میان نخستین و واپسین نقطه‌ی یک path، line، polyline یا polygon در SVG کشیده می‌شود. url(#id) یک عنصر marker، یا none. [image / none] | اس‌وی‌جی: جعبه دید = "0 0 40 40" عرض = 80 ارتفاع = 80 پرکردن = none خط دور = "#2563eb" ضخامت خط دور = 2 نشانگر میانه = "url(#b)"
محتوا = "<defs><marker id='b' viewBox='0 0 10 10' refX='5' refY='5' markerWidth='5' markerHeight='5'><rect width='10' height='10' fill='#f59e0b'/></marker></defs><polyline points='4,32 14,10 26,30 36,8'/>"
پایان |
نشانگر انتهاmarker end marker-end | نشانگری که در واپسین نقطه‌ی یک path، line، polyline یا polygon در SVG کشیده می‌شود. با orient="auto" روی نشانگر، سر پیکان با خط می‌چرخد. url(#id) یا none. [image / none] | اس‌وی‌جی: جعبه دید = "0 0 40 40" عرض = 80 ارتفاع = 80 پرکردن = none خط دور = "#7c3aed" ضخامت خط دور = 2 نشانگر انتها = "url(#c)"
محتوا = "<defs><marker id='c' viewBox='0 0 10 10' refX='8' refY='5' markerWidth='6' markerHeight='6' orient='auto'><path d='M0 0 L10 5 L0 10 z' fill='#7c3aed'/></marker></defs><line x1='4' y1='30' x2='34' y2='10'/>"
پایان |
ریاضی
| ویژگی | کار آن و مقدارهای قابل قبول | نمونه |
|---|---|---|
سبک ریاضیmath style math-style | روی عنصر ریاضی گذاشته می‌شود: normal سبک نمایشی را می‌کشد، با عملگرهای بزرگ و کسرهایی که تمام ارتفاعشان را می‌گیرند. compact سبک درون‌خطی را می‌کشد که فشرده‌تر است و در یک سطر متن جا می‌شود. [normal, compact] | ریاضی: سبک ریاضی = "compact" اندازه قلم = 24 محتوا = "<mfrac><mn>1</mn><mn>2</mn></mfrac>" پایان |
عمق ریاضیmath depth math-depth | عمق تودرتویی یک تکه ریاضی که برای کوچک‌کردن نوشته در کسرها، توان‌ها و اندیس‌ها به کار می‌رود. یک عدد صحیح عمق را می‌گذارد و auto-add به مرورگر اجازه می‌دهد وقتی سبک ریاضی فشرده است یک سطح بیفزاید. اندازه را فقط جایی عوض می‌کند که font-size برابر math باشد. [integer / auto-add] | ریاضی: عمق ریاضی = 2 محتوا = "<mi>x</mi><mo>+</mo><mn>1</mn>" پایان |
جابه‌جایی ریاضیmath shift math-shift | روی عنصر ریاضی گذاشته می‌شود: normal بالانویس‌ها را به اندازه‌ی معمول بالا می‌برد و compact کمتر بالا می‌برد، همان‌طور که ریاضی در جاهای تنگ مثل زیر خط کسر می‌کند. [normal / compact] | ریاضی: جابه‌جایی ریاضی = "فشرده" اندازه قلم = 24 محتوا = "<msup><mi>x</mi><mn>2</mn></msup>" پایان |
ترتیب خواندن، لایه‌ی بالا و HDR
| ویژگی | کار آن و مقدارهای قابل قبول | نمونه |
|---|---|---|
جریان خواندنreading flow reading-flow | فقط Chromium. ترتیبی را که فوکوس صفحه‌کلید و صفحه‌خوان‌ها میان فرزندهای یک ظرف flex، شبکه یا بلوک می‌روند تعیین می‌کند. normal ترتیب نوشته‌شدن را دنبال می‌کند. flex-visual، flex-flow، grid-rows، grid-columns و grid-order آنچه دیده می‌شود را دنبال می‌کنند و source-order تصمیم را به reading-order می‌سپارد. [normal / source-order / flex and grid flow keywords] | جعبه: نمایش = flex جهت فلکس = row-reverse جریان خواندن = "flex-visual"
دکمه: محتوا = "یک" پایان
دکمه: محتوا = "دو" پایان
پایان |
ترتیب خواندنreading order reading-order | فقط Chromium. عددی صحیح که فرزندی را درون ظرفی که reading-flowاش normal نیست رتبه می‌دهد. عددهای کوچک‌تر زودتر خوانده می‌شوند و فرزندهای هم‌عدد ترتیب نوشته‌شدنشان را نگه می‌دارند. پیش‌فرض ۰ است. [an integer] | جعبه: نمایش = flex جریان خواندن = source-order
دکمه: ترتیب خواندن = 2 محتوا = "دوم خوانده می‌شود" پایان
دکمه: ترتیب خواندن = 1 محتوا = "اول خوانده می‌شود" پایان
پایان |
روکشoverlay overlay | فقط Chromium. می‌گوید عنصر در لایه‌ی بالا نشان داده می‌شود یا نه، همان جایی که پنجره‌های شناور و دیالوگ‌ها هستند. آن را برای اثرگذاری مستقیم نمی‌گذارید: در transition فهرستش می‌کنید تا عنصری که از لایه‌ی بالا بیرون می‌رود تا پایان انیمیشن خروج دیده شود. مقدارها auto و none هستند. [auto / none] | جعبه: روکش = "خودکار" گذار = "opacity 0.3s, overlay 0.3s allow-discrete" محتوا = "در لایه‌ی بالا محو می‌شود" پایان |
حد بازه پویاdynamic range limit dynamic-range-limit | ویژگی تازه‌ای که همه‌ی مرورگرها ندارند. مشخص می‌کند محتوای HDR روی صفحه‌ی HDR تا چه حد می‌تواند روشن باشد. standard آن را هم‌روشنی محتوای معمولی نگه می‌دارد، no-limit همه‌ی بازه را آزاد می‌گذارد و constrained میان این دو است. dynamic-range-limit-mix() واژه‌ها را با درصد درهم می‌آمیزد. [standard / no-limit / constrained / dynamic-range-limit-mix()] | ویدیو: منبع: نشانی = "clip.mp4" پایان حد بازه پویا = "محدود" کنترل‌ها = true پایان |
خودتان امتحان کنید
- برای صفحه‌ای با سه سرتیتر فهرست مطلب شماره‌دار بسازید. یک شمارنده بگیرید، روی هر سرتیتر
افزایش شمارندهبگذارید و بامحتوای تولیدیوcounter()شماره‌شان کنید. - نوار برگه‌ها را عمودی کنید:
نوع چسبیدن پیمایش = "y mandatory"باسرریز عمودیو یکارتفاعثابت. بعد به ظرف یکفاصله پیمایش بالابدهید و ببینید برگه‌ها چگونه می‌ایستند. - به نمونه‌ی راهنما دکمه‌ی پنجمی بیفزایید که ناحیه را
"top right"بگذارد و ششمی برای"bottom span-left". هر کدام کدام خانه‌ی شبکه را برمی‌گزیند؟ - یک خانه را در
اسویجیبکشید، یک مربع و یک مثلث، و روی خود عنصراسویجییکپرکردنو یکخط دوربرای هر دو بگذارید. بعد با یک قاعدهیسراسریفقط به بام خط دور خط‌چین بدهید.