آموزش سلکتور marker:: در css

در css سلکتورهایی وجود دارند که حالت خاصی را باید برای آنها داخل کد نوشت . برای مثال انتخاب کننده marker یکی از این انتخاب کننده‌ها است که در داخل پروژه های طراحی سایت ممکن است به آن نیاز داشته باشید اما هنوز از وجود چنین انتخاب کننده‌ای در طراحی سایت خبر ندارید . مطمئنا همه شما لیست‌ها را در یک وب‌سایت می‌شناسید که عموما ظاهری به شکل زیر دارند :

بخش marker در داخل پروژه‌های طراحی سایت جهت ایجاد تغییر برای قسمت list style های تگ های li کاربرد دارد . زمانی که شما استایل خاصی را برای قسمت list style در مورد تگ های li تغییر نداده باشید ، به شکل پیشفرض ، یک علامت دایره مشکی کنار آیتم های لیست نمایش داده می‌شود . در بسیاری از وب سایت‌ها به این دلیل که آیتم های دایره در کنار آیتم های لیست نمای خوبی ندارد آن را توسط دستور زیر حذف می‌کنند :

li{
	list-style:none;
}

زمانی که این دستور برای تمامی تگ های li در سایت اعمال شود و زمانی که از li استفاده کنید ، دیگر دایره های کوچک در کنار لیست آیتم ها نمایش داده نمی‌شود و اگر احیانا در جای دیگری نیاز بود که این دایره‌ها به عبارتی marker ها که گاها به آنها بولت نیز گفته می‌شود مجدد نمایش داده شود باید دستور زیر را بنویسید ( مثلا برای li هایی که داخل یک div با کلاس خاص هستند ) :

.first-div li {
	list-style:circle;
}

توجه داشته باشید که قسمت marker برای لیست های غیرترتیبی ( ul ) اعمال می‌شود به این دلیل که در لیست های ترتیبی ( ol ) ، شماره های هر آیتم در کنار آن قرار دارد و به نوعی ترتیب خاصی در این لیست‌ها مدنظر است و یا برای شمارش آیتم ها ، باید شماره هر آیتم در کنار آن باشد ، لذا امکان استایل دهی به بخش مارکر در لیست های ترتیبی عملا وجود ندارد .

اما در لیست های غیرترتیبی که ساختار آنها در زبان html بصورت ul و li است ، شماره‌های هر آیتم درکنار آنها چاپ نمی‌شود و به همین دلیل بجای این شماره‌ها ، marker هایی در کنار li های شما قرار خواهد گرفت .

ویژگی marker به چه بخش هایی استایل خواهد داد ؟

همانطور که خودتان تاکنون متوجه شدید ، ویژگی marker برای تغییر در استایل همان marker ها یا بولت های دایره شکلی است که کنار لیست آیتم ها نمایش داده می‌شود . شاید اینگونه تصور می‌کردید که این قسمت به شکل پیشفرض توسط خود مرورگر اضافه می‌شود و تنها می‌توان شکل و شمایل آن را توسط دستور list-style تغییر داد . برای تغییر مارکر های li یک نمونه دستور می‌تواند به شکل زیر باشد :

li::marker {
  content: '✝';
  font-size: 1.2em;
}

دقت داشته باشید که در این کد وجود بخش content بسیار مهم است و باید این قسمت را داخل کدخودتان به درستی تنظیم کنید . از تصاویر نیز می‌توانید برای این بخش به کمک قرار دادن دستور url در داخل بخش content استفاده کنید .

مواردی که میتوان داخل دستور marker استفاده کرد به شرح زیر است :

All font properties
The white-space property
color
text-combine-upright, unicode-bidi, and direction properties
The content property
All animation and transition properties

به عبارتی می‌توان از ویژگی‌های مربوط به font ، ویژگی های مربوط به بخش white-space ، ویژگی های بخش color یا همان رنگ ، ویژگی های قسمت direction ، ویژگی content و حتی بخش های انیمیشن و transation استفاده کرد . در حال حاضر این موارد توسط دستور marker پشتیبانی می‌شود و احتمال اضافه شدن دستورات دیگری نیز در آینده به این بخش وجود دارد .

توجه داشته باشید که این ویژگی توسط تمامی مرورگرهای بروز پشتیبانی می‌شود . برای مثال در مرورگر chrome و Edge از نسخه 86 به بالا و در فایرفاکس از نسخه 68 به بالا پشتیبانی می‌شود . لذا باید دقت کرد که اگر در مرورگرهای قدیمی و بخصوص IE این ویژگی را تست کنید شاید در استایل های خود با مشکل روبرو شوید .

شناخت این قسمت به شکل درست ، باعث خواهد شد تا کنترل بیشتری بروی طراحی‌های خودتان داشته باشید . این قسمت‌ها که مربوط به انتخاب کننده هایی با حالت :: هستند ، عموما توسط طراحان حرفه‌ای به شکل بجا استفاده می‌شوند . همانند بخش هایی همچون first-line و first-letter و … باید ظرافت بسیار زیادی در بکار گرقتن این بخش‌ها داشته باشیم چراکه تک تک این موارد مسبب ایجاد زیبایی بیشتر در طرح شما هستند . مقالات بیشتر را در قسمت دسته بندی ” مقالات طراحی سایت ” مطالعه کنید .