リンクカードの編集ツール「LinkCard Editor ⭐」（53）/ JavaScript

Edgeでのパネルデザイン崩れを修復しました

最近は「Edge」の更新に苦しめられます。スクロールバーのデザインはだれも気が付く所ですが、これは現代的な要請もあり仕方がないでしょう。また、「画像検索(ビジュアル検索)」でサイドのサブウインドウを表示する等、新しい試みを世に問うのは良い事でしょうが、各種のデフォルトパーツを弄るのは良くない。中身はChromeなのに「Chromeと違う」と見せたい姑息な考えとしか思えない。

最近、ツール類のメンテで気付いたのですが、「input要素」の基本デザインが、ネイティブの「Chromium」から変えられた様です。

<input type="number"> のデフォルトデザイン

下は、「input type="number"」の Chromeのデザインです。

これは、数値を入力する時に使われ、他に「テキスト」の入力枠として使われるタイプもあります。ブログ編集画面でも、こういった「input要素」は必須パーツで、大変に多く使われています。それらは、デフォルトのデザインのままではなく、ページのデザインに親和させる色々な工夫をして実装されています。

「LinkCard Editor ⭐」での Edgeの変更の影響

下は「Chrome」の「input要素」を使った部分の様子です。

下が「Edge」の新しい「input要素」に置き換えられた状態です。

スピナーの幅を狭く変えられていますが、なにが嬉しくてこんな事をするのか。使い難くなるだけで、ちっとも必要が無い変更だと思いますが。他の要素も変えられていなければ良いが。

パネルメニューの上段は、「input」に入力した数値で色の濃さを調整するので、数値は見えない方が良くて隠しています。また、下段は設定を単位付きで表示するために、やはり実際の入力値を隠しています。

「input要素」の入力枠をスピナーだけの幅にして数値を隠しているのですが、Edgeがスピナー幅を変えたので、上の様なみっともない表示になったのです。

修復はけっこう複雑

下は、今回の修復用のCSSです。これを、Edgeの場合に追加適用しています。

#lc_trance {
    width: 9px;
    margin: 0 3px 0 3px;
    color: transparent;
    transform: scale(1.6, 1);
    box-shadow: none; }

#lborder {
    width: 9px;
    margin: 0 4px 0 2px;
    color: transparent;
    transform: scale(1.6, 1);
    box-shadow: none; }

##lbr_disp {
    margin: 0 2px 0 -4px; } 

#lbr {
    width: 9px;
    margin: 0 21px 0 0;
    color: transparent;
    transform: scale(1.6, 1);
    box-shadow: none; }

「transform: scale(1.6, 1)」で幅を 1.6倍にして、配置を調整しています。