چه چیزی در HTML و CSS کم است؟، چه چیزی در HTML و CSS وجود ندارد؟

تیم کروم امسال حضور پررنگی در کنفرانس روز CSS داشت. ما بخش پشتیبانی CSS را اداره می‌کردیم و به سوالات شرکت‌کنندگان پاسخ می‌دادیم، اما یک تخته سفید هم داشتیم که در آن از مردم می‌پرسیدیم به نظرشان چه چیزی هنوز در CSS کم است. در این پست، نتایج پرسیدن این سوال را به اشتراک می‌گذارم و همچنین از شما می‌خواهم با تکمیل این نظرسنجی کوتاه ، به ما بگویید که به نظر شما چه چیزی در HTML و CSS کم است. آیا با شرکت‌کنندگان روز CSS موافقید؟

یک تخته سفید پوشیده از یادداشت‌های چسب‌دار.
هیئت ایده‌ها در روز CSS.

ده درخواست برتر

از شرکت‌کنندگان خواسته شد تا ایده‌های خود را روی برگه‌های یادداشت چسب‌دار بنویسند و به تخته اضافه کنند. افراد همچنین می‌توانستند با اضافه کردن یک برچسب، رأی خود را به ایده‌ها اضافه کنند. ده ویژگی برتر به شرح زیر است.

پشتیبانی از ورودی‌های استایل‌دهی

این درخواست با ۲۱ رأی، برترین درخواست ما بود. شما واقعاً به دنبال راه‌هایی برای استایل‌دهی به این عناصر رایج رابط کاربری به روشی ثابت هستید.

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

از نظر بصری پنهان

با ۱۹ رأی در روز CSS، این دومین درخواست محبوب بود. درخواست برای راهی برای اضافه کردن محتوایی است که فقط توسط خوانندگان صفحه نمایش استفاده می‌شود. این ممکن است یک عنصر HTML باشد، که در آن محتوا نمایش داده نمی‌شود و فقط توسط یک خواننده صفحه نمایش خوانده می‌شود.

معمولاً امروزه افراد با ایجاد یک کلاس .visually-hidden به این هدف دست می‌یابند تا محتوا را پنهان کنند، اما همچنان آن را برای خوانندگان صفحه نمایش قابل دسترسی نگه دارند.

اگرچه این یک درخواست رایج است، افرادی هستند که فکر نمی‌کنند این باید اجرا شود. برای جزئیات بیشتر ، «محتوای پنهان بصری یک هک است که باید حل شود، نه تثبیت شده» و این بحث را در مورد شماره ۵۶۰ CSS WG بخوانید.

موقعیت: چسبنده در داخل سرریز: پنهان

این درخواست ۱۶ رأی دریافت کرد. در حال حاضر، position: sticky فقط زمانی کار می‌کند که همه والدها overflow: visible باشند.

یک مشکل باز از سال ۲۰۱۷ وجود دارد که این را درخواست می‌کند ، و اگرچه مورد استفاده اولیه فعال کردن استفاده از overflow: hidden برای پاک کردن floatها ممکن است امروزه کمتر مورد نیاز باشد، سناریوهای بسیار دیگری نیز در این تاپیک به تفصیل شرح داده شده است.

متحرک‌سازی تا height: auto

با ۱۲ رأی، بسیاری از شرکت‌کنندگان می‌خواستند انیمیشن را به height: auto تبدیل کنند. خوشحالیم که می‌توانیم بگوییم این قابلیت با ویژگی interpolate-size در CSS و تابع calc-size() به پلتفرم وب می‌آید. این قابلیت‌ها از کروم ۱۲۹ در دسترس خواهند بود. منتظر پست‌های بعدی با اطلاعات بیشتر در مورد این موارد باشید.

انواع ورودی اضافی

HTML5 انواع مختلفی را برای عنصر <input> ارائه داده است - برای مثال type="email" برای آدرس ایمیل یا type="range" برای یک اسلایدر محدوده. در روز CSS ما 10 رأی برای انواع بیشتری از این نوع‌ها، مثلاً محدوده دوگانه یا تکمیل خودکار با لیست داده‌های سفارشی، دریافت کردیم.

اعداد تصادفی واقعی در CSS

درخواست دیگری با ۱۰ رأی برای اعداد تصادفی واقعی در CSS بود. این درخواست در گذشته برای مدت زمان انیمیشن تصادفی درخواست شده و بررسی شده است.

کلاس‌های سبک میکسین

CSS تعدادی از ویژگی‌هایی را که قبلاً در پیش‌پردازنده‌های CSS دیده می‌شد، اضافه کرده است - متغیرهایی با ویژگی‌های سفارشی و اکنون CSS Nesting. با این حال، mixinهای قابل استفاده مجدد هنوز بخشی از این زبان نشده‌اند، اما هفت نفر از شرکت‌کنندگان در روز CSS مشتاق دیدن آنها بودند.

یک گروه کاری CSS تصمیم گرفته است که روی مشخصات این ویژگی کار کند و شما می‌توانید نظرات و موارد استفاده خود را به بحث در آن شماره اضافه کنید.

استایل‌های سراسری در Shadow DOM

موضوع دیگری که بحث‌های زیادی در مورد موارد استفاده از آن وجود دارد، درخواست اعمال استایل‌های سراسری CSS در داخل DOM سایه است که شش نفر در CSS Day این درخواست را مطرح کردند. این قابلیت به استایل‌های سراسری تنظیم مجدد اجازه می‌دهد تا در اجزای وب نیز اعمال شوند و فایل‌های CSS منفرد در تمام اجزای یک سایت کار کنند. به این خلاصه موارد استفاده نگاهی بیندازید و اگر این ویژگی مورد نظر شماست، به ما اطلاع دهید.

تقسیم واحدهای مختلط

پیشنهادی برای Interop 2024 وجود داشت که درخواست قابلیت تقسیم بر واحدهای مختلط - برای مثال calc(100vw / 1px) داشت. این پیشنهاد برای Interop 2024 بیش از حد کلی تلقی شد، با این حال بسیاری از توسعه‌دهندگان، از جمله شش نفر در CSS Day، مایل به اجرای این طرح بودند.

nth-letter

CSS تعدادی شبه‌عنصر دارد که طوری عمل می‌کنند که انگار یک span دور بخشی از محتوا پیچیده‌اید. برای مثال، شبه‌عنصر ::first-letter اولین حرف از اولین خط از بلوکی که روی آن اعمال می‌شود را هدف قرار می‌دهد.

چیزی که در آن لیست وجود ندارد ::nth-letter است، و شما حدود بیست سال است که درخواست ::nth-letter دارید، بنابراین می‌دانیم که این یک درخواست طولانی مدت از سوی توسعه‌دهندگان وب است. در روز CSS شش نفر به این ویژگی رأی دادند و آن را به آخرین ویژگی از ده ویژگی برتر مورد نظر ما تبدیل کردند.

آیا با ده مورد برتر روز CSS موافقید؟

ما دوست داریم از مخاطبان گسترده‌تری در مورد این مسائل بشنویم، آیا هیچ‌کدام از این موارد جزو ده مورد برتر شما هستند؟ اگر نه، آیا چیز دیگری هست که دوست دارید در CSS و HTML ببینید؟ با پر کردن این فرم کوتاه به ما اطلاع دهید و ما پاسخ‌ها را در پست دیگری خلاصه خواهیم کرد.