画面のバランス大事

日没後でDark Modeになった画面しかひさしく見てなかったんだけど、Light Modeの画面はまたホント美しいな。もう、フォントからレイアウトからバランス良過ぎるだろうこれ。いや、フォントが美しいのは4Kだからか。でもレイアウトというかバランス大事。会社で使うWindowsはこれほどになることがあるんだろうか…

カラーユニバーサルデザインの確認

便利なサイトがあったので確認してみた。

Colorblind Web Page Filter

URLと型(Protanopia(1型)/Deuteranopia(2型)/Tritanopia(3型)/Achromatopsia を指定すると、どう見えるか表示してくれる。恐れてたほどには悪くなかった。

Dark modeは、Light設定をCSS 側でコメントアウトしたりして確認。

サイトをダークモード対応その後

まだokota.cssをチマチマいじってたり。

• ライトモードの色味をオリジナルのpain.cssに近いものに戻した。
• ついでにデザインもよりpain.css近くに戻した。
• formのボタンのデザインが気に入らないんだけど、大きく手直ししたくないなあ。

あとカテゴリが間違ってたね。あまりに久しぶりすぎて。

iOS 12のSafariが変数読んでくれない

うちにはiPadOS 13はあってもiOS 13がない。iPadでは変数指定した色で表示されるが、iPhoneでは色抜けする。OSのせいなのか、iPhoneのせいなのか判別不能。個人iPhoneは5sなのでiOS 13にできないし、会社iPhoneはバージョンアップを止められていて、確認できない。

Egdeも変数を読んでくれない模様。デフォ値にフォールバックさせる方法を考えよう。

追記

違った。iOS12 SafariとEdgeがprefers-color-schemeを解さないだけだった。どちらもCSS変数は理解してた。てなことでlight modeの記述をprefers-color-schemeから外してデフォとして扱い、dark modeでのみ使うように変更した。

そのうちEdgeはChromeになることだし放っといてもダークモードに対応するだろう。iPhone 5sともそろそろお別れせんと。

サイトをダークモード対応

いつの間にかCSSで変数が使えるようになってた。prefers-color-scheme使って、lightとdarkそれぞれで要素ごとの色を変数で決めといて、要素側でその変数を参照させるだけ。

不満は山ほどあるけど、とりあえず老眼には優しくなった。

しかし、tDiary、Safariのリーダーに対応してない…