OS X 10.11 El CapitanのSafari 9には開発者向けに「レスポンシブ・デザイン・モード」が搭載。

　OS X 10.11 El CapitanのSafari 9には開発メニューに「レスポンシブ・デザイン・モード」が搭載されている様です。詳細は以下から。

　Appleが公開した開発者向け資料によると、OS X 10.11 El Capitanに搭載予定のSafari 9には開発メニューに「レスポンシブ・デザイン・モード」が追加され、レスポンシブデザインのWebページのチェックを行えるそうです。

　レスポンシブ・デザイン・モードではSafariのメインウィンドウ内にWebサイトのプレビュー(viewport)が表示され、プリセットされたAppleのデバイス（iPhone4s~, iPad mini 3, iPad Air 2, Mac）の解像度やユーザーエージェントの変更などが素早く行えます。

Responsive Design Mode

The Responsive Design Mode provides a fast-switching layout preview of your webpage across a spectrum of viewport sizes. This viewport quick-look tool helps you quickly spot layout issues on a webpage across many screen sizes. It includes several preset sizes for Apple devices, shown in Figure 3, and allows custom viewport sizes to be defined.
[Safari 9.0 – Apple Developer]

　また、Safari 9ではSafari 8のWebkitで既に対応していたBackdrop Filtersも正式に導入される様なので、興味のある方は関連リンクからAppleのサイトへどうぞ。

Backdrop Filters

Backdrop filters allow you to add advanced image filters to the backdrops of your elements. Achieve modern iOS and OS X material effects in your web content layouts using these filters. Overlay with a backdrop-filter shows a backdrop filter with a blur effect applied to the overlay.
[Safari 9.0 – Apple Developer]

関連リンク：

• Safari 9.0 – Apple Developer
• 「メニューバーを自動的に隠す」機能などWWDC 2015の基調講演で詳しく紹介されなかった「OS X 10.11 El Capitan」の新機能をまとめた動画

現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4 [単行本]

大竹孔明

エムディエヌコーポレーション