[B! CSS][webkit] Watsonのブックマーク

Editing CSS with the Visual Styles Sidebar

For new and experienced web developers alike, CSS isn’t always the easiest to deal with. Specificity and cascade order can be complex and it can be confusing to figure out what applies to each element on the page. To make matters worse, it isn’t always clear what each property does, or what its valid values are. Sure, you could type display: block into the Styles sidebar editor, but what does that

Watson 2016/02/24

webkit
css

リンク

WebKit、iOS 9とOS X 10.11でWebコンテンツにAppleの新しいシステムフォント「San Francisco」の適切なWeightを使用するCSSプロパティ設定を公開。

AppleのWebエンジニアMyles Maxfieldさんが投稿したこの記事は「Webコンテンツは時に根幹となるプラットフォームでレンダリングされた時に全体的に合うようにデザインされている場合がります。このプラットフォームのシステムフォントをiOS とOS Xで使用する1つの方法はCSSのfont-familyプロパティの値に”-apple-system”を使用する事です。この方法を使用することでiOS 9とOS X 10.11ではAppleの新しいシステムフォント”San Francisco”を使えるようになります。”-apple-system”は”font-weight” CSSプロパティに作用し、最新のiOS／OS Xで最適なWeightを選択してくれます」というもので、 Web content is sometimes designed to fit in with the ov

Watson 2015/07/31

リンク

Overview of WebKit’s CSS JIT Compiler

When it comes to performance, JavaScript generally gets the headlines. But if you look carefully, web pages are not all JavaScript, the performance of all the other parts also has a dramatic impact on the user experience. Observing only JavaScript gives a single point of view over the complex mosaic that is web performance. Making CSS faster and more scala ble is an area of research in the WebKit p

Watson 2014/07/13

リンク

[CSS]対応ブラウザはWebkit系だけだけど、美しいエフェクトを備えたラジオボタン

見た目だけでもCSS3で美しくスタイルされたラジオボタン、クリックすると更に美しいアニメーションのエフェクトが仕込まれています。光点がアニメーションで移動ラジオボタンの選択が移動するのは、分かりやすいですね。実装は下記のようになっています。 HTML <input type="radio" name="name" checked /> <input type="radio" name="name" /> <input type="radio" name="name" /> <input type="radio" name="name" /> <input type="radio" name="name" /> CSS body { padding: 50px; background-color: hsl(0,0%,20%); } input { -webkit-appearance:

Watson 2012/08/24

webkit
css

リンク

【レビュー】HTML5 search、WebKitブラウザは使用注意 | エンタープライズ | マイコミジャーナル

A Web Design Community curated by Chris Coyier. HTML5で新しく策定が進められている機能のひとつに、input要素におけるsearchタイプがある。これは検索フィールドであることを明示するための型で、今のところ通常のテキストフィールドと大きな違いはない。ただし、WebKitを採用しているブラウザ(ChromeやSafari)では扱いが異なっている。このあたりの話がWebKit HTML5 Search Inputs - CSS-Tricksにまとめられている。WebKitではsearchが指定されたinputはほかのinputとは挙動が違い、CSSの適用などには注意が必要という内容になっている。指摘されている内容をまとめると次のとおり。 WebKitではtype=searchが指定されたinput要素は、ブラウザの右上に表示されているテキ