Wikipedia:井戸端/subj/特定の状況下でレイアウトに支障が生じる問題の対策のお願い

井戸端のタグ：メインページ | JavaScript | CSS | バグ [編集]

特定の状況下でレイアウトに支障が生じる問題の対策のお願い

先日メインページのデザイン改訂に向けたデザイン案を作成している中、次のような問題を発見いたしました。

→「User:cllackr/メインページのデザイン案_(2012)#狭幅・レガシーブラウザにおける制約」を参照

これの対策として、もしJavascriptによる対策を行なっていただければ幸い、ということでこちらにお願いさせていただきます。

考えている解決策としては、まず次のようなテンプレート (トリガーとなる要素を展開するもの) を作成します。

{{Fix Layout}}

この中身は以下の様なものになります。

<div id="LayoutFixerTrigger" style="display:none;"></div>

次に、以下の様なスクリプトをcommon.jsなどに追加します。

mediaWiki.loader.using(['mediawiki.util'], function() {
    var $ = jQuery;
    // もしトリガー要素が存在すれば:
    if($('div#LayoutFixerTrigger')){
        // 余白を固定
        $('div#content').css({
            padding: '1.25em 1.5em 1.5em 1.5em'
        });
    }
});

このスクリプトではまずトリガー要素（上記テンプレートで展開したもの）を検索し、見つかれば問題の要素である <div id="content"> の余白を環境を問わず固定してしまいます。

おそらく前述の問題は不具合と言うよりは仕様ではないかと思いますので、スタイルシートを全体に渡って調整するのではなく、このような形で一部必要なページのみに適応するのが望ましいのではないかと思います。 この問題に関してはトップページのデザインにだけに留まらず今回のようにnegative marginを使用する場合引っかからざるを得ない問題ですし、全体的な余白を見て厳密に見た目を調整する際にも障壁となりえます。ぜひご検討いただければ幸いです。 -- (cllackr)^TALK 2012年12月16日 (日) 13:46 (UTC)

「Javascriptを要求するような設計にすべきではない」とのご意見をいただきましたので、提案内容を以下の通りCSSのみを使って対応する形へ変更できればと思います。

div#content div.LayoutFixer {
    padding: .25em .5em .5em .5em;
}
@media screen and (min-width: 982px)
    div#content div.LayoutFixer {
        padding: 0;
    }

これを共通CSSに追加することで <div class="LayoutFixer"> に囲まれたコンテンツの幅を、環境を問わず固定することができるようになります。何卒ご検討をよろしくお願いいたします。

なおもし差し支えございませんでしたら、メインページ改訂の決選投票までにご対応いただければ幸いです。 -- (cllackr)^TALK 2012年12月26日 (水) 02:05 (UTC)