דברים שעליך לדעת:
- עכשיו יש ב-CSS תמיכה בכללים של עיצוב בתצוגת עץ.
- האלגוריתם להגדרת המיקוד הראשוני ברכיבי
<dialog>עודכן. - מעכשיו, מפעילי
fetch()ללא פעולה בשירותי העבודה מושמטים כדי לזרז את הניווט. - ויש עוד הרבה יותר.
קוראים לי אדריאנה ג'רה. נצלול פנימה ונראה מה חדש למפתחים ב-Chrome 112.
תמיכה ב-CSS להטמעה בתוך הטמעה.
אחת מהתכונות האהובות עלינו במעבד CSS מובנית עכשיו בשפה: כללי עיצוב בתצוגת עץ.
לפני ההטמעה, היה צריך להצהיר על כל סלקטורים באופן מפורש, בנפרד זה מזה. התוצאה היא חזרה על גיליונות אלקטרוניים, סגנונות כתיבה מרובים וחוויית כתיבה מפוזרת.
.nesting {
color: hotpink;
}
.nesting > .is {
color: rebeccapurple;
}
.nesting > .is > .awesome {
color: deeppink;
}
אחרי הטמעה, אפשר להמשיך להשתמש בבוררים ולקבץ בתוכם כללי סגנון קשורים.
.nesting {
color: hotpink;
> .is {
color: rebeccapurple;
> .awesome {
color: deeppink;
}
}
}
בעזרת הקינון, המפתחים מצטמצמים את הצורך לחזור על סלקטורים וגם את מיקומי הכללים של הרכיבים הקשורים אליהם. הוא גם יכול לעזור לסגנונות להתאים ל-HTML שאליו הם מטרגטים.
אם הרכיב .nesting בדוגמה הוסרה מהפרויקט, אפשר למחוק את הקבוצה כולה במקום לחפש בקובצים את המופעים של הבורר הרלוונטי.
עריכת עץ יכולה לעזור לכם:
- ארגון.
- הקטנת גודל הקובץ.
- ארגון הקוד מחדש (Refactoring).
במאמר הזה מפורטים טיפים לשימוש יעיל בהטמעת CSS בתוך CSS, כאן מפורטת התמיכה בהטמעת CSS בתוך CSS בכלי הפיתוח.
עדכון האלגוריתם של <dialog> לצורך התמקדות ראשונית.
רכיב ה-HTML <dialog> הוא הדרך הסטנדרטית לייצוג תיבת דו-שיח או רכיב אינטראקטיבי אחר, כמו התראה שאפשר לסגור או חלון משנה, שצריך להופיע מעל כל התוכן האחר בדף אינטרנט.
רכיב ה-HTML הזה הוא הדרך המומלצת ליצירת תוכן כזה, כי התכונות שלו תוכננו לספק נוחות שימוש ונגישות טובים ועקביים יותר.
אחת מהתכונות האלה היא הטיפול ברכיב שבו מתמקדים כשתיבת הדו-שיח נפתחת. בגרסה הזו, האלגוריתם שבוחר את הרכיב הזה עודכן.
מעכשיו:
שלבי המיקוד בתיבת הדו-שיח בוחנים רכיבים שניתן להתמקד בהם במקלדת במקום רכיבים שניתן להתמקד בהם
ההתמקדות ברכיב <dialog> עצמו אם מוגדרת בו המאפיינים של המיקוד האוטומטי
רכיב <dialog> עצמו מקבל את המיקוד כחלופה במקום שהמיקוד 'יאפס' לרכיב <body>.
במסמכי התיעוד מופיעים פרטים נוספים על הרכיב <dialog>.
מתבצע דילוג על handlers ללא תפעול של Service Worker.
מ-Chrome בגרסה 112, ההתחלה של קובץ השירות (service worker) והשליחה של ה-listener מהנתיב הקריטי לניווט יושמטו, אם סוכן המשתמש מזהה שכל פונקציות ה-Fetch של ה-Service Worker לא מצריכות תפעול.
התכונה הזו מאפשרת לנווט בדפים האלה מהר יותר.
טיפול האחזור היה אחת הדרישות של PWA כדי שאפשר יהיה להתקין אפליקציית אינטרנט. אנחנו מניחים שזו הסיבה לכך שבאתרים מסוימים יש למעשה טיפול אחזור ריק. עם זאת, הפעלת קובץ שירות (service worker) והפעלת מאזין ללא פעולה (no-op) גורמים רק לעומס יתר, בלי להביא אף אחת מהיתרונות שאפשר ליישם באמצעות קובץ השירות הנכון, כמו יכולות של אחסון במטמון או יכולות אופליין. לכן, Chrome מדלג עליהן עכשיו כדי לשפר את הניווט.
כחלק מהשינוי הזה, ב-Chrome יוצגו אזהרות במסוף אם כל רכיבי המעקב אחר אחזור של ה-service worker הם no-ops, והמפתחים יעודדו להסיר את רכיבי המעקב אחר אחזור האלה.
ועוד.
כמובן שיש עוד הרבה.
- עכשיו הפרמטר הגדרה של
document.domainהוצא משימוש. - יש גרסת מקור לניסיון להוצאה משימוש של
X-Requested-With headerב-WebView - מכשיר ההקלטה ב-devtools יכול עכשיו להקליט באמצעות בוררי חדירת.
קריאה נוספת
הסקירה הזו כוללת רק כמה נקודות עיקריות. בקישורים הבאים תוכלו לקרוא על שינויים נוספים ב-Chrome 112.
- מה חדש בכלי הפיתוח ל-Chrome (112)
- הוצאות משימוש והסרות ב-Chrome 112
- עדכונים ל-ChromeStatus.com ל-Chrome 112
- רשימת השינויים במאגר המקור של Chromium
- יומן הגרסאות של Chrome
להרשמה
כדי להישאר מעודכנים, נרשמים לערוץ YouTube של מפתחי Chrome, ומקבלים התראה באימייל בכל פעם שנשיק סרטון חדש.
קוראים לי אדריאנה ג'רה, ואחרי שגרסת Chrome 113 תפורסם, אספר לכם מה חדש ב-Chrome.