CSS Custom Highlight API: להדגיש חיפושי AI בלי לרסק את ה-DOM

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

התוצאה הייתה עגומה. המסך ריצד. ההודעות קפצו. הרכיבים ב-React איבדו את ה-State שלהם כי ה-DOM נחתך ועובד מחדש עם מאות תגיות mark. זה היה סיוט ביצועים.

הבעיה הזו מוכרת לכל מפתח פרונטאנד.

הגישה הישנה: הזרקת תגיות DOM

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

איפה זה נשבר? בכול מקום.

• ה-DOM משתנה וגורם ל-Reflow יקר.
• קוראי מסך מתבלבלים מפיצול פסקאות בודדות לעשרות אלמנטים.
• בעת הזרמת טקסט בלייב מ-AI, חישוב ה-Regex קורס או מאט את ה-Main Thread.

הגדרה · CSS Custom Highlight API

מנגנון דפדפן מודרני המאפשר להגדיר אזורי טקסט ב-JavaScript ולהחיל עליהם עיצוב CSS ייעודי, מבלי לשנות אף אלמנט במבנה ה-DOM.

הגישה המודרנית: העיצוב נפרד מהמבנה

הרעיון מאחורי CSS Custom Highlight API פשוט בטירוף. מפרידים לחלוטין בין הנתונים לבין התצוגה הוויזואלית.

אני מגדיר אובייקט Range ב-JavaScript שמסמן בדיוק מאילו תווים עד אילו תווים לפרוס את ההדגשה. לאחר מכן, אני רושם אותו ב-CSS.highlights. מכאן, הדפדפן מנהל את כל הרינדור בשכבת התצוגה בלבד.

איך זה עובד בפועל בחיפוש AI?

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

אני יוצר Range חדש, מגדיר את נקודת ההתחלה והסיום, ומכניס אותו לאובייקט Highlight:

const range = new Range();
range.setStart(textNode, startOffset);
range.setEnd(textNode, endOffset);

const highlight = new Highlight(range);
CSS.highlights.set('ai-citation', highlight);

וב-CSS שלנו, ההגדרה פשוטה ונקייה:

::highlight(ai-citation) {
  background-color: #fde047;
  color: #0f172a;
  border-radius: 2px;
}

זה הכל. אפילו לא שורה אחת של תוכן משתנה ב-DOM.

השורה התחתונה: להפסיק לעבוד קשה

אם האתר שלכם כולל מנגנוני חיפוש מתקדמים, ממשקי צ'אט או כלי GEO הפונים למשתמשים, הגיע הזמן לנער את שיטות העבודה הישנות.

שימוש ב-CSS Custom Highlight API לא רק הופך את הקוד שלכם לנקי ב-80%, הוא מבטיח שהביצועים שלכם יישארו ירוקים ב-Lighthouse ב-2026.

💡

אל תגעו ב-DOM בשביל מניפולציות עיצוב. תנו לדפדפן לעשות את מה שהוא מתמחה בו בשכבת ה-Rendering.