דברים שעליך לדעת:
- שאילתות קונטיינר ו- :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;
}
}
במקרה כזה, כשהמאגר קטן מ-400px, הוא עובר לפריסה של עמודה אחת.
פסאודו-סיווג של שירות ה-CSS :has()
אנחנו יכולים לקחת את זה צעד אחד קדימה בעזרת המפסאודו-סיווג של שירות ה-CSS :has()
. היא מאפשרת לבדוק אם רכיב הורה מכיל צאצאים עם פרמטרים ספציפיים.
לדוגמה, p:has(span)
מציין בורר פסקה עם רווח בתוכו. אפשר להשתמש בו כדי לעצב את פסקה ההורה עצמה, או כל דבר שבתוכה. לחלופין, אפשר להשתמש ב-figure:has(figcaption)
כדי לעצב רכיב דמות שמכיל כיתוב.
p:has(span) {
/* magic styles */
}
figure:has(figcaption) {
/* this figure has a figcaption */
}
כדאי לקרוא את המאמר של Una @container ו-:has(): שני ממשקי API חדשים וחזקים כדי לקבל הסבר מפורט יותר והדגמות כיפיות.
ממשק API של Sanitizer
רוב אפליקציות האינטרנט מטפלות לעיתים קרובות במחרוזות לא מהימנות, אבל עיבוד התוכן עשוי להיות מורכב. אם לא תקפידו על כך, תוכלו ליצור בטעות הזדמנויות לנקודות חולשה בכתיבת סקריפטים חוצי-אתרים.
יש ספריות כמו DomPurify שעוזרות במשימות, אבל הן מוסיפות נטל תחזוקה קטן. ה-HTML Sanitizer API עוזר לצמצם את מספר נקודות החולשה בסקריפטים חוצי-אתרים על ידי בניית ניקיון בפלטפורמה.
כדי להשתמש בו, צריך ליצור מופע חדש של Sanitizer. לאחר מכן, קוראים ל-setHTML()
ברכיב שאליו רוצים להוסיף את התוכן שעבר ניקוי.
const mySanitizer = new Sanitizer();
const user_input = `<img src="" onerror=alert(0)>`;
elem.setHTML(user_input, { sanitizer: mySanitizer });
Sanitizer API תוכנן להיות בטוח כברירת מחדל וניתן להתאמה אישית, ומאפשר לכם לציין אפשרויות הגדרה שונות, כמו שחרור רכיבים מסוימים או מתן הרשאה לאחר��ם.
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. החל מגרסה 105 של Chrome, Web SQL יוצא משימוש בהקשרים לא מאובטחים.
אם אתם משתמשים ב-Web SQL בהקשרים לא מאובטחים, כדאי לעבור ל-IndexDB או לקונטיינר אחר לאחסון מקומי בהקדם האפשרי.
ופעולות נוספות.
כמובן שיש עוד המון אפשרויות.
- עכשיו אפשר לעדכן את השם של ה-PWA שמותקנת במחשב וגם בנייד על ידי עדכון המניפסט של אפליקציית האינטרנט.
- ה-API למיקום של חלונות מרובים מקבל תוויות מדויקות של שמות מסך.
- ממשק ה-API של שכבת-העל של פקדי החלונות זמין עכשיו. כדי לספק חוויית PWA שדומה יותר לאפליקציה, היא מחליפה את שורת הכותרת הקיימת ברוחב מלא בשכבת-על קטנה. כך תוכלו למקם תוכן מותאם אישית באזור של סרגל הכותרת.
קריאה נוספת
המאמר הזה מתייחס רק לחלק מההדגשים העיקריים. בקישורים שבהמשך תוכלו למצוא שינויים נוספים בגרסה 105 של Chrome.
- מה חדש בכלי הפיתוח ל-Chrome (105)
- הוצאה משימוש והסרות של Chrome 105
- עדכונים ל-ChromeStatus.com בגרסה 105 של Chrome
- רשימת שינויים במאגרי מקורות של Chromium
- יומן ההפצה של Chrome
להרשמה
כדי להתעדכן, הירשמו לערוץ YouTube של מפתחי Chrome, ותקבלו התראה באימייל בכל פעם שנשיק סרטון חדש.
שמי פיט לפרג', וברגע ש-Chrome 106 יושק, נהיה כאן כדי לספר לכם מה חדש ב-Chrome!