2016年2月12日金曜日

CSS関連メモ

ここのところblogのiPhone対応を急にいじりだしたら、ほかにもいろいろいじるようになってしまいました。そのときに知ったCSSなどをメモします。

どれも結構数年前からドラフトで検討されていて、ブラウザーの独自実装で入っていたものだと思いますので目新しいものではないと思います。

チェックに使ったブラウザーは:

Mac OS X 10.11.3 El Capitan

Safari
9.0.3 (11601.4.4)
Chrome
48.0.2564.103 (64-bit)
Firefox
44.0

Windows 8.1

Chrome
48.0.2564.103 m
Firefox
44.0
IE
11.0.9600.1811

calc()

やっと、ごく限られたケースで計算が出来るようになりました。

+記号と-記号の前後には空白が必要です。

例:

幅100%
幅を100%の1/3にする。あいうえおかきくけこ
幅を100%の1/3から2em減らす
width: calc(100%/3);
width: calc(100%/3 - 2em);

C言語な人がcppのつもりで使うと…エラーばかりでがっかりしますが。

当然ですが、calc(fit-content / 2)fit-contentは後述)ということは書けません。というかfit-contentは動作であって、関数でも変数でもないからです。なんでこういう変数を同時に導入しないのだろう?

IEでtext-indentに使ったところ、動作しませんでした。エラーせずに計算結果は0になっているようです。なのでIE向けとその他向けで2行書いておくと言う手は使えませんでした。

IEにこの書き方ではうまくいかない:
text-indent: 3em;
text-indent: calc(2em + 2ch); /* IE bug ? */

IEも考えるならtext-indentには残念ながらcalc()は使えないようです。他にも使えないpropertyがあるのでしょう。

widthの幅指定

中の文字の長さちょうどにする。

例:

あいうおえ
width: -webkit-fit-content; /* Safari */
width: -moz-fit-content; /* Firefox */
width: fit-content; /* Chrome */

新しい仕様を使う以前にdisplay: table(あるいはinline-table)で一発で出来てしまいました。

例:

あかさたな
display: table; /* for all browser, fit width */

とりあえず、全部書いておくことにしています。

width: -webkit-fit-content; /* Safari */
width: -moz-fit-content; /* Firefox */
width: fit-content; /* Chrome */
display: table; /* for all browser */

::beforecontent: counter();text-indent

::beforecontent: counter();を指定して、text-indentにマイナスの値を指定して行を左にずらす時にボックスの右端の位置が

  • Safari、Chromeは移動する前のまま+α = 右端が空く(あたかもpadding-rightが指定してあるかのよう)
  • Firefox、IEは文字の右端まで = 右端が空かない

と、Webkit系のブラウザーとそれ以外で挙動が別れました。

続く行があるともうちょっと複雑です。それをみるとどうやら元のボックスの位置に入っている文字数(文字幅)がtext-indentがかかった先頭行の文字数と同じかそれより少ない場合に右端に空きが付くようです。

しかし、::aftercontentを指定するとさらにちょっと挙動が違います。

Webkit系の挙動がなぞですのでバグかもしれません。

例:

施身聞偈
諸行無常
是生滅法
生滅滅已
寂滅為楽
一二三四
一二三
一二三四
一二三四
一二三四
一二三四五
div::before {
  content: counter(count) ": ";
}
div {
  width: -webkit-fit-content; /* Safari */
  width: -moz-fit-content; /* Firefox */
  width: fit-content; /* Chrome */
  display: table; /* for all browser to fit width */
  text-indent: -1.2em; /* calc(-1em - 2ch); */
}

これだとFirefoxとIEとSafari、Chromeで文字の右端の空き具合のデザインが揃わないです。

しょうがないのでブラウザー別にCSSを効かせるようにしてみました:

Firefoxだけ指定する方法

@-moz-document url-prefix() { /* Firefox */
  selector { padding: 0 1em 0 2.2em; }
}

IE 11だけ指定する方法(IE 10も)

IE10以降に効く指定と、IE11(もしかするとIE12以降も)に効く指定:

@media all and (-ms-high-contrast:none){
  selector { padding: 0 1em 0 2.2em !important; } /* IE10 or later */
  *::-ms-backdrop, selector { padding: 0 1em 0 2.2em; } /* IE11 or possiblly later */
}

その他いろいろな方法

上記の問題の場合、本当はWebkit系だけにCSSを効かせたほうが正しいのかもしれません。

そんなこんなで、Opera、Chrome、IE、Safari、さらにはiOSだけなどにCSSを効かせる方法を並べている人がいました:

なかなかすごい量。

文章の均等割り付け

pタグの中などでの文章(文字)の均等割り付け=両端揃えをするには:

text-align: justify;

IEではこれだけでは足りずtext-justifyの指定も必要です。従って全ブラウザーに対応するには以下のようにします:

text-align: justify;
text-justify: inter-ideograph;

text-justifyは今のところIE以外では対応してないようで、エラーで無視されますので全ブラウザー共通でこの記述で問題ないわけです。

IE 11ではtext-align: justify;だけでいけると書いている人がいますが、私が実験した結果はtext-justifyが必要でした:

Webに使うfontは何がいいか?

Mac OS X
Avenir Nextとヒラギノ角ゴシック ProN W3
iOS
Avenir Nextとヒラギノ角ゴシック ProN
Windows 8.1以降
Open Sansと游ゴシック

游ゴシックはWindows 8.1から入ってきたそうです。Windows 10では標準になるのではないか?と言われています。

一方Macにも游ゴシックはOS X v10.9 Mavericksから入っています。

したがって游ゴシックを指定すると両OSでおなじにできます。ただしフォント名が両OSで微妙に違うので指定の際に全部列挙します。

英文フォントは:

Mac OS X
OS X v10.8 Mountain Lionから入ったAvenir/Avenir Nextがよい
Windows 8.1以降
Google fontのOpen Sansを使ってみる
iOS
Avenir/Avenir Next
Android 4以降
Roboto
font-family: Avenir, "Open Sans", "Helvetica Neue", 
Helvetica, Arial, Verdana, Roboto, "游ゴシック", "Yu Gothic", 
"游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", 
"Meiryo UI", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;

しかしMacではヒラギノ角ゴシックがきれいなのでMacはヒラギノ角ゴシックで、Windowsは游ゴシックでいくことにしてみます。

font-family: "Avenir Next", "Open Sans", "Helvetica Neue", 
Helvetica, Arial, Verdana, Roboto, "Droid Sans", "游ゴシック", 
"Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 
"メイリオ", Meiryo, sans-serif;

Web Fontの指定方法

Web fontのGoogle FontsでOpen Sansを使う場合:

@import url(//fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic);

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css' />

@importはCSSの先頭(@charsetがあればその次)に置かないと動かないです。従ってheadタグ内のstyleタグに書くのが無難でしょう。

linkheadタグ内に置かないとエラーして機能しません。


単位記号と数値の間は空白を空ける

SI単位系を使う場合、数値と単位記号の間に空白を置くのが正しい(規格に沿った)書き方です。

ただし現状では出版媒体や学会などで書き方の規則がそれぞれあるのでそれに従った書き方になります。

(ここでは「」は空白記号を表すことにします。)

  • 1mm
  • 5kg
  • 25
  • 1kHz 〜 20kHz (1 〜 20 kHzは好ましくない)
  • 75% (%はSI単位ではないが、空白を置く)
  • 90°30′20″ (例外: 平面角の度、分、秒)

0 件のコメント:

コメントを投稿