מדריכים של Modern Web Guidance

שיפור הניראות של סרגל הגלילה למשתמשים שמעדיפים ממשקים עם ניגודיות גבוהה

החלת אפקטים חזותיים בהתאמה אישית עם הצללות של WebGL על תוכן HTML.

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

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

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

התאמה אישית של הצבע או העובי של פס הגלילה

הטמיעו תמיכה במצב כהה באופן שמתאים להעדפת העיצוב הבהיר/הכהה של המשתמש ומתאים את ממשק המשתמש של הדפדפן (למשל, פסי גלילה, פקדי טפסים וכו')

לשלב רכיבי HTML אינטראקטיביים בסצנת תלת-ממד.

בוחרים צבע טקסט קריא עם ניגודיות מספקת על רקע בצבע דינמי.

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

לצלם ולייצא תוכן HTML דינמי כתמונות או כפריימים של סרטונים מתוך רכיב canvas.

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

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

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

אפשר לשלב כמה צורות כדי ליצור חיתוכים מורכבים או אפקטים של "חיתוך" באלמנטים, כמו הוספת חריץ לאלמנט.

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

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

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

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

הגדירו סגנונות גופנים כך שהטקסט יישאר קריא ועקבי מבחינה חזותית במקרה של החלפה בין הגופן המועדף לאחד מהגופנים החלופיים (או להיפך).

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

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

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

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

לאלץ רכיבים מסוימים להיות במצב בהיר או במצב כהה (למשל, בלוקים של קוד, נגני מדיה וכו') ללא קשר לערכת הצבעים של הדף.

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

בנו תכונה של משיכה לחשיפה, שתאפשר למשתמשים למשוך את המסך כלפי מטה כדי לחשוף תוכן נוסף, כמו סרגל חיפוש.

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

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

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

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

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

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

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

בונים רכיב כרטיס שמתאים את התצוגה שלו לשטח הזמין ולתוכן שלו.

בניית רכיב תפריט שמציג רשימה של אפשרויות או פעולות, עם תמיכה בתפריטי משנה בתצוגת עץ.

הדגשת החלק שמוצג כרגע בדף בתפריט הניווט

בונים סרגל התקדמות מעוצב שמציין את השלמת המשימה או התהליך, גם במצבים מוגדרים וגם במצבים לא מוגדרים.

בנו רכיב של מידע בכרטיס צף שמציג תצוגה מקדימה מובנית ואינטראקטיבית של הדף שאליו סוג מסוים של קישור (למשל, פרופיל משתמש) ינווט כשמעבירים מעליו את העכבר.

אפשר ליצור מדריכים קבועים להכשרת עובדים חדשים באמצעות שכבות-על מקוריות מקושרות שנשארות פתוחות במהלך האינטראקציה של המשתמש.

יצירת התראות קופצות והתראות שכבת-על לא פולשניות להעברת הודעות מתמשכות וניתנות לערימה ולתקשורת מצב.

בנו רכיב מתג למצב כהה שמאפשר למשתמשים לשנות את ההעדפה של ערכת הצבעים במערכת שלהם באתר הנוכחי.

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

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

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

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

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

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

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

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

הסתרה או הצגה של רכיבים בצורה חלקה כשהם מתווספים ל-DOM או מוסרים ממנו, או כשערכי התצוגה שלהם משתנים.

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

תמיכה בגרירה כדי להזיז רכיב צף בדף.

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

הדגשה חזותית של הפריט הלא-אינטראקטיבי שנמצא כרגע בנקודת העצירה בקרוסלות, בגלריות או בחוויות החלקה במסך מלא עם גלילה עם נקודות עצירה (scroll snapping). לדוגמה, הרחבת כרטיס כשמצמידים אותו או חשיפת תוכן מוסתר.

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

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

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

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

החלפת מצב החשיפה של תיבת דו-שיח או חלון קופץ באמצעות כפתור, בלי לכתוב JavaScript.

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

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

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

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

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

יצירת תיבת דו-שיח מודאלית שאפשר לסגור באמצעות לחיצה או הקשה מחוץ לתיבת הדו-שיח

הנפשת ממשק המשתמש באמצעות מעברי CSS, אנימציות, אנימציות מבוססות-גלילה ומעברי תצוגה, תוך שמירה על התנועה ב-compositor וכיבוד ההעדפות של הפחתת התנועה.

העברה או שינוי של רכיב הורה של רכיב DOM בלי לאבד את מצב הרכיב החשוב, כמו מצבי אינטראקטיביות (‎:focus/:active), מצב טעינה של <iframe>, מצב אנימציה/מעבר וכו'

השארת תיבת דו-שיח מודאלית, רכיב במסך מלא או חלון קופץ מקורי פתוחים באופן גלוי ופעילים מבחינה פונקציונלית כשצומת ה-DOM הבסיסי שלהם מועבר או משויך מחדש ב-DOM.

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

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

מניעת גלילה בדף שמתחת לתיבת דו-שיח מודאלית כשהיא פתוחה.

אפשר לקשר באופן חזותי בין רכיבים קבועים במצבי דף שונים או בניווטים באפליקציית דף יחיד (SPA) (למשל, הרחבת תמונה ממוזערת של מוצר לתמונה ראשית (Hero) ללא שוליים) על ידי שינוי חלק של הגודל, המיקום או מאפייני עיצוב אחרים.

להוסיף אנימציה לשינויי מצב בתוך רכיב אחד (כרטיס, רשימה, חלונית או עץ משנה אחר) בזמן ששאר הדף נשאר אינטראקטיבי, ומעברים אחרים פועלים בו-זמנית.

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

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

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

הסתרת תוכן מהתצוגה באמצעות תבניות כמו אקורדיונים, כרטיסיות וקטעי "קריאה נוספת", תוך הקפדה על כך שהטקסט המוסתר יופיע במהלך חיפושים מקוריים של "חיפוש בדף", יאפשר הוספה לאינדקס של מנוע החיפוש, יתמוך בקישורי עומק של פרגמנט URL וישמור על נגישות ARIA.

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

להציג הסבר קצר או מידע נוסף כשהמשתמש מעביר את העכבר מעל רכיב אינטראקטיבי, מתמקד בו או לוחץ עליו לחיצה ארוכה, בלי שהמשתמש יצטרך ללחוץ עליו.

הטמעת ניווט מרחבי נגיש באמצעות מקשי החיצים, שפועל בצורה תקינה במצבי פריסה שונים (רשת וכו')

אפשרו למשתמשים לבצע פעולות על פריטים ברשימה (הסרה, העברה לארכיון, סימון כ"כבר קראתי" וכו') באמצעות תנועת החלקה אופקית, כדי שיוכלו לעבד רשומות במהירות בלי ללחוץ על פקד נפרד.

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

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

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

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

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

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

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

יוצרים טופס תשלום שאוסף את פרטי הכרטיס עם ערכי השלמה אוטומטית נכונים ותמיכה במילוי אוטומטי.

צרו טופס כניסה עם ערכי השלמה אוטומטית נכונים ותמיכה במילוי אוטומטי.

ליצור טופס הרשמה עם ערכי השלמה אוטומטית נכונים ותמיכה במילוי אוטומטי.

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

יוצרים טופס כתובת עם מאפייני השלמה אוטומטית נכונים ותמיכה במילוי אוטומטי.

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

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

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

משתמשים ב-CSS כדי להדגיש שדות בטופס שהדפדפן מילא באופן אוטומטי והמשתמש לא ערך.

הטמיעו את האפשרות "הקשה על Enter לשליחה" באזורי טקסט ובשדות קלט של שורה אחת (צ'אט, חיפוש, שינוי שם בתוך השורה) בצורה בטוחה למשתמשי IME (עורך שיטת קלט) כדי למנוע שליחה של טקסט לא שלם.

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

יוצרים רכיב בחירה בהתאמה אישית שהאפשרויות שלו יכולות להכיל עיצוב HTML מורכב (למשל תמונות, סמלים ועיצוב עשיר אחר) ולא רק טקסט פשוט.

מוודאים שנבחרה אפשרות שהיא לא ברירת המחדל בתפריט הבחירה, רק אחרי שהמשתמש קיים אינטראקציה עם הפקד.

אפשר לאמת את מספרי הטלפון של המשתמשים ואת קודי הגישה החד-פעמיים שנשלחים ב-SMS באמצעות חילוץ קוד אוטומטי וקלט טופס נגיש.

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

כדי להפוך רכיבים מותאמים אישית לנגישים כברירת מחדל, צריך להגדיר תפקידים ומצבי ARIA באמצעות ElementInternals ARIA mixin, לנהל את המיקוד באמצעות delegatesFocus ולשמור על קשרי ARIA בתוך שורש צל יחיד.

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

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

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

עיבוד בצד השרת של רכיב מותאם אישית, ואז הידרציה שלו במקום בלי עיבוד מחדש או הבזק של תוכן לא מעוצב.

אפשר להכיל את ה-DOM והסגנונות של רכיב באמצעות Shadow DOM, לבנות את העץ ביעילות באמצעות תבניות HTML ולהציג תוכן של צרכנים באמצעות משבצות.

עיצוב מעבר לגבולות ה-shadow DOM באמצעות סלקטורים של :host, מאפיינים שעוברים בירושה ומאפיינים בהתאמה אישית לעיצוב, ::slotted ו-::part, ושכבות מדורגות ושאילתות קונטיינר בתוך רכיבים.

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

אנימציה חלקה של רכיבים אינטראקטיביים (כמו אקורדיונים, תפריטים וכרטיסים מתרחבים) אל הממדים הטבעיים שלהם וממנה.

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

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

החלה מותנית של כללים או הצהרות מסוימים של CSS רק אם הדפדפן תומך בכלל at-rule מסוים.

בניית רכיב שמשנה את הפריסה שלו בהתאם לשאלה אם הוא מכיל רכיבי צאצא ספציפיים (או לא). לדוגמה, אם הרכיב מכיל תמונה, משתמשים בפריסת עמודות. אחרת, משתמשים בפריסת עמודה אחת כברירת מחדל.

פריסות CSS מודרניות כמו flexbox,‏ grid,‏ subgrid, שאילתות קונטיינר, מיקום עוגן וגודל פנימי. השתמשו במיומנות הזו כשאתם מתכננים רכיבים רספונסיביים של ממשק משתמש או פריסות של דפים.

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

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

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

אפשר להנפיש או לשנות מאפייני טרנספורמציה ספציפיים של CSS (למשל, translate,‏ rotate,‏ scale) בלי קשר למאפייני טרנספורמציה אחרים ברכיב אחד.

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

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

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

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

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

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

עיצוב רכיבי הורה של שדה בטופס (למשל תוויות או קבוצות שדות) כשהשדה לא תקין.

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

חשבו את הזמן שחלף או שנותר בין תאריכים ושעות, אזנו את יחידות משך הזמן ועצבו משכי זמן מותאמים לשוק המקומי שקריאים לאנשים באמצעות Temporal.Duration ו-Intl.DurationFormat.

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

כדי לקבוע פגישות או אירועים עתידיים, צריך לקשר אותם באופן מפורש לאזור זמן גיאוגרפי של IANA. כך זמני האירועים יישארו מדויקים בלי קשר למעברים לשעון קיץ (DST), לשעות "שדילגו עליהן" או לשעות "שחזרו עליהן" במהלך שינויי השעון.

אפשר לנתח, למיין ולמדוד מרווחים בין חותמות זמן של ISO 8601 באלפיות השנייה או בננו-שניות בלי התנגשויות של חיתוך תאריכים באמצעות Temporal.Instant.

להציג ולחשב תאריכים במערכות לוח שנה לא גרגוריאניות (למשל, אסלאמי, עברי או סיני) בצורה מדויקת למשתמשים בינלאומיים.

הידור של C/C++‎ ל-WebAssembly באמצעות Emscripten

כדאי לפצל עיבוד סינכרוני כבד (חישובים מורכבים או לולאות ארוכות) או עדכוני DOM, כדי לאפשר לדפדפן לטפל בקלט של המשתמש ולצבוע מחדש את המסך.

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

טעינה או אתחול של יחסי תלות אסינכרוניים באופן מותנה (למשל, ייבוא של polyfills לתכונות אינטרנט חסרות) בלי צורך בתזמור מורכב בכל יחסי התלות של הסקריפטים בדף.

כדי לצמצם את העומס על הרשת ועל השרת, ועדיין לספק עדכונים בזמן אמת, אפשר להשתמש ב-debounce ולשלוח כמה אירועים של ניתוח נתונים, טלמטריה ו-Core Web Vitals ביחד במשואה אחת.

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

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

כדי להציג תמונות דקורטיביות שעברו אופטימיזציה (כמו רקעים, סמלים של ממשק משתמש או מסכות מורכבות), צריך לספק בו-זמנית פורמטים של תמונות מהדור הבא (כמו AVIF או WebP) לצד כמה צפיפויות פיקסלים (כמו 1x ו-2x). כך הדפדפן יכול לנהל משא ומתן באופן דינמי על השילוב הטוב ביותר של גודל הקובץ והאיכות החזותית בהתאם ליכולות המכשיר של המשתמש.

הורדת העדיפות של אחזור נתונים ברקע שבוצע באמצעות Fetch API כדי למנוע תחרות על משאבי הרשת עם בקשות שהמשתמשים יזמו.

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

כדי לחסוך במשאבי המערכת ובחיי הסוללה, אפשר להשהות את ההפעלה של JavaScript ברקע (כמו אנימציות של <canvas>, רינדור של WebGL או דגימת נתונים בתדירות גבוהה של WebSocket) כשהרכיב לא מוצג במסך, ולהמשיך את ההפעלה בדיוק בזמן כשהוא חוזר לתצוגה.

כדי לאפשר מעברים מהירים יותר לתצוגות שכבר ביקרתם בהן באפליקציית דף יחיד (SPA), אתם יכולים לשמר את מצב ה-DOM המבני שלהן במקום להרוס ולבנות אותן מחדש בכל ניווט.

להציג ולעבד בדיקות A/B, בדיקות עם כמה משתנים או ניסויים אחרים באמצעות JavaScript בצד הלקוח כדי לשנות או להוסיף HTML,‏ CSS ו-JavaScript בלי שהתוכן המקורי יוצג קודם, לפני שהתוכן של הניסוי יוצג בהבהוב או בהבזק.

לזהות קוד JavaScript שפועל לאט וגורמים אחרים למהירות תגובה נמוכה לאינטראקציה באתר (INP).

זיהוי הסקריפטים שגורמים לרוב פריימי האנימציה עם טעינה ארוכה (LoAF)

כדי לשפר את ביצועי טעינת הדף, כדאי לבצע שליפה מראש או רינדור מראש של דפים שהמשתמשים צפויים לבקר בהם בהמשך.

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

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

כדי לצמצם את העיכובים בטעינת משאבים קריטיים, מומלץ לשפר את עדיפות הטעינה של תמונות מועמדות ל-LCP ולהוריד את העדיפות של תמונות לא קריטיות.

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

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

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

עדכון דף באופן הצהרתי עם תוכן שמועבר בסטרימינג בשלב מאוחר יותר לאותו מסמך HTML או באמצעות ממשקי API של JavaScript.

הנחיות מעשיות לאופטימיזציה של אפליקציות אינטרנט מודרניות. המדריך הזה יכול לעזור לכם לבדוק את הביצועים, לשפר את מדדי הטעינה, לתקן אינטראקציות איטיות ולשפר את מדדי ה-Core Web Vitals ‏ (LCP, ‏ INP, ‏ CLS)

לעקוב באופן מהימן אחרי ניתוח נתונים, מדדי Core Web Vitals, שגיאות ונתוני טלמטריה לאורך כל הביקור של המשתמש בדף, ולדחות את שליחת הנתונים עד שהמשתמש עוזב את הדף.

כדי להקטין את מספר צומתי ה-DOM, כדאי להשתמש בתמונות שעברו אופטימיזציה לרזולוציה ברכיבי פסאודו של CSS (כמו ::before ו-::after).

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

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

סנכרנו את מצבי הנגישות הפרוגרמטיים (כמו aria-invalid) עם המצב החזותי ‎ :user-invalid כדי לוודא שמשתמשים בקורא מסך יקבלו משוב על שגיאות רק אחרי אינטראקציה, בדומה לחוויה החזותית.

להשתמש בתוכן שנוצר באמצעות CSS‏ (::before/::after) בדרכים ששומרות על הנגישות, כולל טקסט חלופי לתוכן דקורטיבי.

כדי שגודל הגופן, הפריסה והמידות שמבוססות על rem יתאימו להגדרות בנושא נגישות של המשתמש, צריך להקפיד על העדפת קנה המידה של הטקסט בדף במערכת ההפעלה.

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

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

גישה למשאבים ברשת המקומית של המשתמש או בממשק הלולאה החוזרת (loopback) מאפליקציית אינטרנט ציבורית.

לאמת משתמש חוזר באמצעות מפתח גישה לכניסה ראשית.

לרשום מפתח גישה למשתמש קיים באופן שקט אחרי התחברות מוצלחת באמצעות סיסמה.

המשתמשים יכולים לראות ולנהל את מפתחות הגישה שרשומים בחשבון שלהם.

לאמת את הזהות של משתמש מחובר באמצעות מפתחות הגישה הקיימים שלו לפני ביצוע פעולה רגישה.

רישום מפתח גישה לחשבון משתמש קיים.

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

כדי למנוע התקפות XSS מבוססות-DOM, צריך להגדיר מדיניות Trusted Types להסרת תוכן זדוני או רגיש מ-HTML לא מהימן, להשתמש במדיניות כשכותבים לכיורי DOM כמו innerHTML, ולאכוף את Trusted Types באמצעות Content Security Policy.

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

הגבלת דף או קובץ Worker לתקשורת רק עם רשימת היתרים מפורשת של נקודות קצה ברשת, כדי למנוע בקשות לא מורשות של צד שלישי וזליגת נתונים בצד הלקוח.

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

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

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

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

הנחיות אבטחה מונעת למפתחי אתרים (XSS, ‏ CSP, קובצי Cookie, בידוד ממקורות שונים). השתמשו במיומנות הזו כדי להנחות את תהליך הביקורת, הבדיקה והפריסה של מדיניות האבטחה בצורה בטוחה.

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

העברת אפליקציית אינטרנט מותקנת למקור חדש תוך שמירה על הגדרות המשתמש וקיצורי הדרך ברמת מערכת ההפעלה.

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

מריצים הסקת מסקנות בשפה טבעית במכשיר בדפדפן באמצעות Prompt API, עם פלט בסטרימינג, תשובות JSON מובְנות וניהול סשנים עם כמה פניות.

סיכום תוכן טקסט באמצעות Summarizer API במכשיר.

תרגום טקסט בין שפות באמצעות Translator API במכשיר.

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

אתם יכולים לרשום באופן פרוגרמטי פונקציות JavaScript בצד הלקוח ככלים לסוכני AI באמצעות WebMCP Imperative API.

במדריך הזה מוסבר איך להטמיע את WebMCP‏ (Web Model Context Protocol) באפליקציות בדפדפן, כדי לחשוף פונקציונליות בצד הלקוח ככלים לסוכני AI באמצעות ממשקי API דקלרטיביים או אימפרטיביים.