Inspecting Web Views in macOS
I recently received a tantalizing email from a reader I’ve never met: Sam Henri-Gold. Sam showed me how you can key in a couple write commands in the macOS terminal: defaults write NSGlobalDomain WebKitDeveloperExtras -bool true defaults write -g WebKitDeveloperExtras -bool YES Which will enable a context menu in a system web view: Which lets you trigger the Safari Web Inspector and inspect elemen
New WebKit Features in Safari 14.1
Safari 14.1 for macOS Big Sur, iPadOS 14.5, and iOS 14.5 brings new WebKit features, APIs, performance improvements, and improved compatibility for web developers. Take a look. Flexbox Gap Support Safari 14.1 now supports the gap property inside Flexbox containers, along with row-gap and column-gap. Gaps in Flexbox make it possible for web developers to create space between Flex items without reso
Safari 12ではユーザがインストールしたフォントをfont-familyに指定できない - Qiita
背景 個人的にはMyriadが好きなので、自分用に作ったサイトとかではよく「Myriadがインストールされている人（主に自分）だけにMyriadで表示されればいいやー」と思って以下のようにCSSを書いていたんだけど、macOSをMojaveにしたあたりからMyriadで表示されずLucida Grandeになってしまった。 解決 Mojave (Safari 12) からは、システムフォントだけしか指定できなくなってしまったらしい。なんでもユーザートラッキングを防ぐためだという。なので解決策としては、Webフォントにする、あるいはChromeを使う（ちがう）。 Font Family/Display Issue in Safari 12 on macOS Mojave - Stack Overflow: This is because of the new no-tracking priv
Using dark mode in CSS
MacOS Mojave has been recently released with the Dark Mode option. The option allows you to enable dark interface through all the system, which is very useful while working in the evenings and nights. Native apps are able to take advantage of the mode by following the interface guidelines. What about web apps? The good news is: Safari 12.1, Chrome 73 and Firefox 67 support Dark Mode! The CSS itsel
「端っこ」におけるスクロールの挙動を制御する overscroll-behavior プロパティ | ダーシマ・ヱンヂニヤリング
※この記事の内容は、まだブラウザに実装されていない内容を含みます。また、勧告前の仕様について言及しているため、最新の仕様では変更になっている場合があります。 要約 overscroll-behavior プロパティを使うと、スクロール境界（端っこ）におけるブラウザデフォルトの挙動を上書きすることができます。例えば、ブラウザが持っている「下方向に引っ張ってリロード」する機能や、スクロールが親要素に伝わる「スクロールチェーン」の挙動を無効化することができます。 はじめに 主にタッチデバイスにおいて、無効化したいのにできない、スワイプ操作やスクロールにまつわる困った挙動が３種類ありました。 「もうこれ以上スクロールができない」ことを表すインタラクション スクロールが親に伝播してしまう「スクロールチェーン」 左右へのスワイプで行う履歴の前後ナビゲーション 「もうこれ以上スクロールができない」ことを
Release Notes for Safari Technology Preview 62
Safari Technology Preview Release 62 is now available for download for macOS High Sierra and the beta of macOS Mojave. If you already have Safari Technology Preview installed, you can update from the Mac App Store’s Updates tab on macOS High Sierra and in the Software Update pane of System Preferences on macOS Mojave. This release covers WebKit revisions 233728-234197. Known Issues This release of
Chromeでボタンをクリックしたときのフォーカスリング - fragmentary
geckotangが「Chromeでボタンをマウスでクリックしたときにフォーカスリングが出たり出なかったりするのなんで」と言っていて、なんかお前調べろよ的な感じだったので調べることにした。 使うのはcs.chromium.org。<button>なので"HTMLButtonElement"で検索して、それっぽいファイルを探す。あった。 html_button_element.h "focus"で検索するとSupportsAutoFocus()というメソッドが見つかる……がこれはautofocus属性の対象になるかとかそういう感じがするのでこれではない。というかそっか、autofocus指定できるんだ……<input>にしか使ったことなかったからなんか使えないって思ってしまってた。 HTMLButtonElementにはなさそうなので、参照しているHTMLFormControlElement
AppleのHot Code Pushリジェクト問題、React Nativeへの影響は？
Takuya Digital crafts(man|dog). Love photography. Always making otherwise sleeping. born in 1984. Rollout.io導入アプリがリジェクトされた話題は、3月7日にHackerNewsで盛大に盛り上がりました。 Hot Code Pushというのは、App Storeのレビューを通さずにアプリの挙動を変更できる仕組みのこと。 Rollout.ioはこの仕組みを利用してバグ修正が迅速に行えるサービスを提供していました。 上記Hacker Newsのコメ欄にRolloutのCEOのErezが出てきたりして、顔面蒼白ぶりがひしひしと感じられますねぇ。 これだからプラットフォーム依存は怖い！ ネイティブの動きを変えられるようにするのはダメ 何がダメかっていうと、以下のAPIを使って動的に挙動を変えられ
炭坑の庭師 - steps to phantasien
Chromium と WebKit は二つの独立したプロジェクトだ。 ソースツリーはそれぞれ別で、そこにはインテグレーションの苦労がある。 WebKit 以外にも V8 や Skia など Chromium が依存している外部のプロジェクトは山ほどあるけれど, WebKit とは特にぴったりくっついている。 そのぶん二つの足並みをあわせる手間も際立つ。 以前、書籍 ”アジャイル開発の本質とスケールアップ” で リリーストレイン という大規模プロジェクトのインテグレーション手法を読んだ。 プロジェクトの内部で一段細かい時限リリースを設け、そのタイミングでインテグレーションする方法。 内部リリースにあわせてプロジェクト同士が依存している相手のバージョンを上げ、 壊れたところをなおすわけ。 Chromium と WebKit もこまめに相手のバージョンを新しくする。 主たる依存の向きは Chro
NW.js
NW.js (previously known as node-webkit) lets you call all Node.js modules directly from DOM and enables a new way of writing applications with all Web technologies. New way of writing native applications using web technologies: HTML5, CSS3, and WebGL Full support for the features in browser Complete support for Node.js APIs and all third party modules Call Node.js modules directly from the DOM and
Edge Web Summit、Chrome 50、Firefox 46、WebKitなど─2016年4月のブラウザ関連ニュース振り返り
Edge Web Summit、Chrome 50、Firefox 46、WebKitなど─2016年4月のブラウザ関連ニュース振り返り 矢倉 眞隆（myakura） 2016年4月のブラウザニュースは、Edge Web Summit、Chrome 50リリース、Firefox 46リリース、WebKitの接頭辞ポリシー変更などについて紹介します。 Edge Web Summit開催 4月4日に、Edge Web Summitが開催されました。Microsoftは前々日にBuildカンファレンスを行っていましたが、Edgeはこちらに集中した印象です。 Microsoft Edge Web Summit 2016 | Channel 9 Edge Web Summit 2016 recordings are now available on Channel 9 | Microsoft Edg
WebKit2 と愉快な仲間たち - steps to phantasien
ある ニュース記事を同僚に教わった。 この記事によるとタッチデバイスの会社は WebKit2 に対応しているのに検索の会社は旧バージョンにとどまっており、HTML5 に課題は多いのだそうな。 そりゃ課題は常に山積みだよね…と思っていたら記事は誤解だと別の同僚が説明を書いている。 リンク先の記事はさておき、世間の関心をいまいち集められていない気がする WebKit2 についてざっと説明をしてみたいとおもう。 この記事を読み終われば WebKit2 と Chromium WebKit, Webkit1 の違いを知ったかぶれるようになる予定。 WebKit2 は 2010 年の 4 月にアナウンスされた WebKit の新しい API レイヤで、Mac 版 Safari などが使っている。 大きな特徴はレンダリングエンジンを別プロセスで動かせること。 Chromium でやっているのと同じような
Safari 9.0 の JS で「同じ関数を繰り返し実行しただけで返り値が変わる」という強烈なバグが発見されてる - Qiita
Webkit の Bugzilla で強烈なバグが報告されていると、同僚に教えて頂いた。 あまり話題になっていないものの、単純ゆえに強烈なバグだと思ったので Qiita にも公開しておく。 https://bugs.webkit.org/show_bug.cgi?id=151354 にそのバグ報告が上がっている。 最初に Google+ でやりとり があった模様。 URL のクエリ文字列から値を取り出す関数が正常に動作していないことから発覚したようだ。 その後は、簡単なテストケースに落とし込まれ jsfiddle というサイトにテストケースが公開されている。 Safari でこのページを開くと、実際に JavaScript を実行して確認できるようになっている。 続報 (2015.12.14) この記事を上げてすぐに Bugzilla の方で進展があった。 Yusuke SUZUKI さん
Microsoft Edgeのユーザーエージェントがカオスなので注意 - Qiita
Windows 10の標準ブラウザ「Microsoft Edge」のユーザーエージェントがカオスです。下記の太字部分に注目してください。 Mozilla/5.0 (Windows NT 10.0; Win64; x64; ServiceUI 11) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299 （Microsoft EdgeHTML 16にて確認） なんと、Microsoft EdgeはWebkit系エンジンではない（EdgeHTMLエンジンといいます）にも関わらず、AppleWebkit、Chrome、Safariという文字列が入っています。これは、Webkit系ブラウザと互換性を持たせ、WebKitブラウザ用の処理も実行できるようにするためです。 (参考：M
iOS6 webkit timer bug workaround
ios6-timers.js `�>�U � ?�U (function (window) { // This library re-implements setTimeout, setInterval, clearTimeout, clearInterval for iOS6. // iOS6 suffers from a bug that kills timers that are created while a page is scrolling. // This library fixes that problem by recreating timers after scrolling finishes (with interval correction). // This code is released in the public domain. Do with it wh
WKWebViewで躓いた10つのまとめ - Qiita
WKWebViewについてわかったこと。iOS 8.1.0の時点での情報です。 StackOverflowやDeveloperForumsからの情報と、私がOhajiki Web Browserを開発する過程で得た知識を短めにまとめてみました。 これ以外にもまだまだ細かい部分があるかと思いますが、より良い方法や補足などがありましたらコメント欄で是非とも教えていただければ幸いです。 iOS 9での変更点はこちら: iOS 9 WKWebView 主な変更点をざっくり tmpフォルダ以外は file:/// を使ってアクセスできない iOS8.0.2からtmpディレクトリ以下のファイルに fileプロトコルでアクセスすることが可能になりましたが、それ以外のディレクトリからのアクセスは無効となっています。WKWebViewが普及しない一番の要因はこれではないでしょうか。 こちらで試すことが出来ま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Appleがデフォルトブラウザである「Safari」をMicrosoft Edgeと同じChromiumベースに移行するという噂が流れ、WebKitチームがこれを否定。
GitHub - Metnew/uxss-db: 🔪Browser logic vulnerabilities :skull_and_crossbones:
WebKit Feature Status
WebKit Feature Status