無料ブログ「rentafree.net」の管理人ブログ

ハイブリッド・テンプレートを修正しました

新しく作ったカラム数可変のハイブリッドテンプレートですが、
タブ操作で移動済みの要素をresizeイベント時に戻していましたが、
開いている状態の要素を移動するのは問題があったので開いているタブは除外していましたが、
resizeイベント時ではなくMediaQueryListで処理するように変更しました。

これにより、MediaQueryList対応ブラウザでは1カラムでタブを操作してから2カラム以上に戻しても、
全ての要素が正常な位置に表示されるようになりました。

ただし、タブの操作状態は変更しないので、更に1カラムに戻した場合にタブが開かれた状態で要素が閉じている状態になる可能性があります。
この場合は、再度タブを閉じてから開けば表示されます。

また、IE9がMedia Queriesに対応していますがMediaQueryListには非対応なので、
IE9では1カラムでタブを操作してから2カラム以上に戻した場合、
操作済みのタブの要素は全て異常な位置に表示されます。
IE10は対応です。