WebKit Features in Safari 17.2
ContentsHTMLCSSImages and videoJavaScriptWeb APIWeb AppsWebGLPrivacyWeb InspectorFixes for Interop 2023 and moreUpdating to Safari 17.2Feedback Web technology is constantly moving forward, with both big new features and small subtle adjustments. Nowadays, web developers expect web browsers to update multiple times a year, instead of the once or twice a year typical of the late 2000s — or the once
Web Push for Web Apps on iOS and iPadOS
Today marks the release of iOS and iPadOS 16.4 beta 1, and with it comes support for Web Push and other features for Home Screen web apps. Today also brings the first beta of Safari 16.4. It’s a huge release, packed with over 135 features in WebKit — including RegExp lookbehind assertions, Import Maps, OffscreenCanvas, Media Queries Range Syntax, @property, font-size-adjust, Declarative Shadow DOM
News from WWDC22: WebKit Features in Safari 16 Beta
ContentsWeb Inspector ExtensionsContainer QueriesWeb Push for macOSSubgridFlexbox InspectorAccessibility ImprovementsAnimation ImprovementsOverscroll BehaviorShared WorkerAnd moreFeedback WebKit has had a big year, with over 162 new features and improvements shipping in WebKit browsers — including Safari 15.2, Safari 15.4, and Safari 15.5. Features from earlier this year include dialog element, la
2022年のブラウザとウェブ標準 | gihyo.jp
2022年になりました。矢倉眞隆（@myakura）と申します。昨年に引き続き、新春特別企画のブラウザとウェブ標準を担当させていただきます。 なお、取り上げるトピックの数やインパクトの大きさもあり、CSSについては別記事となりました。あわせて読んでいただければ幸いです。 ChromeとFirefoxがバージョン100に到達 昨年の新春企画でもすこし触れましたが、今年はChromeとFirefoxのバージョンが100になります。 Chrome 100は、今年の3月29日にリリース予定です。もともとはもう少し先だったのですが、Chrome 94からリリースサイクルが4週間に短縮されたため、Chrome 100のリリースが早まりました。 Chromeよりも早く4週間のリリースサイクルに移行していたFirefoxも、5月3日にFirefox 100がリリース予定です。 バージョンが3桁になることで
Safari 15 の新機能とかまとめ | サイボウズ フロントエンドエキスパートチーム
先日 Safari 15 がリリースされました。 https://webkit.org/blog/11989/new-webkit-features-in-safari-15/ 影響の大きそうな箇所や、知っておいたほうが良さそうな箇所を中心に紹介します。 HTML theme-color meta タグ上での theme-color のサポートが追加されました。 指定することで、ブラウザのメニューバーやタブバーといった領域のカラーを変更することができます。 prefers-color-scheme と併用することで、ダークモード/ライトモードに応じた色の指定もできます。 Design for Safari 15 CSS aspect-ratio プロパティのサポート aspect-ratio - CSS: Cascading Style Sheets | MDN lab() lch() h
wkhtmltopdf
What is it? wkhtmltopdf and wkhtmltoimage are open source (LGPLv3) command line tools to render HTML into PDF and various image formats using the Qt WebKit rendering engine. These run entirely "headless" and do not require a display or display service. There is also a C library, if you're into that kind of thing. How do I use it? Download a precompiled binary or build from source Create your HTML
[Swift]WKWebViewで長押しによるメニュー表示を止める | DevelopersIO
CX事業本部の中安です。まいどです。 本日はiOSアプリ開発の小ネタになりますが、WKWebViewで「長押しによるメニュー表示を止める方法」を書き留めたいと思います。 iPhone や iPad を使っている方ならよく使うと思いますが、 ブラウザ上の文字を長押しすると、下図のようにPCでいうところの右クリックのように範囲選択してコピー等をするためのメニューが表示されます。 これはWKWebView。つまり、アプリ上のWEBビューでも同じ動作をします。 しかし、アプリによってはこのメニュー表示をさせたくないこともあるかもしれません。 今回は、このメニュー表示を制御してみることにしましょう。 前提となる実装 今記事ではUI実装については割愛しますが、 今回作る画面(名前をWebViewControllerとします)では WKWebViewが画面全体に配置されているものとします。 その場合の必
![[Swift]WKWebViewで長押しによるメニュー表示を止める | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/d9c911035d6b7c1c0afb32d4e1e6f2e752169d3a/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2018%2F12%2Feyecatch-swift.png)
iPhoneやAndroidのサイトでスクロールバーをカスタマイズ | スターフィールド株式会社
CSSの設定で、”overflow: auto” や”overflow:scroll”を指定したとき、 iPhoneでそこを表示すると、要素のはみ出した部分は隠れた状態となり、 スクロールは可能なのですが、スクロールバーが表示されません。 そのままでは、そこがスクロール可能であるということがわかりづらく、 サイトとして使いづらくなってしまう可能性が高くなります。 なんとか解決策はないかと探していたところ、 Webkitを使ったブラウザでは、CSSの疑似要素を使って、スクロールバーをデザインすることができることがわかりましたので、 その方法についてご紹介いたします。 ↓こちらがデモです(ChromeもしくはSafariにてご覧下さい) DEMO 方法 スクロールバーの中でデザインすることができるのは、スクロールバー本体・スクロールバーの動く部分・角それぞれのwidthとbackgroundと
[CSS]iOS で滑らかなスクロールを実現する「-webkit-overflow-scrolling」プロパティの使い方｜CSSスニペット｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
overflow で要素内をスクロールさせると、iPhone やiPad などのiOS で見た場合にスクロールがぎこちなくなります。 そんな時は、iOS 5.0 より実装されたSafari CSS の -webkit-overflow-scrolling プロパティを使うことで、iOS でもスムーズなスクロール（慣性スクロール）を実現できるようになります。 -webkit-overflow-scrolling の指定 -webkit-overflow-scrolling に指定する値は「auto」と「touch」の2 つです。 「auto」はデフォルトで、慣性スクロールしません。 指定した高さの要素内をoverflow: scroll でスクロールさせる際に、以下のように .content { height: 200px; overflow: scroll; -webkit-overflo
![[CSS]iOS で滑らかなスクロールを実現する「-webkit-overflow-scrolling」プロパティの使い方｜CSSスニペット｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/08b792dc919b5df541e06c5e157286ce8e586603/height=288;version=1;width=512/https%3A%2F%2Fwww.webantena.net%2Fwp-content%2Fuploads%2F2014%2F02%2Fios.png)
iOS 8から追加されたWebKit Frameworkを使ってみる - koogawa blog
Qiita でも公開しています。 ※本記事は、一般に公開されている情報を元に作成しています。 iOS 8から新たに WebKit Framework が追加されました。 これにより、Webページのロードプログレスがついに取得できるようになったり、JavaScriptエラーを受け取れるようになりました。 クラスリファレンス等は一般にも公開されており、開発者以外も読むことができます。 Apple Developer Documentation 以下、私が気になった項目をまとめていきたいと思います。 UIWebViewとの関係 従来の UIWebView と WebKit Framework は別物のようです。（勝手にUIWebViewの機能強化版だと思い込んでいた） 新たに WKWebView というクラスが用意されていました。 WKWebView Class Reference 初期化 We
-webkit-transform: kill-the-flash | Viget
This issue has been popping up all over the place lately. When hovering over elements with certain css3 transform properties set on the hover state, Chrome and Safari sporadically flash. Unless you're into causing seizures, this effect is probably not what you're going for. To prevent the infamous black flash in Chrome and white flash in Safari, you need to set any element you plan on transforming
translateプロパティでAndroid,iPhone端末で画像がちらつく件
あ、ども僕です。 最近、何かとスライダー的なやつを扱う機会が増えております。 よくあるスライダーですね。 こんな感じのやつですね。 画像がスーっと行くやつ。バナーなんかで良く見かけますよね。 これをスマフォンサイトでも実装しているのですが、マークアップは単純に <div class="slider"> <ul class="sliderLi"> <li><img src="yes.jpg" alt="no"></li> <li><img src="yes.jpg" alt="no"></li> <li><img src="yes.jpg" alt="no"></li> </ul> </div> こんな感じだったりします。 liの親要素であるulに-webkit-transform:translate(-350px,0px);などで 動かしてスライドしているかの様に実装するのですが、 スライ
Stick your landings! position - sticky lands in WebKit | Blog | Chrome for Developers
position: sticky is a new way to position elements and is conceptually similar to position: fixed. The difference is that an element with position: sticky behaves like position: relative within its parent, until a given offset threshold is met in the viewport. Use cases Paraphrasing from Edward O’Connor's original proposal of this feature: Introducing sticky positioning LAUNCH DEMO By simply addin
新しいiOS5のMobile Safariでmeta-viewportのワーニングが出たのでWebKitのソースを読んでみたというお話 - l4l
どんなワーニング？ iOS5(beta)とかChrome 13などで、ふと気付いたら自分が開発しているページでワーニングが出ていた。「widthってkeyに対してdevice-widthなんて値は指定できないんだぜJK」とかそんな感じ。 Viewport argument value "device-width;" for key "width" not recognized. Content ignored. 実際に指定していたviewportは以下な感じ。 <meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0;"> ちなみにiOS4では出力されてない。はて原因何だろう？という今日の出来事に対するメモ。 結論 metaタグのcon
iPhone等での表示をPCで確認出来るAir製のシミュレーター・Mobilizerがローカルファイルにも対応出来るし、割と良かった
iPhoneや、BlackBerryなどでのWebサイトの表示をPCで確認出来るシミュレーターです。Air製で無料で使えます。まだ使い始めたばかりなんですが起動も軽く、ユーザーエージェントもそのデバイスごとに設定してくれてるみたいです。 シミュレーター（エミュレーター？よくわからｎ）はいくつかありますが、選択肢の一つとして。WinでもMacでもOKです。完璧ではないですけど、今までで一番良かった気がしました。もともと優れたシミュレーターはまだ無い気がしますしね・・・あるのかな？ｗ 動画あったので貼っておきました。iPhone4は勿論、Plam PreやBlackBerry、HTCなど4種のデバイスを同時に確認出来ます。ローカル上のHTMLも動作確認出来ますよ。Airアプリなので動作にはAdobeAirが必要です。 4つ同時に起動可能 日本なら、基本的にiPhoneとAndroidだけあれば
iPhone向けサイト構築 基礎文法最速マスター - EC studio デザインブログ
弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone（iPod Touch）向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 2010/11/18追記： iPhone向けサイト制作の書籍を執筆しました！ 既存のデスクトップ向けサイトをモデルにした iPhoneに最適化したサンプルサイトの紹介と コードの解説をしています。 iPhone向けサイト制作の入門書に最適です。 「HTML5＋CSS3で作る 魅せるiPhoneサイト」 基礎編 対象ブラウザはMobileSafariです レンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張（CSS）があります。検証の際は、通常のSafariのウィンドウサイズを狭くし
iPhone/iPadのSafariで高速に画像を描画する方法 - 強火で進め
こちらのブログで紹介されていた最適化方法をテストしてみました。 HTML5/JavaScript platform game optimised for iPad | Seb Lee-Delisle http://sebleedelisle.com/2011/04/html5javascript-platform-game-optimised-for-ipad/ 最適化の方法はHTMLのエレメントに -webkit-transform:translateZ(0px) を設定するというもの。こうするとGPUで処理が行われる為、フレームレートが倍になったとの事です。 スタイルを以下の様に設定したものと、設定していないものを準備しました。 * { -webkit-transform:translateZ(0px); } プログラムはバナナの画像を100個描画して右上から左下にスクロールさせていま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Safari 16 Beta」のWebkit機能が更新、macOS向けのウェブプッシュ機能などが追加|au Webポータル
iPhone版Safariで文字サイズがおかしくなるときは-webkit-text-size-adjust: 100%; を指定する
IDEA * IDEA
