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

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

60hz のモニタと 144hz のモニタを デュアルモニタで使うと 60hz になる問題の解決方法

まず、144hz のモニタは、体外そのまま使用すると 144hz出ていないので、Windowsの設定をいじる必要があります。設定方法はこちら

121ware.com

で、これをやった上で、

hiroshi-gamepc.com

以上の記事のとおり、自分も同じ現象になって、いろいろ試して全部だめで絶望してたんですけど、ゲーム的にはあきらかにヌルヌルになってて、これ60FPS以上出てるよなー?とか思ってたんですけど、実はこれ、元記事でFPSを計測している以下のサイト:

testufo.com

この計測サイトを表示している Chrome の方の問題で、Chromeの設定 > 詳細設定 > 「ハードウェア アクセラレーションが使用可能な場合は使用する」の項目がOFFになっていたのが原因でした(自分の場合は)。

f:id:nakagaw:20190226150120p:plain

ここが OFF だったのを ON にしたらちゃんと高い FPS が出ました。

以前、配信ソフトで Chrome のウィンドウを表示するときに、なぜか画面が映らないという不具合みたいなのがあって、それを回避するためにOFFにしていたのですが、ここがOFFになっていると、ブラウザのリフレッシュレートが正確に計測できないようです。

まぁ、この検証サイトで 144hzならない!と絶望している人向けのお知らせです。

参考:https://www.youtube.com/watch?v=UyD_U2PrkLE

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

:focus-within 疑似クラスは、フォーカスを持っているか、フォーカスを持った要素を含む要素にスタイルがあてられる。

 <div class="button">
   <input type="submit"> 
   // ↑ focus はこっちにしか移動できないけど。親.button にフォーカスがあたったようなスタイルがつけられる
 </div>

例えば、

 <li>
  <button>ボタン</button>
  <button>ボタン</button>
  <button>ボタン</button>
 </li>
// ↑ li:hover トリガーで出てくるボタンメニューとか

この場合キーボード操作のみでは、ボタンメニューにたどり着けないが、:focus-within を使うと楽にできるのでいいけど、Edge と IE11 はサポートされていない、ブラウザを限定して、ちょっとでも使えるようにとか。JSとかでフォーカスコントロールするまでのつなぎとかでさくっといれとくにはだいぶ楽なので、いれておいたら痛い目にあった。

&:hover,
&:focus-within {

}

みたい、複数セレクタで :focus-within 書いてたとこの :hoverスタイルが Edge で軒並み動かなくなった

細かいことまでおってないが、たぶんEdgeさん的にはそんなセレクタないし、ということで、そのスコープまるごとスキップされているような感じ。

この場合、 :focus-within を諦めるか、:hover と :focus-within わけることで解決できる。

&:hove {

}

&:focus-within {

}

が、minify かなんかで複数セレクタをまとめたりするんじゃないかとか思ったりするけど、なんかとりあえずはあれしてあれしている。

参考:https://developer.mozilla.org/ja/docs/Web/CSS/:focus-within

衝撃!Mac の Firefox で Tabキー移動したいときはシステム設定いじる必要がある

最近、諸事情から Firefox に乗り換えたんですけど、Tabキーでフォーカス移動したいところにぜんぜんいけなくて、どうやらボタンとかフォームは移動できるんやけど、アンカーリンクに移動できない。あれ、バグってる?と思って、いろいろ調べていたら、

stackoverflow.com

なんと、Mac システム設定環境設定 > キーボード > ショートカットタブ の中の

f:id:nakagaw:20181004221226p:plain

下のラジオボタンの二項目のうち、「テキストボックスとリストのみ」になっていると、リンクとかにタブキーで移動できないので、「すべてのコントロール」を選択しましょう。

これ「テキストボックスとリストのみ」に設定した記憶ないからたぶん、デフォルトよね?なんかメリットあるんだろうか・・