DIST.30 「一歩差がつくCSSテクニック」
山本 康介
株式会社センティリオンシステム SE・プログラマ
Google
紙・インク
material.io
Angular Material
material components for the Web
npm i @material/button mdc-buton BEMのクラス表現
mdc-button-core-styles
3行
_mixins.scss
include
mdc-button-without-ripple .mdc-button が本体includeで更に呼び出し
半径の大きさ
カラー処理
disabled ユーザが変更できるように
アニメーション
.mdc-ripple animation @keyframes 西原 翼/ crayfisher_zari
株式会社ICS インタラクションデザイナー
直接的には実務では役に立たない 水滴
ハイライト１
border border-radius transform filter ハイライト２
border-radius filter ぼかし
radial-gradient 100%近くでなめらかな値になる
フチ
box-shadow
外側
内側
グラデーションとぼかしをこねくり回すといい感じに鳴る
CSSアニメーションの狂気
中矢 雄介
株式会社オロ、Meguro.css テクニカルクリエイター
狂気の方向に一歩に差がつく
もっと遊んでほしい
テクニック
リキッド
流体・液体表現
filter: blur() contrast() 3D
transform-style: preserve-3d クリップスライス
clip-path: polygon 令和元年ベストの
font-family はこれだ株式会社ICS 代表
font-family
-apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meirio, sans-serif; ボールド
font-weight: 600; ウェブフォント
重い
初回アクセス時に不利
デバイスフォントで対応
長期的な不安要素を減らす対策
sans-serif は影響うける可読性が低い
iOSには存在しない
font-face問題
62以降で効かなくなった
system-uiにも注意
結局かすれる
明朝体問題
Chromeのバグ
Hiragino Sansで対応
Safariでフォントが太る
font-weight: bold; => W8があたるCatalina Chrome 79
和文フォントにも影響あり
Mojaveでグレースケールの採用
細く見える
細いフォントとウェイトは指定しない
継承するcolor
小林 信次 koba
カスケーディング => 段階的に継承
ブラウザのユーザーエージェントスタイルは継承してくれない
ベースに
color: inherit; boder: 1px solid; border-colorは
color が継承値 fill も継承 all: unset; もとのスタイルをリセット
継承値
レイアウトプリミティブ
株式会社シフトブレイン／スタンダードデザインユニット フロントエンドエンジニア
テンプレートとコンポーネントをいかに堅牢にできるか
レイアウトをいかに組み立てられるか
container というラッパーは共通化Layouts: Every Layout
複数のレイアウトプリミティブを入れ子にできる
メディアクエリで制限しない
幅が狭いときでも横並びになる
Composition
Box
Stack
Center
CLuster
同じパターンを再利用する
ネガティブな印象なのは責務の切り分けがうまくできてない
単純な責務を与える
森川 結子 / talocohc_rion
ウェブの本質であるアクセシビリティを守っていくのは私達の役目
focus outline
消さない
フォーカスインジケータ
キーボードだけでも操作するよおうに
Pointing Target size
タップしやすくする
震える人もいる
WCAG達成基準 2.5.5 Target Size
44×44ピクセル以上推奨
疑似要素で拡大できる
Contents Order
flexbox
order -1
コンテンツが先にくる
見出し要素より上の要素は見落としてしまう
Form Input
placeholderに値を入れるのはよくない
入力するときに見えない
支援技術側でサポートしていない
floating labels
ラベルで表示しておこう
CSSアニメーションに、なぜ
transform を使ったほうが良いのか。すぱいす
@keyframes なめらかなアニメーション
60fpsを保ち続ける
1フレームで
10ms に収めるブラウザレンダリング
JS
Style
Layout
Paint
Composite
処理がすくないほうがなめらか
margin , padding, 位置系はすべてのパイプラインを通る
transformはJS、Style, Compositeのみ
Chrome開発者ツールの
Rendering タブで見るCSSがパフォーマンスに与える影響
和田 武
パーソルキャリア株式会社 Webディレクター、フロントエンジニア
掲載状況の最適化時に問題あるときアラートがでる
11月にサイト速度レポート
今後追加
LCP
CLS
CSSはどれほど影響あるか
シンプルな定義と10000回置き換えして定義
133 => 246
パースにかかる時間が多い
リサイクルする時間はかわらない
再レイアウトを増やすと指標は下がる
過度な継承はパフォーマンスが劣化
直接的な関係性ではなく、極端に遅いと判断されなければ良い
パフォーマンスを高めるCSS
泉水 翔吾 / 1000ch
株式会社メルカリ Software Engineer
より最適な形でCSSを扱いたい
ファイル圧縮する
最小化する
cssnano
csso
未使用スタイルを削除する
uncss
DevToolsのconverage tab
CSSファイルの参照
非同期・並列のロード
結合しなくても良いかも
@import はやらない参照先をプリロード
rel="preload" 画像やフォントでプリロード
Webフォントのロードを最適化する
フォーマットをwoff2
グリフ（文字データ）が多い
woff2_comprrss myfont.ttf NotoSans-Regularは415 => 161KBに削減
フォントをサブセット化する
@font-face
表示ロジック
font-display