تاریخ انتشار: ۱۱ ژوئن ۲۰۲۵
با هک های حاشیه و شبه المان خداحافظی کنید و به تزئینات شکاف CSS سلام کنید.
تیم مایکروسافت اج با هیجان اعلام می‌کند که تزئینات شکاف CSS، روشی جدید برای سبک دادن به شکاف‌های بین آیتم‌ها در طرح‌بندی‌های انعطاف‌پذیر، شبکه‌ای و چند ستونی، اکنون برای آزمایش توسعه‌دهندگان در کروم و اج 139 در دسترس است!
آن را امتحان کنید و بازخورد خود را برای کمک به شکل دادن به آینده این API به اشتراک بگذارید.
لینک های مفید
مشکل
شکاف های استایل در اجزای رابط کاربری مانند تقویم، کارت یا شبکه های داده می تواند تا حد زیادی خوانایی را بهبود بخشد و به زیبایی شناسی کلی بیافزاید. با این حال، دستیابی به این اثر در طرح‌بندی‌های شبکه‌ای و فلکس‌باکس به‌طور سنتی نیازمند راه‌حل‌های ناخوشایند با حاشیه‌ها، شبه عناصر یا ترفندهای پس‌زمینه است. این راه‌حل‌ها به دلایل مختلفی می‌توانند مشکل ساز باشند.
- غیر شهودی: آنها وابستگی های ساختاری را برای استایل بصری معرفی می کنند که در تضاد با اصول HTML معنایی است.
- دسترسی غیر دوستانه: آنها اغلب به عناصر DOM اضافی نیاز دارند که می تواند با فناوری های کمکی مانند صفحه خوان ها تداخل داشته باشد.
- نگهداری دشوار است: آنها به منطق چیدمان پیچیده ای نیاز دارند و استایل ثابت در بین اجزا را دشوارتر می کنند.
- بد برای عملکرد: این راه حل ها ممکن است عناصر غیر ضروری را به DOM اضافه کنند که می تواند منجر به مشکلات عملکرد شود.
در حالی که پلتفرم وب قبلاً از شکاف های استایل با ویژگی column-rule پشتیبانی می کند، در حال حاضر فقط به طرح بندی های چند ستونی محدود شده است. توسعه‌دهندگان وب مدت‌هاست که درخواست یک روش ثابت برای استایل دادن به شکاف‌ها در سایر انواع طرح‌بندی مرتبط، مانند grid و flexbox داشته‌اند.
راه حل: تزئینات شکاف CSS
تزئینات شکاف خاصیت column-rule را برای کار با دیگر انواع چیدمان مانند grid و flexbox گسترش می دهند و یک ویژگی row-rule جدید برای تکمیل آن معرفی می کنند. این یکپارچگی و قابلیت سفارشی‌سازی جدید را برای نحوه استایل‌بندی شکاف‌ها در انواع طرح‌بندی به ارمغان می‌آورد.
تزئینات شکاف CSS مزایای زیر را به همراه دارد:
- بدون تاثیر چیدمان: تزئینات صرفا بصری هستند. آنها بر روی چیدمان یا فاصله تأثیر نمی گذارند، بنابراین می توانید بدون ترس از شکستن طرح های موجود آنها را اتخاذ کنید.
- Repeat syntax: مشابه CSS Grid، می‌توانید از دستور
repeat()برای ایجاد الگوهای تزئینات در قسمت‌های مختلف یک ظرف استفاده کنید، که اجازه می‌دهد طرح‌های سازگار غنی با حداقل CSS ایجاد کنید. - نشانه‌گذاری پاک‌تر: نیازی به عناصر اضافی یا شبه عناصر نیست-فقط مستقیماً شکاف‌ها را سبک‌سازی کنید.
- قابلیت سفارشی‌سازی: ویژگی‌های جدید CSS مانند
*rule-break،*rule-outset، وgap-rule-paint-orderبه گزینه‌های سفارشی‌سازی بیشتری فراتر از سبک سنتی قاعده عرض، سبک و رنگ اجازه می‌دهند.
با تزئینات شکاف CSS، ایجاد طرح‌بندی‌های بصری متمایز و قابل نگهداری آسان‌تر از همیشه است.
تزئینات شکاف در عمل
امروز برای بازی با تزئینات شکاف CSS، از مرورگری استفاده کنید که از آنها پشتیبانی می‌کند: Edge یا Chrome، که با نسخه 139 شروع می‌شود، و با رفتن به edge://flags یا chrome://flags ، پرچم «فعال کردن ویژگی‌های بستر آزمایشی وب» را تغییر دهید.
زمین بازی توسعه دهندگان تعاملی
برای امتحان انواع طرح‌بندی‌ها که در آن تزئینات شکاف CSS پشتیبانی می‌شود، و با همه ویژگی‌های جدید، زمین بازی توسعه‌دهنده تعاملی ما را امتحان کنید.
منوی برگر
نسخه ی نمایشی منوی همبرگر نحوه استفاده از ویژگی column-rule-break: intersection برای شکستن تزئینات شکاف ستون در هر تقاطع قابل مشاهده با شکاف ردیف را نشان می دهد.
دمو همچنین از column-rule-offset: -15px برای تنظیم طول تزئینات استفاده می کند و آنها را از لبه های هر تقاطع دور می کند.
دفترچه یادداشت
در نسخه نمایشی نوت بوک ، row-rule-break: none تضمین نمی کند که تزئینات ردیف در تقاطع ها قطع نشود - آنها به طور مداوم از چپ به راست ظرف اجرا می شوند. از سوی دیگر، column-rule-break: spanning-item تضمین می کند که تزئینات ستون در پشت آیتم های پوشا رنگ آمیزی نمی شود - آنها از آیتم های پوشا شروع می شوند و متوقف می شوند و یک تقاطع T قابل مشاهده را تشکیل می دهند.
ویژگی row-rule از تابع repeat() برای کنترل دقیق نحوه اعمال تزئینات شکاف در بخش‌های مختلف چیدمان استفاده می‌کند. این یک الگوی یک ظاهر را فعال می کند که در آن قوانین ردیف در سرصفحه و پاورقی پنهان می شوند، در اطراف محتوای اصلی ضخیم تر و در جاهای دیگر ظریف تر هستند.
اخبار روزانه CSS
نسخه ی نمایشی Daily CSS News از یک طرح بندی به سبک مجله استفاده می کند و تزئینات شکاف CSS را در چندین کانتینر شبکه و فلکس باکس تعریف می کند.
به بازی سودوکو در سمت راست توجه کنید که از یک شبکه 9x9 و الگوی تکرار برای ترسیم خطوط نازک و ضخیم بین سطرها و ستون ها استفاده می کند:
.sudoku {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(9, 1fr);
gap: 6px;
column-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
column-rule-style: solid;
column-rule-color: var(--secondary);
row-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
row-rule-style: solid;
row-rule-color: var(--secondary);
}
برای بازخورد تماس بگیرید
ما برای شما هیجان زده هستیم که تزئینات شکاف CSS را امتحان کنید. ما فکر می کنیم یک مشکل رایج را حل می کند و ما دوست داریم نظرات شما را در مورد آن بشنویم تا بتوانیم این ویژگی را مطابق با نیازهای شما اصلاح کنیم.
ویژگی تزئینات شکاف CSS هنوز در Chromium در حال پیاده سازی است. اگر آن را آزمایش کردید، توجه داشته باشید که ما هنوز به طور فعال روی آن کار می کنیم و ممکن است با مواردی روبرو شوید که آن طور که انتظار می رود رفتار نمی کند. برخی از محدودیت های فعلی شامل متحرک سازی دکوراسیون شکاف و استفاده از تعداد بسیار زیادی از مسیرهای شبکه است.
اگر اشکالی پیدا کردید یا نظری در مورد این ویژگی دارید، با باز کردن یک اشکال جدید Chromium ، بازخورد خود را به اشتراک بگذارید.