شبکه های ضمنی، الگوهای چیدمان قابل تکرار، و دانگلرها

دیو روپرت با جادوی مدرن CSS که یکی از آن معماهای کلاسیک را حل می کند: چه اتفاقی می افتد زمانی که CSS برای کامپوننت قادر به مدیریت محتوایی که ما به آن پرتاب می کنیم نباشد؟

وضعیت خاص زمانی است که یک شبکه چیدمان انتظار تعداد زوجی از آیتم ها را دارد، اما در عوض با یک عدد فرد عرضه می شود. ما با یک عنصر "آویزان" در انتهای آن باقی می‌مانیم که چیدمان را از بین می‌برد. به نظر می رسد آنچه مورد نیاز است مقداری است CSS دفاعی و دیو آن را انجام می دهد.

دستش را دراز می کند :has() برای نوشتن یک انتخابگر خوب که آخرین مورد را در شبکه ای که دارای تعداد فرد مورد است بو می کند:

.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }

شکستن آن:

• ما یک ظرف والدین داریم .items.
• اگر ظرف :has() an .item فرزندی که آخرین نوع خود است،
• …و آن .item اتفاقاً یک نمونه با اعداد فرد است،
• … سپس اولین مورد را انتخاب کنید .item عنصری از آن نوع و سبک آن!

در این مورد، که آخرین .item برای جلوگیری از ایجاد سوراخ در طرح، می توان آن را به عرض کامل تنظیم کرد.

اگر… پس… CSS دارای قدرت منطقی شرطی است! ما در حال حاضر فقط در مورد پشتیبانی از Safari TP و Edge/Chrome Canary صحبت می کنیم، اما این بسیار عالی است.

طبق شانس، تمانی عفیف اخیراً ترفندهایی را که در آن زمان آموخته است، به اشتراک گذاشته است آزمایش با شبکه های ضمنی. با استفاده از الگوریتم قرار دادن خودکار CSS Grid، ما حتی مجبور نیستیم به صراحت تعداد ثابتی از ستون‌ها و ردیف‌ها را برای یک شبکه اعلام کنیم - CSS آنها را در صورت نیاز برای ما ایجاد می‌کند!

نه، تکنیک‌های تمانی راه‌حل‌های جایگزینی برای معضل «آویزگر» دیو نیستند. اما ترکیب رویکرد تمانی برای الگوهای طرح‌بندی شبکه‌ای تکرارپذیر با استفاده از CSS دفاعی دیو از :has()، ما یک شبکه بسیار قدرتمند و پیچیده به نظر می رسیم که سبک وزن است و می تواند هر تعداد مورد را مدیریت کند و در عین حال یک الگوی متعادل و قابل تکرار را حفظ کند.