ここのところ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()
やっと、ごく限られたケースで計算が出来るようになりました。
+記号と-記号の前後には空白が必要です。
例:
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 */
- CSS Intrinsic & Extrinsic Sizing Module Level 3 - Editor's Draft, 2 February 2016
- 私は width について MDN で学びました
::before
とcontent: counter();
とtext-indent
::before
にcontent: counter();
を指定して、text-indent
にマイナスの値を指定して行を左にずらす時にボックスの右端の位置が
- Safari、Chromeは移動する前のまま+α = 右端が空く(あたかも
padding-right
が指定してあるかのよう) - Firefox、IEは文字の右端まで = 右端が空かない
と、Webkit系のブラウザーとそれ以外で挙動が別れました。
続く行があるともうちょっと複雑です。それをみるとどうやら元のボックスの位置に入っている文字数(文字幅)がtext-indent
がかかった先頭行の文字数と同じかそれより少ない場合に右端に空きが付くようです。
しかし、::after
でcontent
を指定するとさらにちょっと挙動が違います。
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
タグに書くのが無難でしょう。
link
はhead
タグ内に置かないとエラーして機能しません。
単位記号と数値の間は空白を空ける
SI単位系を使う場合、数値と単位記号の間に空白を置くのが正しい(規格に沿った)書き方です。
ただし現状では出版媒体や学会などで書き方の規則がそれぞれあるのでそれに従った書き方になります。
(ここでは「␣」は空白記号を表すことにします。)
- 1␣mm
- 5␣kg
- 25␣℃
- 1␣kHz 〜 20␣kHz (1 〜 20 kHzは好ましくない)
- 75␣% (%はSI単位ではないが、空白を置く)
- 90°、 30′、 20″ (例外: 平面角の度、分、秒)
0 件のコメント:
コメントを投稿