همه چیز در مورد ویژگی CSS Content در المنت‌های کاذب before:: و after::



visibility  
mode_comment   ۰

همه چیز در مورد ویژگی CSS Content در المنت‌های کاذب before:: و after::در این مطلب میخوایم شما رو با ویژگی content بیشتر از قبل آشنا کنیم و بهتون بگیم که چه مقادیری رو میتونین برای اون قرار بدین و چه مقادیری رو نمیتونین قرار بدین و معتبر نیستند.

همونطور که میدونین با استفاده از ویژگی content میتونین محتوای المنت‌های کاذب ::before و ::after رو مشخص کنید و کارهای جالبی رو با استفاده از CSS خالص به وجود بیارید.

مثال زیر رو ببینید:

میبینید که برای div مورد نظر کلاس email رو قرار دادیم و یک ویژگی data-done هم قرار دادیم که در اون کد آیکون مورد نظرمون رو گذاشتیم. حالا با استفاده از ویژگی content میتونیم از این اطلاعات استفاده کنیم. بصورت زیر:

میبینید که المنت کاذب before رو برای کلاس email در نظر گرفتیم و برای ویژگی content مقادیری رو قرار دادیم. در ابتدا با استفاده از متد attr به همون ویژگی data-done دسترسی پیدا کردیم و بعد از اون یک رشته رو قرار دادیم. با اینکار چیزایی که در مقابل ویژگی content قرار دادیم، قبل از sample@gmail.com قرار داده میشن. خروجی بصورت زیر میشه:

این ویژگی معمولا هر چیزی که درونش قرار بدین رو قبول میکنه. با این حال باز هم چیزایی هستند که نمیتونین ازشون استفاده کنید و معتبر نیستند. پس در ادامه با ما همراه باشید تا مقادیر معتبر و نامعتبر رو بهتون نشون بدیم.

متخصص وردپرس
قالب ها و پلاگین های حرفه ای وردپرس رو خودت بنویس! بازار طراحی قالب و پلاگین نویسی وردپرس به شدت داغه و اگر بلد باشید با برنامه نویسی اختصاصی، قالب ها و پلاگین های دلخواه بنویسید تو مارکت های مطرح دنیا و یا از طریق فریلنسری می تونید به درآمد بالا برید. دوره متخصص وردپرس سون لرن رو حتما ببینید: متخصص وردپرس arrow_back

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

اما مثال زیر معتبر نیست:

همونطور که میبینید چون مقدار مورد نظر یک رشته نیست نمیتونین اون رو قرار بدین. شاید به فکر ترفندهایی مثل ترفند زیر بیوفتید:

این روش هم باز کار نمیکنه و خروجی مورد نظرتون رو بهتون نمیده. برای اینکار شما میتونین اعداد مورد نظرتون رو در ویژگی‌های المنتی که میخواید برای اون before و after تعریف کنید قرار بدین و در content با استفاده از متد attr به اونا دسترسی پیدا کنید. مثال زیر رو ببینید:

میبینید که برای ویژگی data-price مقدار 4 رو قرار دادیم. حالا میتونیم در ::after به اون دسترسی داشته باشیم:

در مثال بالا قیمت رو درون المنت کاذب قرار دادیم. هیچوقت چیزایی مثل قیمت و ... که مهم هستند رو درون المنت‌های کاذب قرار ندید چون این روش Accessible نیست و موتورهای جستجوگر اون رو به خوبی متوجه نمیشن و کاربرها نیز نمیتونن اون رو انتخاب کنند. کلا پیشنهاد میشه که اطلاعات مهم رو درون ویژگی content قرار ندین.

همونطور که دیدید میتونین یک عدد رو از ویژگی‌های المنت بگیرید و در content از اون استفاده کنید ولی حواستون باشه که این اطلاعات رشته هستند و نمیتونین هر کاری که دلتون بخواد رو با اونا انجام بدین. مثلا فرض کنید که المنت زیر رو دارید:

حالا نمیتونین چنین کاری رو انجام بدین:

چون موارد بالا رشته هستند، نمیتونین کارهای عددی روی اونا انجام بدین. همچنین شما نمیتونین بصورت زیر عمل کنید:

همونطور که میبینید از calc استفاده شده ولی این کار جواب نمیده.

خب حالا بریم سراغ مسئله بعدی. شما اگر بخواید رشته‌ها رو به هم متصل کنید نیاز نیست مانند PHP یا Javascript از . یا + استفاده کنید. مثالهای زیر روش اشتباه هستند و خروجی مورد نظر رو نمیدن:

شما میتونین به راحتی موارد مورد نظرتون رو به هم متصل کنید. موارد زیر صحیح هستند:

اینکه از " یا ' استفاده کنیم، خیلی مهم نیست.

در ادامه یک مثال استفاده از counter میزنیم و میخوایم 2 تا 2 تا برای هر المنت DOM از اون کم کنیم. مثال زیر رو ببینید: همونطور که مشاهده کردید یک counter یا نام the-final-countdown و مقدار اولیه 12 قرار دادیم. در المنت کاذب before با استفاده از ویژگی counter-increment، به اندازه 2 واحد از این counter کم کردیم. در نهایت با استفاده از متد counter مقدار the-final-countdown رو درون ویژگی content قرار دادیم و بعد و قبل از اون هم یک ~ قرار دادیم. به همین راحتی.

شما همچنین میتونین در ویژگی content یک تصویر رو قرار بدین ولی این تصویر خیلی محدود هست و حتی نمیتونین سایز اون رو تغییر بدین. برای اینکار بصورت زیر عمل میکنیم:

برخلاف موارد بالا، در اکثر موارد یک رشته خالی رو برای ویژگی content قرار میدن که از اون برای ساخت clearfix و اشکال پیچیده مورد استفاده قرار میگیره.

اگر قصد دارید مثالهای حرفه‌ای تری رو در این مورد مشاهده کنید، میتونین این کد رو ببینید که در اون از متغیرهای CSS استفاده شده است و درون المنتهای کاذب از گرادیان استفاده شده است.

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.