استاد چیدمان
من سالها در این وبلاگ به آموزش چیدمان CSS پرداخته ام. گذاشتم
تمام چیزی که من می دانم استاد چیدمان دوره: 70+ درس و 150+ مثال تعاملی که آموزش می دهند
شما چگونه در مورد طرحبندیهای CSS فکر کنید، نه فقط نحو را حفظ کنید.
مقدمه
ما همیشه به دنبال راهی در CSS بودهایم که یک عنصر را بر اساس نسلهای آن استایل دهی کنیم. تا قبل از CSS امکان پذیر نبود :has() در تمام مرورگرهای اصلی پشتیبانی می شود.
در این مقاله، من این موضوع را بررسی می کنم و برخی از موارد جالب استفاده از CSS را روشن می کنم :has().
مشکل
بگو ما یک داریم
figure>
img src="thumb.jpg" alt="" />
figcaption>A great looking tart.figcaption>
figure>
نسخه ی نمایشی زیر را بررسی کنید. «نمایش عنوان» را تغییر دهید.
شکل زیر را ببینید:
وقتی شرح وجود دارد، می خواهم شکل زیر را داشته باشد:
- پد
- پس زمینه
- سایه
تنها راه ممکن در CSS دادن یک کلاس است
figure.with-caption {
padding: 0.5rem;
background-color: #fff;
box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
زمانی که ما محتوای HTML (مثلاً: متن مقاله) تولید کرده باشیم، این امکان پذیر نیست.
راه حل
با CSS :has() انتخابگر، امکان پذیر است. ما می توانیم موارد زیر را انجام دهیم. مثل این است که بگوییم اگر
آیا می توانید راه حل را حدس بزنید؟ سعی کنید آن را در زیر بنویسید و نتیجه را در عمل ببینید. به عنوان یادآوری باید بنویسید :has و انتخابگر مورد نظر شما
انتخابگر CSS مورد نیاز برای استایل را بنویسید شکل فقط اگر وجود داشته باشد Figcaption.
.شکل{
پد: 0.5rem;
background-color: #ffff;
حاشیه شعاع: 8 پیکسل.
}
figure>
img src="thumb.jpg" alt="" />
figcaption>A great looking tart.figcaption>
figure>
راه حل را آشکار کنید
figure:has(figcaption) {
padding: 0.5rem;
background-color: #fff;
box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
در نمایش زیر توجه کنید که چگونه چه زمانی :has() اقدام می کند.
شکل زیر را ببینید:
figure>
img src="thumb.jpg" alt="" />
figcaption>A great looking tart.figcaption>
figure>
این فقط خراش دادن سطح مشکلاتی است که می توانیم با CSS حل کنیم :has().
خلاصه ای از انتخابگرهای CSS
قبل از شیرجه زدن به چند انتخاب CSS جالب با :has()، بیایید نگاهی گذرا به آنها بیندازیم.
انتخابگر خواهر و برادر مجاور
برای انتخاب خواهر و برادر بعدی یک عنصر، میتوانیم از انتخابگر خواهر و برادر مجاور (+) برای این کار استفاده کنیم.
.book {
opacity: 0.2;
}
.frame + .book {
opacity: 1;
}
خودتان آن را در نسخه ی نمایشی زیر امتحان کنید.
کتابی را که در کنار قاب قرار دارد انتخاب کنید
انتخابگر خواهر و برادر عمومی
برای انتخاب تمام خواهر و برادرهای بعدی یک عنصر، میتوانیم از انتخابگر خواهر و برادر عمومی (~) برای این کار استفاده کنیم.
.book {
opacity: 0.2;
}
.frame ~ .book {
opacity: 1;
}
انتخاب کنید همه کتاب ها که بعد از قاب هستند
انتخابگر خواهر و برادر قبلی
با CSS :has()، می توانیم به بالا رفته و خواهر و برادر قبلی یک عنصر را انتخاب کنیم.
در قطعه زیر، :has() به شما امکان می دهد کتابی را انتخاب کنید که یک قاب به دنبال آن باشد.
.book {
opacity: 0.2;
}
.book:has(+ .frame) {
opacity: 1;
}
انتخاب کنید عنصر قبلی قبل از قاب
با افزودن موارد فوق می توانیم همه را انتخاب کنیم موارد قبلی از یک عنصر خاص در مورد ما، ما می خواهیم همه را انتخاب کنیم .bookقبل از .frame عنصر
.book {
opacity: 0.2;
}
.book:has(~ .frame) {
opacity: 1;
}
همه را انتخاب کنید .book موارد قبل .frame.
کمباین بچه ها
این > انتخابگر یک عنصر را انتخاب می کند اگر فقط فرزند مستقیم باشد. به عنوان مثال، با استفاده از .section > h1 انتخاب خواهد کرد only if it’s a direct child of the section.
Review your knowledge with the demo below.
Select the .book که در داخل هستند .box
:نه شبه طبقه
این :not() انتخابگر در CSS برای حذف یک عنصر از یک انتخاب مفید است. برای مثال، .section:not(.featured). دمو زیر را امتحان کنید و همه کتاب ها را انتخاب کنید به جز .blue یکی
همه کتاب ها را انتخاب کنید به جز .blue
این برای خلاصه انتخابگر است. مهم بود که انتظارات واضحی را تعیین کنید و مطمئن شوید که هر مثالی که در آینده توضیح می دهد برای شما واضح است.
انتخابگرهای CSS :has() را مطابقت دهید.
خواندن CSS را یاد بگیرید :has() انتخابگر مفید است در این بخش، چند نمونه را مرور می کنم و به شما نشان می دهم که چگونه آنها را تجزیه و تحلیل کنید.
موارد زیر نمونه های کلی است که می توانید تمرین کنید.
کارت تصویر
در این مثال، ما یک کارت با تصویر به عنوان عنصر فرزند داریم. ما می توانیم این را با CSS تأیید کنیم :has().
بررسی را تغییر دهید و ببینید چگونه انتخابگر CSS فقط زمانی که یک تصویر وجود دارد کار می کند.
همه را انتخاب کنید .نقشه که حاوی img
div class="card">
div class="card-content">div>
div>
چه می شود اگر ما یک انتخابگر می خواهیم که فقط باید مطابقت داشته باشد اگر تصویر یک کودک مستقیم باشد روی نقشه؟ زمانی که .card-thumb عنصر وجود دارد، مطابقت نخواهد داشت.
خودتان آن را امتحان کنید.
همه را انتخاب کنید .نقشه که حاوی مستقیم img کودک
div class="card">
div class="card-thumb">
img src="thumb.jpg" alt="" />
div>
div class="card-content">div>
div>
کارت بدون تصویر
CSS :has() می توان با آن ترکیب کرد :not() انتخابگر در این صورت، انتخابگر کارت مطابقت خواهد داشت فقط اگر تصویری وجود نداشته باشد.
همه را انتخاب کنید .نقشه که انجام نده حاوی img
div class="card">
img src="thumb.jpg" alt="" />
div class="card-content">div>
div>
خواهر و برادر همسایه و :داراست
نسخه ی نمایشی زیر را بررسی کنید. ما می خواهیم انتخاب کنیم .shelf که شامل قاب و به دنبال آن یک کتاب بنفش است.
به طور پیش فرض، قاب بعد از کتاب می آید. کادر را علامت بزنید و ببینید CSS چگونه است :has() انتخابگر کار خواهد کرد
انتخاب کنید قفسه با یک قاب به دنبال آن a کتاب بنفش
.shelf:has(.frame + .book-purple)
اگر قفسه ای فقط حاوی یک جعبه باشد، انتخاب کنید
در این مثال CSS :has() انتخابگر فقط در صورت وجود کتاب در جعبه جعبه سعی می کند مطابقت داشته باشد.
انتخاب کنید قفسه که ظرفی از کتاب دارد
جعبه ای بدون کتاب آبی انتخاب کنید
ترکیب کردن :has() و :not() یکی از بسیاری از کارهای ممکن برای انجام در CSS است :has(). در این مثال، انتخابگر تنها در صورتی مطابقت خواهد داشت که فیلد بدون کتاب آبی.
انتخاب کنید جعبه که انجام نده او یک کتاب آبی دارد
کادر با بیش از 3 کتاب را انتخاب کنید
انتخاب کنید جعبه با بیش از 3 کتاب
ترتیب کتاب را بر اساس شماره تغییر دهید
یک راه جالب این است که چینش کتاب ها را بر اساس تعداد آنها از روی هم به ایستاده تغییر دهید. در دمو زیر اگر تعداد کتاب ها 5+ باشد به ترتیب ثابت تغییر می کند.
سعی کنید کتابهای بیشتری اضافه کنید و ببینید چه اتفاقی میافتد.
تغییر کتاب از پشته برای ایستادن اگر 5+
جهت انعطاف پذیری: ردیف؛
.book {
ارتفاع: 100%;
عرض: 22 پیکسل؛
}
}
با کمک :nth-last-child()، امکان پذیر است.
.shelf:has(.book:nth-last-child(n + 5)) {
flex-direction: row;
.book {
height: 100%;
width: 22px;
}
}
اگر بیش از 5 کتاب وجود دارد، به هر سومین مورد یک فاصله اضافه کنید
این همان مثال قبلی است، اما ما آن را جلوتر بردیم. اگر تعداد موارد بیش از 5 کتاب باشد، باید فاصله اضافه کنیم به هر 3 مورد برای سازماندهی بهتر قفسه
اگر بیش از 5 کتاب وجود دارد، به هر سومین مورد یک فاصله اضافه کنید
}
قفسه کتاب
یک مثال جالب که در آن شرایط زیر را با CSS دارم :has():
- کتاب ها را با توجه به تعدادشان از دسته به قفسه تغییر دهید
- اگر تعداد معینی کتاب وجود دارد، قاب را به دیوار آویزان کنید
- گیاه و خاک را روی زمین بیندازید
نسخه ی نمایشی را پخش کنید.
ترتیب کتاب ها را تغییر دهید
اولین چیز این است که اگر بیش از 5 کتاب وجود دارد، می خواهم کتاب ها را از پشته به پایه تغییر دهم.
.shelf:has(.book:nth-last-of-type(n + 5)) {
flex-direction: row;
.book {
height: 100%;
width: 22px;
}
}
قاب را به دیوار آویزان کنید
اگر بیش از 6 کتاب وجود دارد، قاب باید به دیوار منتقل شود.
.shelf:has(.book:nth-last-of-type(n + 6)) {
.frame {
position: absolute;
left: calc(50% - (75px / 2));
top: -165%;
}
}
گیاه و خاک را دور بریزید
اصلا اتاق نداره؟ فقط گیاه و خاک را روی زمین بیندازید، اما من مسئول این آشفتگی نیستم.
.shelf:has(.book:nth-last-of-type(n + 9)) {
.plant {
animation: movePlant 0.6s forwards;
}
.earth {
animation: moveEarth 0.6s forwards;
}
}
عملگرهای بولی با CSS :has
با CSS :has()، می توانیم عملگرهای منطقی مانند “&&” و “||” را کپی کنیم. در نمایش زیر شرایط را داریم:
- اگر قفسه حاوی قفسه بنفش است را انتخاب کنید و کتاب زرد
- اگر قفسه حاوی قفسه بنفش است را انتخاب کنید یا کتاب زرد
موارد زیر را امتحان کنید:
- کتاب ها را روشن یا خاموش کنید
- تغییر گزینه منو بین “و” / “یا”
قفسه ای که دارد را انتخاب کنید بنفش یک کتاب در زرد یک کتاب
طرح کلی: 2px صورتی تیره.
}
در CSS، این اتفاق می افتد:
.shelf:has(.bookPurple, .bookYellow) {
outline: dashed 2px deeppink;
}
.shelf:has(.bookPurple):has(.bookYellow) {
outline: dashed 2px deeppink;
}
این شگفت انگیز است که چه کاری می توانیم با عملگرهای منطقی در CSS انجام دهیم :has().
امیدوارم نحوه CSS را یاد گرفته باشید :has() کار می کند. حالا بیایید به چند مورد جالب استفاده از CSS برویم :has().
موارد استفاده CSS :has
دانلود فایل
این یکی از موارد استفاده مورد علاقه من در این مقاله است. فرض کنید یک کامپوننت فایل داریم که موارد زیر را نمایش می دهد:
- تصویر فایل
- نام
- اطلاعات متا (صفحات، اندازه و غیره)
اگر تصویری برای فایل وجود ندارد، می خواهیم پسوند فایل را بررسی کرده و آیکون آن را تغییر دهیم. ما می توانیم این کار را با :has().
.file:not(:has(img)) .thumb:before {
content: "";
background-image: var(--bg, initial);
}
.file:has([href$=".pdf"]) {
--bg: "icon-pdf.png";
}
تصویر را تغییر دهید، سپس نوع فایل را تغییر دهید و ببینید چه اتفاقی می افتد. این جادو است، اینطور نیست؟
div class="file">
div class="thumb">
div>
div>
a href="file.docx">a>
div>
div>
اگر یک نوار کناری داشته باشیم و اگر حاوی یک فایل اجرایی باشد باید عرض آن را افزایش دهیم چه؟ این کار با CSS :has امکان پذیر است.
.layout {
display: grid;
grid-template-columns: max-content 1fr;
}
.sidebar:has(.widget) {
width: 180px;
}
آن را در نسخه ی نمایشی تعاملی امتحان کنید. توصیه می کنم این را روی صفحه نمایش بزرگ تماشا کنید.
لطفا موارد زیر را تکمیل کنید:
div class="page">
div class="sidebar">
h2>Selected periodh2>
div class="widget">div>
div>
div class="main">div>
div>
بنر کوکی
این یک مشکل چیدمان رایج است که من زیاد می بینم. فرض کنید یک ویجت Intercom و یک بنر کوکی دارید. رابط کاربری چه واکنشی نشان خواهد داد؟
بنر را در دمو زیر تغییر دهید. توجه کنید که چگونه ویجت زیر بنر پنهان شده است. این خوب نیست.
CSS عالیه این نیست
می توانیم از CSS استفاده کنیم :has() برای جابجایی ویجت اگر بنر نمایش داده شود.
body:has(.banner) .fab {
bottom: 6rem;
}
با نسخه ی نمایشی بازی کنید و CSS را تغییر دهید :has() نشانک.
CSS عالی است. این نیست
بنر داشبورد
در این مثال، اگر صفحه دارای اخطار باشد، می خواهم یک رد بصری اضافی را نشان دهم.
.main:has(.alert) .header {
box-shadow:
inset 0 2px 0 0 red,
0 3px 10px 0 rgba(#000, 0.1);
background-color: #fff4f4;
}
هشدار و آنچه اتفاق می افتد را تغییر دهید.
مشکلی وجود دارد لطفاً اینجا را اصلاح کنید!
پرس و جوهای کمیت با CSS :has
من برای اولین بار در مورد درخواست های کمیت از طریق این مقاله توسط Heydon Pickering در A List Apart آشنا شدم. خوبی این است که می توانیم با CSS از آنها استفاده کنیم :has().
ایده استفاده از CSS است :nth-last-child مانند این:
li:nth-last-child(n + 5),
li:nth-last-child(n + 5) ~ li {
width: 50%;
display: flex;
flex-direciton: column;
}
این همه را انتخاب می کند
با CSS :has()، امکان پذیر است.
در اینجا یک مثال است:
.wrapper {
--item-size: 300px;
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(var(--item-size), 1fr)
);
gap: 1rem;
}
.wrapper:has(li:nth-last-child(n + 5)) {
--item-size: 200px;
}
من از یک متغیر CSS برای نشان دادن عرض عنصر در داخل استفاده کردم minmax() تابع بیایید با این در CSS بازی کنیم :has().
نسخه ی نمایشی تعاملی زیر را بررسی کنید. این چیزی است که اتفاق می افتد:
- یک درخواست مقدار با CSS وجود دارد
:has(). من 3 تا از آنها دارم. - وقتی تعداد آیتم ها تغییر کرد، کوئری منطبق اجرا می شود.
–element-size: 220px;
}
–element-size: 170px;
}
–element-size: 130px;
}
عنوانی را انتخاب کنید که بعد از پیوند آمده است
اگر عنصر دیگری به دنبال آن باشد، می توانیم انتخاب کنیم. در این مثال می خواهم انتخاب کنم فقط اگر دنبال شود
بدون CSS :has()، ما فقط به موارد زیر محدود می شویم:
.prose a + h3 {
}
با CSS :has()، ما می توانیم مستقیماً این کار را انجام دهیم.
a:has(+ h3) {
display: inline-flex;
background-color: var(--brand-1);
color: #fff;
padding: 0.5rem 1rem;
border-radius: 8px;
}
با نسخه ی نمایشی تعاملی زیر بازی کنید.
همه را انتخاب کنید الف که دارند h3 مستقیماً بعد از آن
HTML
div class="prose">
h2 >Main headingh2>
p>Description textp>
a href="#">Read more herea>
p>CSS is awesome.p>
h3>Sub title in hereh3>
div>
نتیجه
عنوان اصلی
متن توضیحات
ادامه مطلب را اینجا بخوانید
CSS عالی است.
[h3] عنوان فرعی در اینجا
نقشه با دکمه غیرفعال
در این مثال، ما یک کارت محصول با یک کالا در انبار داریم. زمانی که کالای سهام دارای کلاسی از .out-of-stock، می خواهیم سبک نقشه را تغییر دهیم.
میتوانیم دکمه «افزودن به سبد خرید» را مخفی کنیم یا «در صورت موجود بودن به من اطلاع بده» را نشان دهیم. هر چیزی که برای مورد شما بهترین کار را دارد.
.card:has(.out-of-stock) .button {
display: none;
}
چک باکس را تغییر دهید.
باریستای حرفه ای
در خانه یک باریستا باشید.
5 مورد باقی مانده است
به سبد خرید اضافه کنید
گزینه دیگر برای همان کیس اضافه کردن یک برچسب در بالای کارت محصول است. اینها تصمیمات صرفاً طراحی هستند و نسخه ی نمایشی فقط یکی از راه حل های ممکن را نشان می دهد.
.card {
&:has(.outOfStock) {
position: relative;
&:after {
content: "Not available";
position: absolute;
inset-inline: 0;
top: 0;
color: #fff;
background-color: rgb(255 0 0 / 76%);
}
}
}
سعی کنید “از انبار” را تغییر دهید و ببینید چه اتفاقی می افتد.
چک باکس را تغییر دهید.
باریستا پرو
در خانه یک باریستا باشید.
5 مورد باقی مانده است
کارت با دکمه شناور
اگر دکمه ای را نگه دارید، می توانیم یک افکت شناور روی نقشه اضافه کنیم.
سعی کنید ماوس را روی دکمه نگه دارید و ببینید سایه نقشه چگونه تغییر می کند. این همه با CSS است :has().
ماوس را روی دکمه نگه دارید
برای من مثل این است :focus-within. شاید باید بهش زنگ بزنم :hover-within?
.card:has(.button:hover) {
box-shadow:
0 2px 4px 0 rgba(#000, 0.15),
0 3px 25px 0 rgba(#000, 0.15);
}
سبک دوم را تغییر دهید و یک گزینه سبک متفاوت را ببینید. این همه با CSS انجام می شود :has().
.card {
&:has(.button:hover) {
color: #fff;
background-color: var(--brand-1);
box-shadow:
0 0 0 7px var(--brand-1),
0 2px 20px 0 rgba(#000, 0.25),
0 3px 45px 0 rgba(#000, 0.25);
.button {
color: inherit;
}
h3,
p {
color: inherit;
}
}
}
مدال
در یک حالت، ممکن است لازم باشد رنگ عنوان را تغییر دهیم، اگر این یک اقدام مهم است، مانند حذف چیزی مهم.
نسخه ی نمایشی زیر را بررسی کنید. ما یک مودال با دکمه های عمل داریم.
آیا مطمئن هستید که می خواهید تغییرات را ذخیره کنید؟
این قابل واگرد نیست.
چیزی که من می خواهم این است که وجود داشته باشد .btn--danger عنوان کلاس باید قرمز باشد. به طور معمول، ما باید کلاسی مانند این را به هدر مدال اضافه کنیم:
div class="modal modal--danger">
div class="modal-header">
h2>Edit projecth2>
div>
div>
و سپس آن را به این شکل استایل کنید:
.modal--danger h2 {
color: red;
}
با CSS :has()، تنها کاری که باید انجام دهیم موارد زیر است:
.modal {
&:has(.btn--danger) {
.modal-title {
color: red;
}
}
}
نسخه ی نمایشی تعاملی را بررسی کنید.
آیا مطمئن هستید که می خواهید تغییرات را ذخیره کنید؟
این قابل واگرد نیست.
دکمه های مدال
در این مثال، ما یک مدال با دکمه های عمل متعدد داریم. مشکل اینجاست که می خواهیم طرح بندی را بر اساس تعداد دکمه ها تغییر دهیم.
علامت چک را تغییر دهید و ببینید چه اتفاقی می افتد.
توجه کنید که چیدمان چگونه تغییر کرده است؟ این اتفاق با CSS افتاد :has() فقط این شگفت انگیز است که چه کاری می توانیم با آن انجام دهیم!
HTML زیر را ببینید.
div class="modal-actions">
a href="#" class="btn btn--secondary">Cancela>
a href="#" class="btn btn--ter">Save drafta>
a href="#" class="btn btn--primary">Submita>
div>
در CSS باید بررسی کنیم که آیا تعداد دکمه ها سه عدد است یا خیر. اگر بله:
- آخرین مورد را در سمت راست قرار دهید
- تغییر دهید
justify-contentبهstretch
.modal-actions {
display: flex;
justify-content: center;
gap: 0.5rem;
&:has(.btn:nth-last-child(n + 3)) {
justify-content: stretch;
.btn:last-child {
margin-inline-start: auto;
}
}
}
ما حتی می توانیم جلوتر برویم و تغییرات بیشتری در سبک ایجاد کنیم. به عنوان مثال:
- رنگ پس زمینه را تغییر دهید
- یک قاب اضافه کنید
- یک پد اضافه کنید
- بازنشانی پدها با فیلدهای منفی (نوعی هک)
این CSS است:
.modal-actions {
&:has(.btn:nth-last-child(n + 3)) {
justify-content: stretch;
border-top: 1px solid #d3d3d3;
background-color: #f5f5f5;
padding: 0.75rem;
margin-inline: -1rem;
margin-bottom: -1rem;
.btn:last-child {
margin-inline-start: auto;
}
}
}
بخش خالی است
در این مثال CSS :has() برای تشخیص اینکه آیا یک بخش حاوی عنصری با محتوای خالی است یا خیر استفاده می شود. اگر بله، پس از آن طرح تغییر خواهد کرد.
قبل از CSS :has()، این باید در جاوا اسکریپت انجام شود. حالا با CSS :has() کمک کنید، ما می توانیم جاوا اسکریپت مورد نیاز را به میزان قابل توجهی کاهش دهیم.
در اینجا فهرست مطالب آمده است.
وقتی محتوا وجود ندارد، باید به شکل زیر باشد:
ما می توانیم بررسی کنیم :empty کلاس شبه روی والد و استایل های مورد نیاز خود را بسازید.
.section:has(.sectionContent:empty) {
}
این هم CSS کامل:
.section:has(.sectionContent:empty) {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 150px;
.sectionHeader {
p:first-child {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
&:before {
content: "";
--size: 3rem;
display: block;
width: var(--size);
height: var(--size);
background-color: lightblue;
border-radius: 50%;
}
}
p:last-child {
display: block;
}
}
}
با دمو زیر بازی کنید.
طرح کلی: 2px صورتی تیره.
}
حالت های ورودی
با CSS :has()، می توانیم وضعیت ورودی مانند چک باکس، دکمه رادیویی یا منوها موارد استفاده جالبی در ترکیب وجود دارد :has() با حالت های ورودی
چک باکس و CSS :has
ما می توانیم مقدار یک چک باکس را بررسی کنیم و در نتیجه کاری انجام دهیم. دمو زیر را بررسی کنید:
اگر کادر علامت زده شود، دکمه فعال خواهد شد.
ماوس را روی جعبه یا دکمه نگه دارید.
.btn {
کدورت: 1;
اشاره گر رویدادها: اولیه;
}
}
شرایط و ضوابط
قبل از اقدام به مرحله بعدی، لطفاً مطمئن شوید که با شرایط خدمات ما موافقت می کنید.
بعدی
مانند دستور if در جاوا اسکریپت یا وضعیت React است. جالبه، نه؟
دکمه رادیویی و CSS :has
اگر بخواهیم CSS را بر اساس دکمه رادیویی انتخاب شده تغییر دهیم چه؟ این نیز امکان پذیر است. در مثال زیر، در صورتی که کاربر «ارسال استاندارد» را انتخاب کند، یادداشتی نمایش داده می شود.
دمو زیر را بررسی کنید:
ماوس را روی جعبه یا دکمه نگه دارید.
}
منو و CSS :has را انتخاب کنید
همچنین میتوانیم گزینه a در حال حاضر انتخاب شده را بررسی کنیم . یک مثال رایج نمایش مشروط یک فیلد ورودی است.
برای مثال، اگر کاربر «دیگر» را انتخاب کند، میخواهیم ورودی را نشان دهیم تا به او اجازه دهیم اطلاعات بیشتری را پر کند.
}
کمی از خودتان بگویید
یک گزینه تحویل را انتخاب کنید.
بعدی
ویژگی های HTML
ویژگی غیرفعال شده است
اگر دکمه دارد disabled ویژگی، ما میتوانیم اطلاعات اضافی را نمایش دهیم تا به کاربر اطلاع دهیم که چیزی گم شده است.
}
یک نمایه جدید ایجاد کنید
یک گزینه تحویل را انتخاب کنید.
قبل از ایجاد یک حساب کاربری، ابتدا باید حساب خود را تأیید کنید. لطفا ایمیل خود را بررسی کنید.
شما نمی توانید یک پروفایل ایجاد کنید.
این مثال از این مقاله عالی توسط ویتالی فریدمن برای مجله Smashing الهام گرفته شده است.
Double Hover با داده و :دارای ویژگیها
با ترکیب ویژگی های داده و CSS :has()، ما می توانیم یک اثر واقعا جالب ایجاد کنیم. میتوانید یک عنصر را با نگهداشتن ماوس روی عنصر دیگر فعال کنید، و لازم نیست آنها در یک والد باشند.
من اولین بار این را از رودریگو پومبو و من مثل 😱 بودم
ایده این است که یک ویژگی داده برای دو یا چند عنصر اضافه کنید و سپس استفاده کنید :has() برای دانستن زمانی که یکی از عناصر نگه داشته شده است و عناصر دیگر با ویژگی داده مشابه را راه اندازی می کند.
div class="wrapper">
ul class="tags">
li data-name="css">CSSli>
li data-name="design">Designli>
ul>
div>
article data-name="css">article>
article data-name="design">article>
div>
div>
.wrapper:has([data-name="css"]:hover) [data-name="css"] {
outline: 2px solid;
}
دمو زیر را بررسی کنید:
نمونه ای از چرخش دوبل
فرض کنید یک ویجت داریم که شامل نمونه کار من است. من می خواهم به هر یک پیوند داشته باشم و در عین حال عناصر را با تصاویر پیوند دهم. ما می توانیم تصاویر را به عنوان شبه عناصر اضافه کنیم، اما این یک هک است.
با CSS :has()، می توانیم تصاویر را در یک عنصر جداگانه داشته باشیم و برای هر پیوند و تصویر یک ویژگی داده مشترک اضافه کنیم.
div class="work">
p>
I wrote a book on
a data-name="book" href="https://debuggingcss.com/">
Debugging CSS a
>.
p>
div>
img data-name="book" src="book.jpg" alt="" />
div>
div>
ماوس را روی یکی از پیوندها نگه دارید.
.work:has(a[data-name="book"]:hover) {
img[data-name="book"] {
transform: scale(1.1);
}
}
امکانات بی پایان هستند.
ویژگی دانلود
با بررسی برای download ویژگی روی یک پیوند، میتوانیم یک نماد دانلود برای نشان دادن این موضوع اضافه کنیم. موارد زیر را ببینید:
.content:has(a[download]):before {
}
در اینجا یک نسخه ی نمایشی تعاملی است. توجه کنید که چگونه زمانی که یک رابطه با download. طراحی تغییر می کند (چک مارک را تغییر دهید).
راهنمای غذا.
اگر علاقه دارید، می توانید ادامه مطلب در مورد راهنما.
div class="content">
p>Food guidep>
p>You can a href="#">Read morea> about the guide
.p>
div>
لیست معکوس
در HTML می توانیم اضافه کنیم reversed به یک لیست نسبت داده شود و این شماره گذاری را معکوس می کند. چرا اگر لیست مورد احترام قرار می گیرد، یک نماد اضافه نمی کنید؟
اینجاست:
.content:has(ol[reversed]) h3:before {
}
کنفرانس آینده
- روز CSS
- اجلاس رهنمودهای وب
- Smashing Conf
div class="content">
ol reversed>
ol>
div>
مسابقه با سوالات
این یک استفاده جالب از CSS است :has(). من از آن برای:
- رنگ هدر را بسته به درستی یا نبودن پاسخ تغییر دهید
- اگر پاسخ اشتباه باشد، پاسخ صحیح به رنگ سبز چشمک می زند.
با دمو زیر بازی کنید:
- پاسخ اشتباه را انتخاب کنید (اول و آخر)
- پاسخ صحیح را انتخاب کنید (دوم)
این HTML است:
div class="question">
div class="questionHeader">div>
div class="list">
div class="answer">
input type="radio" data-correct="false" />
label for="option-0">Responsive designlabel>
div>
div>
div>
هر گزینه در لیست پاسخ دارای یک است data-correct ویژگی HTML. این برای یافتن پاسخ صحیح مفید خواهد بود.
در CSS ما درخواست می کنیم .question ظرف و ببینید آیا پاسخی مطابق با زیر وجود دارد:
- تایید شده توسط کاربر
- وجود دارد
data-correct=falseیاdata-correct=true
اگر نادرست است، رنگ قرمز را اضافه می کنیم.
.question:has(input[data-correct="false"]:checked) {
.questionHeader {
box-shadow: inset 0 7px 0 0 var(--wrong);
background-color: var(--wrong-bg);
}
}
و اگر درست باشد رنگ سبز است.
.question:has(input[data-correct="true"]:checked) {
.questionHeader {
box-shadow: inset 0 7px 0 0 var(--correct);
background-color: var(--correct-bg);
}
}
برای انیمیشن چشمک زن، باید تشخیص دهیم که آیا پاسخ اشتباه است و سپس یک انیمیشن CSS را به پاسخ صحیح اضافه کنیم.
.question:has(input[data-correct="false"]:checked) {
input[data-correct="true"] + label {
animation: flash 1s infinite alternate;
}
}
@keyframes flash {
from {
background-color: white;
}
to {
background-color: #5ed235;
}
}
چگونه با یک مورد استفاده مواجه می شوید که در آن باید یک هدر را به صورت مشروط بپیچید؟
به عنوان مثال، در صفحه اصلی برای کاربرانی که وارد نشدهاند، هدر کل عرض نمای را اشغال میکند. برای کاربر ثبت نام شده، محتوای سرصفحه در یک بسته بندی حداکثر عرض است.
دمو زیر را ببینید و سعی کنید کادر انتخاب را روشن و خاموش کنید.
HTML
div class="header">
a href="#">Logoa>
nav>nav>
div>
توجه کنید که چگونه وقتی یک لفاف وجود دارد، محتوا در آن وجود دارد. نشانگرهای سمت چپ و راست نشان دهنده فضا هستند.
فرض کنید می خواهیم یک Flexbox را در هدر اعمال کنیم. اگر wrapper وجود نداشته باشد، flexbox به خود هدر اعمال می شود. اگر لفافی وجود دارد، فلکس باکس را روی لفاف اعمال می کنیم.
.siteHeader:not(:has(.headerWrapper)) {
display: flex;
justify-content: space-between;
align-items: center;
}
.siteHeader:has(.headerWrapper) {
.headerWrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
}
به این ترتیب flexbox به صورت مشروط بر اساس وجود یک لفاف اعمال می شود.
انگشت شست روی نقشه
ممکن است یک کارت همیشه تصویر نداشته باشد. اگر کارت تصویری نداشته باشد، می توانیم سبک را کمی تغییر دهیم.
.card:not(:has(img)) {
}
کوکی های خوشمزه
طرز تهیه بیسکویت های عالی در خانه را یاد بگیرید.
انگشت شست روی نقشه – افقی
یا ممکن است لازم باشد در صورت وجود تصویر، نقشه را به سبک افقی تغییر دهیم.
article class="card">
div>
h3>Yummy cookiesh3>
p>Learn how to make great cookies at home.p>
div>
article>
کوکی های خوشمزه
طرز تهیه بیسکویت های عالی در خانه را یاد بگیرید.
در مثال زیر ناوبری داریم. وقتی یکی از
:has() برای اضافه کردن یک فلش به
.
li:has(.subMenu) {
display: flex;
justify-content: space-between;
align-items: center;
}
li:has(.subMenu) a:after {
}
ul class="nav">
li>
a href="/products">Productsa>
li>
li>li>
li>li>
ul>
بر اساس مثال قبلی، فرض کنید یک زیر منو با تعداد پویا آیتم ها داریم. ما می توانیم شبکه منو را بر اساس تعداد آیتم ها تغییر دهیم.
با دکمه های افزودن و حذف در نسخه ی نمایشی بازی کنید تا خودتان ببینید.
ul class="nav">
li>
a href="/products">Productsa>
ul class="subMenu">
li>a href="#">Item 1a>li>
li>a href="#">Item 2a>li>
li>a href="#">Item 3a>li>
li>a href="#">Item 4a>li>
li>a href="#">Item 5a>li>
ul>
li>
ul>
این کار از طریق انجام می شود :nth-last-child
.submenu:has(li:nth-last-child(n + 6)) {
display: grid;
grid-template-columns: 1fr 1fr;
width: 250px;
}
.submenu:has(li:nth-last-child(n + 8)) {
grid-template-columns: 1fr 1fr 1fr;
width: 350px;
}
بخش مقالات
این مثال از CSS جن سیمونز الهام گرفته شده است :has() مقاله وب کیت ایده این است که اگر مقاله حاوی تصویر باشد، شبکه CSS را تغییر دهید.
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
}
.article:has(img) {
grid-column: span 2;
grid-row: span 2;
}
با دمو زیر بازی کنید:
تسلط بر تارت میوه
تکمیل هنر ایجاد یک تارت میوه ای.
نهایی براونی بلیس
پخت خود را با براونی های غیر قابل مقاومت افزایش دهید
تسلط بر تارت میوه
اسرار پخت کامل فوکاچیا را باز کنید.
div class="grid">
article>
p>Fruit Tart Masteryp>
p>Perfecting the art of fruity tart creation.p>
article>
article>article>
div>
ما می توانیم این را ادامه دهیم و تغییرات زیادی ایجاد کنیم. به عنوان مثال، من میخواهم به شبکه سبک متفاوتی بدهم اگر:
- دارای یک شبکه دو عنصری است
- هر دو مورد دارای عکس هستند
بخش شخصیت ها
در این مثال ما یک بخش قهرمان داریم. وقتی تصویری وجود ندارد، محتوا باید در مرکز قرار گیرد. هنگامی که یک تصویر وجود دارد، متن و تصویر را در کنار هم نمایش می دهد.
.hero {
text-align: center;
}
.hero:has(img) {
grid-template-columns: 2fr 1fr;
text-align: start;
}
تارت میوه ای.
طرز تهیه تارت نهایی را یاد بگیرید.
section>
div class="sectionContent">div>
div class="sectionThumb">
div>
section>
اقدامات کارت
در این دمو، ما یک نقشه با دو حالت ممکن برای اقدامات داریم:
- لینک “دیدن دستور غذا”.
- عملکردهای چندگانه: “پسندیدن، اشتراک گذاری، منوی زمینه”
می توانیم از CSS استفاده کنیم :has() برای بررسی اینکه آیا یکی از اول یا آخر موارد وجود دارد و UI را متناسب با آن تغییر دهید.
.card:not(:has(img)) {
background-color: color-mix(in srgb, var(--brand-1), #fff 95%);
border-left: 4px solid var(--brand-1);
max-width: 250px;
}
.cardActions:has(.start, .end) {
display: flex;
justify-content: space-between;
align-items: center;
}
دمو زیر را بررسی کنید:
تارت میوه ای
طرز تهیه بیسکویت های عالی در خانه را یاد بگیرید.
article class="card">
img src="thumb.jpg" alt="" />
div class="content">
div class="cardActions">
a href="#">View recipea>
div>
div>
article>
Outro
CSS :has() یک ویژگی قدرتمند است که امکانات زیادی را که قبلاً ممکن نبودند را به شما باز می کند. این به معنای واقعی کلمه به ما ابرقدرت های CSS می دهد! توصیه می کنم از همین امروز شروع به استفاده از آن کنید و آن را آزمایش کنید.
منابع
آیا از خواندن آن لذت بردید؟ اگر می خواهید از کار من حمایت کنید،
فکر کن برای من قهوه بخری
این راهنمای تعاملی 6 هفته طول کشید
به 54 فنجان قهوه ترجمه می شود.
با تشکر لاته!
