タグ Safari
人気順 5 users 10 users 50 users 500 users 1000 usersMac で Safari Web アプリを使う - Apple サポート (日本)
Mac で Safari Web アプリを使うmacOS Sonoma から、Safari で Web ページを Web アプリとして保存できるようになりました。Web アプリは、Safari とは切り離して使うことができます。Web アプリは、通常のアプリさながらに使い勝手がよく、Dock から簡単にアクセスできます。 Web アプリと Web ページの違い Web ページ... 続きを読む
Apple によるブラウザエンジン規制の緩和 | blog.jxck.io
Intro 以前から騒がれていた Apple によるサイドローディング周りの緩和について、正式な情報公開があった。 Apple announces changes to iOS, Safari, and the App Store in the European Union - Apple https://www.apple.com/newsroom/2024/01/apple-announces-changes-to-ios-safari-and-the-app-store-in-the-europ... 続きを読む
たった一行のCSSで複数カードの水平グリッドを簡単に揃えられる! CSSのサブグリッド(subgrid)の基礎知識と使い方
CSSのサブグリッド(subgrid)がChrome 117でサポートされ、Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できるようになりました。 先日の記事でもお伝えしたように、subgridを使用するとカード内の見出しやテキストの水平グリッドを簡単に揃えることができます CSSのサブグリッ... 続きを読む
Webブラウザ上でNode.js環境を実現する「WebContainer」、iOS/iPadOS版Safariに対応。iPhone/iPadでWeb開発環境が起動
Webブラウザ上でNode.js環境を実現する「WebContainer」、iOS/iPadOS版Safariに対応。iPhone/iPadでWeb開発環境が起動 WebAssemblyを用いてWebブラウザ上でNode.js環境を実現する「WebContainer」などを提供するStackBlitzは、WebContainerがiOS/iPadOS 16.4以降のSafariに対応したことを明らかにしました。 iPhoneやiPa... 続きを読む
WebGPUがついに利用可能に - WebGL以上の高速な描画と、計算処理への可能性 - ICS MEDIA - ICS MEDIA
2023年5月にリリースされたGoogle Chrome 113で、次世代WebグラフィックスのJavaScript APIであるWebGPU(ウェブジーピーユー)がデフォルトで利用できるようになりました。ICS MEDIAでは2018年にWebGPUについて紹介していましたが、当時はSafariで開発者向けのフラグを有効にした場合にのみお試しできる実験的機能でし... 続きを読む
Media Queryでminやmaxはもう使いたくない。全ブラウザ対応した範囲記法が直感的で便利
筆者が CSS を学び始めたとき、media query で画面サイズに応じてスタイルを変える方法が大変ニガテでした😭 min? max? 未満のときはどうするの? and で繋げなきゃいけないの? 長くない? と疑問に思いながら、今日まで長い年月を過ごしてきました。 本日(2023/03/28)、Safari 16.4 がリリースされ、 media query ... 続きを読む
CSSの三角関数(sin(), cos(), tan())の基礎知識と基本的な使い方を解説
CSSで数式を使用するときには、今まではcalc()関数をはじめ、min(), max(), clamp()などの関数でしたが、ついに三角関数もChrome, Edge, Safari, Firefoxのすべてにサポートされました。 CSSの三角関数、sin(), cos, tan(), asin(), acos(), atan(), atan2()の基礎知識と基本的な使い方を紹介します。 Trigonometric fun... 続きを読む
CSSの三角関数を理解しよう! sin()とcos()でできる表現 - ICS MEDIA
2023年3月にリリースされるChrome 111ではCSSの三角関数がサポートされます。FirefoxやSafariではすでにサポートされている機能のため、2023年3月からは主要なブラウザでCSSの三角関数が使えるようになります。 とはいえ、「CSSで三角関数をどうやって使えばいいの?」「そもそも三角関数で何ができるの?」という方も多... 続きを読む
2023年はCSSで三角関数「sin(), cos(), tan()」が主要ブラウザのすべてで使用できるようになるぞ!
2023年はついに、CSSで三角関数が主要ブラウザのすべてで使用できるようになります! CSSで使用できる三角関数は、sin(), cos(), tan(), asin(), acos(), atan(), atan2()です。すでに2022年にリリースされたSafari, Firefoxではサポートされており、3月リリースのChrome 111でもサポートされる予定です。 CSSの三角関数... 続きを読む
610億円を払って「Firefox」を延命するGoogleのズル賢さ | AppBank
現在主流なブラウザはGoogle Chromeですが、他にもAppleのSafariやMicrosoft Edge、そしてFirefoxなど、ブラウザは数多く存在します。 中でもFirefoxはGoogle Chromeの長年のライバルでした。しかし不思議なことにGoogleは昨年、Firefoxに対して610億円を資金提供しており、同社の経営を助けています。なぜGoogleが競合... 続きを読む
CSSの100vhがスマホで高さいっぱいにならない問題はこれで解決! CSSの新しいビューポート単位の使い方と注意事項
先日リリースされたChrome 108で、CSSの新しいビューポート単位(svh, lvh, dvhなど)がサポートされました。SafariとFirefoxではすでにサポートされていましたが、Chromeでもサポートされたのは朗報です。 この新しいビューポート単位の基本的な使い方と注意事項を紹介します。 The large, small, and dynamic viewport... 続きを読む
iPhoneで「ガスト」検索しようとするも「がす」の『す』でSafariが落ちる!? – kototoka
がすの「す」でSafariが、、 本日、ふとiPhoneのSafariで、「ガスト」さんを検索しようとしたその時! Safariの検索バーに「がすと」と入力するべく、フリップ入力で「が」、「す」、「と」と入力していると、、、 「す」でSafariが、落ちる!! この画面です!! 「が」は入力できる。が、 「す」をフリップで入力した... 続きを読む
CSSの進化がすごい! スタイルクエリの基礎知識と使い方を解説、親要素の「スタイル」に応じて子要素のスタイルを適用
Chrome 106, Safari 16でサポートされたコンテナクエリは、親要素(コンテナ)のサイズに応じて子要素のスタイルを設定できる新機能です。しかし、これは機能の一部です。親要素のスタイルに応じて子要素のスタイルを設定できるスタイルクエリを紹介します。 たとえば、下記は右のカードの親要素に特定のスタイルが設定... 続きを読む
朗報! CSSの新しい単位(lvh, svh, dvh)がChromeに実装、100vhがビューポートの高さいっぱいにならない問題を解決
Safari, FirefoxでサポートされていたCSSの新しいビューポート単位「lvh」「svh」「dvh」などが、ついにChrome 108で実装されます! CSSの新機能で、Chromeが一番最後というのは珍しいですね。 最も活躍するのがiOSのSafariだからでしょうか。とはいえ、主要ブラウザすべてにサポートされるようになるのは、嬉しいニュー... 続きを読む
2022年におけるフロントエンド開発のベースライン
TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは4Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは!LINEフロントエンド開... 続きを読む
Next.jsはどうやってスクロール位置を復元するのか
Next.jsにはexperimental(実験的機能)でscrollRestorationというフラグが存在します。 // next.config.js const nextConfig = { // ... experimental: { scrollRestoration: true, }, } module.exports = nextConfig デフォルトでもブラウザ側でスクロール位置を復元してくれることもありますが、Safariでは復元されなか... 続きを読む
CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる
Safari 15.4(最新は15.5)で新しいビューポート単位「lvh」「svh」がサポートされました。ビューポートを基準にした単位で、この単位を使用することで、iOSのSafariで100vhがビューポートの高さではないという仕様に対応できます。 今まではCSSの-webkit-fill-availableがその対応方法でしたが、ネストされた要素やcalc... 続きを読む
Web Animations APIのcompositeが凄過ぎてすごいからみんな見てくれ - Qiita
この記事はようやくSafariでもフルサポートされそうなWeb Animations APIのcomposite(効果の組成)って機能がすごいよ!!って、ただそれだけを伝えたい記事です。平たくいうと複数のアニメーションを簡単キレイに合成できる機能なのですが、通常のWebのコーディングでもよく出てくる辛さを解決してくれる結構すごいヤ... 続きを読む
「NHKプラス」、「Firefox」での視聴が不可能に 5月23日から
オンラインでNHKの番組を視聴できる「NHKプラス」の動作環境を変更すると発表した。5月23日以降、推奨ブラウザを「Microsoft Edge」「Google Chrome」「Safari」の最新版に限定する。 NHKは4月27日、オンラインで番組を視聴できる「NHKプラス」の動作環境を変更すると発表した。これまでAndroid 6以上/iOS 11以上として... 続きを読む
iOS・macOSと同時に大型アップデートがSafariにも到来、新たな「高さ」の基準やカスケードレイヤーが追加される
2022年3月14日にmacOS Monterey 12.3およびiPadOS・iOS 15.4がリリースされ、同時にSafariが新しいバージョン「15.4」にアップデートされました。Google ChromeやFirefoxに先行搭載されている多数の機能が追加されたほか、動的に変化するビューポートのサイズに応じて要素の高さを決める「dvh」という新たな指定方法など... 続きを読む
カスケードレイヤー「@layer」でCSSの実装がどう変わるのか、仕組みと基礎知識、さまざまな使用例を徹底解説
CSSの新機能「カスケードレイヤー」がいよいよ主要ブラウザすべてにサポートされます。Firefox 97(先月リリース)とChrome 99(3/1リリース)でサポートされ、そしてSafariでは次期バージョンでサポートされる予定です。 カスケードレイヤー@layerを使用すると、CSSの詳細度とスタイルの順番をカスケード内で明示的にレ... 続きを読む
2022年におけるフロントエンド開発のベースライン - LINE ENGINEERING
2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準使用では2年前のSafari、そしてネットワークでは4Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは!LINEフロントエンド開発室の... 続きを読む
Mac版Safariではてなブックマーク拡張を使う
経緯Chrome/Firefoxのはてブ機能拡張は配布されているが、Mac版Safariの機能拡張は数年前から配布されていない。 Safariに乗り換える際の個人的な障壁であったが、Chrome版機能拡張をSafari向けに変換して利用する事ができたので、メモ代わりに記しておく。 必要なものmacOS Big Sur以降XCodeはてブ拡張をインストール済... 続きを読む
WebAssemblyが目指していること。ナノプロセスモデルの実現、システムインターフェイス、実行時リンクの実装など - Publickey
WebAssemblyが目指していること。ナノプロセスモデルの実現、システムインターフェイス、実行時リンクの実装など Webブラウザ上でネイティブコードのように高速に実行できるバイナリフォーマット「WebAssembly」は、すでにChromeやFirefox、Edge、Safariなどの主要ブラウザでサポートされ、2019年12月にはW3Cの勧告にも... 続きを読む
【CSS】iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる方法 | Zenn
メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。 iOSのSafariでの100vhが気に食わない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表... 続きを読む