جدید در کروم 106

پیت لی پیج
آدریانا خارا

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

  • API های بین المللی جدیدی وجود دارد که به شما کنترل بیشتری در قالب بندی اعداد می دهد.
  • یک آزمایش اولیه برای Pop-up API وجود دارد تا نمایش محتوای مهم را برای کاربر آسان کند.
  • ما تعدادی از ویژگی های CSS را برای بهبود interop اضافه می کنیم.
  • و چیزهای بیشتری وجود دارد.

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

API های جدید بین المللی

APIهای Intl به نمایش محتوا در قالب محلی کمک می کنند.

مانند سایر APIهای بین المللی، این بار بار را به سیستم منتقل می کند - بنابراین نیازی به ارسال یا حفظ کد محلی سازی پیچیده برای هر کاربر ندارید.

API می‌داند نماد ارز کجا می‌رود، چگونه تاریخ‌ها و زمان‌ها را قالب‌بندی کند یا فهرستی را گردآوری کند.

کروم 106 عملکردهای جدید فرمت اعداد را اضافه می کند.

const opts = {
  style: 'currency',
  currency: 'EUR'
};
const x = new Intl.NumberFormat('de-DE', opts);
const r = x.format(number);
// expected output: "123.456,79 €"

آیا نیاز به نمایش محدوده قیمت دارید؟ formatRange شما را پوشش داده است.

یک شی numberFormat جدید ایجاد کنید، style و گزینه های دیگر و تعداد ارقام برای نمایش را ارائه دهید.

سپس formatRange() فراخوانی کنید تا رشته فرمت شده را دریافت کنید.

const opts = {
  style: "currency",
  currency: "EUR",
  maximumFractionDigits: 0,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.formatRange(2.9, 3.1);
// expected output: "~€3"

آیا می خواهید عددی را با دقت دو رقم اعشار به نزدیکترین افزایش پنج گرد کنید؟ مشکلی نیست

minimumFractionDigits و roundingIncrement مشخص کنید، سپس format() فراخوانی کنید.

const opts = {
  style: 'percent',
  minimumFractionDigits: 2,
  roundingIncrement: 5,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.format(0.428267);
// expected output: "42.85%"

حتی می‌توانید به مرورگر بگویید که صفرهای انتهایی را با trailingZeroDisplay اضافه کند، که برای قیمت‌ها بسیار مفید است.

const strip = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'stripIfInteger',
}).format(0.42);
// 42%

const auto = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'auto',
}).format(0.42);
// 42.00%

برای اطلاعات بیشتر، اسناد فرمت شماره بین المللی در MDN را بررسی کنید.

پاپ‌آپ API ساختن رابط‌های کاربری را بسیار آسان‌تر می‌کند، برای مواقعی که فقط نیاز دارید اطلاعات را درست در مقابل کاربر خود قرار دهید.

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

فقط با قطعه زیر، API از رندر کردن عنصر در بالای همه محتوای دیگر مراقبت می کند و ورودی کاربر و مدیریت تمرکز را مدیریت می کند.

<div id="my-pop-up" popup>
Pop-up content!
</div>
<button  popuptoggletarget="my-pop-up">
Toggle Pop-up button
</button>

به طور پیش فرض، کاربران می توانند پنجره بازشو را با حرکاتی مانند کلید ESC یا کلیک کردن روی عناصر دیگر ببندند.

و توسعه دهندگان کنترل کاملی بر سبک، موقعیت و اندازه لایه بالایی دارند، اما همچنین انعطاف پذیری برای اصلاح رفتارهای پیش فرض را دارند. فقط با استفاده از CSS و HTML.

برای مثال‌ها و گزینه‌های API بیشتر، مقاله Jhey را بررسی کنید.

برای آزمایش اولیه ثبت نام کنید تا به راحتی اطلاعات به موقع به کاربران خود بدهید. نظر خود را با ما در میان بگذارید.

ویژگی های جدید css

دو ویژگی جدید CSS وجود دارد که اینتراپ را بهبود می بخشد و امیدوارم زندگی شما را کمی آسان تر کند.

واحد طول جدیدی در شهر وجود دارد: ic در حال پیوستن به حزب است. ic شبیه ch است. اما ic به طور خاص برای متن نوشته شده در زبان هایی استفاده می شود که از ایدئوگرام استفاده می کنند، اساساً طول را بر اساس عرض یا ارتفاع این کاراکتر [به جایی اشاره کنید] که به معنای آب است، اندازه گیری می کند.

این یک واحد طراحی شده برای اندازه متن است، به شما امکان می دهد برای بهبود خوانایی عرض را محدود کنید، و بدون توجه به اندازه متن، کنترل قابل پیش بینی می دهد.

به عنوان مثال، اگر max-width یک کانتینر را تنظیم کنید، مثلاً 10ic، می‌دانید که ظرف حداکثر دارای 10 گلیف با عرض کامل است، بدون توجه به اندازه قلم. آن را در مثال زیر بررسی کنید:

پشتیبانی از شبکه CSS برای درونیابی برای grid-template-columns و grid-template-rows در راه است، برای 106 برنامه ریزی شده بود، اما به تعویق افتاد و در Chrome 107 راه اندازی خواهد شد، همچنان می توانید آن را در Chrome Beta امتحان کنید. کد براموس به عنوان مثال در اینجا آمده است:

و بیشتر!

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

  • ما در حال شروع فاز پنجم طرح کاهش عامل کاربر هستیم.
  • پشتیبانی از HTTP2 Push و نوع سهمیه دائمی در حال منسوخ شدن است.
  • و ویژگی CSS hyphenate-character اکنون بدون پیشوند در دسترس است.

بیشتر خواندن

این فقط برخی از نکات کلیدی را پوشش می دهد. برای تغییرات بیشتر در Chrome 106 پیوندهای زیر را بررسی کنید.

اشتراک در

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

من آدریانا جارا هستم و به محض اینکه کروم 107 منتشر شد، اینجا خواهم بود تا به شما بگویم چه چیزهای جدیدی در کروم وجود دارد!