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

انتخابگرهای CSS سطح 4

مشخصات انتخابگرهای سطح 3 به خوبی در مرورگرها پیاده سازی شده و انتخابگرهای مفیدی مانند فرزند نهم انتخاب کنندگان سطح 4 راه های بیشتری برای هدف قرار دادن محتوا با CSS به ما می دهد.

شبه طبقه نفی :not

انتخابگر شبه کلاس نفی :نه در سطح 3 ظاهر می شود اما در سطح 4 ارتقا پیدا می کند. در سطح 3 می توانید از انتخابگر عبور کنید تا بگویید که نمی خواهید CSS روی این عنصر اعمال شود. برای ساختن تمام متن به جز متن با کلاس مقدمه شما می توانید از قانون زیر استفاده کنید.

p:not(.intro) { font-weight: normal; }

در سطح 4 مشخصات می توانید لیست انتخابگرها را با کاما جدا کنید.

p:not(.intro, blockquote) { font-weight: normal; }

شبه کلاس رابطه ای :has

این شبه کلاس یک لیست انتخابگر را به عنوان آرگومان می گیرد و اگر هر یک از آن انتخابگرها با یک عنصر مطابقت داشته باشد مطابقت خواهد داشت. دیدن آن با یک مثال ساده تر است، در این مثال هر کدام آ عناصری که حاوی یک تصویر هستند، حاشیه سیاه اعمال می شود:

