GPUアクセラレーションとposition: relativeによるレイヤー生成について
またアニメーション... ボタンなどのUIにGPUアクセラレーションが効いたアニメーションをつけたとき、iOSにおいてはiPhone4か4SのWebViewあたり、Androidにおいては….まぁ機種依存的(げんなり)に、アニメーションの立ち上がりが遅いことがあります。 その辺を調査していたところ、position: relativeの指定による、意図しないレイヤー生成＆GPUアクセラレーション巻き込みによって、何かしら合成レイヤー周りでオーバーヘッドが発生してしまっているんではないかな、という憶測に行き着いた次第。今回はその辺りを見ていきます。 GPUアクセラレーションが効いたアニメーションは、CSS Animations、CSS Transitionsのほか、特殊なプロパティ（transform3d: scale(1,1)とか）で強制的にGPUアクセラレーションを効かせたCanvasア
結局CSS3のlinear-gradientはどう書いたらいいのかまとめてみた (最新仕様・全ブラウザ対応版) - Studencheskie Programmisty
[-ms-]などは当該ベンダープリフィックスが必要という意味を表します。 Firefox 16以降のように1つのブラウザに複数の項目があるのは、ベンダープリフィックスによってサポートされる構文が異なっていることを表します。 iOS本体のバージョンと、搭載されているSafariのバージョンの対応表はWikipediaが詳しいです。 これから分かるように、現時点（2012/12/7）ではWebkitは最新の構文（to付き）に対応していません。また、FirefoxやOperaのようにプレフィックスを付けるかどうかでtoなしの古い構文が使えたり使えなかったりと変化します。 さて、では結局過去のブラウザも含めて全てに対応するにはどう書けばいいのでしょうか？上から下へ#000〜#fffのグラデーションをかけるコードを例に示します。実際には、対応したいブラウザののみ取捨選択して記述するのが実用的かと思わ
iPhone 5とiOS 6で導入されたWebデベロップまわりのアップデートについて - Branch
Clicking the “Branch this” button next to a post lets you start your own branch to talk about it. Branching a post is perfect for when you have something to say about someone’s post or want to go on a tangent—without taking the whole conversation off track. Join our beta so you can branch posts, too.
Transitions, Transforms, Animationsの接頭辞が省けるようになった - fragmentary
昨晩というか今朝のCSS WG Teleconにて。 CSS WG Blog – Minutes and Resolutions Telecon 2012-06-06 [CSSWG] Minutes and Resolutions Telecon 2012-06-06 Resolved: Transitions, Transforms, and Animations may be released unprefixed. IE10PP6でなぜだか接頭辞省いたバージョンも実装されたというのもあって、とりあえずAppleのVisual Effects 3仕様については接頭辞を省いてもよしとなったらしい。Animationsはうれしいね。 今回のはいちおう、Microsoftの行動を受けての決定らしいので、接頭辞に関するポリシーが変わったというわけではない。ただ、4月末からいろいろあったので、も
iOS 5 Brings Native-Style Scrolling to Web Apps
A new feature uncovered in the second beta release of iOS 5 is great news for Web developers. It seems that native-style scrolling will be made available to Mobile Safari through a new CSS property. When used, Web developers will be able to implement native-style momentum scroll in Web pages, allowing Web apps to function more like native applications do today. Sponsor The news comes via a leaked
iScroll – Matteo Spinelli's Cubiq.org
The overflow:scroll for mobile webkit. Project started because webkit for iPhone does not provide a native way to scroll content inside a fixed size (width/height) div. So basically it was impossible to have a fixed header/footer and a scrolling central area. Until now. This script has been superseded by iScroll 4. This page is kept for historical reasons. Get the Script Screencast Live Demo Publi
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
WebKit最新開発版に見るCSS3の「縦書き」 - builder by ZDNet Japan
論理プロパティでの実現という課題を残しつつも、CSS3でのサポートおよびEPUB3.0でのサポートが決まった「縦書き」ですが、そろそろビューワレベルでの対応（実装）も開始されました。その先陣を切るのが、SafariやGoogle Chromeに採用されているHTMLレンダリングエンジン「WebKit」です。 WebKitのブログ「Surfin' Safari」では特に触れられていませんが、先日公開された最新開発版（Nightly Build）から、縦書きのサポートが開始されています。まだ実装の初期段階ではありますが、EPUBの描画機能とは切っても切れないHTMLレンダリングエンジン分野における最新動向ということもあり、本連載で検証してみたいと思います。 CSS3の縦書き対応で最先端を行く「WebKit」 最初のテストは、とにかく「横書きを縦書きで表示する」ことにしました。H1タグなど見出し
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とされている仕様は次
Wrapping Long URLs and Text Content with CSS | Perishable Press
Quick tutorial post today. To wrap long URLs, strings of text, and other content, just apply this carefully crafted chunk of CSS code to any block-level element (e.g., perfect for <pre> tags): pre { white-space: pre; /* CSS 2.0 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3.0 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: -m
[CSS]スタイルシートを使用して現在位置のリンクを無効にする方法 | コリス
使用するのはCSS3の「pointer-events」で、対応ブラウザはFx3.6+, Safari3+, Chrome(5+?)となっており、IEでは未対応です。 HTML ナビゲーションはシンプルなHTMLです。 <textarea name="code" class="html" cols="60" rows="5"> <nav> <ul> <li class="home"><a href="#">Home</a></li> <li class="about"><a href="#">About</a></li> <li class="clients"><a href="#">Clients</a></li> <li class="contact"><a href="#">Contact Us</a></li> </ul> </nav> </textarea>
Google Font API のウェブフォントを使うと iPhone で日本語が表示されない理由 | ブログ | SINAP - 株式会社シナップ
この記事の最初の公開後、さらに調査を続けていたところ、内容に不正確な部分があることがわかりましたので、訂正いたしました。詳細は本文中の追記・訂正をご覧ください。（2010/06/01） 先日、Google から、画期的なウェブフォントサービスの Google Font API が発表されました。既にたくさんの方々が、様々な実験をしたり記事を書いたりいらっしゃいますが、そんな昨日。 「Google Font API で日本語が表示出来ない」という話を小耳に挟みました。 もとより、Google Font API で提供されるフォントは現時点では欧文フォントのみで、日本語の字形データは含んでいませんが、仮にそうしたフォントが日本語を含む文字列に指定されたとしても、本来そこで期待されるのは「指定フォントで表示できない文字は、表示できる別のフォントで表示する」という挙動であって、真っ白になってしまう
iPhone向けサイト構築 基礎文法最速マスター - EC studio デザインブログ
弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone（iPod Touch）向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 2010/11/18追記： iPhone向けサイト制作の書籍を執筆しました！ 既存のデスクトップ向けサイトをモデルにした iPhoneに最適化したサンプルサイトの紹介と コードの解説をしています。 iPhone向けサイト制作の入門書に最適です。 「HTML5＋CSS3で作る 魅せるiPhoneサイト」 基礎編 対象ブラウザはMobileSafariです レンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張（CSS）があります。検証の際は、通常のSafariのウィンドウサイズを狭くし
最近はword-breakするのにJSは使わないほうがいいみたい - Webtech Walker
Twitter / tacamy: { word-wrap: break-word; } ... ということなのでJSを使わずにCSSだけでやれるみたいです。しかもこれだけ。 .word_wrap { word-wrap: break-word; } IE6、7、8、Firefox3.6、Safari4、Chrome、Opera10.52で確認しましたけどこれだけで全部いけます。ブラボー。 <div class="word_wrap">http://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%8D%E3%83%83%E3%83%88%E3%82%B3%E3%83%9F%E3%83%A5%E3%83%8B%E3%83%86%E3%82%A3</div> <div class="word_wrap">aaaa
iPadのSafari用HTMLで次のように書いておくと縦と横でCSSを切り替えられる - [モ]Modern Syntax
うーん、このビデオの説明がうまくできません。 観ていただければすぐに理解できるんですけど、テキストにうまくまとめることができません。なんて書けばいいのかなあ。 まあそれはさておき、そんなわけでビデオを観てみてください。まあ普通にできそうもないわけですが、練習したらもしかしたらできるかもしれないという可能性は感じられます。 そんなわけで時間がある学生さんはこれにチャレンジしてみてはいかがでしょうか。 ちなみにこちらの4人の男性はサーカスの団員さんだそうです。なるほどなあ。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3 FLASH-LIGHT
Oops... sorry. This site is optimized to Safari | NIPPON COLORS - 日本の伝統色
iCloud