هر آنچه باید درباره شکاف بعد از نشانگر فهرست بدانید

داشتم میخوندم "استایل لیست خلاق" در وبلاگ web.dev گوگل و متوجه چیز عجیبی در یکی از نمونه‌های کد موجود در آن شدم ::marker بخش مقاله نشانگرهای لیست داخلی گلوله ها، اعداد ترتیبی و حروف هستند. را ::marker شبه عنصر به ما امکان می دهد به این نشانگرها استایل دهیم یا آنها را با یک کاراکتر یا تصویر سفارشی جایگزین کنیم.

::marker { content: url('/marker.svg') ' ';
}

مثالی که توجه من را جلب کرد از یک نماد SVG به عنوان نشانگر سفارشی برای موارد لیست استفاده می کند. اما یک کاراکتر فضایی نیز وجود دارد (" ") در مقدار CSS در کنار url() تابع. به نظر می رسد هدف از این فضا قرار دادن یک شکاف بعد از نشانگر سفارشی باشد.

وقتی این کد را دیدم، بلافاصله به این فکر کردم که آیا راه بهتری برای ایجاد شکاف وجود دارد. اضافه کردن فاصله به content بیشتر شبیه یک راه حل است تا راه حل بهینه. CSS فراهم می کند margin و padding و راه های استاندارد دیگر برای فاصله دادن عناصر در صفحه. آیا در این شرایط نمی توان از هیچ یک از این خواص استفاده کرد؟

ابتدا سعی کردم کاراکتر space را با یک حاشیه مناسب جایگزین کنم:

::marker { content: url('/marker.svg'); margin-right: 1ch;
}

این کار نکرد همانطور که معلوم است، ::marker فقط از a پشتیبانی می کند مجموعه کوچکی از خصوصیات CSS عمدتاً مرتبط با متن. به عنوان مثال، شما می توانید تغییر دهید font-size و color از نشانگر، و یک نشانگر سفارشی را با تنظیم تعریف کنید content به یک رشته یا URL، همانطور که در بالا نشان داده شده است. اما margin و padding خواص هستند پشتیبانی نشده، بنابراین تنظیم آنها تأثیری ندارد. چقدر ناامید کننده.

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

اضافه کردن بالشتک و حاشیه

اول، بیایید تایید کنیم که چیست margin و padding بر روی <ul> و <li> عناصر. من یک صفحه آزمایشی برای این منظور ایجاد کرده ام. لغزنده های مربوطه را بکشید و اثر فاصله را در هر طرف نشانگر لیست مشاهده کنید. نکته: برای بازنشانی همه کنترل‌ها به مقادیر اولیه‌شان، از دکمه تنظیم مجدد استفاده کنید.

توجه داشته باشید: مرورگرها یک پیش فرض را اعمال می کنند padding-inline-left of 40px به <ol> و <ul> عناصر. منطقی padding-inline-left دارایی معادل فیزیکی است padding-left ویژگی در سیستم های نوشتاری با جهت خطی چپ به راست. در این مقاله، من قصد دارم از خواص فیزیکی برای سادگی استفاده کنم.

همانطور که می بینید، padding-left on <li> فاصله بعد از نشانگر لیست را افزایش می دهد. سه ویژگی دیگر فاصله سمت چپ نشانگر، به عبارت دیگر، تورفتگی آیتم لیست را کنترل می کنند.

توجه داشته باشید که حتی زمانی که آیتم فهرست است padding-left is 0px، هنوز یک فاصله حداقل بعد از نشانگر وجود دارد. این فاصله را نمی توان با آن کاهش داد margin or padding. طول دقیق حداقل فاصله به مرورگر بستگی دارد.

به طور خلاصه، محتوای آیتم لیست در حداقل فاصله خاص مرورگر از نشانگر قرار می گیرد و این شکاف را می توان با افزودن یک علامت بیشتر افزایش داد. padding-left به <li>.

بعد، بیایید ببینیم وقتی نشانگر را قرار می دهیم چه اتفاقی می افتد داخل مورد لیست

حرکت نشانگر به داخل آیتم فهرست

La list-style-position ویژگی دو کلمه کلیدی را می پذیرد: outside، که پیش فرض است و inside، که نشانگر را داخل آیتم لیست حرکت می دهد. مورد دوم برای ایجاد طرح هایی با آیتم های لیست تمام عرض مفید است.

