חדש ב-Chrome 106

Pete LePage
Adriana Jara

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

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

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

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

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

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

ממשק ה-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"

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

מציינים את 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 ב-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 בלבד.

לדוגמאות נוספות ולאפשרויות API, מומלץ לעיין במאמר של ג'יי.

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

תכונות חדשות ב-CSS

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

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

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

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

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

ופעולות נוספות.

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

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

קריאה נוספת

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

להרשמה

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

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