呼び出し構文
[[include :shitake-crude-production:shushuin-hightinclude
|type=1]]
解説
きちんと理論化できていませんが、どうやらEdgeだとTarget指定(折り畳みを開く時)のフィルターの解釈が変わってしまうようです。
どうやらtarget指定により要素が動いた場合はフィルターによる色計算がリセットされるように見えます。またフィルターとtargetを組み合わせると画面描画の挙動がおかしくなります1。
そこで、Edgeの時のみ出現するサイドバー展開ボタンを設置しました(Edgeでの閲覧時本来あるサイドバー展開ボタンは消えます)。従来のサイドバー展開ボタンでは#side-barをターゲットにしますが、Edgeの場合更に親の要素#skrollr-bodyをターゲット要素にします。そして#skrollr-bodyにターゲットがかかった時、#skrollr-bodyにフィルターがかかるように設定しました。
従ってEdgeでサイドバーを展開した場合の見た目は下の図になります。インクルード構文でないといけない理由
Edge閲覧時専用のリンクボタン要素が必要である為、include構文を使わないといけません。
IE対応
そもそもIEではフィルター機能に対応していない場合があるので難しいです。諦めました
includeの引数typeについて
この引数の値を2にした時、古いバージョンが呼び出せるようにします。
やり方はインクルード元のページにもう1つコードブロックを作り、そこに古いバージョンのCSSを入れます。
また新しいバージョンと古いバージョンのCSSで共通のコードがあれば更にそれを新規のコードブロックに切り分け、インクルード元のmodule cssで必ずそのコード2をimportするようにすれば記述量が減ります。
コード
ol { list-style-type: cjk-ideographic; } div #header { background: #e0e0d5; background: url("http://scp-jp-sandbox2.wikidot.com/local--files/nanimono-demonai/shushusign-1.png") 10px 40px no-repeat; } div #header h1 { position: relative; top: 35px; width: 190px; min-height: 100px; margin-left: 0; } div #header h1 a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; font-size: 1px; } div #header h2 { display: none; } div #container-wrap { background-image: -webkit-linear-gradient(285deg, rgba(240,240,240,0.8) 0%, rgba(255,255,255,0) 2%, rgba(255,255,255,0) 90%, rgba(240,240,240,0.8) 99%), url("http://scp-jp-sandbox2.wdfiles.com/local--files/wanazawawww/paper.jpg"); background-image: -moz-linear-gradient(285deg, rgba(240,240,240,0.8) 0%, rgba(255,255,255,0) 2%, rgba(255,255,255,0) 90%, rgba(240,240,240,0.8) 99%), url("http://scp-jp-sandbox2.wdfiles.com/local--files/wanazawawww/paper.jpg"); background-image: -o-linear-gradient(285deg, rgba(240,240,240,0.8) 0%, rgba(255,255,255,0) 2%, rgba(255,255,255,0) 90%, rgba(240,240,240,0.8) 99%), url("http://scp-jp-sandbox2.wdfiles.com/local--files/wanazawawww/paper.jpg"); background-image: -ms-linear-gradient(285deg, rgba(240,240,240,0.8) 0%, rgba(255,255,255,0) 2%, rgba(255,255,255,0) 90%, rgba(240,240,240,0.8) 99%), url("http://scp-jp-sandbox2.wdfiles.com/local--files/wanazawawww/paper.jpg"); background-image: linear-gradient(165deg, rgba(240,240,240,0.8) 0%, rgba(255,255,255,0) 2%, rgba(255,255,255,0) 90%, rgba(240,240,240,0.8) 99%), url("http://scp-jp-sandbox2.wdfiles.com/local--files/wanazawawww/paper.jpg"); background-repeat: no-repeat, repeat; background-size: 100% 100%, 350px 350px; } div #main-content { max-width: 100%; margin: 0; } div #main-content .page-tags, div #main-content #page-info-break, div #main-content #page-options-container, div #main-content #action-area { max-width: 980px; margin: 0 auto 1em; } div #page-content { max-width: 980px; margin: 0 auto 1em; background-color: #fff; box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff, 0 0 0 6px #000; } #u-openmunu-original{ display:none; } #content-wrap { max-width: 100%; padding: 0 13px; } #side-bar { padding-top: 100px; background-image: url("http://scp-jp-sandbox2.wdfiles.com/local--files/nanimono-demonai/stamp.png"); background-repeat: no-repeat; background-position-x: 25px; background-position-y: 0; background-size: 75px 90px; -webkit-filter: sepia(100%); -moz-filter: sepia(100%); -o-filter: sepia(100%); -ms-filter: sepia(100%); filter: sepia(100%); } #side-bar .side-block { border-radius: 0; box-shadow: none; } #top-bar a { background: transparent; color: #486a8a; } #page-title { display: none; } h4 { margin: 0 0 0.6em; padding: 0.5em 0 0.75em; border-bottom: 1px solid #bbb; color: #486a8a; font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "MS P明朝", "MS PMincho", "MS 明朝", serif; font-size: 200%; font-weight: normal; text-align: center; -webkit-font-feature-settings: "trad"; -moz-font-feature-settings: "trad"; font-feature-settings: "trad"; font-variant-east-asian: traditional; unicode-bidi: bidi-override; } h4 > span { display: block; margin: 0 -0.5em; } h4 > span span { display: inline-block; position: relative; } h4 > span span:before, h4 > span span:after { display: block; position: absolute; } h4 > span span:first-of-type { margin-bottom: 0.25em; padding: 0 1em; } h4 > span span:first-of-type:before { top: 0; left: 0; content: "「"; } h4 > span span:first-of-type:after { right: 0; bottom: 0; content: "」"; } h4 > span span[style="font-size:60%;"] { padding: 0 0.5em; text-indent: 0.25em; letter-spacing: 0.25em; } h4 > span span[style="font-size:60%;"]:before { top: 0; left: 0; content: "("; } h4 > span span[style="font-size:60%;"]:after { right: 0; bottom: 0; content: ")"; } .page-rate-widget-box { box-shadow: 1px 1px 3px rgba(0,0,0,0.5); } .page-rate-widget-box .rate-points { border: solid 1px #486a8a; background-color: #486a8a !important; } .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown { border-top: solid 1px #486a8a; border-bottom: solid 1px #486a8a; } .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a { color: #486a8a; } .page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover { background: #486a8a; } .page-rate-widget-box .cancel { border: solid 1px #486a8a; background-color: #486a8a; } .page-rate-widget-box .cancel a { color: #3c89b2; } .page-rate-widget-box .cancel a:hover { border-radius: 0 3px 3px 0; background: #486a8a; color: #fffff0; } .heritage-rating-module { box-shadow: 0 1px 3px rgba(0,0,0,0.25); } blockquote { border: 1px solid #c8c8c8; background: -webkit-linear-gradient(285deg, #f0f0f0 0%, #fff 2%, #fff 8%, rgba(255,255,255,0.69) 18%, rgba(255,255,255,0.19) 34%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.06) 51%, rgba(255,255,255,0.14) 66%, rgba(255,255,255,0.27) 93%, #f0f0f0 99%), url("http://scp-jp-sandbox2.wdfiles.com/local--files/wanazawawww/clearPaper.png"); background: -moz-linear-gradient(285deg, #f0f0f0 0%, #fff 2%, #fff 8%, rgba(255,255,255,0.69) 18%, rgba(255,255,255,0.19) 34%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.06) 51%, rgba(255,255,255,0.14) 66%, rgba(255,255,255,0.27) 93%, #f0f0f0 99%), url("http://scp-jp-sandbox2.wdfiles.com/local--files/wanazawawww/clearPaper.png"); background: -o-linear-gradient(285deg, #f0f0f0 0%, #fff 2%, #fff 8%, rgba(255,255,255,0.69) 18%, rgba(255,255,255,0.19) 34%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.06) 51%, rgba(255,255,255,0.14) 66%, rgba(255,255,255,0.27) 93%, #f0f0f0 99%), url("http://scp-jp-sandbox2.wdfiles.com/local--files/wanazawawww/clearPaper.png"); background: -ms-linear-gradient(285deg, #f0f0f0 0%, #fff 2%, #fff 8%, rgba(255,255,255,0.69) 18%, rgba(255,255,255,0.19) 34%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.06) 51%, rgba(255,255,255,0.14) 66%, rgba(255,255,255,0.27) 93%, #f0f0f0 99%), url("http://scp-jp-sandbox2.wdfiles.com/local--files/wanazawawww/clearPaper.png"); background: linear-gradient(165deg, #f0f0f0 0%, #fff 2%, #fff 8%, rgba(255,255,255,0.69) 18%, rgba(255,255,255,0.19) 34%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.06) 51%, rgba(255,255,255,0.14) 66%, rgba(255,255,255,0.27) 93%, #f0f0f0 99%), url("http://scp-jp-sandbox2.wdfiles.com/local--files/wanazawawww/clearPaper.png"); box-shadow: 0.25em 0.25em rgba(240,240,240,0.8); } @media (max-width: 1550px) { .mobile-top-bar { display: block; } .page-history tbody tr td:last-child { width: 35%; } .owindow { min-width: 80%; max-width: 99%; } .owindow .button-bar { float: right; } .owindow div .btn-primary { float: left; width: 100%; } .owindow div .btn-primary ~ div { width: 100%; } .modal-body .table, .modal-body .table ~ div { float: left; } .yui-navset { z-index: 1; } #navi-bar, #navi-bar-shadow { display: none; } .open-menu a { position: fixed; z-index: 15; bottom: 0.5em; left: 0.5em; width: 30px; height: 30px; border: 0.2em solid #888 !important; border-radius: 3em; background-color: #fff !important; color: #888 !important; font-family: "Nanum Gothic", san-serif; font-size: 30px; font-weight: 700; text-align: center; line-height: 0.9em; } .open-menu a:hover { box-shadow: 0px 0px 20px 3px #999; text-decoration: none !important; } #page-content { max-width: 90%; margin: 0 5%; padding: 1em; transition: 0.5s ease-in-out 0.1s; } #side-bar { display: block; overflow-y: auto; position: fixed; z-index: 100; top: 0; left: -25em; width: 17em; height: 100%; padding: 1em 1em 0 1em; background-color: #b88686; transition: left 0.5s ease-in-out 0.1s; } /*ブラウザハック*/ @media all and (-ms-high-contrast:none) { .open-menu{ display:none; } #u-openmunu-original { display:block; position: fixed; bottom: 0.5em; left: 0.5em; z-index: 15; font-family: 'Nanum Gothic', san-serif; font-size: 30px; font-weight: 700; width: 30px; height: 30px; line-height: 0.9em; text-align: center; border: 0.2em solid #888 !important; background-color: #fff !important; border-radius: 3em; color: #888 !important; } } _:-ms-lang(x), .open-menu{ display:none; } _:-ms-lang(x), #u-openmunu-original { display:block; position: fixed; bottom: 0.5em; left: 0.5em; z-index: 15; font-family: 'Nanum Gothic', san-serif; font-size: 30px; font-weight: 700; width: 30px; height: 30px; line-height: 0.9em; text-align: center; border: 0.2em solid #888 !important; background-color: #fff !important; border-radius: 3em; color: #888 !important; } _:-ms-lang(x), #side-bar{ background-color: #b88686; -webkit-filter: sepia(100%) !important; -moz-filter: sepia(100%) !important; -o-filter: sepia(100%) !important; -ms-filter: sepia(100%) !important; filter: sepia(100%) !important; } #side-bar:after { position: absolute; top: 0; width: 0; height: 100%; background-color: rgba(0,0,0,0.2); content: ""; } /*MS-ブラウザ以外のブラウザ*/ #side-bar:target + #main-content #page-content { left: 0; } #side-bar:target .close-menu { display: block; position: fixed; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3) 1px 1px repeat; } #side-bar:target{ z-index: 10; left: 0; width: 17em; margin: 0; border: 1px solid #dedede; } /*MS-ブラウザ*/ #skrollr-body:target #side-bar + #main-content #page-content { left: 0; } #skrollr-body:target .close-menu { z-index:50; display: block; position: fixed; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9) 1px 1px repeat; } #skrollr-body:target #side-bar{ z-index:100; left: 0; width: 17em; margin: 0; border: 1px solid #dedede; } #skrollr-body:target{ -webkit-filter: sepia(100%); -moz-filter: sepia(100%); -o-filter: sepia(100%); -ms-filter: sepia(100%); filter: sepia(100%); } #skrollr-body:target #u-openmunu-original{ display:none; } #u-openmunu-original:hover { text-decoration: none !important; -webkit-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1); -moz-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1); -ms-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1); -o-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1); box-shadow: 0px 0px 20px 3px rgba(153,153,153,1); } } #login-status { color: #486a8a; } #login-status a { color: inherit; } #search-top-box-input { border: solid 1px #999; border-radius: 5px; background-color: #fff; box-shadow: none; color: #000; } #search-top-box-input:hover, #search-top-box-input:focus { border: solid 1px #000; background-color: #fff; box-shadow: none; color: #000; } #search-top-box-form input[type=submit] { padding: 2px 5px; border: solid 1px #999; border-radius: 5px; background: none; background-color: #fff; box-shadow: none; color: #ccc; font-size: 90%; font-weight: bold; cursor: pointer; } #search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus { border: solid 1px #000; background: none; background-color: #fff; box-shadow: none; text-shadow: none; color: #000; } .imageFrame { box-sizing: border-box; list-style-type: none; position: relative; float: left; width: 300px; margin: 1em 1em 1em 0.5em; padding: 0.5em 0.5em 1px; border: 1px solid #c8c8c8; background: -webkit-linear-gradient(285deg, #f0f0f0 0%, #fff 2%, #fff 8%, rgba(255,255,255,0.69) 18%, rgba(255,255,255,0.19) 34%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.06) 51%, rgba(255,255,255,0.14) 66%, rgba(255,255,255,0.27) 93%, #f0f0f0 99%), url("http://scp-jp-sandbox2.wdfiles.com/local--files/wanazawawww/clearPaper.png"); background: -moz-linear-gradient(285deg, #f0f0f0 0%, #fff 2%, #fff 8%, rgba(255,255,255,0.69) 18%, rgba(255,255,255,0.19) 34%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.06) 51%, rgba(255,255,255,0.14) 66%, rgba(255,255,255,0.27) 93%, #f0f0f0 99%), url("http://scp-jp-sandbox2.wdfiles.com/local--files/wanazawawww/clearPaper.png"); background: -o-linear-gradient(285deg, #f0f0f0 0%, #fff 2%, #fff 8%, rgba(255,255,255,0.69) 18%, rgba(255,255,255,0.19) 34%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.06) 51%, rgba(255,255,255,0.14) 66%, rgba(255,255,255,0.27) 93%, #f0f0f0 99%), url("http://scp-jp-sandbox2.wdfiles.com/local--files/wanazawawww/clearPaper.png"); background: -ms-linear-gradient(285deg, #f0f0f0 0%, #fff 2%, #fff 8%, rgba(255,255,255,0.69) 18%, rgba(255,255,255,0.19) 34%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.06) 51%, rgba(255,255,255,0.14) 66%, rgba(255,255,255,0.27) 93%, #f0f0f0 99%), url("http://scp-jp-sandbox2.wdfiles.com/local--files/wanazawawww/clearPaper.png"); background: linear-gradient(165deg, #f0f0f0 0%, #fff 2%, #fff 8%, rgba(255,255,255,0.69) 18%, rgba(255,255,255,0.19) 34%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.06) 51%, rgba(255,255,255,0.14) 66%, rgba(255,255,255,0.27) 93%, #f0f0f0 99%), url("http://scp-jp-sandbox2.wdfiles.com/local--files/wanazawawww/clearPaper.png"); box-shadow: 0.25em 0.25em rgba(240,240,240,0.8); } .imageFrame.right { float: right; margin: 1em 0.5em 1em 1em; } .imageFrame.center { float: none; clear: both; margin: 1em auto; } .imageFrame:before { position: absolute; background-repeat: no-repeat; content: ""; } .imageFrame p { margin: 0 0 0.6em; text-align: center; line-height: 0.7; } .imageFrame hr { width: 80%; margin: 0 auto 0.3em; } .palette__color { width: 100%; height: 130px; margin-bottom: 0.5em; border: 1px solid rgba(0,0,0,0.2); border-radius: 2px; }