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

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

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

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

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

پشتیبانی از ورودی های یک ظاهر طراحی شده

این درخواست ویژگی برتر ما با 21 رای بود. شما واقعاً می خواهید راه هایی برای استایل دادن به این عناصر رابط کاربری رایج به روشی ثابت داشته باشید.

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

بصری پنهان شده است

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

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

در حالی که این یک درخواست عمومی است، اما افرادی هستند که فکر نمی کنند این درخواست اجرا شود. برای جزئیات بیشتر بخوانید محتوای پنهان بصری یک هک است که باید حل شود، نه گنجانده شود و این بحث در مورد CSS WG شماره 560 است .

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

این درخواست 16 رای دریافت کرد. در حال حاضر، position: sticky فقط زمانی کار می کند که همه والدین overflow: visible .

یک مسئله باز از سال 2017 برای این درخواست وجود دارد، و در حالی که مورد استفاده اولیه فعال کردن استفاده از overflow: hidden برای پاکسازی شناورها ممکن است امروزه کمتر مورد نیاز باشد، سناریوهای زیادی وجود دارد که در این موضوع به تفصیل شرح داده شده است.

متحرک کردن به height: auto

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

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

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

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

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

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

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

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

سبک های جهانی در سایه DOM

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

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

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

nth-letter

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

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

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

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

،

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

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

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

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

پشتیبانی از ورودی های یک ظاهر طراحی شده

این درخواست ویژگی برتر ما با 21 رای بود. شما واقعاً می خواهید راه هایی برای استایل دادن به این عناصر رابط کاربری رایج به روشی ثابت داشته باشید.

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

بصری پنهان شده است

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

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

در حالی که این یک درخواست عمومی است، اما افرادی هستند که فکر نمی کنند این درخواست اجرا شود. برای جزئیات بیشتر بخوانید محتوای پنهان بصری یک هک است که باید حل شود، نه گنجانده شود و این بحث در مورد CSS WG شماره 560 است .

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

این درخواست 16 رای دریافت کرد. در حال حاضر، position: sticky فقط زمانی کار می کند که همه والدین overflow: visible .

یک مسئله باز از سال 2017 برای این درخواست وجود دارد، و در حالی که مورد استفاده اولیه فعال کردن استفاده از overflow: hidden برای پاکسازی شناورها ممکن است امروزه کمتر مورد نیاز باشد، سناریوهای زیادی وجود دارد که در این موضوع به تفصیل شرح داده شده است.

متحرک کردن به height: auto

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

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

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

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

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

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

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

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

سبک های جهانی در سایه DOM

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

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

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

nth-letter

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

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

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

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