نه(9) property ناشناخته در css که شاید از آنها خبر ندارید!

نه(9) property ناشناخته در css که شاید از آنها خبر ندارید!

احتمالا این پراپرتی ها رو در css یا ندید یا تو کمتر پروژه و کدی بهشون برخورد کردید!این لیست شامل مواردی هست که یکی یا دوتاشون رو تا حالا ندیده بودم و با توجه به ساپورت مرورگرها تازه به دنیای وب و css اومدن و بقیه رو هم دقیق نمی دونستم چیکار می کنند و فقط قبلا گریزی بهشون زده بودم! حالا شاید این لیست رو شما کاملا باهاش آشنا باشید شایدم اصلا هیچ کدوم رو ندیده بودید.لازمه بگم موارد دیگه ای هم بود که احتمال خیلی زیاد ندیده باشید اما خیلی کاربردی نبودن و منم اصلا بهشون توجه نکردم.البته فقط property ها رو اینجا اووردم و CSS at-rule ها و فانکشن ها برای نوشته های دیگه.این property ها مواردی هستند که واقعا کاربردی هستند و با یک خط کد ساده css کلی کار انجام میدن!توصیه: حتما برای درک درست مفاهیم لینک مربوط به هر کدوم از property ها رو باز کنید تا به رفرنس اون برید(MDN Web Docs).برای دیدن همه property ها در css (که شاید property ها بیشتری هم اونجا پیدا کردید.) از این لینک استفاده کنید.وقتی شما کد زیر رو به آخر هر قطه کدی که داخل یک سلکتور هست اضافه کنید، تمام موارد بالایی به حالت قبلی ریست می شوند!all: initial;لینک MDNبا این پراپرتی می تونید نشانگر داخل فرم ها رو تغییر بدین!caret-color: #ff0000;لینک MDNبا استفاده از این ویژگی وقتی خونه یا خونه هایی از جدول خالی باشه دیگه برای اون border در نظر نمیگیره!کد زیر رو داخل سلکتوری که تگ table رو انتخاب کرده قرار بدین.empty-cells: hide;لینک MDNبارها پیش اومده که یک عرض و طول یک عکس رو عوض می کنیم، و ظاهر عکس بهم میریزه و فشرده یا کشیده میشه! مثلا وقتی عرض عکس ما 300 باشه و ما عرض 500 بخوایم اما به همون نسبت طول رو هم افزیش ندیم پس ظاهر عکس خراب میشه. برای حل این مشکل راه های زیادی هست که یکی از اون ها اینه که بعد از تعیین طول و عرض جدید یکی مقادیر زیر رو اضافه کنید تا عکس برش بخوره.object-fit: cover;
object-fit: contain;ولی باید دقت کنید با این کار استایل عکس حفظ میشه ولی عکستون با توجه به طول و عرض دلخواه شما برش میخوره!لینک MDNبا این ویژگی می تونید مشخص کنید هر تب(همون کلید Tab در کیبورد) چقدر فاصله ایجاد کنه!باید در تگ <pre> تستش کنید. حتی با px هم می تونید سایز بدین. -moz-tab-size: 12; /* Firefox */ tab-size: 12;لینک MDNاگه بخواهید که دسترسی یوزرها رو برای سلکت کردن تکست و … ببندید باید از کد زیر استفاده کنید!user-select: none;البته مثلا می تونید فقط سلکت تکست ها رو ببندین و به جای none مقدار text رو قرار بدین.لینک MDNبا این ویژگی باحال می تونید یه بخش رو کلا ایزوله کنید و استایل هایی که مثلا به پرنت اون دادین رو براش حذف کنید و ایزوله بشه.و طبق توضیحات رفرنس: با این کد شما برای اون المنت یه stacking context جدید ایجاد می کنید.isolation: isolate;لینک MDNبا استفاده از این پراپرتی به راحتی می تونید ساختار ستونی ایجاد کنید که کاربردهای متفاوتی داره. مخوصا برای ایجاد ساختاری مثل 2 یا 3 ستونی روزنامه ای! البته از این روش برای گرید بندی ساختار صفحه استفاده نکنید و فقط تکست ها رو استایل بدید.کد زیر رو برای سلکتور تگ <p> استفاده کنید.columns: 2; // or 3,4,5, …لینک MDNبا استفاده از این ویژگی می تونید، تکست هاتون رو دور عکس بچینید. شاید در روزنامه ها و مجلات دیده باشید. اینجا هم امکان نمایش کدهاش نیست پس یه راست به سراغ رفرنس برید.shape-outsideلینک MDNدر آخر ممنون میشم اگه شما هم property در css می شناسید که کمتر شناخته شده و کاربردی هست رو برام کامنت کنید تا لیست پربارتر بشه.

Author: admin

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *