CSS fix for 100vh in mobile WebKit - Matt Smith
Not long ago there was some buzz around how WebKit handles 100vh in CSS, essentially ignoring the bottom edge of the browser viewport. Some have suggested not using 100vh, others have come up with different alternatives to work around the problem. In fact, this issue goes further back a few years when Nicolas Hoizey filed a bug with WebKit on the subject (the short of it: WebKit says this is “inte
WebkitがES6の機能を完備 : RegExpを例に、パフォーマンスのための取り組みを詳解する | POSTD
r202125 の時点で、JavaScriptCoreが ECMAScript6(ES6)言語仕様 にある新機能の全てをサポートしました。ES6のあらゆる新しい機能が最新の WebKit Nightly と Safari Technology Preview で入手できます。モジュールの実装はありますが、Web用のAPIはまだできあがっていません。ES6で、JavaScript言語には非常に多くの優れた機能が追加され、JavaScriptCoreの開発に関わる人たちはJavaScriptの未来に興奮しています。新しいES6の機能を単に実装するだけでなく、ずば抜けたパフォーマンスを確実に実現しようと一生懸命です。しかしながら、今回は違う観点から論じます。とはいえ、ES6の機能の開発においては上記と同様に重要な点について、つまり、現在あるES5のWebサイト・アプリケーションと同じパフォーマン
今どきのCSS3グラデーションの指定方法
意外とAndroid以外は最新ブラウザが正式な記述に対応しております。 正式な記述の対応が遅かったSafariやiOS、非対応のAndroidは比較的に古い段階から-webkit-gradientに対応してますので、-webkit-gradientも合わせて記述すると対応ブラウザを利用しているユーザーが一気に増えます。 IE9以下や上記の記述では対応できない古いブラウザにはちゃんとフォールバックを指定しましょう。 上記を踏まえると以下のように記述するのがシンプルでよいのではないかと落ち着きました。 /*Other Browser*/ background: #91bae4; /*For Old WebKit*/ background: -webkit-gradient( linear, left top, left bottom, color-stop(0.00, #b6e2fd), co
WebKitがsrcsetを実装！レスポンシブイメージの問題が大きく前進
WebKitがWebKitが、img要素のsrcset属性を実装したとのニュースが、海外のWeb開発者たちの間で話題になっています。 srcset属性は、レスポンシブイメージを実現するために、WHATWGが提案していた仕様です。 この機能を用いると、ブラウザのスクリーン要件(幅、高さ、ピクセル密度)に応じて、異なる画像を読み込む事ができるようになります。 例えば以下のコードでは、ピクセル密度が2倍の(Retinaディスプレイのような)スクリーンを備えたデバイス上ではhigh-res.jpgを、それ以外のデバイスではlow-res.jpgを読み込みます。 この件について詳しく報じている“WebKit Has Implemented srcset, And It’s A Good Thing | Smashing Mobile”という記事によれば、srcset属性はレスポンシブイメージが必要と
maxvoltar - -webkit-font-smoothing
I’m not a big fan of the default text rendering in WebKit, in my opinion, it’s too heavy. There used to be a workaround where setting text-shadow would make the text thinner, but updating to Snow Leopard rendered that useless. Then someone found another hack (using -webkit-text-stroke) that seemed to work nicely, but it wasn’t usable on text-heavy pages, causing performance issues when scrolling.
WebKit （Nightly Builds） で srcset 属性がサポートされたらしい
WebKit （Nightly Builds） で HTML の srcset 属性がサポートされたようですので、簡単に srcset 属性の仕様について解説してみます。 WebKit （Nightly Builds） で HTML の srcset 属性がサポートされたようです。 srcset 属性は、img 要素の属性として使用することで、高精細ディスプレイ （デバイスピクセル比に応じて） 向けや、ディスプレイサイズに応じて画像を出し分けるための属性。所謂、「Responsive images （レスポンシブ イメージ）」 を HTML のみで実現することができます。 Improved support for high-resolution displays with the srcset image attribute ： Surfin' Safari WebKit Nightly
開発者のための WebKit (“WebKit for Developers” 日本語訳)
このノートは、Paul Irishによる記事 “WebKit for Developers” の日本語訳です。 僕ら開発者の多くにとって、WebKit はブラックボックスだ。HTML, CSS, JS, その他のアセットを投げると、WebKit は魔法でもかけたかのように、綺麗な Web ページを返してくれる。しかし、僕の同僚 Ilya Grigorik は本当の WebKit はこうだと言っている。 WebKit はブラックボックスではない。ホワイトボックスなんだ。さらにそれだけではなく、オープンなホワイトボックスなんだ。 じゃあ、これから次のことについて理解していこう。 WebKit ってなに？ なにが WebKit じゃないの？ WebKit ベースのブラウザで WebKit はどう使われているの？ なんですべての WebKit が同じじゃないの？ さて、世の中に数多くの WebKi
-webkit-text-size-adjust: none を絶対に設定してはいけない理由
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
Loading
Videos Watch and learn from our engineers as they show how to bring the latest web technologies to your websites on Safari. Watch Safari and Web Videos Forums Ask questions and discuss a variety of web development topics with Apple engineers and other developers. Apple Developer Forums Safari Extensions Safari extensions are a powerful way to add new features to Safari. They are built in Xcode wit
Responsive imagesのための-webkit-image-set() - fragmentary
AppleがWebKitに-webkit-image-set()なるものを実装した。 Changeset 111637 – WebKit ― Implement image-set Bug 80322 – Implement image-set なにかというと、Retina displayやらPCとデバイスピクセル比が違うディスプレイに対して、違う画像を出し分ける、いわゆるResponsive imagesと呼ばれてるやつのための仕組み。 こんな感じで書くらしい。 selector { background: -webkit-image-set( url(foo-lowres.png) 1x, url(foo-highres.png) 2x ) center; image-set()内には複数の"imagespec"というものが入る。imagespecは<image>（画像、グラデーション
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
