نظرسنجی های وضعیت CSS و HTML به ما چه می گویند؟

تاریخ انتشار: 6 دسامبر 2024

نتایج مربوط به وضعیت CSS 2024 و وضعیت HTML 2024 اکنون زنده هستند. این پست نگاهی اولیه به برخی از جالب‌ترین یافته‌های آن نظرسنجی‌ها دارد.

خوش بینی نسبت به پلتفرم وب

قبل از بررسی برخی از مشکلاتی که مردم با HTML و CSS دارند، نظرسنجی‌ها خوش‌بینی زیادی را در مورد این پلتفرم نشان می‌دهند. وقتی از آنها پرسیده شد که آیا پلتفرم وب به طور کلی در مسیر درستی حرکت می کند، 58٪ از افرادی که وضعیت HTML را دریافت می کنند با این جمله موافق بودند و 18٪ کاملاً موافق بودند.

برای CSS، :has() به عنوان ویژگی جدید مورد علاقه CSS با 36٪ از مردم آن را به عنوان بهترین ویژگی جدید رتبه بندی کردند. دومین مورد مورد علاقه @container با 17٪ با تودرتو CSS است.

از چه چیزی استفاده می کنید؟

در داده های CSS شگفتی هایی وجود داشت. به عنوان مثال، بیش از 75٪ از افراد از جلوه های فیلتر CSS استفاده کرده اند و آن را به بهترین ویژگی مورد استفاده تبدیل کرده است. با توجه به تعداد شکایات در مورد آبشار در طول سال ها، جالب است که لایه های آبشاری تنها توسط 18.9٪ افراد استفاده می شود. شاید پیوندی در اینجا به استفاده از ابزارهایی مانند Tailwind وجود داشته باشد که از بروز مشکلات مرتبط با آبشار جلوگیری می کند.

عناصر شاخص مانند <main> و <nav> برای مواردی که استفاده می کنید در صدر بررسی HTML قرار می گیرند. دیدن افراد زیادی که از تکنیک‌های بارگذاری تنبل و تصاویر واکنش‌گرا استفاده می‌کنند بسیار عالی است.

مشکلات اصلی پشتیبانی مرورگر

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

  • Popover API
  • موقعیت لنگر
  • پرس و جوهای کانتینر
  • :has()
  • نمای تودرتو CSS
  • API انتقال
  • زیرشبکه
  • شبکه
  • <dialog>
  • برنامه های وب پیشرو

موقعیت لنگر در هر دو نظرسنجی 11٪، View Transition API 9٪ در وضعیت CSS و 8٪ در وضعیت HTML امتیاز کسب کرد که نشان می دهد توسعه دهندگان چقدر این ویژگی ها را ارزشمند می دانند.

جالب اینجاست که چندین ویژگی با هم قابل اجرا هستند. جستجوهای کانتینر، :has() ، تودرتوی CSS، و زیرشبکه پایه هستند که به تازگی در دسترس هستند، Popover API می‌تواند وجود داشته باشد، اما برای مشکلی با رد کردن نور در iOS. عنصر <dialog> اکنون به طور گسترده در دسترس است، همانطور که طرح شبکه CSS نیز وجود دارد. شاید ارزش جستجو در این نتایج را داشته باشد تا دریابید که مردم چه مشکلاتی دارند. به عنوان مثال، پاسخ‌های گرید اغلب به سختی یادگیری آن اشاره می‌کنند، نه اینکه به یک مشکل تعاملی واقعی اشاره کنند.

ما امیدواریم که Baseline به توسعه دهندگان کمک کند تا وضعیت چیزها را درک کنند و بدانند آیا مشکلی که مشاهده می کنند به دلیل عدم سازگاری مرورگر است یا چیز دیگری. دیدن اینکه این نظرسنجی‌ها وضعیت پایه ویژگی‌ها را برجسته می‌کنند بسیار عالی است. همچنین می‌توانید وضعیت در دسترس بودن را در مرورگرها برای مشکلات برتر CSS در webstatus.dev ببینید.

ویژگی های از دست رفته

نظرسنجی‌ها همچنین می‌پرسند کدام ویژگی‌ها و عملکردها در پلتفرم از دست رفته است. این به ما کمک می کند تا ببینیم هنوز انجام چه کاری دشوار است. نرخ پاسخ کمتری به این سوال وجود داشت، با این حال در نظرسنجی State of CSS، مردم بیشتر از همه درخواست میکس‌ها، منطق شرطی، و چیدمان سنگ‌تراشی را داشتند. جالب است که مردم همچنین درخواست یک انتخابگر والد ( :has() این قابلیت را ارائه می‌دهد) و تودرتو - که از قبل وجود دارد و به تازگی در دسترس است.

سوالی که از پاسخ دهندگان وضعیت HTML پرسیده شد، این بود: "اگر بتوانید 3 عنصر را به HTML اضافه کنید، آنها چه خواهند بود؟" 51 درصد از مردم جداول داده را درخواست کردند، سایر گزینه‌های محبوب شامل برگه‌ها و عناصر جابه‌جایی است.

در مورد چه چیزی می خواهید بیشتر بدانید؟

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

  • CSS hanging-punctuation
  • offset-path CSS
  • @scope
  • موقعیت لنگر
  • انتخاب قابل تنظیم
  • view-timeline
  • scroll-timeline
  • ویژگی focusgroup
  • انیمیشن خصوصیات گسسته
  • image()

به نتایج کامل با لیست خواندن CSS و لیست خواندن HTML نگاهی بیندازید.

یک سیگنال از جامعه وب

Chrome از این نظرسنجی‌ها پشتیبانی می‌کند، زیرا یکی از راه‌هایی است که می‌توانیم اطلاعاتی درباره نقاط اصلی درد شما و چیزهایی که بیشتر به آن‌ها در سرتاسر پلتفرم وب علاقه دارید به دست آوریم. این تنها سیگنالی نیست که ما استفاده می کنیم، اما آنها مکانی هستند که می توانید مستقیماً افکار خود را به ما بگویید. اگر یکی یا هر دوی این نظرسنجی ها را پر کردید، متشکرم! شما به ما کمک می کنید تا وب را به روشی که می خواهید بهتر کنیم. اگر می خواهید کمک کنید، هنوز زمان برای شرکت در The State of JS وجود دارد.