overflow-anchor確認ブックマークレット

　ほとんどのブラウザはCSS のプロパティoverflow-anchorのデフォルトがauto;だけど、特殊な事情でnone;にされていることがある。私も閲覧中のウェブページで一時的にnone;にすることがある。そして、実際にnone;になっているかどうか確認したい。そのためのブックマークレット。Geminiに作ってもらった。

overflow-anchor確認

　読みやすいように整形したコードは次の通り。

javascript: (function() {
    'use strict';

    // スタイルを取得するユーティリティ関数
    const getStyle = (element, property) => {
        return window.getComputedStyle(element).getPropertyValue(property);
    };

    const elements = document.querySelectorAll('*');
    const results = [];
    const overflowAnchorProperty = 'overflow-anchor';

    // すべての要素を反復処理
    elements.forEach(element => {
        try {
            const computedValue = getStyle(element, overflowAnchorProperty);

            // overflow-anchorが 'none' の要素を検出
            if (computedValue && computedValue === 'none') {
                // 要素を特定するためのCSSセレクタを構築
                const selector = element.tagName.toLowerCase() +
                    (element.id ? `#${element.id}` : '') +
                    (element.className ? `.${element.className.split(/\s+/).join('.')}` : '');

                results.push({
                    tagName: element.tagName,
                    id: element.id,
                    className: element.className,
                    computedValue: computedValue,
                    selector: selector,
                    // HTMLの最初の150文字をスニペットとして格納
                    outerHTML: element.outerHTML.substring(0, 150) + '...'
                });
            }
        } catch (e) {
            // エラー処理（例: 一部の要素でスタイル取得に失敗した場合）
            console.error(`Error processing element ${element.tagName}:`, e);
        }
    });

    // 結果の出力と通知
    if (results.length > 0) {
        // コンソールに詳細なテーブルを出力
        console.groupCollapsed(`⚠️ ${overflowAnchorProperty}: none; の要素が ${results.length} 個見つかりました。`);
        console.table(results, ['tagName', 'id', 'className', 'selector', 'computedValue']);
        console.groupEnd();

        let alertMessage = `⚠️ ${overflowAnchorProperty} の状態確認が完了しました。\n\n**明示的に無効化された (none;) 要素が ${results.length} 個**見つかりました。\n\n--- 検出された要素（最大3つ） ---\n\n`;

        // アラート用に最初の3つの要素の情報を整形
        results.slice(0, 3).forEach((r, i) => {
            alertMessage += `[${i + 1}] ${r.selector}\nHTML: ${r.outerHTML}\n\n`;
        });

        if (results.length > 3) {
            alertMessage += `...さらに ${results.length - 3} 個の要素がコンソールにあります。\n`;
        }
        
        alertMessage += `\n詳細は**コンソール (F12) のテーブル**を確認してください。`;
        
        alert(alertMessage);
    } else {
        // 要素が見つからなかった場合の通知
        alert(`🎉 ${overflowAnchorProperty} の状態確認が完了しました。\n\n明示的に無効化された (none;) 要素は見つかりませんでした。`);
        console.log(`🎉 ${overflowAnchorProperty} の状態確認結果: 明示的に無効化された (none;) 要素は見つかりませんでした。`);
    }
})();