חדש ב-Chrome 106

Pete LePage
Adriana Jara

דברים שעליך לדעת:

  • יש ממשקי API חדשים ל-Intl שמאפשרים לכם לשלוט יותר בפורמט של מספרים.
  • יש תקופת ניסיון למקור של Pop-up API, שמאפשרת להציג למשתמשים בקלות תוכן קריטי.
  • אנחנו מוסיפים כמה תכונות CSS כדי לשפר את יכולת הפעולה ההדדית.
  • ויש עוד הרבה.

שמי Pete LePage ושמי Adriana Jara. נצלול פנימה ונראה מה חדש למפתחים בגרסה 106 של Chrome.

ממשקי API חדשים ל-Intl

ממשקי ה-API הבינלאומיים עוזרים להציג תוכן בפורמט מותאם לשוק המקומי.

כמו ממשקי Intl API אחרים, הפתרון הזה מעביר את הנטל על המערכת – כך שאין צורך לשלוח קוד לוקליזציה מורכב לכל משתמש או לתחזק אותו.

ה-API יודע איפה צריך להציב את סמל המטבע, איך לעצב תאריכים ושעות או איך ליצור רשימה.

בגרסה 106 של Chrome נוספו פונקציות חדשות רבות לפורמטים של מספרים.

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"

רוצים לעגל מספר ל-5 הקרוב ביותר עם דיוק של שני מקומות עשרוניים? אין בעיה.

מציינים את 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%

מידע נוסף זמין במאמרים בנושא Intl Number Format ב-MDN.

באמצעות Pop-Up API קל יותר ליצור ממשקי משתמש, במיוחד במקרים שבהם צריך להציג מידע ישירות בפני המשתמש.

המאפיין popup מעביר את הרכיב באופן אוטומטי לשכבה העליונה של האתר, ומספק אמצעי בקרה פשוטים להצגה או להסתרה שלו. לא צריך יותר לדאוג לגבי מיקום, עריכת שכבות של אלמנטים, מיקוד או אינטראקציות עם מקלדת. והכי טוב, לא נדרש כלל JavaScript.

באמצעות קטע הקוד הבא בלבד, ה-API מטפל ברינדור של הרכיב מעל כל התוכן האחר, מטפל בקלט של המשתמש ובניהול המיקוד.

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

כברירת מחדל, המשתמשים יכולים לסגור את חלון הקופץ באמצעות תנועות כמו לחיצה על מקש ESC או לחיצה על רכיבים אחרים.

למפתחים יש שליטה מלאה על הסגנון,המיקום והגודל של השכבה העליונה, וגם גמישות לשנות את התנהגויות ברירת המחדל. שימוש רק ב-CSS וב-HTML.

במאמר הזה של Jhey מפורטות דוגמאות נוספות ואפשרויות API נוספות.

נרשמים לתקופת הניסיון במקור כדי לספק למשתמשים מידע עדכני בקלות. ספר לנו מה אתה חושב.

תכונות חדשות של CSS

יש שתי תכונות CSS חדשות שמשפרות את יכולת הפעולה ההדדית, ואנחנו מקווים שהן יעשו את החיים שלכם קצת יותר קלים.

יש יחידת אורך חדשה בעיר: ic מצטרפת לחגיגה. ic דומה ל-ch. אבל ic משמש במיוחד לטקסט שנכתב בשפות שמשתמשות בסמלי אידיוגרמה. בעיקרון, הוא מודד את האורך על סמך רוחב או גובה התו הזה [הצבעה למקום כלשהו] שמשמעותו מים.

זוהי יחידה שמיועדת לקביעת גודל הטקסט, ומאפשרת להגביל את הרוחב כדי לשפר את הקריאוּת. היא גם מספקת שליטה צפויה ללא קשר לגודל הטקסט.

לדוגמה, אם מגדירים את max-width של מאגר, נניח ל-10ic, מובן שהמאגר יכיל לכל היותר 10 גליפים ברוחב מלא, ללא קשר לגודל הגופן. בדוגמה הבאה אפשר לראות איך זה עובד:

בקרוב תהיה תמיכה ב-CSS Grid ל-interpolation עבור grid-template-columns ו-grid-template-rows. התמיכה הזו הייתה אמורה להיכנס בגרסה 106, אבל היא התעכבה ותופעל בגרסה 107 של Chrome. עדיין אפשר לנסות אותה ב-Chrome Beta. הקוד של Bramus הוא דוגמה לכך:

ועוד.

כמובן שיש עוד הרבה.

  • אנחנו מתחילים את שלב 5 בתוכנית להפחתת המידע בסוכן המשתמש.
  • התמיכה ב-HTTP2 Push ובסוג המכסה הקבועה הוצאה משימוש.
  • ונכס ה-CSS hyphenate-character זמין עכשיו ללא קידומת.

קריאה נוספת

הרשימה הזו כוללת רק כמה נקודות עיקריות. בקישור הבא מפורטים שינויים נוספים בגרסה 106 של Chrome.

להרשמה

כדי להתעדכן, כדאי להירשם לערוץ YouTube למפתחי Chrome, ותקבלו התראה באימייל בכל פעם שנעלה סרטון חדש.

קוראים לי אדריאנה ג'רה, ואחרי שגרסת Chrome 107 תשוחרר אספר לכם מה חדש ב-Chrome.