Release Notes for Safari Technology Preview 149
Safari Technology Preview Release 149 is available for macOS Monterey 12.3 or later and for macOS Ventura beta. Updates to Safari Technology Preview are no longer available for macOS Big Sur. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS Monterey, or System Settings under General → Software Update on macOS Ventura
CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる
Safari 15.4（最新は15.5）で新しいビューポート単位「lvh」「svh」がサポートされました。ビューポートを基準にした単位で、この単位を使用することで、iOSのSafariで100vhがビューポートの高さではないという仕様に対応できます。 今まではCSSの-webkit-fill-availableがその対応方法でしたが、ネストされた要素やcalc()内では使用できません。新しいビューポート単位を使用すると、そういった問題もなくなります。 The Large, Small, and Dynamic Viewports by Bramus 2021年の記事ですが、Safari 15.4でこれらの新しいビューポート単位がサポートされたので、このタイミングで紹介します。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじ
iOS・macOSと同時に大型アップデートがSafariにも到来、新たな「高さ」の基準やカスケードレイヤーが追加される
2022年3月14日にmacOS Monterey 12.3およびiPadOS・iOS 15.4がリリースされ、同時にSafariが新しいバージョン「15.4」にアップデートされました。Google ChromeやFirefoxに先行搭載されている多数の機能が追加されたほか、動的に変化するビューポートのサイズに応じて要素の高さを決める「dvh」という新たな指定方法などの機能が他のブラウザに先駆けて搭載されました。 New WebKit Features in Safari 15.4 | WebKit https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/ ◆img要素にlazy loading機能が搭載へ img要素に「loading="lazy"」属性を付与することで、「付近にスクロールするまで画像を読み込まない
【コピペ可】background-attachment: fixed;がスマホ（iOSのSafari）で効かない問題を完全に解決する【CSSのみ】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="./destyle.css" /> <link rel="stylesheet" href="./style.css" /> </head> <body> <div class="Firstview">FirstView</div> <section class="Section"> <div class
SafariでGoogleアカウント名が漏えいする脆弱性が見つかる、Appleに問題を報告済みも未対応のまま
フィンガープリントやオンライン詐欺を特定するためのAPIを提供するFingerprintJSが、Apple純正ブラウザのSafariにはGoogleアカウント情報が任意のウェブサイトに漏えいする脆弱性が存在すると指摘しています。 Exploiting IndexedDB API information leaks in Safari 15 https://fingerprintjs.com/blog/indexeddb-api-browser-vulnerability-safari-15/ Safari 15 bug can leak your recent browsing activity and personal identifiers - The Verge https://www.theverge.com/2022/1/16/22886809/safari-15-bug-lea
iOS15 Safari アドレスバーの仕様についてPublic beta版からわかること｜Takumi Hasegawa (unshift)｜note
まえがき先日新しいiOSであるiOS15が発表されました。その中でもSafariのアドレスバーの仕様が大きく変更されたことがWeb制作関係の間で話題になりました。 というのもその仕様が変更が、以前までは上部にあったアドレスバーが下部に移動し、かつフロートするというものだったからです。 ※画像はこのページをキャプチャしたものです。 下部にUIを集めたWebサイトはどうなってしまうのか、、心配してしまった方も多いかと思います。自分もその一人です。 というわけで、iOS15のPublic betaをインストールして検証してみました。 この検証結果はあくまでPublic beta版の検証結果であり、実際のリリース時にはどうなっているかはわかりません。追って検証する予定です。 TL;DRTwitterですでに検証結果を載せています (誤字脱字ご容赦ください)。今回の記事はその検証をまとめ直したもので
Flexboxのgapがモダンブラウザでサポート
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 Flexboxとは Flexbox（Flexible Box Layout Module）はフレキシブルボックスレイアウトモジュールという名前の通り、ボックスのレイアウトを簡単に実現できるものです。 Flexboxを使用すると、今までFloatで処理してきた横並びレイアウトはもちろん、親要素と子要素のプロパティを組み合わせてボックスとボックスの余白を調整することもできます。 gapがモダンブラウ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
｢iOS 15｣の｢Safari｣ではWebM オーディオコーデックをサポートへ | 気になる、記になる…