דברים שעליך לדעת:
- שאילתות קונטיינר ו- :has() הן התאמה שנוצרה בגן עדן מגיב.
- ה-Sanitizer API החדש מספק מעבד מידע רב-תכליתי מחרוזות שרירותיות שעוזרות לצמצם את נקודות החולשה של סקריפטים באתרים שונים.
- אנחנו עושים צעד נוסף לקראת הוצאת Web SQL משימוש.
- ויש עוד הרבה עוד.
אני Pete LePage. בואו נצלול פנימה מה חדש למפתחים ב-Chrome 105.
שאילתות קונטיינרים ומאפיין ה-CSS :has()
שאילתות קונטיינרים, אחת מהתכונות המבוקשות ביותר היא Chrome גרסה 105. הן מאפשרות למפתחים לשלוח שאילתות לגבי הגודל של בורר ההורים, פרטי עיצוב שמאפשרים לרכיב צאצא להשתלט על לוגיקת עיצוב רספונסיבית, ללא קשר למיקום של הדף.
הם דומים לשאילתה מסוג @media, אבל הם מעריכים אותם בהשוואה לגודל של מאגר במקום את הגודל של אזור התצוגה.
כדי להשתמש בשאילתות מסוג קונטיינר, צריך להגדיר השהיה ברכיב הורה. לדוגמה, נניח שיש לכם כרטיס עם תמונה וטקסט.
כדי ליצור שאילתה במאגר, מגדירים את הערך container-type
במאגר של הכרטיס.
אם מגדירים את container-type
לערך inline-size
, נשלחת שאילתה אל inline-direction
הגודל של ההורה.
.card-container {
container-type: inline-size;
}
עכשיו אנחנו יכולים להשתמש במאגר הזה כדי להחיל סגנונות על כל אחד מהצאצאים שלו באמצעות
@container
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}
במקרה כזה, כשמאגר התגים קטן מ-400 פיקסלים, הוא עובר אל פריסת עמודה אחת.
פסאודו-מחלקה :has()
של CSS
אפשר לקחת את זה צעד אחד קדימה, עם פסאודו-מחלקה :has()
של CSS. הוא
מאפשרת לבדוק אם רכיב הורה מכיל צאצאים עם
.
לדוגמה, p:has(span)
מציין בורר פסקאות שבתוכו מופיע תו span
מתוכו. אפשר להשתמש בה כדי לעצב את פסקה ההורה עצמה, או כל דבר אחר
בתוכו. לחלופין, אפשר להשתמש ב-figure:has(figcaption)
כדי לעצב רכיב של דמות
שמכיל כיתוב.
p:has(span) {
/* magic styles */
}
figure:has(figcaption) {
/* this figure has a figcaption */
}
לקריאת המאמר של Una @container ו- :has(): שני ממשקי API רספונסיביים חדשים ועוצמתיים כדי לקבל הסבר מפורט יותר וכמה הדגמות כיפיות.
ממשק API לחיטוי
רוב אפליקציות האינטרנט מטפלות במחרוזות לא מהימנות בדרך כלל, אבל הן מעבדות אותם בצורה בטוחה התוכן יכול להיות מורכב. אם לא תקפיד על טיפול מספיק, קל בטעות יצירת הזדמנויות לנקודות חולשה של סקריפטים חוצי-אתרים.
יש ספריות כמו DomPurify, שיכולות לעזור, אבל צריך להוסיף נטל התחזוקה. ה-HTML Sanitizer API עוזר לצמצם את מספר נקודות חולשה בכתיבת סקריפטים חוצי-אתרים על ידי בניית אמצעי ניקיון לפלטפורמה.
כדי להשתמש בו, צריך ליצור מכונה חדשה של מכשיר לחיטוי. לאחר מכן, צריך להתקשר אל setHTML()
אל הרכיב שאליו רוצים להכניס את התוכן המחולק.
const mySanitizer = new Sanitizer();
const user_input = `<img src="" onerror=alert(0)>`;
elem.setHTML(user_input, { sanitizer: mySanitizer });
כברירת מחדל, ממשק ה-API של Sanitizer מיועד להיות בטוח וניתן להתאמה אישית. שמאפשרות לציין אפשרויות תצורה שונות, כמו שחרור אלמנטים מסוימים או לאפשר לאחרים.
const config = {
allowElements: [],
blockElements: [],
dropElements: [],
allowAttributes: {},
dropAttributes: {},
allowCustomElements: true,
allowComments: true
};
// sanitized result is customized by configuration
const mySanitizer = new Sanitizer(config);
כדאי לקרוא על מניפולציית DOM בטוחה באמצעות Sanitizer API אפשר לקבל פרטים נוספים.
הוצאה משימוש של Web SQL בהקשרים לא מאובטחים
לפני זמן מה הודענו על התוכניות שלנו להוציא משימוש את Web SQL. מתחיל בעוד Chrome 105 ו-Web SQL יוצא משימוש בהקשרים לא מאובטחים.
אם אתם משתמשים ב-Web SQL בהקשרים לא מאובטחים, עליכם לעבור ל-IndexDB, או מכל אחסון מקומי אחר בהקדם האפשרי.
ופעולות נוספות.
כמובן שיש עוד הרבה.
- עכשיו אפשר לעדכן את השם של PWA מותקנת גם במחשב וגם בנייד באמצעות עדכון המניפסט של אפליקציית האינטרנט.
- ה-API למיקום של חלון מרובה-מסכים מקבל תוויות מדויקות של שם מסך.
- ממשק ה-API של שכבת-העל של פקדי החלונות זמין עכשיו. היא מאפשרת לאפליקציות PWA לספק יותר דומה לאפליקציה על ידי החלפת סרגל הכותרת ברוחב המלא שכבת-על קטנה. כך תוכלו למקם תוכן מותאם אישית באזור של סרגל הכותרת.
קריאה נוספת
זה כולל רק חלק מהעדכונים העיקריים. בקישורים הבאים תוכלו למצוא שינויים נוספים בגרסה 105 של Chrome.
- מה חדש בכלי הפיתוח ל-Chrome (105)
- הוצאה משימוש והסרות של Chrome 105
- עדכונים ל-ChromeStatus.com ל-Chrome 105
- רשימת השינויים במאגר המקור של Chromium
- יומן הגרסאות של Chrome
להרשמה
כדי להתעדכן, אפשר להירשם ערוץ YouTube למפתחי Chrome, ואתה תקבל התראה באימייל בכל פעם שנשיק סרטון חדש.
אני פיט לעמוד, וברגע ש-Chrome 106 יפורסם, נגיע לכאן כדי לספר לך מה חדש ב-Chrome!