כבר זמן מה שרוב הדפדפנים יכולים להיכנס למצב מסך מלא או למצב קיוסק. בעיקרון, ממשק המשתמש של Chrome בדפדפן לא מפריע, והתוכן תופס את מקומו. לגבי אפליקציות שהותקנו מחנות האינטרנט של Chrome, המשתמשים יכלו אפילו להגדיר באופן ידני אפליקציה כך שתופעל במסך מלא כשהיא נפתחת מדף הכרטיסייה החדשה. הצגה ידנית במסך מלא טובה. מודעות פרוגרמטיות במסך מלא הן טובות יותר!
Fullscreen API מאפשר לאפליקציות אינטרנט להורות באופן פרוגרמטי לכל תוכן בדף להיכנס למצב הצפייה במסך מלא של הדפדפן, מ-JavaScript. פירוש הדבר הוא שמשחקי WebGL ו-<canvas> יכולים סוף סוף להיות חוויה מוחלטת, סרטונים יכולים להיראות כמו במסך הגדול ומגזינים אונליין יכולים להיראות כמו המקור. אני אוהב את הדפדפן, אבל אנחנו לא צריכים להיות מוגבלים אליו :)
אם אתם רוצים לדלג על הפרטים, הנה הדגמה:
איך פועל ה-API? לדוגמה, אם רוצים שהלחצן <div> יעביר את המסך למצב מלא, פשוט אומרים לו:
div.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
div.mozRequestFullScreen();
div.msRequestFullscreen();
div.requestFullscreen(); // standard
כדי לצאת ממצב מסך מלא, document חושף שיטה לכך:
document.webkitExitFullscreen();
document.mozCancelFullScreen();
document.msExitFullscreen();
document.exitFullscreen();
התוכן במצב מסך מלא ממורכז באזור התצוגה בדפדפן. המפתח הוא זה שקובע את הסגנון של התוכן הזה בדרך המתאימה ביותר לצפייה. בדרך כלל, כדאי שהרכיב <div> יתפוס את כל שטח המסך. החדשות הטובות הן שה-API כולל פסאודו-סלקטורים חדשים של CSS לצורך כך:
div:-webkit-full-screen {
width: 100% !important;
}
div:-moz-full-screen {
width: 100% !important;
}
div:-ms-fullscreen {
width: 100% !important;
}
div:fullscreen {
width: 100% !important;
}
/* While in fullscreen, hide any children with class 'tohide' */
:-webkit-full-screen .tohide {
display: none;
}
:-moz-full-screen .tohide {
display: none;
}
:-ms-fullscreen .tohide {
display: none;
}
:fullscreen .tohide {
display: none;
}
בעזרת פסאודו-בוררים של CSS, קל מאוד לעצב תוכן במסך מלא בכל דרך שרוצים.
ממשק ה-API למסך מלא מופעל כברירת מחדל ב-Chrome 15, ב-FF 14, ב-IE 11 וב-Opera 12.1. מידע נוסף על שאר ה-API זמין במפרט.
תאריך עדכון: 11 באוקטובר 2012: כדי להתאים לשינויים במפרט. האות S ב-requestFullscreen() שונתה לאות קטן, ו-document.webkitCancelFullScreen() שונתה ל-document.webkitExitFullscreen(). עדכנו את ההערה לגבי תאימות לדפדפנים.
עודכן ב-11 בפברואר 2014: נוספו קידומות ל-IE, נוסף תחביר CSS רגיל ועדכנו את ההערה לגבי תאימות לדפדפנים. תודה ל-@dstorey ול-@patrickkettner.