Re:Start

いまはディレクターやってます

CSS イベント「Back to Basics」に参加してました

CSS Frontend

peatix.com

なんで行ったかというと、CSSをなんとなーく書いていて、これを書けばこの事象は防げるぜ！っていう魔法の言葉はいくつか習得してきたものの、果たしてそれでいいのか?! という気持にきちんと向き合いたかったからです。

基本の前の基礎知識

CSSの仕様を読もう！っていうのが全体を通して感じたこと。最初のセッションでは、その仕様の記載方法と読み方について語っているようでした（ちょっと遅れちゃいました！）

unformedbuilding.com

仕様の読み方

  • 並置: 順序を守らなきゃいけない
  • && ダブルアンバサンド
  • || ダブルバー
  • | 2つ以上の構成要素の区切りで、それらの1つを記述
  • 優先度　並置 > && > || > |

などなどあるので、例えば、

<shadow> = inset? && <length>{2,4} && <color>?
  • inset と color は自由
  • lengthは2~4つ書く必要がある

ということ。これを踏まえると、よく見かける誰かのCSSではなくて、自分オリジンできちんと組めるようになりますよね！ミラクル！

CSS width property

  • initial 初期値
  • inherit 親からそのプロパティーの産出地を敬称
  • unset 継承されているかに応じて、initialまたはinherit (まだブラウザ対応少ないので、現場ではあまり使わないほうが)

以下、参考になったこと抜粋

  • @import は、引用符ありでもOK、＜string＞のみでの指定も可能 (ブラウザによっては、バグることもあるので、つけておいたほうがいい)
    ＜percentage＞型：何を基準にするか指定できる
    ＜length＞型 : 0のときは、単位省略可能
  • em : この単位が使用される要素の font-size プロパティーの産出地
  • ex : 利用可能な最初のフォントのxの高さ (x-height)
  • rem：常にルート要素を基準とするので使いやすい ( でも、ブラウザによっては対応していないらしく最近怒られた☆ )
  • Viewportに対する割合の長さの単位：vw (初期包含ロックの幅の1%), vh (初期包含ブロックの高さの1%) ⇒ width: 100vw; にすると、スクロールバーの幅が変わる?!
  • 物理単位NG、視野角単位はpxのみ⇒ 基本的に px で書いておけば問題ない
  • ＜abgle＞型：deg 度数法、grad グラ事案(あまり使わない)、rad JSだと使うかも（円の全周は2rad）、turn（円の全周は1turn）
  • ＜time＞型：s秒、msはミリ秒、0でも、単位の省略は不可
  • ＜frequency＞型：これをサポートしているブラウザーは存在しない（なにっ!!）

UAスタイルシートとリセットCSS

UAとCSSの話

User Agent Style Sheets：ブラウザの標準設定
Cascading Style Sheets：CSSのこと

  • UAで指定されている上下の間隔は、基本的にはmarginで設定されている
  • ul,li,form系はpaddingで指定されていることが多い
    → 基本的にmarginをゼロにしてあげればいいということ

reset.cssかnormalise.cssか？

CSS Tools: Reset CSS
https://necolas.github.io/normalize.css/3.0.2/normalize.css

  • normalise.cssは、UAを活かしつつ、resetするという考え。
  • h1を変更すれば、h2以降はその継承だから、事足りるらしい！
  • ResetCSSとNormalize.cssの折衷版もいくつか出ている。
    sanitize.css
  • 間隔を詰める、プロパティを初期化したほうが構築しやすいなら ResetCSS
  • いろんなレベルの人でやる場合は、学習コストの低い resetCSSを選ぼう!!
  • UAスタイルシートは、HTMLの変化が出やすい
  • 重複して読んでなければいいと思うので、どちらかを使ってください

coliss.com

image

currentColorを使えば、色をまとめて指定することもできる。
同じ色をそのモジュール内の複数の箇所で使用する場合、currentColorを使うことで色の管理が楽になることも！

css-tricks.com

currentColorの振る舞いを知っていれば、冗長にならず、メンテナンスしやすいコードを書くことができる!!
IE9以上で使える・・・(ならムリだ―という声もチラホラ)

CSS Color Module Level 4

仕様書を読むのは楽しいので、普段なにげなく使っているプロパティの仕様を見たことがなければ、ぜひ調べてみてください

はい！

LT

パフォーマンス問題

読み込み速度 + 実行速度 = パフォーマンス

  • Gruntで自動化しようぜ！
  • 描画不可の軽減、CPUの利用 -> CSSでやろうぜ！！
  • レンダリングの流れ的に、要素の変更が多いと、レイアウト&ペイントも増えちゃって、多ければ多いほど重くなる
  • レイアウトに影響をおよぼすプロパティがあると、レイアウトしなおし!!
  • ペイントに影響をおよぼすのは、色系・・・

パフォーマンスを高くするならコレ！
opacity
transform (translate, scale, rotate)
⇒ GPUが利用されるため高速になる

  • ローディングなど使い終わった要素をdisplay:none;
  • クリティカルCSSもおすすめ
  • 時代や状況によって、求められるパフォーマンスは千差万別
  • 実装優先！だが、必要に応じて明確なパフォーマンス目標を設定する
  • 対象機種(特にモバイル)　ツールで計測しながら最適化すること。
  • 感覚ではなく、ここは◯秒だから◯秒にしよう、というのが大事
  • 「その情報/機能はユーザーにとって、本当に必要？」というのは常に考える事

参考

blog.yuhiisk.com

background-(image|size) の深みへようこそ

それぞれ個別にbackgroundの要素を指定すると、思った動作が得られないことがあるという話（だと思う）困ったときは仕様を読んで、解決しようぜ！てきなやつ。

background-image

  • background-imageは、5つ指定できる?!
  • 先に指定したものが上に、後に指定したものは後ろに
  • background-sizeにcontainやcoverも入れられる

position:fixed;チョットデキル

  • fixed値を指定すると、デフォルトがインラインレベルの要素でも高さをもつことができる！
  • display:tableな要素は、fixedしても、blockになっちゃうから変わってくる
  • fixedされた要素はページに分断されて印刷されることはない
  • android 2.x はfixed難しい
  • fixedしたものに、transformできないのか？
    ⇒ fixedした要素の中の要素でtransformできるよ！

仕様と対応状況を理解すれば解決策を導くのも難しいことではない

  • calc()はIE9以上で利用可能
    background-positonに使うとブラウザがクラッシュ☆ 現在の最新版であれば、デスクトップブラウザは全てOK
  • IE8、Android
    ⇒要素内でスクロールする前提のデザインをしてもらう
  • デザインでできない場合は、
    モーダルな要素は、absoluteにしちゃう
    モーダル表出時にtop値を取ってきて、使ってみる

おすすめは、fixedのない生活です!!!

まとめ

CSSの基本は仕様の理解から！
ブログを見て、できた〜と満足するのではなく、仕様をちゃんと読むこと！！

togetter.com blog.kubosho.com