How to detect in iOS webapp when switching back to Safari from background?
How can I build a webpage which is able to monitor when the page gets the focus, especially when Safari is in the background and the user switches Safari back to the foreground. The code below does not fire the event when switching to Safari on an iPhone <html> <head> <script type="text/javascript"> window.onfocus = function() { alert("onfocus"); }; </script> </head> <body> Main text </body> </htm
Ifvisible.js by serkanyersen
Checks if the current page is visible or not Download .zip Download .tar.gz View on GitHub ifvisible.js Crosbrowser & lightweight way to check if user is looking at the page or interacting with it. Check out the Demo or read below for code example or Check Annotated Sorce // If page is visible right now if( ifvisible.now() ){ // Display pop-up openPopUp(); }
HTML5 Canvasの勉強 – senmyou's blog
HTML5のCanvas要素の勉強のために作成したサンプルが少したまったのでご紹介します。 globalCompositeOperation Canvasの魅力的な機能のひとつに合成処理があります。図形などを描画するときにglobalCompositeOperationプロパティを設定することで、描画先となるCanvasの内容と合成処理を行い、その結果を描画することができます。 合成とクリッピング（MDN） globalCompositeOperation プロパティ（HTML5.jp） ドキュメントを読むだけだと眠くなるので動作確認用のコードを書いてみました。動かす場合は現在大きいウィンドウサイズにしか対応していないので、お手数ですがCodePenに飛んで頂けたらと思います。 See the Pen canvas by senmyou (@senmyou) on CodePen. lig
createImageData, getImageData, putImageData メソッド - Canvasリファレンス - HTML5.JP
構文 imagedata = context . createImageData(sw, sh) CSS ピクセルで指定された寸法の ImageData オブジェクトを返します（その寸法は、そのオブジェクトからアクセスできる実際のデバイスのピクセルとは異なる数に対応付けられるかもしれません）。返されたオブジェクトにあるすべてのピクセルは、透明な黒となります。 imagedata = context . createImageData(imagedata) 引数と同じ寸法となる ImageData オブジェクトを返します。返されるオブジェクトのすべてのピクセルは透明な黒となります。 引数が null なら、NOT_SUPPORTED_ERR 例外を投げます。 imagedata = context . getImageData(sx, sy, sw, sh) canvas の指定の矩形に対す
座標取得するプロパティのそれぞれの違い - 三等兵
JSにおけるマウスなど座標を取得するプロパティというのはいくつかありまして、はっきりいって訳が分かりません。腹が立ちます。単なる八つ当たりであることをここに宣言しつつ、それを確かめるべく、斥候任務をこなすでありますキャプテン！ 座標を取得するプロパティ 4種類のプロパティがあるとみてよいでしょう。IEは外して。 https://developer.mozilla.org/ja/DOM/event event.clientX event.clientY イベントの水平・垂直座標を返す。 event.layerX event.layerY 現在のレイヤー上における相対的な水平・垂直座標を返す。 event.pageX event.pageY イベントのページ上における相対的な水平・垂直座標を返す。 event.screenX event.screenY イベントのスクリーン上における水平・垂直
Scaling of SVG backgrounds - CSS: Cascading Style Sheets | MDN
CSS Tutorials CSS basics CSS first steps CSS first steps overview What is CSS? Getting started with CSS How CSS is structured How CSS works Assessment: Styling a biography page CSS building blocks CSS building blocks overview CSS selectors Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators Cascade, specificity, and inheritance Cascade layers The box mo
CSSのbackground-imageでSVG画像を表示し、SVG非対応ブラウザではPNG画像を表示する（CSSだけで実現）
ブックマークサービスQiNeel関連の記事や身の回りのよしなしごとをそこはかとなく書きつくっています。 どういうこと？ タイトルが長いですが、要するにこういうことです。 CSSの background-image プロパティでSVG画像を表示する（背景画像とかCSS spriteとか） SVGに対応していない古いブラウザでは、フォールバック（代替）としてPNG画像を表示する JavaScriptを使わず、CSSのみで完結！ Retinaのような高精細ディスプレイでもぼやけずに画像（イラスト）を表示するには解像度に依存しないSVGを使うのが一番いいのですが、IE8やAndroid 2.x系などの古いブラウザではSVGを認識できず、背景が驚きの白さになってしまいます。そんなブラウザにはPNGを読ませてあげなければいけません。 そのへんをうまい具合に表示する小技の紹介です。 代替画像は別にGIF
SVG Sprite Sheet Methods
Browser support should roughly map to support for SVG fragment identifiers. FF, CR, O versions were only tested for the current release. IE 9 worked, though support is only listed on caniuse as 10 and up. Support for fragment ids is new for the Safari 7.1/iOS 8 release. It only works for image tags (not CSS backgrounds), and is pretty broken for this particular use case. Safari Issues While the or
WebKitでのSVGを背景画像にすると起こるバグ
SVGはそのリサイズ(スケーリング)においてブラウザ間で差異やバグがあります。有名なのはviewBoxがないことによるIE9やWebKitでのバグでしょうか。それでもimg要素等でSVGを使う場合はSVG側でwidthとheightそしてviewBox属性を指定し、CSSなどでリサイズすれば大体問題ありません。なので背景画像で使う場合もbackground-sizeプロパティーを使えば……と思いきや、なかなかの落とし穴がありました。 Demo: SVG Arrow WebKit以外では自動リサイズが期待されるviewBoxのみ指定したSVGを背景画像にすると問題なくキレイにリサイズされます。対してWebKitではリサイズされたりされなかったりです。しかもChromeとSafariでは挙動が少し違ったりもし、追求する気が失せるほど挙動不審です。どうも良きに計らってはくれそうにないので、明示的
スクロール禁止が overflow:hidden や preventDefault(); でできないときの対処法 - Qiita
検索すると overflow:hidden や preventDefault(); を使うとスクロールを無効化することができるといった情報が出てきますが、iOS や Chrome 54 以降では動作しなくなっています。 preventDefault(); が動作しない理由 Chrome 54 から動作しなくなったようです： [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. https://www.chromestatus.com/features/5093566007214080 https://developers.google.com/web/updates/2017/01/scrolling-intervention
HTML 5.2: 4.13. Common idioms without dedicated elements
Table of contents 1 Introduction2 Common infrastructure3 Semantics, structure, and APIs of HTML documents4 The elements of HTML5 Microdata6 User interaction7 Loading web pages8 Web application APIs9 Communication10 Web workers11 Worklets12 Web storage13 The HTML syntax14 The XML syntax15 Rendering16 Obsolete features17 IANA considerationsIndexReferencesAcknowledgmentsIntellectual property rights F
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
CSSの display: inline、display: block、display: inline-block をマスターしよう！ | たねっぱ！
CSS の display プロパティについて紹介します！ display: inline・display: block・display: inline-blockについてのおさらい。HTMLとCSSひよこちゃん向け！ いろいろ便利な CSS の display プロパティ。今回は display: inline display: block display: inline-block についておさらいしてみます。HTMLひよこちゃん向けの記事です！ displayプロパティで、ブロック・インライン・インラインブロックをおさらいしてみた displayプロパティ displayは、要素の「表示形式」を指定するプロパティ。 ブロックレベル要素をインライン形式で表示したり、インライン要素をブロックレベル形式で表示することができます。 構造的にはブロックレベル要素なんだけど、インラインとして表示
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
HTML Imports: ウェブのための #include - HTML5 Rocks
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 Video tag not working in Safari , iPhone and iPad
Strange bug(?) on iOS: SVG background images no showing - Strange bug(?) on iOS: SVG background images no showing - Geoff Muskett
How to use SVG fragment identifier for CSS background image on iOS? - Stack Overflow
HTML5 Form Validation | Stephen Walther
【HTML・JavaScript】入力フォームへできる限り半角数字のみ入力可能にする | 株式会社アントレース／UNTRACE Co., Ltd.