How (not) to trigger a layout in WebKit
As most web developers are aware, a significant amount of a script's running time may be spent performing DOM operations triggered by the script rather than executing the JS byte code itself. One such potentially costly operation is layout (aka reflow) -- the process of constructing a render tree from a DOM tree. The larger and more complex the DOM, the more expensive this operation may be. An imp
CSS からベンダプレフィックスという仕組みが消える日
Google Chrome が採用する新しいオープンソースレンダリングエンジン 「Blink」 のプロジェクトページの記述や Mozilla の方針から、今後ベンダプレフィックスがなくなるかもというお話 本の虫さんで、「Blink、新機能に対して新たなベンダープレフィクスを追加しない決定」 という記事が上がっていた （ちなみに border-radius は現状、-moz- も -webkit- も不要で使えますよ） のですが、これ、確か Blink レンダリングエンジンが発表された時から FAQ とかに書かれていましたよね？ なので今さらだと思いますが、当 Blog では当時触れていなかったし、いい機会ですので簡単に書いてみたいと思います。 Google の Chromium プロジェクトにおいて、レンダリングエンジンを Webkit から、Webkit をフォークして開発された新しいオ
GPUアクセラレーションとposition: relativeによるレイヤー生成について
またアニメーション... ボタンなどのUIにGPUアクセラレーションが効いたアニメーションをつけたとき、iOSにおいてはiPhone4か4SのWebViewあたり、Androidにおいては….まぁ機種依存的(げんなり)に、アニメーションの立ち上がりが遅いことがあります。 その辺を調査していたところ、position: relativeの指定による、意図しないレイヤー生成＆GPUアクセラレーション巻き込みによって、何かしら合成レイヤー周りでオーバーヘッドが発生してしまっているんではないかな、という憶測に行き着いた次第。今回はその辺りを見ていきます。 GPUアクセラレーションが効いたアニメーションは、CSS Animations、CSS Transitionsのほか、特殊なプロパティ（transform3d: scale(1,1)とか）で強制的にGPUアクセラレーションを効かせたCanvasア
ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks
How browsers work Stay organized with collections Save and categorize content based on your preferences. Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrot
CSS Images Level 4 cross-fade() example
CSS Images Level 4: cross-fade() example You need a WebKit Nightly in order to properly see this page! Displaying a single image. background-image: cross-fade( url("logo-box.png"), url("logo-bare.png"), 0%); Displaying halfway through the second image. background-image: cross-fade( url("logo-box.png"), url("logo-bare.png"), 50%);
接頭辞外しと-webkit-サポート - fragmentary
もう書くのだるいんだけど、またまたベンダー接頭辞的なおはなし。 Opera 12.50では標準と-webkit-のみ (-o-さよなら) 今月に入って、Opera 12.50で使われるPrestoのバージョンが2.12になった。 まず3日のsnapshotでは、接頭辞なしのTransitions, 2D Transforms, Animationsのサポートが行われ、さらに接頭辞付きの実装が削除された。 Opera Desktop Team - 12.50 Summer Core Update Opera Developer News - A hot Opera 12.50 summer-time snapshot 続いて10日のsnapshotで、接頭辞なしのグラデーションもサポートされ、3日のと同じように接頭辞付きの実装が削除された。 Opera Desktop Team - More
Safari 6 and Chrome 21 add image-set to support retina images
30 Jan 2013 — This is not a stable specification. It will likely change. Do not use it in a production environment. See Peter’s comment below. 30 Jan 2013 — Per Nicholas Shanks’s suggestion, I’ve removed examples for non-WebKit browsers because we don’t know how those browsers will implement the feature and if the syntax will be the same. Safari 6 and Chrome 21 added vendor-prefixed support for th
CSS Regions Module Level 3 (W3C Working Draft 23 August 2012)
The CSS Regions module allows content from one or more elements to flow through one or more boxes called CSS Regions, fragmented as defined in [CSS3-BREAK]. This module also defines CSSOM to expose both the inputs and outputs of this fragmentation. CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. This section describ
Custom Scrollbars In WebKit | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Way back in the day, you could customize scrollbars in IE (e.g. v5.5) with non-standard CSS properties like scrollbar-base-color which you would use on the element that scrolls (like the <body>) and do totally rad things. IE dropped that. These days, customizing scrollbars is back, but it’s
Opera Logo with CSS · David DeSandro
Opera Logo with CSS The Opera logo, rendered only with CSS, no images. Compare it with the real deal. Alas, best viewed in Firefox 3.6, Safari 4, or Chrome 5. Aside from another shameless plea for attention, this demonstration gives me a chance to look at some CSS3 properties across browsers. Border Radius In all the tutorials and hubbub over CSS3, elliptical border radius is one of those features
Making Love to WebKit — Acko.net
Parallax, GPUs and Technofetishism If the world is going to end in 2012, Acko.net will at least go out in style: I've redesigned. Those of you reading through RSS readers will want to enter through the front door in a WebKit-browser like Chrome, Safari or even an iPad. The last design was meant to feel spacious, the new design is spacious, thanks to generous use of CSS 3D transforms. CSS 3D vs. We
Tom Giannattasio | Designer + Founder
I lead a team working on design tools at InVision. I founded and built Macaw, which was acquired by InVision in 2015. I also worked at nclud designing products for Apple and Oracle. In 2012, I went to Twitter by way of an acquihire. I left shortly after to help MIT design and launch edX. I also speak, teach and write about design. I live with my beautiful wife and three kids outside DC. I design t
ベンダー接頭辞は有害か | Web標準Blog | ミツエーリンクス
MozillaでHTML5パーサなどの開発に関わっているHenri Sivonenが、自身のWebサイトにベンダー接頭辞はWebにとって有害であるいう考察記事を公開しています。 Vendor Prefixes Are Hurting the Web ベンダー接頭辞はWeb開発者にも、利用者にも、そしてブラウザの競争においても有害であり、ベンダーは接頭辞つきの実装をやめるべきだという指摘を、様々な点から分析し考察しています。 利用者やブラウザの競争においても有害？ CSSのベンダー接頭辞に関する「手間」については、CSS3の機能が広く利用されているいま、説明する必要はあまりないかと思われます。 最近ではAPI仕様についても、ベンダー接頭辞をつけた実装が行われるようになりました。標準の実装において慣習となりつつあるわけです。しかし、利用者やブラウザの競争においても有害となるのはなぜでしょうか。
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
画像を使わずCSS3だけで尖ったBack・Nextボタンを作る方法
CSS3だけで、iOS風のBackやNextの尖ったナビゲーションボタン作る方法ないかな〜と探していたところ、良記事があったので紹介します。Androidで確認してませんが、webkit向けなのでたぶんAndroidでも大丈夫だと思います。Androidはひと工夫必要そうです。 CSS3 Wizardry -Back and Next Buttons Revisited- CSS3 Wizardry -Subpixel Rendering- Buttons Revisitedの方が改良版で疑似要素バージョンみたいです。原理はSubpixel Renderingの方がわかりやすいです。 ポイントとなるHTML ボタンを構成する要素はこれだけ。 <!--ボタン要素--> <div class="button bordered back"> <span class="label">Back</s
FirefoxとWebKit、CSS3グラデーションの指定方法統一 | エンタープライズ | マイコミジャーナル
The WebKit Open Source Project CSS3は策定段階にあり、ブラウザ側で同じ実装が実現されている機能と、そうでない機能が混在している。それは実装をはじめた時期や経緯などにも依存している。たとえば標準化作業が進められる以前に実装された機能は、のちに標準化を目指して策定がはじまった機能とは考え方やシンタックスが大きく違っていることがある。 そうした機能のひとつにグラデーションがある。グラデーションは便利な機能だがサポートしているFirefoxとSafari/WebKitでフォーマットが違っていた。しかしCSS3の策定は進んでおり、こうした差異も徐々に統一が進められている。WebKitのブログCSS3 Gradientsにおいて、最近進められたグラデーションに関する議論と、その実装状況が報告されている。 報告によれば、CSSのワーキンググループはここ数ヵ月の間、グラデ
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
Test page for -webkit-font-smoothing | Christoph Zillgens
Hint: This only works in OS X, Windows-user won’t see any difference! -webkit-font-smoothing: none; I feel sorry for the thousands of IE6-Users around the world seeing the web like this subpixel-antialiased; AMNZ This is the standard, seems like Safari 5 improved it, and there doesn’t seem to be a big difference to the right column. Look at the uppercase M to see that diagonal lines are displayed
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
3streamer.net
Victor Coulon : Mon blog High Tech