主に技術的なことを書くブログ

浅めにマークアップ&フロントエンドの技術的なことをメモしていましたが、ざっくばらんに書いています。

Sass / SCSS

:focus-within は Edge に対応していないからといって甘くみてるとぶっこわれた話

:focus-within 疑似クラスは、フォーカスを持っているか、フォーカスを持った要素を含む要素にスタイルがあてられる。 <div class="button"> <input type="submit"> // ↑ focus はこっちにしか移動できないけど。親.button にフォーカスがあたったようなスタイルがつけられる </div> 例えば、 <li> <button>ボタン</button> <button>ボタン</button> <button></button></li>…

gulp-sass で indentedSyntax: true, でハマった話

gulp-sass でコンパイルすると、 invalid property name がひたすらでて全然コンパイルできないし、scssファイル見てもなんの問題もない。 挙句の果てに { とかがエラーとかいうから、なんでやねん、と思っていたら。 gulp タスクの sass option のところで…

あのIE9以下でセレクタが4095以上あると読み込まれないやつ

噂では効いていたけど、まさか自分があの「IE 9以下に存在するセレクター数制限にはまった」みたいなことになるとは思いもしませんでした。 普通にハマりました。 いろいろ検証しても見つからずに、そういわれるとこのcssめっちゃ長いな、と思って。t32k/sty…

GruntでCompassが動かないときにやってみること

GruntでCompassを使おうとしたら、下記のようなエラーが出てコンパイルが上手くいかない、ということをチラホラ聞きます。 Running “compass:dist” (compass) task error htdocs/_dev/assets/_scss/main.scss (Line 6 of htdocs/_dev/assets/_scss/_layout.s…

リアルフロントエンド勉強会 vol.2

前回に続いて、第2回リアルフロントエンド勉強会を行いました。 第1部「攻めすぎコーディング環境をつくろう」 第2部「発表プレゼン」 懇親鍋 という流れで行いました。集まった参加者は4人。 第1部「攻めすぎコーディング環境をつくろう」 workshop/2014111…