سلکتور ::nth-letter که وجود نداره — الان ازش استفاده کن!
فرانتاند
جاوااسکریپتخلاصهٔ کاملتر
یکی از آرزوهای قدیمی طراحان CSS این بوده که بتونن مستقیماً به حروف تکی داخل یه متن دسترسی داشته باشن و استایل بدن. مثلاً بگن «حرف اول هر کلمه رو قرمز کن» یا «حرف سوم رو بزرگتر نشون بده». سلکتور ::nth-letter هیچوقت به صورت رسمی وارد استاندارد CSS نشده و مرورگرها هم ازش پشتیبانی نمیکنن.
ولی لی مایر توی این مقاله روی CSS-Tricks نشون میده که میشه همین کار رو با ابزارهای موجود شبیهسازی کرد. ایده اصلی اینه که هر حرف رو داخل یه تگ span جداگانه بذاری — چه به صورت دستی، چه با کمک جاوااسکریپت — و بعد با سلکتورهای :nth-child روی اونها استایل اعمال کنی.
جاوااسکریپت اینجا نقش پشتصحنه رو داره: متن رو میخونه، هر کاراکتر رو جدا میکنه و دوباره با تگهای span میپیچه. بعد از اون CSS خالص میتونه با :nth-child(n) هر حرفی که خواست رو هدف بگیره.
این روش برای افکتهایی مثل رنگبندی متناوب حروف، انیمیشنهای حرفبهحرف، تایپوگرافی خلاقانه و هایلایت کردن بخشهای خاص از یه کلمه عالیه.
یکی از کاربردهای جذابش اینه که میتونی به هر حرف یه تأخیر انیمیشن متفاوت بدی و یه افکت موجی یا cascade بسازی — چیزی که با CSS خالص و بدون این ترفند خیلی سختتره.
نکته مهم اینه که این رویکرد accessibility رو هم میشه در نظر گرفت؛ یعنی spanها رو با aria-hidden یا روشهای مناسب نشانهگذاری کرد تا screen readerها متن رو درست بخونن و کاربر تجربه بدی نداشته باشه.
در نهایت این مقاله نشون میده که محدودیتهای CSS الزاماً به معنای «غیرممکن» نیستن. با کمی خلاقیت و ترکیب JavaScript و CSS میشه شکافهایی که استاندارد هنوز پر نکرده رو پوشوند.
نکات کلیدی:
- سلکتور ::nth-letter به صورت رسمی در CSS وجود نداره و مرورگرها ازش پشتیبانی نمیکنن
- با تقسیم حروف به span و استفاده از :nth-child میشه همون نتیجه رو گرفت
- جاوااسکریپت میتونه این فرآیند رو به صورت خودکار انجام بده
- کاربردهای اصلی: انیمیشن حرفبهحرف، رنگبندی متناوب، تایپوگرافی خلاقانه
- باید به accessibility توجه کرد تا screen readerها متن رو درست بخونن
