چیزهای جدید در وب

Rachel Andrew

منتشر شده: ۲۰ مه ۲۰۲۵

در کنفرانس گوگل I/O 2025، بخش «چه چیزهای جدیدی در وب» تمام اطلاعیه‌های Baseline را به همراه نگاهی به برخی از ویژگی‌هایی که امسال به بخشی از Baseline تبدیل شده‌اند، به اشتراک گذاشت. امسال، سال شگفت‌انگیزی برای وب بوده است و برای Baseline، این پست خلاصه‌ای از تمام مواردی است که ذکر شد، به همراه تمام لینک‌ها برای کسب اطلاعات بیشتر.

داشبورد پلتفرم وب و ویژگی‌های وب

در سال ۲۰۲۴، ما از راه‌اندازی اولیه داشبورد پلتفرم وب خبر دادیم که از مجموعه داده‌های ویژگی‌های وب استفاده می‌کند و به شما امکان می‌دهد تمام ویژگی‌هایی را که بخشی از Baseline هستند، بررسی کنید.

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

ابزارهایی برای کمک به شما در کشف هدف پایه خود

در حالی که ممکن است سیاست پشتیبانی مرورگر خود را بر اساس هدف متحرک Baseline Widely available - مانند آژانس بریتانیایی Clearleft - تنظیم کنید، می‌توانید یک هدف ثابت را نیز بر اساس سال Baseline اتخاذ کنید. اکنون می‌توانید از داده‌های کاربری خود به همراه داده‌های ویژگی‌های وب برای تعیین بهترین هدف برای خود استفاده کنید.

سال گذشته در I/O اعلام کردیم که RUMvision از Baseline در محصول خود استفاده خواهد کرد و این ادغام اکنون در حال انجام است.

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

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

اینها تنها دو مورد از مجموعه رو به رشد ابزارهایی هستند که به شما کمک می‌کنند داده‌های واقعی کاربر خود را به Baseline نگاشت کنید.

گروه جامعه Web DX اخیراً افزونه‌ای برای Netlify راه‌اندازی کرده است که پشتیبانی از سال‌های پایه مختلف را نشان می‌دهد و به طور گسترده در سایت‌های شما در دسترس است تا به شما در تصمیم‌گیری در مورد هدف قرار دادن ابزارهای ساخت خود کمک کند. به زودی ادغام‌هایی با محصول Observatory RUM شرکت Cloudflare و Contentsquare نیز انجام خواهد شد.

داده‌ها را با ابزارهای خودتان ادغام کنید

داده‌های ویژگی‌های وب باز و برای ادغام‌های شما در دسترس هستند. ما در تلاشیم تا انجام این کار را آسان‌تر کنیم.

از API داشبورد پلتفرم وب استفاده کنید، یا داده‌های ویژگی‌های وب را مستقیماً از بسته npm دریافت کنید.

اکنون می‌توانید نسخه‌های مرورگر را با استفاده از ماژول نگاشت مرورگر پایه از گروه جامعه W3C WebDX به یک هدف Baseline نگاشت کنید. این ماژول را می‌توان یا در یک محیط جاوا اسکریپت سمت سرور یا با دانلود فایل‌های JSON یا CSV که روزانه از مخزن به‌روزرسانی می‌شوند، استفاده کرد.

این داده‌ها شامل نگاشت‌هایی نه تنها برای مجموعه مرورگرهای اصلی Baseline، بلکه برای مرورگرهای پایین‌دستی مانند Samsung Internet، Opera، UC Browser و Android Webview نیز می‌شود.

بفهمید که آیا ویژگی‌ها توسط هدف پایه شما پشتیبانی می‌شوند یا خیر

اطلاعات پایه اکنون در اکثر صفحات MDN و Can I Use وجود دارد، همچنین می‌توان آن را در داشبورد پلتفرم وب و در مقالات مربوط به web.dev و CSS Tricks یافت. با این حال، همه این موارد مستلزم جستجوی پشتیبانی است. بسیار مفیدتر خواهد بود که اطلاعات پایه در IDE شما هنگام کدنویسی و به عنوان بخشی از سایر ابزارهایی که استفاده می‌کنید، نشان داده شود.

ما مفتخریم که به شما اطلاع دهیم که بسیاری از ابزارهای کلیدی اکنون از پشتیبانی Baseline به صورت داخلی یا به راحتی یکپارچه برخوردارند.

browserslist-config-baseline

بسیاری از ابزارها مانند Babel و PostCSS از browserslist برای تعیین اینکه کدام مرورگرها باید پشتیبانی شوند، استفاده می‌کنند.

تیم کروم به همراه WebDX CG و اعضای جامعه، ابزاری جدید به نام browserslist-config-baseline منتشر کردند. این ابزار به شما امکان می‌دهد تا اهداف browserslist خود را بر اساس اصطلاحات Baseline مانند widely available یا Baseline years پیکربندی کنید.

