箱から抜け出す

CSSは、基本的に長方形のボックスのスタイリングに使用されるが、新機能がデザインの境界を押し広げています。PWAsのWindow Controls Overlayは、開発者がアプリケーションウィンドウ全体、タイトルバー領域を含む、を活用することを許します。この機能は、タイトルバーとウィンドウコントロールの物理的な制約を取り除き、コントロールがアプリケーションのコンテンツ上に重ねられるようにします。この機能を使用するには、ウェブアプリのマニフェストファイルに"window-controls-overlay"を追加します。新しいCSS環境変数、例えば"titlebar-area-x"と"titlebar-area-width"は、タイトルバーが存在するであろう領域にコンテンツを配置するために使用できますが、ウィンドウコントロールボタンがコンテンツを覆い隠さないようにするために、コンテンツの背景色と同じテーマカラーを設定する必要があります。この機能は、デスクトップデバイス上でPWAsがより没入感のある統合的な体験を創造することを許します。