اگر نشانگر اکنون است داخل آیتم لیست، آیا این به این معنی است؟ padding-left on <li> دیگر فاصله بعد از نشانگر را افزایش نمی دهد؟ بیایید دریابیم. در صفحه آزمایشی من، روشن کنید list-style-position: inside از طریق چک باکس چهارتا چطورن padding و margin خواص تحت تاثیر این تغییر؟

همانطور که می بینید، padding-left on <li> اکنون فاصله را به عدد افزایش می دهد ترک کرد از نشانگر این بدان معناست که ما توانایی افزایش فاصله بعد از نشانگر را از دست داده ایم. در این شرایط، مفید خواهد بود که بتوانیم اضافه کنیم margin-right به ::marker خودش، اما همانطور که در بالا توضیح دادیم، کار نمی کند.

علاوه بر این، یک وجود دارد اشکال در Chromium که باعث ایجاد شکاف بعد از نشانگر می شود سه گانه پس از تغییر به inside تثبیت موقعیت. به طور پیش فرض، طول شکاف حدود یک سوم اندازه متن است. بنابراین در حالت پیش فرض font-size of 16px، شکاف در مورد است 5.5px. پس از تغییر به inside، شکاف به طور کامل رشد می کند 16px در کروم این اشکال بر روی disc, circleو square نشانگرها، اما نه نشانگر اعداد ترتیبی.

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

برای جمع بندی، جابجایی به list-style-position: inside دو مشکل را معرفی می کند. ما دیگر نمی توانیم شکاف را افزایش دهیم padding-left on <li>، و اندازه شکاف بین مرورگرها ناسازگار است.

در نهایت، بیایید ببینیم وقتی نشانگر لیست پیش فرض را با یک نشانگر سفارشی جایگزین می کنیم چه اتفاقی می افتد.

تغییر به یک نشانگر سفارشی

دو راه برای تعریف a وجود دارد نشانگر سفارشی:

• list-style-type و list-style-image املاک
• content اموال در ::marker شبه عنصر

La content دارایی قدرتمندتر است به عنوان مثال، به ما این امکان را می دهد که از counter() تابع دسترسی به شماره ترتیبی آیتم فهرست ( ضمنی list-item مقابله با) و آن را با رشته های سفارشی تزئین کنید.

متأسفانه، سافاری از آن پشتیبانی نمی کند content دارایی در ::marker هنوز (اشکال WebKit). به همین دلیل، من قصد دارم از آن استفاده کنم list-style-type ویژگی برای تعریف نشانگر سفارشی. هنوز هم می توانید از آن استفاده کنید ::marker انتخابگر برای استایل دادن به نشانگر سفارشی اعلام شده از طریق list-style-type. آن جنبه از ::marker در سافاری پشتیبانی می شود.

هر کاراکتر یونیکد به طور بالقوه می تواند به عنوان نشانگر لیست سفارشی عمل کند، اما فقط مجموعه کوچکی از کاراکترها در واقع "Bullet" را در نام رسمی خود دارند، بنابراین فکر کردم آنها را برای مرجع در اینجا جمع آوری کنم.

شخصیت	نام	نقطه کد	کلمه کلیدی CSS
•	گلوله	U+2022	disc
‣	گلوله مثلثی	U+2023
⁃	خط فاصله گلوله	U+2043
⁌	گلوله سیاه به سمت چپ	U+204C
⁍	گلوله سیاه به سمت راست	U+204D
◘	گلوله معکوس	U+25D8
◦	گلوله سفید	U+25E6	circle
☙	گلوله قلب گلدار چرخشی معکوس	U+2619
❥	گلوله قلب سیاه سنگین چرخشی	U+2765
❧	گلوله قلب گل چرخان	U+2767
⦾	گلوله سفید دایره ای	U+29BE
⦿	گلوله دایره ای	U+29BF

توجه داشته باشید: CSS square کلمه کلیدی دارای کاراکتر "Bullet" مربوطه در یونیکد نیست. شخصیتی که نزدیکتر می شود شکلک مربع کوچک سیاه (▪️) است (U+25AA).

حالا بیایید ببینیم وقتی نشانگر لیست پیش فرض را با آن جایگزین می کنیم چه اتفاقی می افتد list-style-type: "•" (U+2022 گلوله). این همان کاراکتر گلوله پیش‌فرض است، بنابراین نباید تفاوت عمده‌ای در رندر وجود داشته باشد. در صفحه آزمایشی من، آن را روشن کنید list-style-type را انتخاب کنید و هرگونه تغییر در نشانگر را مشاهده کنید.