با این اوصاف، هر ابزاری که یک هدف از فهرست مرورگرها (browserslist) می‌گیرد، اکنون می‌تواند بر اساس Baseline بیان شود.

برای اطلاعات بیشتر به Use Baseline with browserslist مراجعه کنید.

خط پایه در لینترها - ESLint و Stylelint

استفاده از Baseline به همراه linterها اخیراً با چند ابزار جدید در حوزه linter امکان‌پذیر شده است که از ESLint برای CSS شروع می‌شود.

Baseline ESLint یک قانون use-baseline دارد. می‌توانید این را روی هدف Baseline دلخواه خود تنظیم کنید و هنگام استفاده از هر ویژگی جدیدتر از هدف شما، به شما هشدار می‌دهد. می‌توانید نحوه رفع این هشدارها را انتخاب کنید: یا با جایگزینی آن ویژگی با مقادیر اولیه یا با حذف هشدار linter، که یک راه حل کاملاً معتبر است وقتی می‌دانید که با خیال راحت از یک ویژگی پیشرفته استفاده می‌کنید، مثلاً اگر یک پیشرفت تدریجی باشد.

به طور پیش‌فرض، ESLint در صورت استفاده از ویژگی‌های جدیدتر در بلوک‌های @supports هشدار نمی‌دهد، زیرا مرورگرهای پشتیبانی نشده در هر صورت آنها را ارزیابی نمی‌کنند.

برای نیازهای شما در زمینه‌ی linting HTML، یک افزونه‌ی عمومی به نام html-eslint نیز وجود دارد.

استایل‌لینت رسماً از افزونه‌ای به نام stylelint-plugin-use-baseline پشتیبانی می‌کند. این قانون درست مانند قانون ESLint برای CSS عمل می‌کند، اما به جای آن روی استایل‌لینت اجرا می‌شود.

بسیاری از لینترها افزونه‌های IDE نیز دارند، بنابراین می‌توانید هنگام کدنویسی با استفاده از زیرخط‌های موج‌دار، بازخورد فوری در مورد وضعیت Baseline دریافت کنید.

خط پایه در VS Code و JetBrains WebStorm

بسیاری از IDEها مدت‌هاست که از روشی برای نمایش فهرست نسخه‌های پشتیبانی‌شده مرورگرها و نگه‌داشتن ماوس روی یک ویژگی در ویرایشگر پشتیبانی می‌کنند.

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

برای رفع این مشکل، ما با محبوب‌ترین IDE مورد استفاده میلیون‌ها توسعه‌دهنده وب، یعنی VS Code، همکاری کرده‌ایم تا داده‌های Baseline را مستقیماً در این کارت‌های شناور ادغام کنیم.

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

ویژگی‌های پشتیبانی‌شده شامل ویژگی‌های CSS، عناصر HTML و ویژگی‌های HTML است. برای اطلاعات بیشتر به بخش «اکنون ویژوال استودیو کد از Baseline پشتیبانی می‌کند» مراجعه کنید.

این ادغام به این معنی است که هر IDE مبتنی بر VS Code نیز از این کارت‌های شناور بهره‌مند خواهد شد.

و همچنین می‌توانیم اعلام کنیم که JetBrains در حال پیاده‌سازی کارت‌های شناور در WebStorm JavaScript و TypeScript IDE خود است.

وب سریع‌تر از همیشه در حال پیشرفت است

ما امیدواریم که Baseline به شما کمک کند تا از این واقعیت که وب تعاملی سریع‌تر از همیشه در حال پیشرفت است، بهره‌مند شوید.

شما می‌توانید از داشبورد پلتفرم وب برای مشاهده تمام ویژگی‌هایی که در دوازده ماه گذشته - از زمان کنفرانس گوگل I/O 2024 - به نسخه پایه (Baseline New) اضافه شده‌اند، استفاده کنید.

همچنین تعدادی ویژگی وجود دارد که می‌توانید مطمئن باشید به زودی در Baseline Newly در دسترس قرار خواهند گرفت، زیرا در پروژه Interop 2025 گنجانده شده‌اند. می‌توانید در مورد تمام ویژگی‌های گنجانده شده در Interop2025: یک سال دیگر از پیشرفت‌های پلتفرم وب مطالعه کنید.

حالت‌های نوشتاری کناری

ما قبلاً شاهد بوده‌ایم که یک ویژگی به نام Baseline به تازگی در دسترس قرار گرفته است، مقادیر sideways-rl و sideways-lr برای ویژگی writing-mode در CSS. اگر صرفاً برای اهداف طرح‌بندی از حالت نوشتن عمودی استفاده می‌کنید، احتمالاً مقادیر sideways مواردی هستند که باید به آنها توجه کنید.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

موقعیت یابی لنگر

موقعیت‌یابی لنگر (Anchor Positioning) در کروم ۱۲۵ ارائه شد. این قابلیت به شما امکان می‌دهد موقعیت یک عنصر را به یک لنگر (anchor) گره بزنید، مثلاً هنگام باز کردن یک tooltip با یک دکمه.

