لیست علاقه مندی های CSS من

وقتی مردم آنچه را که در مورد CSS می خواهند به اشتراک می گذارند، دوست دارم. در چند هفته گذشته دو لیست آرزوهای عالی توسط دیو روپرت و اریک مایر را خواندم. در سال 2022، ما بسیاری از ویژگی‌های CSS جدید دریافت کردیم که مورد علاقه من درخواست‌های کانتینر، CSS بود. :hasو زیر شبکه

فکر کردم همه چیزهایی را که می‌خواهم CSS داشته باشد را روزی دور بریزم.

تشخیص بسته بندی انعطاف پذیر

وقتی استفاده می کنم flex-wrap: wrap، گاهی اوقات آرزو می کنم کاش راهی برای تشخیص اینکه آیا عناصر flex روی یک خط جدید پیچیده شده اند وجود داشت.

به عنوان مثال، فرض کنید من یک هدر بخش دارم که حاوی یک عنوان و یک پیوند است. ما می توانیم این کامپوننت کوچک را پاسخگو کنیم flex-wrap: wrap. گیلاس در بالا بله خواهد بود شما می دانید که موارد به یک خط جدید منتقل می شوند.

ممکن است لازم باشد یک جابجایی موقعیت جلوه بصری اضافه کنم. به عنوان مثال، فریمی که به طور پیش‌فرض در پایین قرار دارد و زمانی که زمان‌ها بسته می‌شوند در سمت چپ قرار دارد.

.section-header {
  display: flex;
  flex-wrap: wrap;
}

ما در حال حاضر نمی توانیم از زمان بسته بندی اقلام مطلع شویم. تنها راه این است که از درخواست های رسانه ای برای ایجاد تغییرات مورد نظر خود استفاده کنیم.

کاش چیزی شبیه به این داشتیم:

.section-header {
  container-type: style flex-wrap;
  display: flex;
  flex-wrap: wrap;
}

@container style(wrap) {
  
}

موارد بالا خواناترین نحو CSS نیست، اما شما این ایده را دریافت می کنید.

فلکس باکس gap پشتیبانی کنید

در حال حاضر هیچ راهی برای آزمایش وجود ندارد gap هنگام استفاده با ظرف فلکس باکس پشتیبانی می شود.

من به دلیل(ها) کاوش نکردم، اما بد است. من می خواهم با @supports، دقیقاً مانند آن:

@supports (gap: 10px) {
  .element {
    display: flex;
    gap: 10px;
  }
}

موارد بالا در حال حاضر کار نمی کند.

گرادیان های CSS منطقی

ویژگی های منطقی CSS برای ساخت وب سایت های چند زبانه عالی هستند. از آنجایی که زبان عربی زبان مادری من است، تجربیات زیادی از راست به چپ می‌سازم، و هر بار که از ویژگی‌های بولی استفاده می‌کنم، آرزو می‌کنم که ای کاش آنها را در گرادینت می‌داشتیم.

میشه داشته باشیم لطفا؟

.hero {
  background-image: linear-gradient(to inline-end, #000, transparent);
}

زمان را پیدا کنید sticky فعال است

من می توانم به یک کاربرد ساده فکر کنم که در آن می خواهم بدانم چه زمانی position: sticky فعال است. به عبارت دیگر، زمانی که یک آیتم گیر کرده است.

.site-header {
  position: sticky;
  top: 0;
}

.site-header:sticky {
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
}

تسکین شیب ها

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

من به این ابزار عالی برای ایجاد گرادیان های تسکین تکیه می کنم.

.hero {
	linear-gradient(to bottom, #304365, ease-in-out, transparent);
};

دستور ساده سازی در حال حاضر یک پیشنهاد CSSWG است، اما هیچ مرورگری هنوز آن را قبول نکرده است.

متن متحرک تزئینی

ای کاش راهی برای متحرک سازی لینک های برجسته بدون استفاده از پس زمینه CSS یا شبه عناصر داشتیم.

چرا چنین چیزی نداشته باشید text-decoration-size?

a {
  text-decoration-size: 0%;
  transition: text-decoration-size 0.3s;
}

a:hover {
  text-decoration-size: 100%;
}

اثاثه یا لوازم داخلی پیشرو

یکی از چالش‌هایی که هنگام کار با برخی از فونت‌ها وجود دارد، داشتن یک مقدار اصلی متفاوت است که می‌تواند منجر به فاصله‌گذاری ناهماهنگ قبل و بعد از فونت شود.

در حال حاضر یک هک وجود دارد که من [wrote about]((https://ishadeed.com/article/button-label-alignment/) یعنی استفاده از شبه عنصر و تراز عمودی آن).

.button:before {
  content: "";
  display: inline-block;
  height: 16px;
  vertical-align: middle;
}

بهتر است استفاده شود leading-trim، یک ویژگی CSS پیشنهادی است که تا به امروز مورد توجه قرار نگرفت.

.button {
  leading-trim: both;
}

در اینجا مقاله ای است که در مورد مدل موی سربی به یاد دارم.

در حال حاضر می توانیم با استفاده از پیمایش زنجیره ای جلوگیری کنیم overscroll-behavoir: contain. تصور کنید که یک مودال دارید و با پیمایش عنصر بدنه نیز اسکرول می‌شود.

این در حال حاضر پشتیبانی می شود، اما چیزی که من دوست ندارم این است که اگر عنصر دارای محتوای کوتاه باشد، کار نخواهد کرد.

همین. ویژگی های CSS که آرزو می کردید امروز داشته باشید چیست؟