head要素以下でのitemprop属性
Microdataではitemprop属性を使ってプロパティーを追加する。HTML標準仕様の変更によってbody要素以下でもlinkやmeta要素を使えるようになったので、どうでも良いマークアップを追加してCSSで隠して誤魔化すとかしなくても大体なんとかなるようになった。しかしその一方でlinkとmeta要素はitemprop属性と同時にrel属性やname属性を使うことはできない。そのため例えばタグにitemprop="description"を追加してWebPageスキーマのプロパティーとして追加するなどということは無理。
CSSのelement()関数
せめてWebKitに実装されてからとか思ってたけど、CSS Image Values and Replaced Content Module Level 3がLast Callになったのでいい機会ということにしてelement()関数についてエントリを書く。element()関数は任意のIDを引数に取ることができ、その要素を画像として参照できるというなかなかの荒業な関数。具体的には画像のサムネイルを簡単に作成できるとかそういうものをイメージするとわかりやすいと思う。
あなたのブラウザでJavaScriptを有効にする方法
How to enable JavaScript in your browserの日本語版ができた。できたというか訳した。能動的にJavaScriptを無効にしてるとか今時あまりない気がするけど、何かの間違いで無効になってしまったような人のためとかでもあると思うので一定の需要はありそう。
ディテール
Webページにおける細かいパーツを正しく実装することがユーザー経験の向上につながるということについて書かれたUI: Getting the Details Rightを読んだ。WordPressの結構な人気テーマでもタブがあたかもパンくずリストのように表示されていたりするし、頭ではわかってても実践にまでは至らないことも多そう。
スケーラブルな三角形をCSSグラデーションで作る
ひとつ前のエントリで書いたやり方だとスケーラブルじゃないので著しく生産性に欠ける。真っ当にCSSグラデーションを書いてうまく重ねてやるとスケーラブルな三角形を作ることができるようだ。変な書き方を知っているのも良し悪しですね！
CSSグラデーションで三角を作ってアニメーションさせる
擬似要素とborderプロパティーを組み合わせてCSSで三角形を作る方法はかなり市民権を得ているように思う。ちょくちょく見かけるようになった。しかしこのテクニックには欠点がいくつかある。例えばbox-shadowがうまくつかないこととか。それ以外にもWebKitでCSS Transitionによるアニメーションが起こらないという欠点もある。それを回避するために三角を作る新たな方法を発明したという話。
borderとCSS Transformを組み合わせるとOperaでバグる
写真を紙に挟んだような効果をCSSで作ったらOperaでバグった話。細い枠線でも起こるけど気づきづらい。太くするととてもわかりやすい。border絡みは大体いずれかのブラウザで残念な結果に終わるという経験則はやはり正しかった。
WindowsのSafariで表示がおかしくなるGoogle Web Fontsのフォント
昨日気づいたんだけど、Google Web Fontsの一部フォントでWindowsのSafariにおいて表示がおかしくなる。昔散見されたiTunesからぶっこ抜いたLucida GrandeでWebページの表示が一部おかしくなる問題と似てる気がする(けどもうよく覚えていない)ので、Webフォント特有の問題でもGoogle Web Fonts特有の問題でもなさそう。
Wallpapers on Pinterest
Pinterestを使ってデスクトップ壁紙のコレクションを始めた。画像の縦横比がそれぞれのPinでほぼ一緒なので敷き詰めてもあまり面白くないのがちょっと悲しい。
v6.13
ちょっと色々手を入れたのでエントリにする。手を入れたというか一度全部Webフォントでやってみたいなーと思ったので、そうしてみた話。まぁ日本語は無理なのでそんなにだけど。