CSS 【実務・中級編】 blank疑似クラス – CSS実践ガイド
おい、最近の仕様の進み具合は追ってるか？フロントエンドの荒波にもまれながら「もっとスマートにフォームのバリデーションやUI制御ができないもんか」と頭を悩ませている中級の君なら、きっと今日のテーマにグッとくるはずだ。今日は、現在進行形でブラウ...
CSS
CSS CSS 【実務・中級編】 default疑似クラス – CSS実践ガイド
おい、ちょっといいか。最近のコードレビューをしていて、また見つけたんだよ。ラジオボタンやセレクトボックスの初期値（デフォルト選択）に対して、わざわざJavaScriptで初期判定させたり、HTMLにべた書きしたクラス名を夜な夜なCSSで拾い...
CSS 【実務・中級編】 indeterminate疑似クラス – CSS実践ガイド
フロントエンドの荒波にもまれながら、日々CSSと格闘している中級エンジニアの皆さん、お疲れ様です。チーフアーキテクトの私だ。今回は、CSSの数ある疑似クラスの中でも、実務で意外と見落とされがちでありながら、「おっ、こいつ分かってるな」とレビ...
CSS 【実務・中級編】 has関係疑似クラス – CSS実践ガイド
CSSの歴史において、長年の悲願であった「親セレクタ」がついに実装され、私たちのワークフローに革命が起きてからしばらく経ちます。そう、` :has()` 疑似クラスのことです。「あ、これ親要素をスタイルしたいのに、CSSだけじゃ無理だからJ...
CSS 【実務・中級編】 where関数型疑似クラス – CSS実践ガイド
おい、最近CSSの詳細度（Specificity）の計算で無駄に頭を悩ませてないか？ 「なんか知らんけど、このユーティリティクラスが上書きできねぇ……！」って夜中に頭を抱えて、仕方なく苦し紛れに `!important` をブッ挿した経験、...
CSS 【実務・中級編】 is関数型疑似クラス – CSS実践ガイド
おい、調子はどうだい？最近、後輩のコードレビューをしていて「おっ、やるじゃん」と感心させられることが増えたんだが、同時に「あー、まだ古いCSSの書き方に囚われてるな」ってもどかしく思う瞬間も多いんだよね。特に、コンポーネントが複雑化してくる...
CSS 【実務・中級編】 not関数型疑似クラス – CSS実践ガイド
やあ。今日も今日とてCSSの海を泳ぎ回っているかい？デザインカンプを忠実に再現するだけなら初級者でもできる。だが、保守性が高く、将来の仕様変更にもビクともしない堅牢なスタイルシートを組み上げるとなると話は別だ。特に「例外処理」の書き方一つで...
CSS 【実務・中級編】 link疑似クラス – CSS実践ガイド
お疲れ。今日も今日とて、デザインカンプの微修正や「なんかこのリンク、色が勝手に変わるんだけど！」という若手からのチャット対応に追われていないか？フロントエンド開発の現場にいると、CSSの基礎なんてわかってるつもりになりがちだ。だがな、「 `...
CSS 【実務・中級編】 visited疑似クラス – CSS実践ガイド
お疲れ。最近、デザインカンプ通りに組んだはずなのに「リンクの色が変わらない」「なんか挙動が怪しい」って頭を抱えていないか？中級の壁をスルッと抜けてシニアに近づくエンジニアがつまずきがちなポイント、それが今回取り上げる `:visited` ...
CSS 【実務・中級編】 target疑似クラス – CSS実践ガイド
お疲れ。今日のコードレビュー、なかなかいい線いってたけど、セレクタ周りで一つ気になるところがあったんだよね。JavaScriptで無駄にイベントリスナーをバリバリ貼り付けてDOMを操作しようとしてる箇所、見た瞬間に「あ、これCSSだけでいけ...