منتشر شده: ۱۵ مه ۲۰۲۶
تزئینات فاصله CSS از نسخه ۱۴۹ در Chrome و Edge در دسترس هستند. فاصلههای بین طرحبندیهای grid، flexbox و چند ستونی را بدون استفاده از border یا pseudo-elements استایلدهی کنید. این ویژگی با همکاری تیمهای Microsoft Edge و Google Chrome ساخته شده است.
مشکل
ایجاد فاصله بین آیتمهای طرحبندی همیشه نیاز به راهحلهای جایگزین داشته است. حاشیه روی آیتمهای تکی، شبهعناصر، ترفندهای پسزمینه. این رویکردها هزینههایی دارند:
- آنها به ساختار بستگی دارند. اضافه کردن یک جداکننده بصری به معنای تغییر نشانهگذاری یا نوشتن انتخابگرها برای موارد خاص است.
- آنها در دسترسیپذیری اختلال ایجاد میکنند. عناصر اضافی DOM در درخت دسترسیپذیری، زمانی که نباید، ظاهر میشوند.
- نگهداری از آنها دشوار است. طرحبندیهای واکنشگرا، فرضیاتی را که سبکبندی شکاف شما بر اساس آنها ساخته شده است، در هم میشکنند.
- آنها به عملکرد آسیب میرسانند. گرههای DOM بیشتر، کار با طرحبندی بیشتر.
- ارگونومی نوشتاری ضعیفی دارند. اغلب برای درست کار کردن چیزها به محاسبات هندسی پیچیده نیاز بود.
ویژگی column-rule تزیینات فاصله را برای طرحبندیهای چند ستونی مدیریت میکند، اما grid و flexbox قبلاً فاقد عملکرد معادل بودند.
راه حل
کانتینرهای گرید و فلکسباکس اکنون column-rule میپذیرند. یک ویژگی جدید row-rule شکافهای افقی را مدیریت میکند. این تزئینات کاملاً بصری هستند و بر طرحبندیهای موجود تأثیری ندارند. اگر از ویژگی column-rule در طرحبندیهای چند ستونی استفاده کنید، رفتار موجود یکسان باقی میماند.
برای مثال، در اینجا یک کانتینر فلکس با سه پنل وجود دارد که از لیستی از سبکها برای قوانین ستون و ردیف خود استفاده میکند:
.flex-split {
column-rule-width: 2px;
column-rule-style: dashed, solid;
column-rule-color: #d4d0c8;
}
همانطور که در این مثال نشان داده شده است، هر دو row-rule و column-rule اختصار یکسانی برای عرض، سبک و رنگ میپذیرند. از اختصار rule برای تنظیم همزمان هر دو استفاده کنید.
املاک جدید
با این حال، ما فقط column-rule به سایر حالتهای طرحبندی نیاوردیم و معادل row را اضافه نکردیم. ما همچنین کنترلهایی را برای تنظیم دقیق تزئینات شما معرفی کردیم: نحوهی شکست آنها در تقاطعها، میزان فاصلهی آنها از لبههای شکاف، زمان نمایش آنها نسبت به آیتمها و نحوهی تغییر سبکها در شکافها. عرض، رنگ و درج قاعده نیز قابل انیمیشن هستند.
repeat()
تزئینات شکافها repeat() برای مقادیر عرض، سبک و رنگ خود پشتیبانی میکنند. این به شما امکان میدهد تزئینات را به صورت خلاصه در شکافها تغییر دهید، مشابه سینتکس repeat() که برای تعریف مسیر در شبکه استفاده میشود:
.settings-panel {
row-rule: 1px solid #243352;
row-rule-width: repeat(2, 1px), 4px;
}
این به دو فاصله ردیف اول یک قانون ۱ پیکسلی و به ردیف سوم یک قانون ۴ پیکسلی میدهد، که اگر فاصلهها بیشتر از مقادیر باشند، به صورت چرخشی تغییر میکنند. همچنین میتوانید چندین مقدار را مستقیماً و بدون repeat() ارسال کنید. به عنوان مثال، سبکهای قانون ردیف را برای مرزهای ساعت و نیم ساعت در یک تقویم به طور متناوب تغییر دهید:
.calendar {
row-rule-width: 2px, 1px;
row-rule-style: solid, dashed;
row-rule-color: #e8e4df, #f0ece7;
}
کنترل وقفههای دکوراسیون
ویژگیهای column-rule-break و row-rule-break نحوه رفتار تزئینات را در تقاطع شکافها کنترل میکنند:
-
normal(پیشفرض): رفتار آن به نوع کانتینر بستگی دارد. اطلاعات بیشتر در مشخصات آمده است. -
none: تزئینات به طور مداوم از تقاطعها عبور میکنند. -
intersection: تزئینات در محل تقاطع سطرها و ستونها میشکنند.
برای مثال، اگر در یک کانتینر شبکهای، rule-break روی intersection تنظیم کنید، قوانین به جای ادامه دادن در موارد زیر، در محل تقاطع gapها متوقف میشوند:
.dashboard {
column-rule-style: solid;
column-rule-color: #fbbf24, #34d399;
column-rule-width: 1px, 3px;
column-rule-break: intersection;
row-rule: 1px solid #1e1e36;
}
اگر rule-break روی none تنظیم کنید، قوانین به طور مداوم از طریق تقاطعها اجرا میشوند:
.grid {
column-rule: 1px solid #5a9e9e;
row-rule: 1px solid #c27a6b;
rule-break: none;
}
میتوانید این مقدار را در زمین بازی تعاملی امتحان کنید.
تزئینات را گسترش دهید یا کوچک کنید
ویژگیهای column-rule-inset و row-rule-inset میزان امتداد تزئینات درون یک شکاف را کنترل میکنند. میتوانید با استفاده از shorthand، تزئینات را در همه طرفها به طور همزمان تنظیم کنید، یا با استفاده از column-rule-inset-cap (برای نقاط انتهایی که هیچ شکاف متقاطعی ندارند) و column-rule-inset-junction (برای نقاط انتهایی که با سایر شکافها تلاقی دارند) تزئینات را به صورت نامتقارن هدف قرار دهید.
مقادیر میتوانند طول، درصد یا کلمه کلیدی overlap-join باشند که تزئینات شکاف را به گوشهها متصل میکند. برای مثال، تنظیم rule-inset روی ۵ پیکسل، تمام تزئینات را به سمت داخل ۵ پیکسل کوچک میکند:
.container {
display: flex;
flex-wrap: wrap;
column-rule: 1px solid #2a2a45;
column-rule-color: #60a5fa, #34d399, #a78bfa;
rule-inset: 5px;
row-rule: 1px solid #2a2a45;
}
تنظیم rule-inset-cap روی 0px و rule-inset-junction روی 10px، تزئیناتی ایجاد میکند که در لبههای ظرف همسطح هستند اما در تقاطعها به صورت توکار قرار میگیرند. دموی داشبورد که قبلاً نشان داده شده است از این رویکرد استفاده میکند و توکارها با حرکت ماوس متحرک میشوند:
.dashboard {
rule-inset-cap: 0px;
rule-inset-junction: 10px;
transition: rule-inset-junction 0.4s;
}
.dashboard:hover {
rule-inset-junction: 0px;
}
قابلیت مشاهده
ویژگیهای column-rule-visibility-items و row-rule-visibility-items زمان نمایش قوانین را بر اساس مجاورت آیتم کنترل میکنند:
-
normal(پیشفرض): بستگی به نوع کانتینر دارد. -
all: قوانین در هر جای خالی، حتی جاهای خالی، ظاهر میشوند. -
around: قوانین هر جا که یک یا چند مورد مجاور وجود داشته باشد، ظاهر میشوند. -
between: قوانین فقط بین دو آیتم مجاور ظاهر میشوند.
rule-visibility-items هر دو را به طور همزمان تنظیم میکند. تنظیم rule-visibility-items به between قوانین را فقط بین آیتمهای مجاور نشان میدهد:
section {
rule: 2px solid black;
rule-visibility-items: between;
}
از طرف دیگر، تنظیم rule-visibility-items روی all ، قوانین را در هر فضای خالی، حتی آنهایی که آیتم مجاور ندارند، نشان میدهد:
section {
rule: 2px solid black;
rule-visibility-items: all;
}
برای دیدن تفاوت، مقدار را در نسخه آزمایشی زنده تغییر دهید!
تزئینات متحرک
عرض، رنگ و درج خطوط قابل انیمیشن هستند. میتوانید آنها را با حرکت موس یا هر تغییر حالت دیگری جابجا کنید. نسخه آزمایشی داشبورد که قبلاً نشان داده شده است، رنگها و درج خطوط انتقال را با حرکت موس نشان میدهد:
.dashboard {
column-rule-color: #fbbf24, #34d399;
rule-inset-junction: 10px;
transition: column-rule-color 0.4s, rule-inset-junction 0.4s;
}
.dashboard:hover {
column-rule-color: #3b82f6, #3b82f6;
rule-inset-junction: 0px;
}
دموها
تمام دموهای نمایش داده شده در این پست در سایت دموی Edge موجود است.
پست وبلاگ نسخه آزمایشی توسعهدهندگان شامل چندین نسخه نمایشی دیگر از جمله یک زمین بازی تعاملی ، یک منوی برگر ، یک طرحبندی دفترچه یادداشت و یک طرحبندی به سبک مجله با جدول سودوکو است.
تغییرات از زمان نسخه آزمایشی توسعهدهندگان
اگر در طول دوره آزمایشی توسعهدهندگان (کروم ۱۳٩) تزیینات فاصله را امتحان کردهاید، به تغییرات زیر توجه کنید:
- این ویژگی به صورت پیشفرض در دسترس است؛ هیچ پرچمی لازم نیست.
- برخی از نامهای ویژگیها برای همسو شدن با آخرین مشخصات بهروزرسانی شدند (برای مثال،
column-rule-outsetوrow-rule-outsetبهcolumn-rule-insetوrow-rule-insetتبدیل شدند). - ویژگیهای
column-rule-visibility-itemsوrow-rule-visibility-itemsاضافه شدند. - پشتیبانی از انیمیشن اضافه شد.
همین امروز از تزئینات شکاف استفاده کنید
تزئینات شکاف در کروم و اج، از نسخه ۱۴۹ به بعد، کار میکنند. اگر تزئینات شکاف شما صرفاً تزئینی هستند، این ویژگی یک پیشرفت تدریجی است؛ در مرورگرهایی که از این ویژگی پشتیبانی نمیکنند، شکافها به طور عادی و بدون تزئینات قابل مشاهده نمایش داده میشوند. یک polyfill برای مرورگرهایی که هنوز از آن پشتیبانی نمیکنند، در حال توسعه است.
اشکالات را در ردیاب مشکل Chromium ثبت کنید. برای اطلاعات بیشتر، به مشخصات CSS Gap Decorations مراجعه کنید.