اکنون در Interop 2025 گنجانده شده است، بنابراین باید امسال شاهد پیوستن آن به Baseline باشیم.

نکات ضروری وب: LCP و INP

رابط برنامه‌نویسی کاربردی LCP

API زمان‌بندی رویداد (برای INP)

شاخص‌های حیاتی وب (Web Vitals) می‌توانند به شما در سنجش تجربه سایتتان و شناسایی فرصت‌های بهبود کمک کنند. طرح ابتکاری شاخص‌های حیاتی وب (Web Vitals) با هدف ساده‌سازی چشم‌انداز و کمک به سایت‌ها برای تمرکز بر معیارهایی که بیشترین اهمیت را دارند، یعنی شاخص‌های حیاتی اصلی وب (Core Web Vitals)، ارائه شده است.

Interop 2025 با پیاده‌سازی LargestContentfulPaint API و Event Timing API در مرورگرها، شامل معیارهای Largest Contentful Paint (LCP) و Interaction to Next Paint (INP) می‌شود.

بهبودهای عنصر <details>

خود عنصر <details> از قبل به صورت Baseline Widely در دسترس است. این عنصر در Interop 2025 گنجانده شده است زیرا تعدادی ویژگی وجود دارد که ویجت‌های افشا با <details> را مفیدتر می‌کند.

عنصر <details> شامل یک عنصر <summary> است که بخشی است که هنگام بسته شدن عنصر <details> در صفحه قابل مشاهده است. خارج از <summary> محتوای عنصر <details> قرار دارد که تا زمانی که کاربر روی خلاصه کلیک نکند، پنهان است.

یکی از مواردی که در طول Interop 2025 به صورت تعاملی ایجاد می‌شود، پنهان کردن محتوا با استفاده از content-visibility به جای display است، به این معنی که اگر محتوا باز نشود، اصلاً رندر نخواهد شد.

همچنین بخشی از کار Interop 2025، شبه عنصر ::marker است. شبه عنصر ::marker به شما امکان می‌دهد مثلث افشای عنصر <summary> را استایل‌دهی کنید.

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

سپس، یک شبه عنصر دیگر ::details-content .

::details-content نشان‌دهنده محتوا است - بخشی از عنصر details که باز و بسته می‌شود و به شما امکان می‌دهد آن را استایل‌دهی کنید.

[open]::details-content {
  border: 5px dashed hotpink;
}

همچنین پیشرفت‌های خوبی مانند بسط خودکار عنصر <details> با تطابق‌های find-in-page و آوردن مقدار until-found از ویژگی hidden HTML به Baseline (که به تازگی در دسترس قرار گرفته است) وجود دارد. این قابلیت یک عنصر را تا زمانی که با استفاده از جستجوی find-in-page مرورگر پیدا نشود یا مستقیماً با دنبال کردن یک قطعه URL به آن هدایت نشود، پنهان می‌کند.

CSS @scope

قانون @scope در CSS به شما امکان می‌دهد تا دسترسی به انتخابگرهای خود را محدود کنید. با تنظیم یک ریشه دامنه با @scope ، هر قانون استایلی که درون قانون at قرار گرفته باشد، فقط روی آن درخت DOM اعمال می‌شود.

برای مثال، اگر فقط می‌خواهید عناصر <img> درون یک عنصر با کلاس .card را هدف قرار دهید، آنگاه .card ریشه‌ی تعیین محدوده خواهد بود.

@scope (.card) {
    img {
        border-color: green;
    }
}

برای کسب اطلاعات بیشتر به بخش «محدود کردن دسترسی انتخابگرهایتان با استفاده از @scope at-rule در CSS» مراجعه کنید.

scrollend

یکی دیگر از ویژگی‌هایی که پیچیدگی را کاهش می‌دهد و رابط‌های اسکرول را بهبود می‌بخشد، scrollend است. بدون رویداد scrollend ، هیچ راه قابل اعتمادی برای تشخیص کامل شدن اسکرول وجود ندارد.

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

با رویداد scrollend ، مرورگر تمام این ارزیابی دشوار را برای شما انجام می‌دهد.

document.onscrollend = event => {…}

مثال‌های بیشتر را در Scrollend، یک رویداد جدید جاوا اسکریپت ، ببینید.

انتقال نمای سند یکسان

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

برای مشاهده‌ی روند پیشرفت پروژه در طول سال، داشبورد Interop 2025 را دنبال کنید.

ویژگی‌های گنجانده شده در Interop 2025 تنها مواردی نخواهند بود که امسال به Baseline اضافه می‌شوند، اما گنجاندن آنها در پروژه‌ها نشانه خوبی از اولویت‌بندی و ارائه زودهنگام آنهاست.

ما تازه شروع کرده‌ایم

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

web.dev را دنبال کنید، زیرا ما همچنان به انتشار اطلاعیه‌هایی در مورد ابزارهای جدید به همراه آموزش‌هایی برای کمک به شما در استفاده از تمام امکانات وب ادامه خواهیم داد.