描画とかGPUアクセラレーションの怪 (モバイル編)
何かと不透明なあたり 気がつけば一ヶ月ほどブログを更新していませんでした。リハビリ記事です。 今回は、GPUを効かせる == それに関連するプロパティ（ただしOSやバージョンによって何がトリガかは厳密に異なる）を適用したら挙動が改善した、というようなノリの体験TIPSをゆるくまとめました。 このあたりの振る舞いについては、描画パフォーマンスの問題として、それなりに明らかになってきているように思います。WebKitのレンダリングプロセスにはじまり、GPU命令のサポートが受けられるのはどんな操作だとか、GPUへ処理が預けられるレイヤーの生成がどーとか、最近よく見聞きします。 自分が業務で扱っているスマートフォン向けのWebサービスでは、このような描画パフォーマンスの問題は、スクロールパフォーマンスと合わせて非常にクリティカルです。この辺りについてのロジカルなまとめは、某氏が近日中にまとめるらし
[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)
[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版) Androidの所為で工数が増えてウザイとか、AndroidのWebkitはWebkitじゃねぇとか スマホのCSS3関係はどうしてもAndroidをdisる感じの内容になりますね！ 特に明記がないものはすべてWebkitについてです。 見つけ次第順次追加予定。 タイトル変更、増えてきたので目次追加しました。 この記事はiOS5、Android 3以前について記載したものです 【css】 タップ時にz-indexを無視して下の要素に枠がつく(Android) 【html, css】 マルチバイト文字にfont-weight:boldが効かない(Android) 【css】 border-radiusのコーナーがジャギる(Android) 【css】 box-shadow、text-
![[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
Androidで-webkit-box-reflectによる鏡面効果を指定する方法
Androidで-webkit-box-reflectによる鏡面効果を指定する方法 Androidで-webkit-box-reflectのマスク処理が使えない！とつぶやいたら@mattari_pandaからurl()による指定は聞くよと教えていただきました。 そもそも-webkit-box-reflectってなによ! 画像などの反射を制御することができるCSSプロパティです。WebKit独自のプロパティなのでSafariやChrome以外のブラウザでは利用できません。 -webkit-box-reflect:<direction> <length> <image>; といった感じで指定が可能です。 directionには上(above)、下(below)、左(left)、右(right)が指定できます。 lengthには反射画像の距離を指定できます。 imageにはマスク画像が指定できま
Rotating color cube box with CSS3 animation, transforms and gradients
Spinning spiraling cube using CSS3 3D animation and 3D transforms. Note: Hover the black box or cube to pause the animation. Please view in Safari, iPhone or iPad. If the animation freezes while viewing in wide-screen and at the same time hovering the viewport with the mouse, simply refresh the browser to restart the animation. All images used come from WISE - Multimedia Gallery and are used in th
iOSのアクセラレーターが使えるCSS3 | hazumu.net/blog
はじめに iPhoneやiPadなどiOSに組み込まれているmobile SafariでJavaScriptを使ったアニメーションを動かすと動作が遅くなる事があります。 そこで、CSS3のアニメーションを利用して軽快なUIを実装しようという風潮が高まっているのですが、実はすべてのCSS3アニメーションがmobile safariで軽快に動くという訳ではないようです。 CSS3のアニメーションが軽快に動く(と言われている)理由 結論からいうと、safariというソフトウェアの力だけでなく、iPhoneやiPadのハードウェアの力を借りられるからです。 そういった、ハードウェアのことをアクセラレーターと呼ぶようです。詳しくは参考ページをご覧ください。 ※参考 Hardware acceleration – Wikipedia, the free encyclopedia アクセラレータとは
Zudolab -
The Search for a Trusted 메이저사이트: A World of Thrills, Security, and Immersive GamingdErsPOId - December 1, 2023In the dynamic world of online entertainment, the quest for finding a trustworthy 메이저사이트, or major site, is akin to navigating through a labyrinthine digital jungle. Much like the adventurers of old scouring for hidden treasures, modern-day netizens are on the lookout for that one platform
1要素1クラス、画像を一切使わずCSSで実装するiPhone UI
1要素に1クラスを指定するだけで、画像も使わずさっと作れるiPhone風CSSライブラリを作ってみました。 最近Macがほしくてたまらないえどです。こんにちは。(降ってこないかな・・) ↓実際に動いているデモはこちら(iPhone向けに作っているため、iPhone/Safariでしか最適化されていません) 1要素1クラス、画像を一切使わずにCSSで実装するiPhone UI - jsdo.it - share JavaScript, HTML5 and CSS ちなみにiPhoneで実際に見るとこんな感じに見えます↓ iPhoneで実際に見るには、以下のURLから見れます↓ (jsdo.itだとviewportが使えないため、ブログ自体にデモをアップしました) http://goo.gl/s5fV 1要素1クラスで実現する 今回のサンプル作成でこだわったのは、1要素に1クラスを指定すること
iPhone・iPad・Chrome等WebKitベースブラウザのCSS3フォームスタイルテクニック:phpspot開発日誌
iPhone・iPad・Chrome等WebKitベースブラウザのCSS3フォームスタイルテクニック 2010年10月15日- Customizing web forms with CSS3 and WebKit - (37signals) iPhone・iPad・Chrome等WebKitベースブラウザのCSS3フォームスタイルテクニックが37signals.comにて紹介されています。 紹介されている１例として、SafariというとフォームおなじみのAquaっぽいスタイルになりますが、-webkit-appearance: none; のように設定するとプレーンなフォーム要素になるようです。 CSS3や画像を活用して、次のようなフォームをカッコよくデザインしたサンプルなんかも公開されています。 実際に見てみる 関連エントリ クリーンなデザインでピュアＣＳＳなフォームを作るサンプル CS
CSS WG F2F: 来期の活動、viewportの標準化 | Web標準Blog | ミツエーリンクス
先月のCSS WGのF2Fでは、CSS3やそれ以降の話についても議論が進んでいます。今回は来期のCSS WGの活動についてと、スマートフォン向けサイトで利用されている"viewport"の標準化について紹介したいと思います。 Minutes and Resolutions Oslo F2F Monday 2010-08-23 CSS3時代のCSS WG 現在のCSS WGは2010年11月末で活動期限を迎えます。過去2回「次期のCSS WG」について取り上げていますが、今回のF2Fでも、次期の活動計画に関してディスカッションが行われています。 CSS 2.1が勧告案に進めば、CSSスナップショットで定義される仕様がほぼ一斉に勧告に進むことができるため、それ以外のCSS3モジュールや、CSS4の策定が次期CSS WGの活動になります。 現時点で、High Priorityとされている仕様は次
[CSS]CSS3のMedia Queries（メディアクエリ）の使い方と実装例
CSS3 Media Queries 下記は各ポイントを意訳したものです。 はじめに CSS2のMedia typesではscreen, printなどのように特定のメディア用のスタイルシートを設定することができました。CSS3ではクエリを加えることで、さらに効率的にスタイルシートを使用できます。 Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。例えば、大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。 Media Queriesの使い方 まずは、デモページをみてください。 ブラウザのサイズを変更すると、スタイルが変更されます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
07design.net