חדש ב-Chrome 106

Pete LePage
Adriana Jara

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

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

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

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

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

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

ב-Chrome 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"

רוצים לעגל מספר ל-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.