戻るボタンとonloadイベント - Pixel Pedals of Tomakomai
ブラウザの戻るボタン(history.back)で戻った時にonloadイベントが走るかどうかは、ブラウザによって違うようです。 まず、IEですが、戻るボタンのときもonloadイベントが走ります。よって、なんにも心配要らないです。 次に、Firefoxではbfcacheと言う機能があり、以下の事情になってます。 ユーザがキャッシュされたページにナビゲートしたとき、インラインスクリプトと onload ハンドラは実行されません。 (中略) ユーザがそのページから去るナビゲートをするときに実行されるようにしたい動作があるものの、この新しいキャッシュ機能を生かしたく、さらにそれゆえに unload ハンドラを使用したくないという場合は、新しい pagehide イベントを使用します。 Using Firefox 1.5 caching と言うことで、Firefoxのことを考えるのなら、onpa
iOSのSafariで特定のfont-sizeのときの謎の隙間 - Webtech Walker
iOSのSafariでなぜか特定のfont-size（11px、10px、9px）のときだけマルチバイトの幅計算がおかしいのか、折り返し位置がずれるという件。 DEMO これをiPhoneで見るとこんな感じになる。 こんな感じ。11px、10px、9pxのときに右側に隙間が空いてるがわかると思います。これは特にpaddingとかとってるわけではなくて、このfont-sizeのときだけなぜか隙間が空くんです。8pxは大丈夫なので11px以下というわけではないみたい。さらにマルチバイトでなければ隙間はできない。謎。 ちなみにiOS4.3でも直ってなかった。Androidは大丈夫。 解決方法知ってる人がいたら教えてほしい。 追記：letter-spacing: -0.001em; で直るっぽい
Appleに殺されてしまうひと達まとめ - yifeの日記
WWDC 2011 Keynoteも終わりました。 iOS4までで基礎は完成させたということでしょうか、これまで30%税で儲けさせてくれたはずのサードパーティすら殺してしまいそうなサービスを次々と発表するジョブズの姿を見ると、ああプラットフォーマーの強権というものは恐ろしいのだなぁと実感し、嬉々としてObjective-Cを学んでいた昨日までの自分に恐怖するわけであります。 そこで今回は、アップデートで死んでしまう、あるいは死なないまでも大ダメージを受けるであろうひとたちを振り返り、明日への戒めとしたいと思います。 なお、WWDCの画像はEngadgetから引っ張ってきています。感謝いたします。 iOS組み込みのTwitterサポート Twitterを使用するにはiOSの設定画面でアカウントを登録しなければならず、すべてのアプリケーションはHTTPでTwitterAPIを叩く代わりにiOS
株式会社サムライファクトリー ｜ インフォメーション - 【OS・ブラウザー国内シェア調査】〜FireFox3ユーザーがFireFox4に移行し始める〜 2011年4月度発表
株式会社サムライファクトリーは、提供サービスであるアクセス解析ツール『忍者アクセス解析』を用いて集計した2011年4月のデータをもとに、日本国内におけるOS・ブラウザーのシェアを独自調査いたしました。 プレスリリース 2011年5月10日 株式会社サムライファクトリー ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FireFox3ユーザーがFireFox4に移行し始める 〜2011年4月度 OS・ブラウザーの国内シェアを発表〜 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 株式会社サムライファクトリー（本社：東京都渋谷区 代表取締役社長：柏木謙一）では今回、2011年4月度の【OS・ウェブブラウザー国内シェア調査】を実施いたしました。 以下にその結果を発表いたします。 ◆調査内容 国内最大級のユーザー数を誇る高機能ア
ブラウザ デフォルトCSSのチートシートを作ってみた。(力尽きた) - kojika17
' CSSリセットを改変している時に、「CSSリセットは本当に必要か？」ということを疑問に思うようになってきました。 ブラウザのデフォルトであるユーザーエージェントスタイルシートをCSSリセットでnormalにして、さらにboldに戻すということをしています。 これだと単に、記述量と処理を増やしているだけに過ぎません。 「デフォルトCSSを理解すれば、CSSリセットはいらないのではないか？」という考えの元、デフォルトのCSSを調べてみました。 ユーザーエージェントスタイルシートの調査 ブラウザのアプリケーションファイルに潜ってCSSを探したところ、Fire FoxのCSSのみ探し出せました。 それ以外はアプリケーションの中にCSSが含まれている場合などにより、デフォルトCSS探せませんでした。 ただしIEに関しては、まとめたれたサイトがあったので、これを参考にします。 Internet E
8のjQueryのすごいTIPS
8のjQueryのすごいTIPS 原文：8 awesome JQuery tips and tricks 微妙なTIPSもあるのですが、役に立つのもあるのでご紹介。 target="_blank" のリンクの作成 XHTML 1.0 Strict ではtarget=blank属性が利用できない。そこでjQueryを利用して別ウィンドウを開く方法を紹介しよう。 $('a[@rel$='external']').click(function(){ this.target = "_blank"; }); <a href="http://www.lepinskidesign.com.br/" rel="external">lepinskidesign.com.br</a> [to-R補足] 実際に利用する際はjavascript部分を$(function(){...})などで包む必要があります。[
Android端末のdevicePixelRatio
Android端末のdevicePixelRatio WebKit系のブラウザではdevicePixelRatioというプロパティが定義されています。これは画像1pxを実際のデバイス上で何pxとしてレンダリングを行うかというもの。 CSSでdevicePixelRatioを特定できる -webkit-min-device-pixel-ratioなどは iPhone4のRetina Display対応などで一時期注目されましたね。 【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】 | KAYAC DESIGNER'S BLOG JavaScriptでは次のように取得できます。 window.devicePixelRatio そこで、Android端末のdevicePixelRatioがどうなってるかTwitterで色々な方に協力いただき調べてみました。
ウノウラボ by Zynga Japan: iPhone向けのサイトを作るときのちょっとした気配り
yamaokaです。 だいぶiPhoneやAndroidといったスマートフォン向けのwebページを作ることが増えてきたのではないでしょうか。ちょっとした気配りで使いやすくなるケースもあるかなと思うので、いくつか使えそうな工夫について書いてみたいと思います。 ただし、今回はiPhone向けです。 タップされた場所をハイライトする iPhoneのSafariでは「-webkit-tap-highlight-color」という拡張された属性があり、タップされた箇所に色を付けることができます。CSS3ではRGBaによる色指定ができるので、半透明の色を指定すればタップされた箇所をわかりやすく示すことができます。例えば、-webkit-tap-highlight-color:rgba(255,0,0,0.40);と指定すると薄い赤色を付けることができます。「outline:none;」と併せてリンク文
Text Shadows
This is some preview text - you can paste more text in here (Safari) text-shadow was included in CSS2, removed from CSS2.1 and returns in CSS3. It has been supported in Safari since version 1.1, and is supported in Chrome, Firefox 3.5 and Opera 10. CSS Shadows take three length values, and a color. The length values are a horizontal offset, a vertical offset and a blur. Offsets may be negative or
中島聡氏が見せるhtml5の未来：後半6本 | AppBank
中島聡氏が見せるhtml5の未来：前半6本 の続きの6本を紹介します！ 前半に引き続きここで公開しているウェブアプリはすべてこちらのページ（WidgetPad.com）で見ることができます。 例えばですが本日Twitter上でいろいろ話題になっていたこちらのサービスとか、これアプリじゃなくてiPhoneのSafariで動いているんですよ！すごい！ では、後半6本紹介していきます！ 3D Photo これ、Twitter界隈ですげぇ、って話題になってますよね。 すごいんです。動画必見！ このウェブアプリの動画はこちら。 Canvas Benchmark:QuadraticCurve Fill うにょうにょします。 このウェブアプリの動画はこちら。 Finger Art:Circles 指で画面をなぞるとなぞったところに絵が書けます。 すごいです。 このウェブアプリの動画はこちら。 Calcu
中島聡氏が見せるhtml5の未来：前半6本 | AppBank
本日鎌倉に来ていただいた中島聡さん、html5で何が実現できるのか？を現在果敢に挑戦されていまして、こちらのページ（WidgetPad.com）で実験作品を随時公開されているのですが、現在公開されている12個のhtml5で作成されたウェブアプリケーションをすべてご紹介いたします！ 信じられますか？これらはSafari上で動いているんですよ！？まずは前半6個です。 これがiPhoneのSafari上でスムーズに動いているんです。 まずは6本、個別に紹介していきます！ Gold Fish Simulation 小さなお魚さんが画面上をスイスイ泳ぎます。 このウェブアプリの動画はこちら。 Blob Sallad これが一番すごいかも！！！ 指で触れます。ぴょんぴょん触れます。 2本指で触るとなんと分裂します！！！ このウェブアプリの動画はこちら。 YAHOO! Finance 3D ヤフーファイ
標準の日本語フォント / もうパンツはかない
各環境でどんな日本語フォントが使えるのか、まとめてみました。 それぞれのOSで標準添付されていると思われる日本語フォントをCSSの指定で表示させたものをキャプチャーしました。小さい方の字は16ピクセル、大きい方は 150% とCSS上で指定しています。使用ブラウザは主に各環境の標準ブラウザ(MacはSafari、WindowsはEdge)です。 Mac Windows Linux macOS Sonoma (14) ヒラギノ角ゴシック (ウェイト:W0〜W9の10段階) font-family: "HiraginoSans-W0","Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 100; font-family: "Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 400; font-family: "Hiragino S
1要素1クラス、画像を一切使わずにCSSで実装するiPhone UI - jsdo.it - Share JavaScript, HTML5 and CSS
基本的に、ひとつの要素にクラスを追加するだけでiPhone風のUIを実装できるCSSを定義したライブラリです。 さらに画像をまったく使っていないので、このCSSを読み込むだけですぐにiPhone風UIが実装できます。 ※iPhoneおよびSafariで最適化されています。 <article> <header id="header"> <div class="toolbarBox"> <h1 class="toolbar">CSS3 UIテンプレート</h1> <nav> <ul> <li class="toolBtnTypeA"><a href="#" class="toolBtnArr">TOP</a></li> <li class="toolBtnTypeB"><a href="#" class="toolBtn">Reload</a></li> </ul> </nav> <!-- /
PDFファイルをダウンロードせず、sa… - Apple コミュニティ
＞多分プレビューでの閲覧の方がスピードが相当速いのではないでしょうか。 Safariに直接表示の場合はデータのダウンロード時間も込みでですから 描画が遅いように見えるかもしれませんが、トータルではとんとんなのでは？ ＞サファイ上にPDFが表示されるまでの時間がうざい.... 私は、ダウンロードしたいのにPDFが表示されてしまったときには 読み込みを中止して、アドレスバーにカーソルを持っていった状態で optionキーを押しながらリターンキーを押します。 するとそのアドレスのファイルがダウンロードされるので多少手間的には楽かなと。 でもPDFをダウンロードしたいと要望する人も多いと思うので 環境設定で切り替えられるようになるようフィードバックしてみるといいのでは？ ＞Acrobat 7もサファリ上でPDFを表示させるプラグインがあったと思うのですが、 ＞どちらが優先するんでしょう？ Acro
よくわからない現代魔法 [MacOSX Tiger]defaultsコマンドで隠し設定を変更してみる（追記予定）
これは日記ではなくメモってことで 久しぶりにMac Wikiを見に行ったら目に入ったコマンド「defaults」、どうやら~.plist（環境設定のファイル）を閲覧したり編集したりするためのファイルらしい ~.plistはアプリケーションの各種環境設定が書かれているファイルだが、ここを直接書き換えることでそれぞれのアプリケーションの「環境設定」ボタンから変更できない設定（いわゆる隠し設定）を変更できるというわけだ まずは閲覧する方法 例えばSafariなら %defaults read com.apple.Safari | less とする、この「com.app.Safari」ってのは「/Users/j05017/Library/Preferences/」に入ってる「com.apple.Safari.plist」ってことね、他にもたくさん入ってたのでここを調べればいろいろできるかも？ Ac
Safariのブラウザウインドウ内でPDFを開かない方法
PubMedなどで探した論文のPDFファイル見る際に、ブラウザウインドウ内でPDFを見るというのは好きではなく、デスクトップにダウンロードしてAcrobatかプレビュー.appで開くというのが私の好みです。 Mac OS X標準のブラウザSafariの場合、version 2以前は、ブラウザウインドウ内でPDFを開くことはできず、PDFファイルへのリンクをクリックするとPDFファイルが自動的にダウンロードされるようになっていました。しかし、Acrobat 7（およびAdobe Reader 7）に「AdobePDFViewer.plugin」が同梱されるようになり、SafariではPDFをブラウザウインドウ内に表示できるようになりました（結構もたつきます）。従来通りPDFファイルのリンクをクリックしたときに、デスクトップにダウンロードしたいという向きには、/Libraries/Intern
Mac SafariのPDF表示機能を無効にする裏技 / Inforati
Safariの「PDF表示機能」を無効にする裏技です。 PDFファイルのリンクをクリックしても、そのPDFファイルをSafariで開かず、ダウンロードするようにします。 Safariの「ウインドウ内PDF表示機能」を無効にする Safariは、Windowsのブラウザと異なり、標準でPDFファイルを表示する機能が付いているため、プラグイン無しでPDFファイルを表示することができます。 しかし、Webを閲覧中にPDFファイルのリンクをクリックすると、自動的に読み込んで開こうとするためそれが煩わしい場合もあります。 そこで、Safariの「PDF表示機能」を無効にして、PDFファイルをダウンロードするように設定を変更する方法を紹介します。 「PDF表示機能」を無効にする方法 「起動ディスク（Macintosh HDなど）」→「アプリケーション」→「ユーティリティ」と移動し「ターミナル」を起動し
9月ブラウザシェア - Chrome、5から6へほぼ移行完了 | エンタープライズ | マイコミジャーナル
Market share by Net Applications Net Applicationsから2010年9月のブラウザシェアが発表された。発表されたシェアは次のとおり。 2010年9月ブラウザシェア - Net Applications報告 2010年9月バージョン別ブラウザシェア - Net Applications報告 順位 ブラウザ シェア 推移 備考 1 IE 59.65% ↓ 微減 2 Firefox 22.96% ↑ 微増 3 Chrome 7.98% ↑ 力強い成長 4 Safari 5.27% ↑ 微増 5 Opera 2.39% ↑ 微増 順位 バージョン別ブラウザ シェア 推移 備考 1 IE8 29.06% ↑ 9ヶ月連続1位。力強い成長 2 Firefox 3.6 17.05% ↑ 3 IE6 15.55% ↓ 4 IE7 10.39% ↓ 5 Chrome
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
usadeki.jp
http://www.is-real.net/experiments/css3/wonder-webkit/