چند خاصیت سی اس اس که به ندرت استفاده میشه اما میتونن جلوه ی خاصی به وب سایت بدهند

در این مقاله از سری مقالات تروانس میخواهیم چند خاصیت سی اس اس معرفی کنینم که به ندرت از اونها در طراحی سایت استفاده میشه اما این خاصتها میتونن جلوه ی خاصی به وب سایت شما بدهند.

۱-خاصیت caret color

این خاصیت رنگ کرسر عناصر قابل ویرایش مثل input,textarea,… را تغییر میده.نحوه ی استفاده از آن به صورت زیر می باشد.مقادیری که این ویژگی می پذیر رنگ و مقدار auto می باشد.

caret-color: auto|color;
مثال:
input{
caret-color:red
}

مثال مذکور رنگ کرسر عنصر مورد نظر را به قرمز تغییر می دهد.

۲-Scroll Behavior

این خاصیت باعث میشه عنصر html نرم و آرام اسکرول بشه اگه از این خاصیت استفاده کنید دیگه لازم نیست برای اسکرول شدن بین لینکهای داخلی از جاوااسکریپت استفاده کنید.

html {
  scroll-behavior: smooth;
}

برای روشن شدن موضوع به مثال این خاصیت در وب سایت w3school مراجعه کنید

۳-backface-visibility

این خاصیت تعیین می کند زمانی که عنصر در فضای سه بعدی توسط ویژگی transform حرکت داده می شود پشت آن قابل مشاهده توسط کاربر قابل مشاهده باشد یا خیر

در حالت پیشفرض اگر عنصری در فضای سه بعدی بچرخد پشت آن عنصر نیز قابل مشاهده است اما اگر مقدار hidden را برای این ویژگی تنظیم کنیم, دیگر پشت آن عنصر دیده نخواهد شود.

مقادیری که این عنصر قبول میکند به صورت زیر می باشد.

backface-visibility: visible|hidden|initial|inherit;

برای روشن شدن موضوع دموی سایت w3school را ببینید

۴-resize

با استفاده از این خاصیت میتونید در باره‌ی نحوه تغییر سایز یک عنصر توسط کاربر تصمیم بگیرید.اگه این خاصیت را طوری مقدار دهی کنید که سایز عنصر مورد نظر توسط کاربر قابل تغییر باشه سه خط مورب در گوشه‌ی پایین سمت راست دیده میشه که کاربر با استفاده از ماوس و این سه خط مورب میتونه اندازه‌ی عنصر را تغییر بده.
این خاصیت شش مقدار مختلف می‌پذیر که به صورت زیر تعریف و مقدار دهی می‌شود.

resize: none|both|horizontal|vertical|initial|inherit;
مقدارنخوه‌ی عملکرد
noneعنصر مورد نظر قابلیت تعییر اندازه توسط کاربر را نخواهد داشت.
bothهم عرض و هم طول عنصر مورد نظر قابلیت تغییر خواهد داشت.
horizontalفقط عرض عنصر مورد نظر قابل تغییر خواهد بود.
verticalفقط ارتفاع عنصر مورد نظر قابل تغییر خواهد بود.
initialمقدار پیش فرض تعریف شده برای عنصر مورد نظر.
inheritمقدار این خصوصیت را از والد خود به ارث می‌برد.

۵-tab-size

با این خاصیت میتونید اندازه کلید تب را در یک عنصر مشخص کنید.
به ندرت پیش میاد که استفاده کردن از این خاصیت نیاز باشه ولی دونستش خالی از لطف نیست.این خاصیت به صورت زیر تعریف و مقدار دهی میشه.یک نمونه از مواردی که میتونید از این خاصیت استفاده کنید تعیین اندازه تب عنصر کد است که برای کسانی مفیده که میخوان کدهای برنامه نویسی را تو وب سایت خود با دیگران به اشتراک بگذارند.

tab-size: number|length|initial|inherit;
مقدارنحوه‌ی عملکرد
numberتعداد کاراکترهای جای خالی که در تب نمایش داده میشه.
lengthطول کاراکتر تب.این خاصیت توسط مرورگرهای مرسوم پشتیبانی نمیشه
initialمقدار پیش فرض تعریف شده برای عنصر مورد نظر.مقدار پیش فرض هشت کاراکتر جای خالی است.
inheritمقدار این خصوصیت را از والد خود به ارث می‌برد.

۶-isolation

از این خاصیت برای جلوگیری از ترکیب شدن عنصر با عنصر پشت سرش استفاده می‌شود.
این خاصیت به صورت زیر تعریف و مقدار دهی می شود

isolation: auto|isolate|initial|inherit;
autoپیش فرض این خاصیت ‌auto می باشد و موجب ترکیب عنصر مورد نظر با عنصر پشت سرش میشود
isolateاین مقدار از ترکیب عنصر با عنصر پشت سرش جلوگیری می‌کند.

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