:focus-withinで広域のフォーカス表示が便利（最近便利なCSSおれおれAdvent Calendar 2023 – 03日目） | Ginpen.com
最近便利なCSSおれおれAdvent Calendar 2023 – 03 日目 a:focus とか便利なんですよねシリーズもうひとつです。 :focus-visible – キーボードを使ってナビゲーションしているとき（昨日） :focus-within – 自身か子孫要素にフォーカスがあるとき :hover と :focus-within を併用する 例えばカードとか。クリックできる UI 単位でなくても :hover でちょっと外観を変えたいことはまあまあありますよね。 そういう UI がボタンや入力欄といったコントロールを持つときは :focus-within も併用しておくと素敵です。マウスカーソルを外へ持って行ってもフォーカスが残ってる間は :hover と同じ見た目にしておくことができます。 デモ： https://codepen.io/ginpei/pen/eYxQvbR
タブを開きすぎても作業中のやつを一発で見つける（ひとり DevTools Advent Calendar 2020 – 14日目） | Ginpen.com
DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 DevTools は独立ウィンドウで表示することができます。外部モニターもあるのでそうやって別に出して使うことが多いんですが、複数のページを並行して開いていて「あれどのタブだっけ」みたいになることがあるかもしれません。いやないか？ あるでしょ、あるということにします。 そんなときは “Focus debuggee” を実行すると、DevTools で見ているページのタブにフォーカスが移ります。たとえ他のデスクトップ（左右にひゅんひゅん動くやつ）にあったとしても見つけてくれます。 DevTools が見ているページのタブを開く 独立ウィンドウの右上 “…” からすぐです。なお DevTools をブラウザーのウィンドウに格納している場合は出てきません。 メニューの中にある “Focus debuggee”
フォーカスを外す(blur)と消える要素をデバッグする（ひとりDevTools Advent Calendar 2020 – 07日目） | Ginpen.com
7 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 window の blur イベントや document の visibilitychange イベントなどを用いた制御をしている場合、通常のデバッグ作業の邪魔になってしまうことがあります。 DevTools を使ってこれを無効化することができます。 フォーカスが外れると消えちゃう系のUIをデバッグするには DevTools の Rendering → Emulate a focused page 使うと便利です pic.twitter.com/XCqzyRCW1J — 高梨ギンペイ (@ginpei_jp) December 7, 2020 常時フォーカス状態にする Rendering パネルに設定があります。まずはパネルを表示して、その中から探してください。 Rendering
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