a:has( > img ) { border: 1px solid #000; }

در این مثال دوم من ترکیب می کنم : دارد با :نه و فقط انتخاب لی عناصری که فاقد عنصر پاراگراف هستند:

li:not(:has(p)) { padding-bottom: 1em; }

منطبق با هر شبه کلاس : matches

این شبه کلاس به این معنی است که ما می توانیم قوانینی را برای گروه های انتخابگر اعمال کنیم، به عنوان مثال:

p:matches(.alert, .error, .warn) { color: red; }

برای تست مرورگر خود برای پشتیبانی از این انتخابگرهای پیشرفته و دیگر انتخابگرهای پیشرفته، می توانید از این تست استفاده کنید روی css4-selectors.com. آن سایت همچنین یک منبع عالی برای کسب اطلاعات بیشتر در مورد انتخاب کنندگان آینده است.

حالت های ترکیبی CSS

اگر با حالت های ترکیبی در فتوشاپ آشنا هستید، ممکن است به آن علاقه مند باشید مشخصات ترکیب و ترکیب. این مشخصات به ما این امکان را می‌دهد که حالت‌های ترکیبی را در پس‌زمینه‌ها و هر عنصر HTML دقیقاً در مرورگر اعمال کنیم. در CSS زیر یک کادر حاوی یک تصویر پس زمینه دارم. با افزودن رنگ پس زمینه و سپس تنظیم پس زمینه-ترکیب-حالت برای رنگ آمیزی و ضرب می توانم جلوه های جالبی را روی تصاویر اعمال کنم.

.box {
 background-image: url(balloons.jpg);
}

.box2 {
 background-color: red;
 background-blend-mode: hue;
}

.box3 {
 background-color: blue;
 background-blend-mode: multiply;
} 

استفاده از پس‌زمینه-ترکیب-حالت

ویژگی mix-blend-mode به شما امکان می دهد متن را ترکیب کنید روی بالای یک تصویر در مثال زیر من یک h1 سپس در جعبه 2 تنظیم کردم حالت ترکیبی: صفحه نمایش.

.box {
 background-image: url(balloons-large.jpg);
}
.box h1 {
 font-size: 140px;
 color: green;
}
.box2 h1 {
 mix-blend-mode: screen;
}

با استفاده از حالت ترکیبی

حالت های ترکیبی CSS در واقع در مرورگرهای مدرن به غیر از اینترنت اکسپلورر پشتیبانی بسیار خوبی دارند، به ماتریس پشتیبانی مراجعه کنید پس زمینه-ترکیب-حالت، حالت ترکیبی در سافاری و فایرفاکس در دسترس است و پشت ویژگی های آزمایشی در Opera و Chrome پرچم گذاری شده است. با استفاده دقیق، این دقیقاً همان نوع مشخصاتی است که می‌توانید برای بهبود طرح‌های خود شروع به بازی کنید، تا زمانی که موارد بازگشتی در مرورگرهای غیرپشتیبانی کننده ناخوانا باقی نماند. اگر نیاز به پشتیبانی کامل‌تر از مرورگرهای قدیمی دارید و احساس نمی‌کنید هنوز می‌توان از حالت‌های ترکیبی در تولید استفاده کرد، فراموش نکنید که می‌توانید در طول توسعه از این حالت‌ها استفاده کنید تا از سفر به فتوشاپ جلوگیری کنید. هنگامی که تصاویر و درمان ها را نهایی کردید، تصاویر تولیدی را در یک برنامه گرافیکی ایجاد کنید و جلوه های CSS را جایگزین کنید. درباره استفاده از حالت های ترکیبی با این مقاله کاربردی روی ترفندهای CSS، که در منابع روی وب سایت Adobe و روی را وب سایت Dev Opera.

تابع calc().

این calc() تابع بخشی از ماژول مقادیر و واحدهای CSS سطح 3. این بدان معناست که شما می توانید توابع ریاضی را درست در داخل CSS خود انجام دهید. استفاده ساده از calc() اگر بخواهید یک تصویر پس زمینه را از سمت راست پایین یک عنصر قرار دهید، می توانید پیدا کنید. قرار دادن یک عنصر 30 پیکسلی از بالا سمت چپ آسان است، شما می توانید از این موارد استفاده کنید:

.box {
 background-image: url(check.png);
 background-position: 30px 30px;
}

با این حال، وقتی ابعاد آن را نمی دانید، نمی توانید از پایین سمت راست این کار را انجام دهید container. توابع calc() به این معنی است که می توانید 30 پیکسل ما را از 100٪ عرض یا ارتفاع کم کنید:

.box {
 background-image: url(check.png);
 background-position: calc(100% - 30px) calc(100% - 30px);
}

پشتیبانی مرورگر برای calc() اگرچه در مرورگرهای مدرن خوب است می توانم استفاده کنم گزارش می دهد که استفاده از آن به عنوان یک مقدار موقعیت پس زمینه در IE9 منجر به از کار افتادن مرورگر می شود.

CSS Trickery و عملکرد Calc یک مقاله جالب در مورد استفاده از calc() برای حل یک مشکل CSS است. چند مورد استفاده ساده وجود دارد در ترفندهای CSS.

متغیرهای CSS

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

:root {
 --color-main: #333333; 
 --color-alert: #ffecef;
}

.error { color: var(--color-alert); }

متاسفانه پشتیبانی مرورگر برای متغیرهای CSS در حال حاضر به فایرفاکس محدود شده است. می توانید نمونه های بیشتری را ببینید و اطلاعات بیشتری در این زمینه کسب کنید این مقاله روی شبکه توسعه دهندگان موزیلا

استثناهای CSS

همه ما با شناورها در CSS آشنا هستیم. ساده ترین مثال ممکن است شناور کردن یک تصویر برای اجازه دادن به متن در اطراف آن باشد. با این حال، شناورها نسبتاً محدود هستند زیرا آیتم شناور همیشه به بالا می رود، بنابراین در حالی که می توانیم یک تصویر را به چپ شناور کنیم و متن را به سمت راست و زیر آن بپیچیم، هیچ راهی برای رها کردن تصویر در وسط سند و جریان متن وجود ندارد. دور تا دور، یا آن را در پایین قرار دهید و اجازه دهید متن در اطراف بالا و کنار جریان پیدا کند.

محرومیت ها به شما امکان می دهد متن را در تمام طرف های یک شیء قرار داده شده بپیچید. خود روش جدیدی برای موقعیت یابی تعریف نمی کند، بنابراین می تواند همراه با روش های دیگر استفاده شود. در مثال زیر من کاملاً یک عنصر را در موقعیت قرار می دهم روی بالای یک بلوک از متن، سپس آن عنصر را به عنوان یک استثنا با ویژگی اعلام می کنیم پیچیدن جریان با ارزش هر دو، بنابراین متن به موقعیت عنصر احترام می گذارد و به دور آن جریان می یابد.

.main {
 position:relative;
}
.exclusion {
 position: absolute;
 top: 14em;
 left: 14em;
 width: 320px;
 wrap-flow: both;
}

موارد استثنا در اینترنت اکسپلورر

پشتیبانی مرورگر برای حذف و wrap-flow: هر دو در حال حاضر محدود به IE10+ است و به پیشوند -ms نیاز دارد. توجه داشته باشید که Exclusions تا همین اواخر به مشخصات CSS Shapes مرتبط بود که در ادامه به آن نگاه می‌کنم، بنابراین برخی از اطلاعات آنلاین این دو را با هم ترکیب می‌کنند.

اشکال CSS

مشخصات Exclusions به پیچیدن متن در اطراف اشیاء مستطیلی می پردازد. Shapes توانایی بسیار قدرتمندتری را برای پیچیدن متن در اطراف اشیاء غیر مستطیلی، مانند جریان متن در اطراف یک منحنی، به ما می‌دهد.

سطح 1 از مشخصات CSS Shapes یک ویژگی جدید تعریف می کند شکل بیرونی این ویژگی قابل استفاده است روی یک عنصر شناور در مثال زیر من از shape-outside برای منحنی کردن متن در اطراف یک تصویر شناور استفاده می کنم.

.shape {
 width: 300px;
 float: left;
 shape-outside: circle(50%);
}

CSS Shapes به ما امکان می دهد متن را در اطراف تصویر توپک منحنی کنیم

پشتیبانی مرورگر برای Shapes Level 1 شامل کروم و سافاری است، به این معنی که می توانید از آن در شیوه نامه های دستگاه های iOS استفاده کنید. سطح 2 از مشخصات به شما این امکان را می دهد که متن را در داخل عناصر شکل دهید شکل داخل ویژگی، بنابراین چیزهای بیشتری از این ویژگی به دست می آید. در این مقاله A List Apart توسط Shapes بیشتر بخوانید سارا سویدان، و منابع همراه

طرح بندی شبکه CSS

من مورد علاقه ام را تا آخر گذاشتم. من از زمان اجرای اولیه در اینترنت اکسپلورر 10، از طرفداران زیادی از مشخصات در حال ظهور Grid Layout بوده ام. طرح بندی شبکه ای CSS راهی به ما می دهد تا ساختارهای شبکه ای مناسب با CSS ایجاد کنیم و طراحی خود را در آن شبکه قرار دهیم. طرح بندی شبکه ای روشی برای ایجاد ساختارهایی به ما می دهد که بی شباهت به استفاده از جداول برای چیدمان نیستند. با این حال، توصیف آن در CSS و نه در HTML به ما امکان می‌دهد طرح‌بندی‌هایی ایجاد کنیم که می‌توان با استفاده از پرس‌و‌جوهای رسانه‌ای دوباره تعریف کرد و با زمینه‌های مختلف تطبیق داد. این به ما امکان می دهد ترتیب عناصر در منبع را از نمایش بصری آنها به درستی جدا کنیم. به عنوان یک طراح، این بدان معناست که شما آزاد هستید که مکان را تغییر دهید page عناصری که برای چیدمان شما در نقاط شکست مختلف بهترین هستند و نیازی به به خطر انداختن یک سند با ساختار معقول برای طراحی پاسخگو شما ندارند. برخلاف طرح‌بندی مبتنی بر جدول HTML، می‌توانید آیتم‌ها را لایه‌بندی کنید روی شبکه. بنابراین در صورت لزوم، یک مورد می تواند با دیگری همپوشانی داشته باشد. در مثال زیر ما یک شبکه را اعلام می کنیم روی عنصر با کلاس از .لفاف. دارای سه ستون عرضی 100 پیکسلی با ناودان 10 پیکسلی و سه ردیف است. با استفاده از شماره خطوط قبل و بعد، بالا و پایین ناحیه ای که می خواهیم عنصر نمایش داده شود، کادرها را در داخل شبکه قرار می دهیم.

<!DOCTYPE html>
<html>
 <head>
 <title>Grid Example</title>
 <meta charset="utf-8">
 <style>
 body {
 margin: 40px;
 }
 .wrapper {
 display: grid;
 grid-template-columns: 100px 10px 100px 10px 100px;
 grid-template-rows: auto 10px auto;
 background-color: #fff;
 color: #444;
 }

 .box {
 background-color: #444;
 color: #fff;
 border-radius: 5px;
 padding: 20px;
 font-size: 150%;
 }

 .a { 
 grid-column: 1 / 2; 
 grid-row: 1 / 2;
 }
 .b { 
 grid-column: 3 / 4; 
 grid-row: 1 / 2;
 }
 .c { 
 grid-column: 5 / 6; 
 grid-row: 1 / 2;
 }
 .d { 
 grid-column: 1 / 2; 
 grid-row: 3 / 4;
 }
 .e { 
 grid-column: 3 / 4; 
 grid-row: 3 / 4;
 }
 .f { 
 grid-column: 5 / 6; 
 grid-row: 3 / 4;
 }


 </style>
</head>

 <body>

 <div class="wrapper">
 <div class="box a">A</div>
 <div class="box b">B</div>
 <div class="box c">C</div>
 <div class="box d">D</div>
 <div class="box e">E</div>
 <div class="box f">F</div>
 </div>
</body>
</html>

مثال شبکه در کروم

پشتیبانی از مرورگر برای آخرین مشخصات Grid با فعال بودن پرچم “ویژگی های پلتفرم وب آزمایشی” به Chrome محدود شده است. یک پیاده سازی کامل از نسخه اولیه مشخصات در اینترنت اکسپلورر 10 و بالاتر وجود دارد. درباره طرح بندی شبکه ای بیشتر بدانید روی من شبکه بر اساس مثال سایت، که در آن می‌توانید چندین نمونه Grid را ببینید که در Chrome کار می‌کنند، با ویژگی‌های آزمایشی پلتفرم وب فعال شده است. من همچنین سال گذشته در CSS Conf EU صحبت کردم روی Grid و شما می توانید آن ویدیو را ببینید اینجا.

آیا مشخصات در حال ظهور مورد علاقه ای دارید که در اینجا ذکر نشده است؟

امیدوارم از این گشت و گذار سریع در برخی از ویژگی های جالب و جدیدتر CSS لذت برده باشید. از منابع مرتبط استفاده کنید تا در مورد ویژگی هایی که برایتان جالب تر بوده اند بیشتر بدانید. در نظرات به من اطلاع دهید که آیا یک ویژگی CSS آینده مورد علاقه دارید که فکر می کنید مردم باید درباره آن بدانند، یا منابع عالی و مثال های اضافی برای هر یک از ویژگی هایی که توضیح دادم.

تصویر ویژه، موارد استفاده تصویر بالن از طریق Shutterstock.