همانطور که می بینید، دو تغییر اساسی وجود دارد:

1. دیگر حداقل فاصله بعد از نشانگر وجود ندارد.
2. گلوله کوچکتر شده است، گویی در کوچکتر رندر شده است font-size.

مطابق با سبک های شمارنده CSS سطح 3، نشانگر لیست پیش فرض (disc) باید «شبیه به • U+2022 گلوله». به نظر می رسد که مرورگرها اندازه گلوله پیش فرض را افزایش می دهند تا خواناتر شود. فایرفاکس حتی از یک فونت خاص استفاده می کند، -moz-bullet-font، برای نشانگر.

آیا مشکل اندازه کوچک با CSS قابل حل است؟ در صفحه آزمایشی من، استایل نشانگر را روشن کنید و مشاهده کنید که با تغییر آن چه اتفاقی می‌افتد font-size, line-heightو font-family از نشانگر

همانطور که می بینید، افزایش font-size باعث می شود که نشانگر سفارشی به صورت عمودی نامناسب شود و با کاهش آن نمی توان آن را اصلاح کرد line-height. vertical-align ویژگی، که به راحتی می تواند این مشکل را برطرف کند، پشتیبانی نمی شود ::marker.

اما آیا متوجه شدید که تغییر دادن font-family آیا می تواند باعث بزرگتر شدن نشانگر شود؟ سعی کنید آن را تنظیم کنید Tahoma. این به طور بالقوه می تواند یک راه حل به اندازه کافی برای مشکل اندازه کوچک باشد، اگرچه من آزمایش نکرده ام که کدام فونت در مرورگرها و سیستم عامل های اصلی بهتر عمل می کند.

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

1. بعد از نشانگرهای سفارشی هیچ فاصله ای حداقل وجود ندارد.
2. ::marker پشتیبانی نمی کند padding or margin.
3. padding-left on <li> شکاف را افزایش نمی دهد، زیرا نشانگر در موقعیت قرار دارد inside.

خلاصه

در اینجا خلاصه ای از تمام حقایق کلیدی که در مقاله ذکر کرده ام آورده شده است:

1. مرورگرها یک پیش فرض را اعمال می کنند padding-inline-start of 40px به <ul> و <ol> عناصر.
2. حداقل فاصله بعد از نشانگرهای لیست داخلی وجود دارد (disc, decimal، و غیره.). حداقل فاصله بعد از نشانگرهای سفارشی (رشته یا URL) وجود ندارد.
3. طول شکاف را می توان با اضافه کردن a افزایش داد padding-left به <ul>، اما فقط در صورتی که نشانگر خارج از آیتم فهرست قرار گرفته باشد (حالت پیش فرض).
4. نشانگرهای رشته سفارشی اندازه پیش فرض کوچکتری نسبت به نشانگرهای داخلی دارند. تغییر دادن font-family on ::marker می تواند اندازه آنها را افزایش دهد.

نتیجه

با نگاهی به مثال کد از ابتدای مقاله، فکر می کنم اکنون متوجه شده ام که چرا یک کاراکتر فاصله در content ارزش. هیچ راه بهتری برای درج شکاف بعد از نشانگر SVG وجود ندارد. این یک راه حل است که مورد نیاز است زیرا هیچ مقداری از آن وجود ندارد margin و padding می تواند یک شکاف بعد از یک نشانگر سفارشی که در داخل آیتم لیست قرار دارد ایجاد کند. آ margin-right on ::marker می تواند به راحتی این کار را انجام دهد، اما پشتیبانی نمی شود.

تا زمان ::marker پشتیبانی از ویژگی های بیشتر را اضافه می کند، توسعه دهندگان وب اغلب چاره ای جز پنهان کردن نشانگر و تقلید آن با یک نشانگر ندارند. ::before شبه عنصر اخیراً مجبور شدم خودم این کار را انجام دهم زیرا نتوانستم نشانگر را تغییر دهم background-color. امیدواریم مجبور نباشیم خیلی منتظر نسخه قدرتمندتر باشیم ::marker شبه عنصر

• محتوای مبتنی بر SEO و توزیع روابط عمومی. امروز تقویت شوید.
• پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی به اینجا.
• منبع: https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/