در ماه آگوست وارد پلتفرم وب شده است

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

Rachel Andrew

نسخه های مرورگر پایدار

در ماه آگوست، فایرفاکس 104 ، کروم 104 و کروم 105 پایدار شدند.

دگرگونی های فردی

Chrome 104 شامل ویژگی‌های جداگانه برای CSS Transforms است. ویژگی‌ها scale ، rotate و translate هستند که می‌توانید از آنها برای تعریف جداگانه آن بخش‌های یک تبدیل استفاده کنید.

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

پشتیبانی مرورگر

• 104
• 104
• 72
• 14.1

منبع

نحو پرس و جو رسانه جدید

Chrome 104 همچنین شامل نحو محدوده درخواست رسانه است. این قبلاً توسط فایرفاکس ارسال شده است و به ساده‌سازی درخواست‌های رسانه‌ای کمک می‌کند. به عنوان مثال درخواست رسانه زیر:

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

می توان با استفاده از عملگر مقایسه نوشت:

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

پشتیبانی مرورگر

• 104
• 104
• 102
• 16.4

منبع

پرس و جوهای کانتینر

Chrome 105 یک نسخه مهیج است که ویژگی مورد انتظار جستجوهای کانتینر را به پلتفرم وب می آورد. در حالی که پرس و جوهای رسانه راهی برای پرس و جو در برابر اندازه نما در اختیار شما قرار می دهند، پرس و جوهای کانتینر روشی برای پرس و جو در برابر اندازه یک کانتینر ارائه می دهند.

پشتیبانی مرورگر

• 105
• 105
• 110
• 16

منبع

برای استفاده از عبارت Container Query، Containment را با استفاده از ویژگی container-type روشن کنید.

.card-container {
  container-type: inline-size;
}

تنظیم container-type به inline-size اندازه جهت درونی والد را جستجو می کند. در زبان‌های لاتین مانند انگلیسی، این عرض کارت است، زیرا متن از چپ به راست به صورت خطی جریان دارد.

اکنون، می‌توانیم از آن ظرف برای اعمال استایل‌ها به هر یک از فرزندانش با استفاده از @container استفاده کنیم:

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

می‌توانید در پست @container و :has(): دو API پاسخ‌گوی جدید قدرتمند که در Chromium 105 فرود می‌آیند، درباره درخواست‌های کانتینر اطلاعات بیشتری کسب کنید.

شبه کلاس والد :has().

در پست ذکر شده در بالا :has() نیز اشاره شده است. این شبه کلاس جدید، شبه کلاس CSS :has() راهی برای هدف قرار دادن عنصر والد و خواهر و برادر بر اساس شرایط به شما می دهد. در :has() انتخابگر خانواده بیشتر بیاموزید.

پشتیبانی مرورگر

• 105
• 105
• 121
• 15.4

منبع

API ضد عفونی کننده

همچنین در Chrome 105 Sanitizer API وجود دارد. این API پاکسازی را در پلتفرم ایجاد می کند تا به حذف آسیب پذیری های اسکریپت بین سایتی کمک کند.

پشتیبانی مرورگر

• ایکس
• ایکس
• ایکس

منبع

همچنین در کروم 105 شبه کلاس :modal CSS نیز وجود دارد. این عنصر با عنصری مطابقت دارد که در حالتی است که در آن تمام تعاملات با عناصر خارج از آن حذف می شود. به عنوان مثال، یک <dialog> با API showModal() باز شد.

پشتیبانی مرورگر

• 105
• 105
• 103
• 15.6

منبع

متدهای findLast() و findLastIndex()

فایرفاکس 104 از متدهای Array.prototype.findLast () , Array.prototype.findLastIndex () , TypedArray.prototype.findLast () و TypedArray.prototype.findLastIndex () پشتیبانی می کند. اینها برای یافتن مقدار و شاخص (به ترتیب) آخرین عنصر در یک آرایه یا TypedArray که با یک تابع آزمایشی ارائه شده مطابقت دارد استفاده می شود.

پشتیبانی مرورگر

• 97
• 97
• 104
• 15.4

منبع

مرورگر بتا منتشر شد

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

با توجه به اینکه تاریخ انتشار درست خارج از ماه است، تنها نسخه بتای جدید در ماه آگوست فایرفاکس 105 بود که در حال حاضر جزئیات آن کم است.

بتای Safari 16 که در ژوئن ذکر شد نیز همچنان ادامه دارد.

بخشی از سری جدید به وب