منتشر شده: ۱۷ ژوئیه ۲۰۲۶
بار دیگر به خلاصه ماهانه Baseline خوش آمدید. در ژوئن ۲۰۲۶، field-sizing به حالت جدید Baseline در دسترس قرار گرفت و به کنترلهای فرم اجازه داد تا به طور خودکار با محتوای خود تنظیم شوند. در همین حال، طیف گستردهای از ویژگیهای CSS، HTML و Web API به همراه بهروزرسانیهای مهم از سوی جامعه توسعهدهندگان، به حالت جدید Baseline رسیدند.
هشدارهای پایه در مورد وضعیت پلتفرم وب
پیگیری زمان سازگاری ویژگیهای وب با یکدیگر اکنون با هشدارهای پایه در داشبورد وضعیت پلتفرم وب آسانتر شده است. با ورود به سیستم از طریق گیتهاب، میتوانید در اعلانهای مربوط به ویژگیهایی که به تازگی در دسترس قرار گرفتهاند، بهطور گسترده در دسترس قرار گرفتهاند یا پیادهسازیهای جدید مرورگر را دریافت میکنند، مشترک شوید. اشتراکها را میتوان طوری پیکربندی کرد که بهروزرسانیهای ایمیل یا فیدهای RSS سفارشی را در یک برنامه ماهانه، هفتگی یا فوری ارسال کنند. میتوانید هشدارها را به جستجوهای ذخیره شده - مانند همه ویژگیهای HTML - محدود کنید، خبرنامههای سفارشی ایجاد کنید، لیستهای ویژگیهای قابل اشتراکگذاری ایجاد کنید یا وبهوکهای Slack را برای اطلاعرسانی به تیم مهندسی خود پیکربندی کنید.
برای کسب اطلاعات بیشتر به بخش معرفی هشدارهای پایه مراجعه کنید.
ویژگیهای جدید موجود
ویژگیهای این بخش از ژوئن ۲۰۲۶ در مجموعه مرورگر اصلی پشتیبانی میشوند و اکنون به صورت پایهای (Baseline Newly) در دسترس هستند.
field-sizing
ویژگی field-sizing در CSS امکان کنترل رفتار اندازه عناصر فرم - مانند <textarea> ، <input> و <select> - که به طور سنتی دارای ابعاد ثابت پیشفرض هستند را فراهم میکند. با field-sizing: content به طور خودکار برای متناسب شدن با محتوای خود، بزرگ یا کوچک میشوند و نیاز به اسکریپتهای تغییر اندازه خودکار جاوا اسکریپت سفارشی را کاهش میدهند.
برای اطلاعات بیشتر در مورد اندازهبندی فیلد، به صفحه مرجع MDN مراجعه کنید.
ویژگیهای پایه و گسترده
ویژگیهای زیر به صورت گسترده در دسترس قرار گرفتند، به این معنی که اکنون به طور گسترده با پروژه شما سازگار و قابل استفاده هستند.
شبه کلاس :has()
انتخابگر والد :has() در CSS به شما امکان میدهد یک عنصر را بر اساس فرزندان یا خواهر و برادرهای بعدی آن استایلدهی کنید. این شبه کلاس کاربردی، الگوهای طرحبندی شرطی را مستقیماً در CSS و بدون نیاز به جاوا اسکریپت برای بررسی ساختارهای DOM فعال میکند.
برای اطلاعات بیشتر در مورد شبه کلاس :has به صفحه MDN مراجعه کنید.
HTMLIFrameElement.loading
ویژگی loading در عناصر <iframe> امکان بارگذاری کند (lazy loading) را برای فریمهای جاسازیشده فراهم میکند. با مشخص کردن loading="lazy" ، مرورگرها بارگذاری iframeهای خارج از صفحه را تا زمانی که نزدیک به viewport اسکرول شوند، به تعویق میاندازند و در پهنای باند شبکه و سربار بارگذاری اولیه صفحه صرفهجویی میکنند.
جزئیات مربوط به مرجع MDN برای HTMLIFrameElement.loading را بررسی کنید.
CanvasRenderingContext2D.reset()
متد reset() در زمینههای بوم دوبعدی، وضعیت زمینه ترسیم را پاک میکند - ویژگیهایی مانند تبدیلها، مسیرهای برش، سبکهای خط و سبکهای پر کردن را به مقادیر پیشفرض خود بازنشانی میکند. این امر امکان استفاده مجدد از زمینه بوم را بدون نیاز به پاکسازی دستی ویژگیها فراهم میکند.
برای اطلاعات بیشتر در مورد CanvasRenderingContext2D.reset به مستندات MDN مراجعه کنید.
واحد طول cap
واحد نسبی فونت cap مربوط به ارتفاع اسمی حروف بزرگ فونت عنصر است. این واحد به شما امکان میدهد عناصر را نسبت به ارتفاع حروف بزرگ ترازبندی و اندازهبندی کنید و طرحبندیهای تایپوگرافی دقیقی را امکانپذیر میسازد.
برای اطلاعات بیشتر در مورد واحدهای طول، به مرجع MDN مراجعه کنید.
counter-set
ویژگی counter-set در CSS، یک شمارنده CSS را روی یک مقدار مشخص تنظیم میکند که مکمل counter-reset و counter-increment است. این ویژگی هنگام دستکاری لیستهای شمارهگذاری شده، طرح کلی سند یا توالیهای شمارنده سفارشی، کنترل را فراهم میکند.
جزئیات مربوط به counter-set را در صفحه MDN مطالعه کنید.
createImageBitmap()
متد استاتیک createImageBitmap() یک تصویر بیتمپ ناهمزمان از منابع تصویری مختلف، از جمله <img> ، <canvas> ، Blob یا ImageData ایجاد میکند. از آنجا که تصاویر را خارج از نخ اصلی رمزگشایی میکند، از مسدود شدن عملکرد رابط کاربری هنگام مدیریت گرافیکهای پیچیده بوم جلوگیری میکند.
جزئیات پیادهسازی createImageBitmap را در مستندات MDN بررسی کنید.
نوع داده <easing-function>
نوع داده <easing-function> در CSS، منحنیهای نرخ تغییر ریاضی را برای انتقالها و انیمیشنها توصیف میکند. این نوع داده علاوه بر کلمات کلیدی استاندارد مانند ease-in یا cubic-bezier() ، از توابعی مانند linear() برای ساخت جلوههای فنری یا پرشی سفارشی پشتیبانی میکند.
نحوه استفاده از آن را در مرجع MDN برای easing-function بیاموزید.
& انتخابگر تودرتو
انتخابگر & nesting هنگام استفاده از CSS nesting داخلی، انتخابگرهای قانون فرزند را به طور صریح به انتخابگر والدشان متصل میکند. این امر وضوح و قوانین صحیح ویژگی را هنگام تعریف حالتهای hover، focus یا pseudoclass تودرتو تضمین میکند.
جزئیات مربوط به انتخابگر تودرتو را در راهنمای MDN مطالعه کنید.
پیش بارگذاری واکنشگرا با rel="preload"
ویژگی media در عناصر <link rel="preload"> امکان پیشبارگذاری واکنشگرای محتوای کلیدی را فراهم میکند. با ترکیب rel="preload" با کوئریهای رسانهای، مرورگرها فقط محتوای منطبق با عرض نمای کاربر یا ویژگیهای نمایش را در اوایل چرخه عمر بارگذاری دانلود میکنند.
نحوه استفاده از آن را در مستندات MDN برای rel="preload" بیابید.
HTMLMediaElement.preservesPitch
ویژگی preservesPitch در عناصر <audio> و <video> کنترل میکند که آیا مرورگر هنگام تغییر playbackRate زیر و بمی صدا را تنظیم کند یا خیر. تنظیم آن روی false امکان تغییر زیر و بمی صدا را هنگام افزایش یا کاهش سرعت پخش رسانه فراهم میکند.
جزئیات مربوط به HTMLMediaElement.preservesPitch را در صفحه MDN بررسی کنید.
شبه کلاس :dir()
شبه کلاس CSS :dir() عناصر را بر اساس جهت متن (مانند ltr یا rtl ) تطبیق میدهد، که جهتی را که از ویژگیهای HTML مانند dir یا متن محاسبهشده به ارث برده شده است، تطبیق میدهد.
برای اطلاعات بیشتر در مورد شبه کلاس :dir به صفحه MDN مراجعه کنید.
تابع ریاضی pow()
تابع css pow() مقادیر توان نمایی را مستقیماً در تعریفهای css محاسبه میکند و یک عدد پایه را به توان تبدیل میکند (برای مثال، pow(2, 3) ). این امر مقیاسبندی واکنشگرا و روابط ریاضی شبکه را ساده میکند.
جزئیات مربوط به تابع pow را در مرجع MDN مطالعه کنید.
ویژگی mask در CSS
ویژگی مختصرنویسی mask در CSS، بخشهایی از یک عنصر را با استفاده از تصاویر یا گرادیانها به عنوان لایههای برشدهنده پنهان میکند. این ویژگی، زیرویژگیهایی مانند mask-image ، mask-position و mask-repeat را برای ایجاد جلوههای پوشش بصری پیچیده ترکیب میکند.
برای اطلاعات بیشتر در مورد ویژگی mask، به صفحه MDN مراجعه کنید.
@media (scripting)
ویژگی رسانه scripting فعال بودن و در دسترس بودن اسکریپتنویسی سمت کلاینت (مانند جاوا اسکریپت) را در متن مرورگر بررسی میکند. این امر به سبکهای بهبود تدریجی اجازه میدهد تا محیطهایی را با یا بدون جاوا اسکریپت فعال هدف قرار دهند.
برای اطلاعات بیشتر در مورد ویژگی رسانه اسکریپتنویسی، به مرجع MDN مراجعه کنید.
URL.canParse()
متد استاتیک URL.canParse() بررسی میکند که آیا یک رشته داده شده، یک URL معتبر و قابل تجزیه (با یک URL پایه اختیاری) است یا خیر، بدون اینکه خطایی ایجاد کند. این کار اعتبارسنجی URL در زمان اجرا را قبل از نمونهسازی اشیاء URL ساده میکند.
جزئیات پیادهسازی URL.canParse را در مستندات MDN بررسی کنید.
API دسترسی به فضای ذخیرهسازی
API دسترسی به حافظه، مکانیزمی را برای محتوای بین سایتی تعبیه شده در <iframe> های شخص ثالث فراهم میکند تا درخواست دسترسی به کوکی و فضای ذخیرهسازی پارتیشنبندی نشده را داشته باشد و امکان احراز هویت و تعاملات حالتمند را در مرزهای دامنه فراهم کند.
جزئیات مربوط به API دسترسی به فضای ذخیرهسازی را در صفحه MDN مطالعه کنید.
این یه جورایی پیچیده شده
اگر موردی مربوط به Baseline را از قلم انداختهایم، به ما اطلاع دهید تا مطمئن شویم در نسخههای بعدی به آن پرداخته میشود! اگر سؤالی دارید یا میخواهید در مورد Baseline بازخوردی ارائه دهید، میتوانید در بخش پیگیری مشکلات ما، مشکل خود را ثبت کنید.