چه CSS را در سال 2022 باید بدانید؟

ساشا گریف آشکارا تعجب کرد می دانید که آیا CSS خیلی بزرگ شده است. با تمام خوبی هایی که در چند سال گذشته در مرورگرها ارسال شده است - پرس و جوهای کانتینر! نحو نسبی رنگ! لایه های آبشاری! خواص منطقی! محدوده در پرسش های رسانه ای! تبدیل های فردی! :has() انتخابگر! - و همه چیزهایی که در افق ممکن است - کلیدهای CSS! تودرتویی! اختلاط رنگ! انیمیشن های مرتبط با اسکرول! سبک های محدوده! - قطعاً این روزها یک منحنی یادگیری متفاوت برای CSS برای افراد تازه کار و باتجربه وجود دارد.

ممکن است زمانی وجود داشته باشد که شناخت بیشتر ویژگی های CSS و نحوه کار آنها ممکن بوده است. آن روزها حداقل برای دست پیری مثل من خیلی وقت است که گذشته است. اما این نوع سوال پیش می آید: چه CSS را باید بدانید؟

وینکاس استونیز اخیرا به لیست ضربه زد. کریس یکی را کنار هم بگذار بر اساس ویژگی های منتشر شده از CSS3. احتمالاً ایده ای دارید که چه چیزی را در یک لیست قرار می دهید. اگر بخواهم یک تاپ 5 را کنار هم بگذارم و خودم را فقط به ویژگی ها و انتخابگرها محدود کنم، ممکن است چیزی شبیه به این باشد…

writing-mode

من نمی توانم به اندازه کافی در مورد آن بگویم writing-mode ویژگی. چیزی که آن را مهم می کند - به ویژه از منظر یادگیری - این است که شما را برای اصول فراگیر تنظیم می کند که صرف نظر از زبان کاربر، ایجاد طرح بندی را در نظر می گیرد. درک خوب از writing-mode به درک درستی از خواص و مقادیر منطقیو آنها نیز به نوبه خود، زمینه را برای درک جریان اسناد و تفکر در شرایط فراهم می کنند block, inline, startو end به جای جهت های فیزیکی

display

باور من برایم سخت است که کسی بتواند CSS خوب بنویسد بدون اینکه درک کاملی از آن داشته باشد display ویژگی. این هم یک ویژگی و هم یک چارچوب برای ایجاد طرح‌بندی است. هیچ Flexbox یا CSS Grid بدون آن وجود ندارد، و آن را به نوعی مانند دروازه‌بانی برای درک این ویژگی‌های مهم می‌سازد.

به علاوه ، display دارایی کاملا مکمل است writing-mode. این دقیقا همان چیزی است که یک بار به آن نیاز خواهید داشت writing-mode شما را در معرض جریان اسناد و جهت گیری های منطقی قرار داده است. شما برای تغییر جریان عادی یک عنصر (مانند تغییر یک عنصر بلوک به یک عنصر درون خطی) یا شروع به چیدمان چیزها (مانند ایجاد یک زمینه طرح بندی انعطاف پذیر) به یک ویژگی نیاز دارید و اینجاست. display به بازی می آید

margin / padding / border

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

::before و ::after

یکی دیگه که یه ذره دارم تقلب میکنم آره، ::before و ::after دو شبه عنصر منفرد هستند، اما باز هم، نمی توانم تصور کنم در مورد یکی بدون دیگری یاد بگیرم. این یک دو فر است!

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

@media

اوف، من در حال حاضر در پنجمین و آخرین مورد خود در لیست هستم و احساس می کنم هنوز خوبی های CSS زیادی وجود دارد که به اینجا تعلق دارد. اما اگر مجبور باشم آخرین مورد را انتخاب کنم، این خواهد بود داستان های رسانه. چرا؟ زیرا یک عنصر اصلی برای ایجاد طرح‌بندی‌های روان، انعطاف‌پذیر و زمینه‌های مختلف مشاهده است. پرس و جوهای کانتینر ممکن است با بزرگ شدن این لیست از لیست من حذف شود، اما در حال حاضر، @media یک پرایمر عالی برای طراحی واکنشگرا است.

فراتر از آن، @media اولین قدم خوب به سمت کیفیت های شرطی CSS است. اینکه آیا ما در حال نوشتن یک پرس و جو بر اساس نوع دستگاه مورد استفاده هستیم (به عنوان مثال، screen or print) یا زمانی که نمای مرورگر دارای معیارهای خاصی باشد (مثلاً width >= 768px)، @media سینتکس برای ایجاد طرح‌بندی‌هایی که برای شرایط مختلف بهینه شده‌اند، فوق‌العاده مفید است.

اوه، و ما حتی در مورد چگونگی آن صحبت نکردیم @media به دلیل توانایی آن به دسترسی مرتبط است اعمال سبک ها بر اساس ترجیحات کاربر (به عنوان مثال، prefers-reduced-motion). بنابراین، علاوه بر ایجاد طرح‌بندی‌های مشروط، پرسش‌های رسانه‌ای گام بعدی خوبی برای درک طراحی فراگیر هستند.

تذکرات ارجمند

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

• calc()
• has()
• color
• font
• overflow
• position (مخصوصا این)
• z-index

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

خوب، مال خودت را بگو!

با لیست من موافق نیستید؟ تو باید! شرط می بندم که نظرات هوشمندانه ای دارید و می خواهم ببینم چگونه می توانید یک لیست 5 برتر را جمع آوری کنید.