2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

CSSAdvent Calendar 2021

Day 3

::-ms-clear & ::-ms-reveal & -ms-high-contrast-adjust on Edge(Chromium) of Windows

Last updated at Posted at 2021-12-02

demo

demo
code

::-ms-clear
::-ms-reveal
-ms-high-contrast-adjust
Edge(Chromium)でも動作するかの確認です。

Windows10のEdge(Chromium),Chrome,Firefox,IE11にて、
inputの入力の欄をクリックしてフォーカスをあてたり、
inputの入力の欄にhogehogeと何かの文字を入力したり、
Windowsのハイコントラストのモードを切り替えすれば、
各ブラウザの実装状況の違いや動作の違いの確認ができます。


Windowsのハイコントラストのモードを切り替えると、
Windowsのライトモードダークモードも切り替わる場合があるようです。
Windowsのハイコントラストのモードの切り替え方、および、
Windowsのライトモードダークモードの切り替え方は下部の外部リンク参照。

::-ms-clear

::-ms-clearはEdge(Chromium)では動作しないようです。
::-ms-vendor-prefixなのでMS社以外のブラウザでも動作しません。

::-ms-clearは、
<input type="text">の類で文字入力をした際、
<input type="text">の類の右端に表示される、
バツマークをスタイル付けできるようにするためのセレクタのようです。
https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-clear

備考

::-webkit-search-cancel-buttonは、
<input type="search">で文字入力をした際、
<input type="search">の右端に表示される、
バツマークをスタイル付けできるようにするためのセレクタのようです。
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-search-cancel-button

::-ms-reveal

::-ms-revealはEdge(Chromium)でも動作するようです。
::-ms-vendor-prefixなのでMS社以外のブラウザでは動作しません。

::-ms-revealは、
<input type="password">で文字入力をした際、
<input type="password">の右端に表示される、
目玉マークをスタイル付けできるようにするためのセレクタのようです。
https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-reveal

備考

-webkit-text-securityは、
<input type="text">の類で文字入力をした際、
<input type="text">の類の文字のマスクの設定に関するプロパティのようです。
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-security

input-securityは、
<input type="password">で文字入力をした際、
<input type="password">の文字のマスクの設定に関するプロパティのようです。
CSS Basic User Interface Module Level 4 Editor’s Draft に記載があります。
https://drafts.csswg.org/css-ui/#input-security

-ms-high-contrast-adjust

-ms-high-contrast-adjustもEdge(Chromium)で動作するようです。
-ms-vendor-prefixなのでMS社以外のブラウザでは動作しません。

-ms-high-contrast-adjustは、
Windowsのハイコントラストモードで設定されたCSSで、
上書きするかどうかを設定するプロパティのようです。
auto:adjustする(上書きする)
none:adjustせず(上書きせず)
https://docs.microsoft.com/en-us/openspecs/ie_standards/ms-css21e/ceff5f67-9c37-4c7b-b39c-93514df582a0

備考

forced-color-adjustは、
-ms-high-contrast-adjustと同様の効果のあるプロパティのようです。
CSS Color Adjustment Module Level 1 Editor’s Draft に記載があります。
https://drafts.csswg.org/css-color-adjust/#forced-color-adjust-prop

Reference

::-ms-clearと::-ms-revealが何のセレクタか以下が画像付きで分かりやすいです。
https://qiita.com/hiron712/items/118819a08de42c1ff592

Windowsのハイコントラストモードに関しては以下が画像付きで分かりやすいです。
https://outcloud.blogspot.com/2019/01/howto-high-contrast-mode-support.html

Change color contrast in Windows10
https://support.microsoft.com/en-us/windows/fedc744c-90ac-69df-aed5-c8a90125e696#WindowsVersion=Windows_10
https://support.microsoft.com/ja-jp/windows/fedc744c-90ac-69df-aed5-c8a90125e696#WindowsVersion=Windows_10
Change color contrast in Windows11
https://support.microsoft.com/en-us/windows/fedc744c-90ac-69df-aed5-c8a90125e696#WindowsVersion=Windows_11
https://support.microsoft.com/ja-jp/windows/fedc744c-90ac-69df-aed5-c8a90125e696#WindowsVersion=Windows_11

Change colors in Windows10
https://support.microsoft.com/en-us/windows/d26ef4d6-819a-581c-1581-493cfcc005fe#WindowsVersion=Windows_10
https://support.microsoft.com/ja-jp/windows/d26ef4d6-819a-581c-1581-493cfcc005fe#WindowsVersion=Windows_10
Change colors in Windows11
https://support.microsoft.com/en-us/windows/d26ef4d6-819a-581c-1581-493cfcc005fe#WindowsVersion=Windows_11
https://support.microsoft.com/ja-jp/windows/d26ef4d6-819a-581c-1581-493cfcc005fe#WindowsVersion=Windows_11

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?