جدید در کروم 99

Pete LePage

در اینجا چیزی است که شما باید بدانید:

• شمارش معکوس تا نسخه 100 کروم و فایرفاکس چند هفته دیگر باقی مانده است.
• لایه‌های آبشاری CSS به شما کنترل بیشتری بر CSS می‌دهد و به جلوگیری از تضادهای سبک خاص کمک می‌کند.
• متد showPicker() به شما اجازه می دهد تا به صورت برنامه نویسی یک انتخابگر مرورگر را برای عناصر <input> مانند date ، color و datalist نشان دهید.
• و چیزهای بیشتری وجود دارد.

من پیت لی پیج هستم. بیایید وارد آن شویم و ببینیم چه چیز جدیدی برای توسعه دهندگان در Chrome 99 وجود دارد.

کروم 100 و فایرفاکس 100

کروم 100 در اواخر مارس (2022) و فایرفاکس 100 اندکی پس از آن در اوایل ماه مه عرضه می شود. هر دوی اینها نقطه عطف شماره نسخه اصلی هستند و به سه رقم تبدیل می شوند. اما، اگر کد شما دو رقمی است، شماره نسخه جدید می تواند مشکلاتی را برای شما ایجاد کند.

هر کدی که شماره نسخه ها را بررسی می کند یا رشته عامل کاربر را تجزیه می کند باید بررسی شود تا مطمئن شوید که هیچ مشکلی ندارد.

در کروم، پرچم #force-major-version-to-100 شماره نسخه فعلی را به 100 تغییر می‌دهد.

و در منوی تنظیمات شبانه فایرفاکس، می توانید گزینه "Firefox 100 User-Agent String" را فعال کنید. بهتر است سایت خود را آزمایش کنید تا مطمئن شوید همه چیز مطابق انتظار است.

به زودی Chrome و Firefox را بررسی کنید تا برای جزئیات کامل به نسخه اصلی 100 برسید .

CSS Cascade Layers

پشتیبانی از لایه‌های آبشار CSS و قانون @layer در Chrome 99 فرود می‌آید. آنها کنترل واضح‌تری بر فایل‌های CSS شما برای جلوگیری از تضادهای سبک خاص ارائه می‌دهند. این به ویژه برای پایگاه های کد بزرگ، سیستم های طراحی، و هنگام مدیریت سبک های شخص ثالث در برنامه ها مفید است.

آنها یک لایه جدید به آبشار CSS معرفی می کنند. با سبک های لایه ای، اولویت یک لایه همیشه بر ویژگی انتخابگر برتری دارد.

اگر می‌خواهید به یک پیوند استایل دهید، در داخل یک .card ، در یک .post که انتخابگر خاص‌تری اعمال خواهد شد. با استفاده از قانون @layer ، می توانید در مورد ویژگی سبک هر کدام واضح تر باشید و مطمئن شوید که سبک پیوند در کارت شما، سبک پیوند در پست شما را لغو می کند.

@layer base {
  a {
    font-weight: 800;
    color: red;
  }

  .link {
    color: blue;
  }
}

این به دلیل تقدم آبشاری است. سبک های لایه ای صفحات آبشاری جدیدی ایجاد می کنند.

لایه‌های آبشاری با استفاده از قانون @layer در Chrome 99، Firefox 97 و Safari 15.4 Beta پشتیبانی می‌شوند. بررسی کنید لایه‌های Cascade برای اطلاعات بیشتر به مرورگر شما می‌آیند .

showPicker() برای عناصر ورودی

برای مدت طولانی، ما مجبور بودیم به کتابخانه‌های ویجت سفارشی یا هک‌ها متوسل شویم تا انتخابگر تاریخ را نشان دهیم. یک متد showPicker() جدید در HTML InputElements وجود دارد. این روشی متعارف برای نشان دادن یک انتخابگر مرورگر است، نه تنها برای date ، بلکه time ، color و سایر عناصر <input> با انتخابگرها.

انتخابگرهای تاریخ مرورگر در دسک‌تاپ کروم، کروم موبایل، سافاری دسک‌تاپ، موبایل سافاری و دسک‌تاپ فایرفاکس (ژوئیه ۲۰۲۱).

برای استفاده از آن، showPicker() در عنصر <input> فراخوانی کنید. در این مثال، من آن را در یک بلوک try…catch قرار دادم. اگر مرورگر از API پشتیبانی نمی‌کند یا نمی‌تواند انتخابگر را نشان دهد، این امکان را به من می‌دهد که یک نسخه بازگشتی ارائه کنم. بنابراین، اطمینان حاصل شود که کاربران هنوز هم تجربه خوبی دارند.

const button = document.querySelector("button");
const dateInput = document.querySelector("input");

button.addEventListener("click", () => {
  try {
    dateInput.showPicker();
    // A date picker is shown.
  } catch (error) {
    // Use an external library when this fails.
  }
});

برای جزئیات کامل، و همه انواع مختلف <input> را که می توانید از showPicker() استفاده کنید ، نمایش یک انتخابگر مرورگر برای تاریخ، زمان، رنگ و فایل ها را بررسی کنید.

و بیشتر!

البته چیزهای بیشتری وجود دارد.

Canvas2D API به روز شده است و عملکردهای جدیدی را اضافه می کند، از جمله:

• دو رویداد جدید برای ContextLost و ContextRestored
• گزینه willReadFrequently
• پشتیبانی بیشتر از اصلاح کننده متن CSS
• و بیشتر.

آزمایشی مبدأ جدیدی وجود دارد که به PWA ها اجازه می دهد رنگ های جایگزین را در مانیفست برنامه وب برای حالت تاریک ارائه دهند.

و API تشخیص دست خط اکنون وارد شده است.

بیشتر خواندن

این تنها برخی از نکات کلیدی را پوشش می دهد. برای تغییرات بیشتر در کروم 99 پیوندهای زیر را بررسی کنید.

• موارد جدید در Chrome DevTools (99)
• لغو و حذف Chrome 99
• به‌روزرسانی‌های ChromeStatus.com برای Chrome 99
• فهرست تغییر مخزن منبع Chromium
• تقویم انتشار کروم

اشتراک در

برای به‌روز ماندن، در کانال YouTube Developers Chrome مشترک شوید و هر زمان که ویدیوی جدیدی را راه‌اندازی کنیم، یک اعلان ایمیلی دریافت خواهید کرد.

من Pete LePage هستم، و به محض اینکه Chrome 100 منتشر شد، اینجا خواهم بود تا به شما بگویم چه چیزی در کروم جدید است!