CSSの基本、構文と意味をMDNから学び直す
プロパティと値のセットが宣言、宣言を中括弧（{、}）で包んだものが宣言ブロック、スタイルを当てる場所を指定するのがセレクター、セレクターと宣言ブロックを合わせて規則セット（規則）、という。
@documentに期待。
非継承プロパティの説明にあるborderの例はなるほど。ショートハンド使ったときに起こり得そうなミスなので気をつけよ。
一括指定が対応する個別プロパティの内、省略したプロパティ全てに初期値が設定されます
意図せず上書きする、なんてことが起こりがち。
fontプロパティのfont-sizeとline-heightのように、中には構文が複雑（覚えづらい）ものもあるので、できればショートハンドを使った指定は避けたい。
:notは疑似クラスとして詳細度はカウントされないけど、:notの中で指定されたセレクターは詳細度としてカウントされる。
:notは便利な使い方もあるけれど、コードを見ても何をやってるか瞬時に判断しにくいという問題がある。そもそもあまり使われないかもしれない。
また、CSSの詳細度はあくまで型ベースで決まる点を覚えておきたい。#fooと[id="foo"]は同じ場所をあらわすセレクターだが、#fooがIDセレクターなのでこちらのほうが優先される。
「構成値の組み合わせ」を理解しておくと、MDNなど、CSSの仕様を読むときに役立つ。
知らないCSSプロパティ・セレクターを知る、その6
https://developer.mozilla.org/ja/docs/Web/CSS/Reference
今日はアルファベット順でT〜Zまで。これで終わり。
tab-size... タブ文字（スペース）のサイズを決めるtext-align-last... ブロック要素の最後の行の配置を指定するtext-combine-upright... 1文字分の空間に挿入する複数文字の組み合わせを指定する。この処理は縦中横と呼ばれるものtext-decoration-line... 要素にほどこす線の種類（配置）を指定する。空白で値を区切って、複数の線を指定できるtext-decoration-color...text-decoration-lineの色を決めるtext-decoration-style...text-decoration-lineの線のスタイルを決めるtext-emphasis-position... 圏点の配置を指定するtext-emphasis-color... 圏点の色を指定するtext-emphasis-style... 圏点のスタイルを指定するtext-orientation... 行内のテキストの向きを指定するtext-transform... 要素の大文字・小文字表記を指定するtext-underline-position...text-decorationプロパティにおけるunderlinで指定される下線の位置を指定するtransform-box...transformとtransform-originプロパティに関連したレイアウトボックスを指定するtransform-style... 要素の子要素が3D空間に配置するか、平らにされて要素の面上に配置するかを指定するtransition-property... トランジション効果を与えるプロパティ名を指定するunicode-bidi... 説明読んでもわからん。使いそうにない感じはわかるwidows... 印刷用。新しいページの始めに必ず残す最小行数を指定するwill-change... ブラウザに要素上で予測される変更の種類についてヒントを出す
知らないCSSプロパティ・セレクターを知る、その5
https://developer.mozilla.org/ja/docs/Web/CSS/Reference
今日はアルファベット順でRとS。
radial-gradient... 原点を要素の中心として、そこから放射状に延びるグラデーションをつくるrepeat()... CSS Grid Layoutで使うプロパティ。トラックリスト内での繰り返し短い記述で指定できるrepeating-linear-gradient... 自動的に繰り返しを備えた線形グラデーションrepeating-radial-gradient... 自動的に繰り返しを備えた放射状グラデーションresize...textarea要素にデフォルトでついてるやつ。ユーザーが要素のリサイズをできるようにするruby-align... ベーステキストに対してルビの配置と配分を指定。ruby-position... ベーステキストに対してルビの表示位置を指定。ルビをそれぞれの文字の間に配置するinter-character値はまだサポートしているブラウザがないscroll-snap-type... スクロールコンテナの中にスナップ点（つまり複数のブロック要素？）がある場合、スクロールしたときにこのスナップ点の移動の振る舞い方を決める。scroll-snap-type: mandatoryを指定した例をFirefoxで見ると、まるでスライドのページ送りのように振る舞ってるのが確認できる
知らないCSSプロパティ・セレクターを知る、その4
https://developer.mozilla.org/ja/docs/Web/CSS/Reference
昨日はアルファベット順でNまで見たから、今日はOから。Qまで確認した。
orphans... 印刷用。改ページされる際に残す最低行数を指定するoverflow-wrap... 自動生成される文字列のように、単語の途中で改行をいれなければ枠の中に収まらないものに対して、適当なところで改行をいれるかどうか指定するpage-break-inside... 印刷用。指定した要素の中で改ページおこなうか否かを指定するpc... 長さの単位。1パイカperspective... 3D配置された要素に遠近感を与えるプロパティ。ほとんど使ったことないからわからんけど、要素に奥行きをもたせるようなプロパティかなq... 長さの単位。1/4ミリメートルquotes... 引用符の出し方を指定する
知らないCSSプロパティ・セレクターを知る、その3
https://developer.mozilla.org/ja/docs/Web/CSS/Reference
昨日はアルファベット順でFまで見たから、今日はEから。Nまで確認した。
image-orientation... 画像の向きを回転させるimage-rendering... 拡大・縮小される画像の描画アルゴリズムのヒントをブラウザに伝える。デモを見てると、image-rendering: pixelatedの指定が拡大・縮小したときのぼやけ除去に役立ちそうisolation... 要素が新しいスタッキングコンテキストを生成すべきかどうかを定義するって書いてあるけど、読んでもよくわからん。background-blend-modeと一緒に使うと有効らしいけどmix-blend-mode... このプロパティが指定された要素とその下の要素の背景色のブレンド方法を指定するminmax()... Grid Layoutにおいて、トラック幅の最小値と最大値を指定するms... ミリ秒をあわらす単位@namespace... スタイルシートで使用するXML名前空間を定義する
仮に値 0 に対してすべての単位が同じ時間を表すとしても、これは <length> ではないので、単位を省略してはいけません。0 は無効で、0s や 0ms を表しません。
Firefoxではこの記事にある通り、このデータ型で単位を省略した 0 は無効値になります。その他のブラウザには、0s（または 0ms ）と解釈し、計算値に反映するものがあります。
https://developer.mozilla.org/ja/docs/Web/CSS/time#ms に書かれていた文章。アニメーションなんかで時間に関する値を指定するときは単位を省略せずに書こう。
align-items: centerを指定すると小数点以下はどうなるか
FlexboxとGrid Layoutで align-items: center を指定したときの表示を確認した。16pxのブロックに1pxの線を垂直中央配置したとき、どうなるか。IE11とEdgeはVirtualBoxを使った仮想環境で確認した。
結論、使うプロパティとブラウザによって結果が異なった。Flexboxを使うと小数点まで考慮されずに配置が決定されたが、上下にとる数値はブラウザによって違った。Grid Layoutを使うとSafariとFirefoxでは小数点まで考慮されたものの、Chromeでは考慮されなかった（IE11とEdgeは確認できなかった）。
望ましいのは小数点まで考慮して配置が決定されることだと思う。
Flexbox
ちなみに border-top の代わりに height を使っても結果は同じ。
Grid Layout
余談
grid-template-columns の代わりは -ms-grid-columns 。最後に「s」いるで。
余談2
- top: calc(100% / 2)で16pxのブロックに1pxの線を垂直中央配置 | JSFiddle
- transform: translateY(50%)で16pxのブロックに1pxの線を垂直中央配置
- 結果：すべての主要ブラウザで上から8px、下から7pxの位置に線が表示された
結果は予想通り。このままでいいと思う。
知らないCSSプロパティ・セレクターを知る、その2
昨日の続き。CSSの知らないことを知るっていう。
https://developer.mozilla.org/ja/docs/Web/CSS/Reference
昨日はアルファベット順でCまで見たから、今日はDから。
@font-face... Webフォントを指定するfont-feature-settings... OpenTypeフォントの先進的なタイポグラフィの機能を制御するfont-kerning... カーニングの使用を制御するfont-language-override... フォントが持つ言語固有グリフ（たとえばfiのリガチャー）の使用を制御するfont-size-adjust...font-sizeに掛け合わせる値を指定することで、フォントの小文字の高さを指定するfont-stretch... 提供されているフォントフェイスの中から、幅の狭い〜広いフォントを選ぶfont-synthesis... ボールドまたはイタリック体がないフォントに対して、ブラウザが合成してよいか制御するfont-variant...font-variantから始まるいろんなプロパティのショートハンド
フォントまわりのことが全然把握できてない。
