血統の森: Home > web実験小屋 > CSS3ウェブブラウザ実装メモ > -ms-scroll-x-color

-ms-scroll-x-color

作成:
更新:

IE 5.5から独自実装されたスクロールバーの色を変えるスタイルシートだが、IE8 beta2でCSS 2.1の仕様通り接頭辞が付くようになった。接頭辞をつけた動作確認を試みた。(Edge 16.16299では動作しないことを確認)

なお、2017年11月に、CSS Scrollbars Module Level 1のEditor's Draftが公開された。今後、標準化作業が進んでいくものと思われる。

rendering

独自実装を使用したレンダリング(要IE)

-ms-scrollbar-3dlight-color: red;

-ms-scrollbar-darkshadow-color: red;

-ms-scrollbar-face-color: red;

-ms-scrollbar-highlight-color: red;

-ms-scrollbar-arrow-color: red;

-ms-scrollbar-shadow-color: red;

-ms-scrollbar-base-color: red;

-ms-scrollbar-track-color: red;

IE8 beta1以前では当然ながら動作しないし、現時点でのOpera10alphaでも動作しない(もともとバグのある実装だが)。しかし、W3Cの仕様通りに書けるという意味では、心おきなく使えるようになったのかもしれない。

なお、SafariのCSSリファレンスに接頭辞のないプロパティが見えるが、サポートされないことが明記されている。

coding

<style type="text/css">
p.inlinebox {
	 width: 300px;
	 height: 200px;
	 border: solid 1px black;
}

div.box {
	 overflow: auto;
	 width: 200px;
	 height: 100px;
	 margin: 20px;
	 float: left;
}

div.dlight {-ms-scrollbar-3dlight-color: red;}
...
</style>
...
<div class="box dlight">
<p class="inlinebox">
-ms-scrollbar-3dlight-color: red;
</p>
</div>
...

検証に使用したブラウザー

Internet Explorer
バージョン 8.0.7000.0(Windows 7 beta bandle,beta)
バージョン 11.15.16299.0(Windows 10 Fall Creators Update)
Opera (Presto)
Version 10.00 alpha Build 1229(weekly build)

リファレンス

CSS Scrollbars Module Level 1 Editor’s Draft
https://drafts.csswg.org/css-scrollbars-1/
IEBlog : Microsoft CSS Vendor Extensions
http://blogs.msdn.com/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx
Additional Unsupported Properties - Safari CSS Reference: Supported CSS Properties
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-UnsupportedPropertiesSpecifictoOtherBrowsers