カテゴリー: HTML・CSS

@pageディレクティブでページ全体の余白の調整。
単位はmmがよく利用される。

@media print {
  @page { margin: 5mm; }
}

印刷では、ウェブ上での１ページが複数ページになるため、見出しの途中や画像の途中でページが変わることがある。
以下は表示する行数をコントロールする方法。

@media print {
  p,h1, h2, h3, h4, h5, h6 {
    /* 改ページ前のページ末尾に書かれるべき最低行数 */
    orphans: 3;
    /* 改ページ後のページ先頭に書かれるべき最低行数 */
    widows: 3;
  }
  h1, h2, h3, h4, h5, h6 {
    /* 要素の直後で改ページしない */
    page-break-after: avoid;
  }
  table, img, pre, blockquote {
    /* 要素の途中で改ページしない */
    page-break-inside: avoid;
  }
}

リンク先を表示させたり、略語を示すabbrタグのtitleを表示。

@media print{
  a.link[href]:after { content: " (" attr(href) ")"; }
  a.link[href^="javascript:"]:after, a.link[href^="#"]:after { content: ""; }
  abbr[title]:after { content: " (" attr(title) ")"; }
}

IEやEdge、Androidの一部のブラウザでは:before、:after擬似要素にtransitionやanimationをかけると、その要素がスムーズにアニメーションしなかったり、あるいは周辺の要素に同時にアニメーションを付加していた場合に動きがおかしくなったりする現象が見られることがある。

解決方法は2つあり、

• transitionの場合にはtransition-propertyをできるだけ限定する（allにしない）こと
• 擬似要素ではなく素直にdivなどの新しい要素でアニメーションさせること

が挙げられる。
ひとつめはブラウザの負荷を下げるということで納得できるが、もうひとつは擬似要素のほうがレンダリング負荷が高いということだろうか？
普通の要素と擬似要素はブラウザの解釈の仕方が違い（IEではline-heightにremを使うと擬似要素のみバグったりすることもあるので）からくるものなのか？

謎だが、もしお困りの方がいましたら是非試してください。

よく知られているものは、input[type=”text”]やtextareaなどでfont-size: 16px以上でないとフォーカスしたときに拡大されてしまうということ。

さらにタブレット用のデザインをつくるときにやりがちなのが、タブレットのときのみPCと同じ見た目になるように同じViewportにする方法。これには副作用があり content=”width=device-width”以外のViewportにしたときに、タッチ関連のイベントが一瞬遅れて反応するようになるから、要注意。
これは昔のタッチデバイスで問題となっていたダブルクリックを判断するための時間を確保するためであり、今はViewportの設定からその機能をON/OFFするようになったためである。

position:fixedが効いている要素は、スクロールするたびに固定要素のビットマップと、重なりの下にあるほかの要素のビットマップをCPU上で合成する必要があり、広範囲の再描画を必要とする。

そのため、GPUアクセラレーションを有効にする下記のCSSハックを行うと描画スピードが向上する。

transform: translate3d(0, 0, 0);

※上記ハックはあらゆる要素に適用できるが、CPUからGPUへの要素の転送はブラウザにとって負荷の高い処理であるため、広い領域を持つ要素や多数の要素にむやみに利用すべきではない

 

2つの色を混ぜて中間色を生成

color: mix(#000, #fff, 50%);

指定した色の明度を上げる

color: lighten(#000, 50%);

指定した色の明度を下げる

color: darken(#fff, 50%);

指定した色の彩度を上げる

color: saturate(#f99, 50%);

指定した色の彩度を下げる

color: desaturate(#f99, 50%);

指定した色をグレースケールに変換

color: grayscale(#f00);

指定した色の補色を生成

color: complement(#f00);

指定した色の反転色を生成

invert(#000);

 

• <i>：[aria-label][aria-hidden=”true”]
• <iframe>：[role=”application”]
• <header>：[role=”banner”]
• <time>：[datetime]

http://neos21.hatenablog.com/entry/2016/02/09/000000

標題の件、上記にあるハックは使いづらい部分があるので、とある案件ではtransitionプロパティのみDomContentLoadedしたときのみに適応させることで対応した。

しかしこれは非常に面倒なことになりがちなので、CSS設計の段階でtransitionプロパティを最小限の利用（transition-propertyをallではなく、きちんと使うもののみ指定）する方針に固めたほうが望ましい。

またIE11ではtransformの値内でcalcファンクションが利用できなかったり、transform3dの動きがぎこちない、あるいは擬似要素にtransitionやanimationを適用するとカクカクしたりすることがあるため、IE11を重視する場合は擬似要素をアニメーション目的で利用せず、transformを2dまでのやり方で書く方が望ましい。

下記をURLのパラメータに設定すると想定通りになる。

・パラメータがついていない場合

?wmode=transparent

・パラメータがついている場合

&wmode=transparent

進行中案件にて発見。

昔使われていたUIWebViewはリンク化の制御を行わないとmetaタグのformat-detectionが有効にならなかったので、開発者側の制御も必要だった。
http://d.hatena.ne.jp/nakamura001/20110430/1304134585

今はよくわからないが、Chromeのみ標題のような現象が発生している。

具体的には、電話番号などがすべてaタグで囲まれている様子。

iOS9では発生せず、iOS10のみの現象である。

対策としてはaタグでもスタイルが壊れないように設定するしかない。。