CSSイベント「Back to Basics」に行ってきました。
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone

先日、CSSイベントの「Back to Basics」に行ってきました。
会場は恵比寿ガーデンプレイスにあるDMM.com Laboさんの素敵なオフィスで開催されました。部分的ではありますが、そのレポートです。

各セッションの振り返り

ちょっと全て掲載できてないのですが、確認できたものをまとめます。

基本の前の基礎知識


直接開く場合はこちら

基礎知識の割に知らない単位やプロパティがあり、勉強になりました。
CSS Writing Modes Module Level 3の各プロパティの説明などもとても参考になりました。今度しっかり見てみよう。
※「CSS Writing Modes Module Level 3」の日本語訳はこちら。ただし、必ずしも翻訳内容が正しいとは限らないので、最終的には英文の方を参考との事。

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

Webサイトの表示に関わるUserAgentStyleSheetについて詳しく教えて頂きました。
普段はReset.cssなどでブラウザ側のCSSを無効化する事が多いのですが、Webサイトのデザインによってはブラウザ側のCSSを生かすNormalize.cssを使う可能性もあり、UserAgentStyleSheetがどのように定義されているのかを知る事も大事なんだなと思いました。
なにより久保さんの説明が分かりやすくて感動。

ご存知ですか?colorプロパティ


直接開く場合はこちら

みなさんが普段よく使っているcolorプロパティのお話でした。
ところがどっこい、colorプロパティは前景色を指定するプロパティであり、背景色以外の色を指定するプロパティにも影響があるという事に目から鱗でした。。。
currentColorプロパティを使ったメンテナブルなCSSの書き方など実用的な内容が盛りだくさんでした。

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

面白かったのは、background-imageプロパティでアニメーションを行おうとした場合、ChromeやSafariでは動くけど、IEやFirefoxでは動作しないという話。
W3Cの仕様上はbackground-imageプロパティはアニメーションしない事となっており、ブラウザ側が必ずしも仕様通りに実装していない可能性があるとの事。
ブラウザ毎に挙動に差異が出た場合はちゃんと仕様に沿っているかを確認して対応を考えるべきだと思いました。

position: fixed;チョットデキル

Android2系やiOSなどでposition=fixedを使った場合の不具合と対策が具体的にまとめられております。
これは実際問題がでた際にもう1度見たい内容間違い無しですね。
しかしながら、伊藤さんがおっしゃる通り、「position=fixedがない生活」というのが理想なのかも。まぁ、そんな訳にはいかないのが現実ですが。

LT振り返り

ここからはLTをされた方々のまとめになります。著名な方ばかりで贅沢なLTでした。

パフォーマンスを発揮するためのCSS

高速化について分かりやすく説明されています。
パフォーマンスをよくする事は重要だと再認識しました。

CodePenのクロスブラウザ機能の紹介


直接開く場合はこちら

CodePenにクロスブラウザ機能があるのは知りませんでした。
スライドの最後のアニメーションがじわじわくる感じで、この手法使えますね。

以上となりますが、やっぱりCSSは深いですね。
基本に立ち返るという事で「Back to Basics」。僕自身も基礎を学ぶ良いきっかけとなりました。

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone