安田 学
特に画像周りが重くなりやすい。 gulp-cachedなどを使って、監視対象を最小限にする。
タイポグラフィー周りの指定に`font-feature-settings`を使う。 ブラウザサポートは - IE10~ - iOS9.3~ - Android4.4~ http://caniuse.com/#feat=font-feature
現状では400px, 768px, 1000px, 1200pxになっている（`min-width`）。 768pxはそのままで、400pxは適切なのか？例えばiPhone5のポートレートの568pxに変更した方がいい？ - Bootstrapは768px, 992, 1200 - Foundationは640, 1024, 1200, 1440
縦スクロール - `$height`の指定は必須 - `overflow: scroll;`だと高さの指定が必須になるので`scroll`を指定 ``` scss @mixin _c-panel($height: null) { position: relative; height: $height; } @mixin _c-panel__content() { overflow: scroll; position: absolute; top: 0; right: 0; bottom: 0;...
[svgo](https://github.com/svg/svgo)などでアイコンフォントとして使うSVGファイルを最適化させる。 インラインSVGで使うものは対象外にする？
``タグに`role="main"`や``タグに`role="contentinfo"`など、 HTML5に対応仕切れていないUAのためにrole属性を指定しておくべきか？ HTML5もWAI ARIAも、仕様書としては**同じ意味を持つタグにrole属性をつけるべきではない**ということになっている。 HTML5のバリデーターに通すと、警告が出る。冗長であっても、クライアントの規模などを考えて、対応すべきであれば指定しておくことが必要とも考えられる。 対応していないUAを調べる必要がある。
リンク先の漏れがないか、適切にマークアップされているか、任意のクラスやプレフィックスが付いているか探すなど。 ``` scss // 任意のプレフィックスがついている要素を探します。 // @example scss // @include _debug-prefix('c-') { // outline: 5px solid crimson !important; // background-color: rgba(crimson, 0.1) !important; // } @mixin _debug-prefix($prefix) { [class^="#{$prefix}"], [class*="...
現状では画質優先でファイルサイズの削減をしている。 大きめの画像を多用する場合に、もっと大幅に削減する可能性がある。特にjpgとpngを重点的に。