background-attachmentの初期値

ある漫画作品がアニメーション化するニュースを知って公式サイトを見たところ、CSS アニメーションを使い背景でロゴを動かしていました。

ページをスクロールした時にロゴが動くと認知が弱いかな、と思い Safari ブラウザの開発メニュー>インスペクタで background-attachmentfixed にしたらスッキリとした印象になりました。

参考まで、fixed に指定すると background-origin は無効になるそうです。

カウンタで番号リストを作る際にゼロから始めようとした時にも初期値の設定を知らなくて、ol {counter-reset: item -1;} で解決したことがありました。

http://hkitago.tumblr.com/post/168622042786

コードの読みやすさを考慮しても初期値は省略しない方が良いかもしれません。

参考

SELECT要素のテキストを中央揃えにする

Webkit で表示するウェブアプリ製作の過程で SELECT (正確には OPTION になるかな)の要素内に表示されるテキストを中央揃えにする必要があって調べてみたところ面白いやり方が Stack Overflow にあったので紹介します。

もちろん最初に思いつくのは、スタイルシートを使って text-align: -webkit-center; とすることなのだけど、iOS では使えないことがそもそも知られている上に、開発環境の検証に使っている OS X の Safari 8 でも廃止されているようで上手く表現できずに却下することにしました。

次に考えたのは OPTION 要素のテキスト幅に合わせて SELECT 要素の幅を JavaScript から CSS で制御するという方法で、これと同じ発想を持った人がいたということです。

具体的には、まず SELECT の CSS を display: block; としておきつつ、width: 0 auto; を使って、あらかじめ用意しておいた固定幅を持つ親要素内で中央に配置するようにします。

それから、適当な要素(SPAN が適任!)をどこにでもいいので用意(詳細は後述)し、SELECT の ONCHANGE イベントで、選択された OPTION の TEXT 値を取得し、その要素に一時的に入れます。

ここまでくると結果は容易に想像できると思うのですが、その幅を読み取り、SELECT に適応するという手筈になります。

参考にしたコメントでは jQuery を使っていたのですが、今回のプロジェクトでは利用していなかったため次のような関数を使って SELECT の ONCHANGE イベントで呼ばれる関数内で発動することにしました。

var setSelectWidth = function(elm) {
  if(elm.selectedIndex < 0) {
    return;
  }
  var elm_tmp = document.getElementById('width_tmp');
  elm_tmp.innerHTML = elm.options[elm.selectedIndex].text;
  elm.style.width = elm_tmp.offsetWidth + 'px';
};

先に「後述」と書いたのは、この一時的にテキストを入れて幅を読み取る SPAN 要素の扱いで、これまた参考したものでは display: none; としつつも、jQuery の width() で幅を取得できているのですが、offsetWidth を使った場合は上手くいかず、代わりに position: absolute; として画面領域外にぶっ飛ばしておくという alert のタイトルを省いた時のような小技を使いました。

更に参考文では、SELECT に適用する幅の値に余白を与えていますが、SELECT に PADDING: 0; の設定と、両方の要素のフォントを揃えておくことで不要になるかと思います。また、 -webkit-appearance の設定の仕方で結果が若干変わってくることも考えられるので、SELECT の CSS に BORDER を付けて逐一確認するのが良いかと思います。

最後に疑問点としては、offsetWidth ではなくて clientWidth を使うとどうなるのか、ということと、display: none; の指定がある要素の幅を jQuery の width() はどのように取得しているのか、ということで、毎度ながら時間が許せば調べてみたいところです。

P.S. 右揃えだけなら dir 属性を使うと簡単に解決します。

参考:

The bug of animation-play-state on Webkit for iOS

具体的には HTML に記述されるノードの並び順によって keyframe が影響を受け挙動が変ってしまうという問題を見つけました。こちらのデモを参考まで。
animation play state bug (同じボタンを押す度に上下の円が順に回ります)

現時点でMac OS と iOS 版の Safari (7.0.1 9537.73.11 && 7.0 Mobile/11D5134c Safari 9537.5)、iOS 版の Google Chrome (32.0.1700.20) で影響を確認しています。そこで同じような問題が WebKit Bugzilla に投稿されているにも関わらず、未確認のまま一年が過ぎようとしているのに若干不安を持ちつつも、Android 並びに PC 版の Chrome ブラウザは正しく実装されているため Apple のバグレポートを使って報告しました。

iOS4 の時には既に製品として公開している中、バグレポートで大変な目に遭ったのですが、Google のモノはトリッキーにこちら側で手直しや対応することができる問題が多いのに比べ、Apple のは向こうの対応を待つしかないという箱庭で遊ぶ危険さみたいなものを感じて止みません。

P.S. さっき新たなβ版が出ていたのだけど、次のiOS 7.1に間に合ってほしいなー(棒読み)。

参考:

CSS Spriteで読み込み中アニメ

OS X 以来近年の Apple のサービスによく登場している「読み込み中」の表現は、10年前ならアニメーションGIFで対応したと思うのですが最近では CSS Sprite の技術を利用することが可能になりました。

(function($) {
	var initData = (function() {
		const imgW = 35;
		const imgNum = 12;
		var intid_loader = 0;
		var intval_loader = 50;
		var posY = 0;
		var imgId = 0;
		intid_loader = setInterval(function(){
			imgId = imgId >= imgNum ? 0 : imgId;
			var pos = '0px ' + (-imgW * imgId) + 'px';
			$('#loading').css('background-position', pos);
			imgId++;
			//console.log(pos);
		}, intval_loader);
	}).call(this);
})(jQuery);

この例では、35ピクセルの正方形を12駒分、縦方向であるY座標を上方へ100ミリ秒ずつ動かしています。このブログの先頭ページに設置したのでご参考まで。

ところがこのタイマーによって繰り返す手法も代替の時期にきていて、実際に繰り返し関数をアニメーションのフレームに使うことに比べると正しい姿だと思うのですが、既に jQuery と requestAnimationFrame の採用問題などあり、更に向こう10年間のブラウザの対応など注意して追いかけていく必要があります。


今回のネタ元でした。

P.S. 画像処理でもいいよね… loading – Google 検索

参考:

SafariでCSSの表示確認

JavaScript で動的にノードを追加しても描画してくれるので、いちいちファイルを編集→ブラウザ切り替え→リロードという手間コンボが必要ありませんよー、という映像です。

最近メタディスクリプションの内容を書き換えるという難解!な要件があって活躍したとかしないとか。

参考:HTML and CSS Debugging Tools | Design Shack

P.S. 連投で恐縮ですが iPad で何か書かせてください。;-)

WordPressのビジュアルエディタのフォントを変更する

使い始めた WordPress のビジュアルエディタは先にも述べたようにRTFを扱うように便利なのだが、丸ゴファンとしては Safari RSS の時と同様に変更したいところだ。

wp-includes/js/tinymce/themes/advanced/skins/wp_theme/の中にあるcontent.cssを見ているようなので、このファイルを開き、74行目のbody.mceContentBodyのフォントサイズの指定数値を14pxに変更してみました。

引用元: WordPressのビジュアルエディタのフォントを変更する

具体的には次のように変更した。バージョン2.8ではどうやらこのファイルだけ編集すれば良いらしい。

font: 14px/19px 'HiraMaruPro-W4', 'メイリオ', Meiryo, 'MS Pゴシック', sans-serif;
line-height: 1.5;

実際に Safari 4 と IE7 ではこう見える。

safari

ie7