از ویژگیهای اسکرول اسنپ کمتر شناخته شده گرفته تا پالتهای رنگی جدید شگفتانگیز، در اینجا ۱۰ بهروزرسانی Cascading Style Sheets وجود دارد که نمیخواهید از دست بدهید.
- لایه های آبشاری
- ویژگی بی اثر
- The :has pseudo-class
- طرح بندی شبکه و زیرشبکه
- گزینه accent-color
- پیمایش snap
- ویژگیهای منطقی CSS (در خط و مسدود)
- پرسمانهای کانتینر
- @when و @else
- سه پالت رنگ جدید
Cscading Style Sheets (CSS) اولین بار در سال ۱۹۹۶ منتشر شد، و همچنان یک بخش اساسی و در حال تکامل از پشته توسعه وب است. مانند سایر زبان های زنده، CSS به طور مداوم ویژگی های جدیدی را در پاسخ به شیوه های دنیای واقعی معرفی می کند. این تکامل سریع می تواند حتی توسعه دهندگان اختصاصی را نیز از دست دادن ویژگی های جدید آسان کند. در اینجا نگاهی به مفیدترین ویژگی های جدید و آینده در CSS در سال جاری می اندازیم.
لایه های آبشاری
لایههای آبشاری توضیحی درباره نحوه ویژگی CSS و وراثت کار می کند. درک آن کمی انتزاعی است، اما برای CSS نیز اساسی است. یک لایه نوعی فضای منطقی است که در الگوریتمی که یک موتور CSS برای تعیین سبکهای اعمال بر عناصر بر اساس آبشار، ویژگی و وراثت استفاده میکند، وارد میشود.
مورد استفاده اصلی برای لایهها، ترکیب چندین منبع سبک در یک پروژه را آسانتر میکند. چندین کتابخانه منبع CSS را میتوان بهعنوان مضامین نامگذاریشده ترکیب کرد که تضاد داخلی ندارند، و همکاری تیمهای مختلف در پایگاههای کد CSS بزرگ و متنوع را آسانتر میکند.
مجموعه دستوری اصلی قانون @layer
و معادلهای برنامهای مربوط به آن است. در مجموعه ای از سبک های اعلام شده با @layer
، همه سبک ها با هم آبشار می شوند. ترتیب لایههای وارد شده تعیین میکند که چگونه تداخلها در صفحه مصرفکننده حل میشوند.
مشخصات لایههای Cascade میگوید:
به عنوان مثال، میتوانید دو سبک لایه، @main
و @library
را تعریف کنید. وقتی آنها را وارد میکنید، ترتیب وارد کردن لایه تعیین میکند که کدام استایل اولویت دارد. لایههای آبشاری حل و فصل سبکهای رقیب را در سطح لایه ممکن میسازد، بهجای اینکه مجبور شوید به لایه اصلی بروید و تضادها را در سطح سبک بررسی کنید.
ویژگی بی اثر
اکنون اکثر مرورگرها (از جمله Chrome، Edge و Safari) از inert
پشتیبانی میکنند. در زمان نگارش این مقاله، قرار است به فایرفاکس ۱۱۲ اضافه شود.
ویژگی بیاثر
یک است ویژگی جهانی که می تواند روی هر عنصری استفاده شود تا نشان دهد تعاملی نیست. این چیزی شبیه به یک ویژگی کلی تر غیرفعال
است. در واقع، inert
هنگامی که توسط دکمه های کنترل مانند اعمال می شود (یا به ارث می رسد) همان اثر را دارد. ویژگی inert
همچنین عناصر را برای فناوری کمکی مانند صفحهخوانها نامرئی میکند.
بنابراین آنچه inert
به ما میدهد راهی برای تعریف منفی بخشهای غیرفعال رابط کاربری است، در حالی که قبلاً مجبور بودیم قسمتهای فعال را به طور مثبت تعریف کنیم.
:has pseudo-class
شبه کلاس :has
یک افزونه جالب است به جنبه انتخابگر CSS. از زمان نگارش این مقاله، همه مرورگرهای اصلی به جز فایرفاکس از آن پشتیبانی می کنند، با فایرفاکس به شما این امکان را می دهد که با تنظیم layout.css.has-selector.enabled
روی true، شرکت کنید.
به عنوان وضعیت اسناد MDN، < code>:has “روشی برای انتخاب یک عنصر والد یا یک عنصر خواهر یا برادر قبلی با توجه به یک عنصر مرجع با استفاده از لیست انتخابگر نسبی به عنوان یک آرگومان.”
در اصل، :has
به شما امکان می دهد عناصری را انتخاب کنید که حاوی عناصر دیگری هستند. برای مثال، اگر میخواهید همه
هستند انتخاب کنید، میتوانید از :has
استفاده کنید. انتخابگر همانطور که در فهرست ۱ نشان داده شده است.
div:has(span)
این به عنوان راهی برای انتخاب عناصر در زنجیره انتخابگر بسیار مفید است، اما در آنجا وجود دارد بیشتر است. برای مثال، میتوانید تمام
div:has(+ p)
طرح بندی شبکه و زیرشبکه
از زمان آغاز به کار، توسعه دهندگان از برخی کاستی های هیولایی در CSS شکایت کرده اند. برخی از کارهای معمولی، مانند متمرکز کردن چیزی، نیاز به راهحلهای بسیار پیچیده و رفع مشکل دارند. مشکل بزرگ دیگر داشتن یک طرح بندی شبکه معقول بود، حداقل تا زمانی که ماژول طرح بندی شبکه ای CSS وارد نفوذ شود.
گرید اکنون به طور کامل پشتیبانی و استاندارد شده است در همه مرورگرها.
طرحبندی شبکهای با اعلان display: grid
نشان داده میشود و نوعی پسرعموی Flexbox است، به این ترتیب که به شما امکان میدهد طرحبندیهای مستطیلی را تعریف کنید، اما همچنین شبکه خود را در دو بعد کنترل کنید. تحقیقات نشان میدهد که اکثر توسعهدهندگانی که در CSS دست ما هستند از Grid Layout آگاه هستند و بسیاری از آن استفاده میکنند.
مقدار subgrid
یک ویژگی جدیدتر و بسیار مفید برای ماژول Grid Layout است. subgrid
به شما امکان می دهد یک شبکه فرزند تعریف کنید که طرح بندی والدین خود را به ارث می برد. این متفاوت از تودرتو کردن یک نمایشگر شبکه ای در دیگری است. در آن صورت، شبکه کودک ابعاد و شکاف های خود را مشخص می کند. با subgrid
، طرحبندی والد اعمال میشود، اما در صورت لزوم، زیرشبکه همچنان میتواند جنبههای طرحبندی را لغو کند.
در زمان نگارش این مقاله، شبکه فرعی در Firefox 71 یا بالاتر و Safari 16 و بالا در نقشه راه گوگل کروم و مایکروسافت اج قرار دارد. مقدار subgrid
در آینده یک ویژگی طرح بندی بسیار مفید خواهد بود.
گزینه accent-color
بهرغم استفاده از برخی عناصر نمایشگر، بهطور سنتی سبکدهی دشوار است. به عنوان مثال، چک باکس ها و دکمه های رادیویی اغلب با یک ویجت سفارشی جایگزین می شوند که رفتار این عناصر را تقلید می کند در حالی که اجرای مرورگر را پنهان می کند. گزینه accent-color
جدید CSS به شما امکان می دهد این عناصر را هدف قرار دهید.
به عنوان مثال، همانطور که در فهرست ۳ نشان داده شده است، می توانید رنگ سرخابی را به همه دکمه های رادیویی صفحه خود اعمال کنید (این نمونه زنده).
<style>
input[type="radio"] {
accent-color: magenta;
}
</style>
<form action="/foo.bar">
<p>Select your favorite outdoor adventure type</p>
<input type="radio" id="mountain" name="type" value="mountain">
<label for="mountain">Mountain</label><br>
<input type="radio" id="ocean" name="type" value="ocean">
<label for="ocean">Ocean</label><br>
<input type="radio" id="desert" name="type" value="desert">
<label for="desert">Desert</label>
</form>
پیمایش snap
CSS مجموعهای مفید از ویژگیها را برای کنترل عملکرد اسکرول در مرورگر وب ارائه میکند. برخی از بخشهای این قابلیت چند سالی است که وجود دارد، در حالی که برخی دیگر هنوز برای نسخه های جدیدتر مرورگر.
نکته جالب این است که تا سال ۲۰۲۲، بیش از یک سوم کاربران CSS هنوز نبودند’ از اسکرول اسنپ آگاه نیست.
فرمان خصوصیات scroll-snap-*
راههای زیادی برای تنظیم دقیق نحوه عملکرد موقعیت اسکرول در یک ظرف به شما ارائه میدهد. توسعهدهندگان دقت بیشتری دارند و کاربران نهایی تجربه کاربری روانتر و کنترلشدهتری دارند. فهرست ۴ نمونه کوچکی از کنترل اسکرول اسنپ در div
را ارائه می دهد (این را نیز ببینید مثال زنده).
<style>
.scroll-container,
.scroll-area {
max-width: 850px;
height: 300px;
font-size: 60px;
}
.scroll-container {
overflow: auto;
scroll-snap-type: y mandatory;
height: 500px;
}
.scroll-area {
scroll-snap-align: start;
}
.scroll-container,
.scroll-area {
margin: 0 auto;
}
.scroll-area {
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.scroll-area:nth-of-type(1) { background: IndianRed; }
.scroll-area:nth-of-type(2) { background: Moccasin; }
.scroll-area:nth-of-type(3) { background: thistle; }
.scroll-area:nth-of-type(4) { background: seagreen; }
</style>
<div class="scroll-container">
<div class="scroll-area">1</div>
<div class="scroll-area">2</div>
<div class="scroll-area">3</div>
<div class="scroll-area">4</div>
</div>
مهم نیست حرکت اسکرول را در کجا رها کنید، موقعیت اسکرول y در فهرست ۴ به طور خودکار به عنصر فرزند منتقل میشود. این به این دلیل است که محفظه اسکرول دارای ویژگی scroll-snap-type
است که روی y الزامی
تنظیم شده است، و عناصر فرزند دارای scroll-snap-align: start< هستند. /code> اعلامیه.
شما همچنین می توانید این رفتار را تغییر دهید. برای مثال، میتوانید ویژگی scroll-snap-type
را روی y proximity
تنظیم کنید. همانطور که انتظار دارید انجام میشود و فقط زمانی میچپد که اسکرول به نزدیکی عنصر نزدیک شود.
بهعنوان یادداشت جانبی، Overscroll-behavior ویژگی a> به شما امکان می دهد نحوه رفتار ظروف پیمایش تودرتو را تعریف کنید.
ویژگی های منطقی CSS (داخلی و بلوک)
اگر تا به حال میخواهید یک حاشیه کانتینر در سمت چپ و راست، یا پایین و بالا تنظیم کنید، آزاردهندهای را تجربه کردهاید که مجبور هستید حاشیههای چپ و راست، یا حاشیه بالا و بالا را بنویسید. ویژگی های border-bottom کلمه به کلمه. مسئله این است که هیچ راهی برای استفاده از ویژگی میانبر بدون تأثیر بر مرزهایی که نمی خواهید دستکاری کنید وجود ندارد. این ناراحتی در مورد عناصری مانند بالشتک و حاشیه نیز صدق می کند.
ماژول CSS Logical Properties به شما امکان می دهد از inline
و مسدود کردن
کلمات کلیدی برای اشاره به چیزها به صورت انتزاعی. وقتی می خواهید در مورد چپ و راست صحبت کنید، از inline
استفاده کنید. وقتی می خواهید به بالا و پایین اشاره کنید، از block
استفاده کنید. برای مثال، برای تنظیم حاشیه در سمت چپ و راست یک div
، میتوانید از کد موجود در فهرست ۵ استفاده کنید (نمونه زنده اینجا).
div {
border-inline: 10px dashed seagreen;
}
اینها میانبرهای مفیدی برای حاشیه ها هستند، اما همچنین می توانید کلیدواژه های منطقی inline
و block
را در میزبان خصوصیات دیگر.
بیشتر توسعه دهندگان از این میانبرها برای مقابله با جهت نوشتاری< استفاده می کنند. /a> و ملاحظات حالت نوشتن. در این موارد، استفاده از ویژگیهایی مانند padding-inline-end
به شما امکان میدهد بدون توجه به جهت متن فعال، padding را هدف قرار دهید. اساساً، انتزاع به inline
و block
اجازه می دهد تا سبک های تعمیم یافته ای را بنویسید که در تنظیمات مختلف اعمال می شود. برای بحث عمیقتر به ویژگیها و مقادیر منطقی CSS مراجعه کنید.< /p>
پرسمانهای کانتینر
پرسوجوهای کانتینر اکنون در CSS تثبیت شدهاند و توسط همه مرورگرهای اصلی پیادهسازی میشوند. آنها تأثیر زیادی بر نحوه تفکر ما در مورد طراحی واکنشگرا می گذارند. ایده اصلی این است که شما می توانید یک نقطه شکست را نه تنها بر اساس دیدگاه و رسانه، بلکه بر اساس اندازه یک ظرف والد تنظیم کنید.
نحو به طور کامل تعریف نشده است، اما احتمالاً چیزی شبیه فهرست ۶ خواهد بود.
@container (max-width: 650px){ … }
به این ترتیب، میتوانید طرحبندی را بر اساس اندازه کانتینرهای مختلف، که در سراسر لایههای تودرتوی یک رابط کاربری آشکار میشوند، تنظیم کنید.
@when و @else
در حالی که ما در مورد جستار جدید @container
فکر می کنیم، آیا می دانستید که @when و @else نیز در افق است؟ هنوز توسط هیچ یک از مرورگرهای اصلی پشتیبانی نمی شود، اما در آینده ای نه چندان دور ارائه خواهد شد.
جستجوهای @when
و @else
یک جریان منطقی مشروط به سبک if/then را هنگام برخورد با رسانهها و درخواستهای پشتیبانی فعال میکنند. آنها زندگی شما را در بسیاری از موقعیت ها و طرح بندی های CSS پیچیده ساده می کنند.
سه پالت رنگ جدید
از زمانهای بسیار قدیم، تمرینکنندگان CSS از RGB، HEX و رنگهای نامگذاری شده برای زیباسازی و زندهکردن نمایشگر دستگاه خود استفاده میکردند. اخیراً، اعلان رنگ به سبک HSL معرفی شده است. اکنون، مشخصات CSS راههای جدیدی را برای نشان دادن رنگها معرفی میکند. یعنی hwb
، lch
و lab
.
HWB مخفف رنگ، سفیدی و سیاهی است. این یک افزودنی منظم است که به دلیل خوانایی انسان قابل توجه است - شما یک رنگ را انتخاب می کنید و سپس سفید و سیاه را اضافه می کنید. در نسخه های اخیر کروم، فایرفاکس و سافاری پشتیبانی می شود. (مرجع ویژگی Microsoft Edge در مورد این موضوع به طرز عجیبی ساکت است.) به مراجعه کنید. hwb() – نماد رنگی برای انسان ها؟ برای کسب اطلاعات بیشتر در مورد HWB. مانند RGB و HWL، از یک کانال آلفا برای شفافیت پشتیبانی می کند.
LCH، مخفف lightness، chroma و hue، برای افزایش دامنه رنگهای موجود قابل توجه است. رنگهای LCH در CSS: what، چرا، و چگونه؟ یک مرور کلی خوب با یک بحث چشم باز از نظریه رنگ در CSS است.
LAB که از تئوری رنگ CIE LAB مشتق شده است، بیشترین تئوری ذهنی است. فضاهای رنگی جدید توصیفگر رنگ LAB مدعی است که طیف وسیعی از رنگ های قابل درک توسط انسان را در بر می گیرد، که کاملاً یک ادعا است. میتوانید درباره LAB برای CSS از مستندات Mozilla CSS.
هر دو LAB و LCH توسط همه مرورگرهای اصلی به جز Firefox پشتیبانی می شوند، که نیاز به تنظیم سوئیچ layout.css.more_color_4.enabled
روی true دارد.
پست های مرتبط
بهترین ویژگی های جدید CSS برای سال ۲۰۲۳
بهترین ویژگی های جدید CSS برای سال ۲۰۲۳
بهترین ویژگی های جدید CSS برای سال ۲۰۲۳