web-dev-qa-db-ja.com

CSSが読み込まれているかどうかを確認する方法は？

ページのCSSがWatin 2.1でそのスタイルを正常にロードして適用したことをどのようにアサートできますか？

csswatin
19
Erik Funkenbusch

いくつかの調査を行い、私の回答を書いた後、私は偶然に遭遇しました this link は、CSSがロードされているとき、およびそれを確認する方法について、CSSについて知る必要があるすべてを説明しています。

提供されたリンクは、実際にそれを非常によく説明しているので、将来の参照のために、そこから引用をいくつか追加しています。
興味があれば、私の答えは＃2と＃4のバリエーションになります。

スタイルシートが実際にロードされるのはいつですか？

...

これで、ここに何があるか見てみましょう。

// my callback function 
// which relies on CSS being loaded function
CSSDone() {
    alert('zOMG, CSS is done');
};

// load me some stylesheet 
var url = "http://tools.w3clubs.com/pagr/1.sleep-1.css",
    head = document.getElementsByTagName('head')[0],
    link = document.createElement('link');

link.type = "text/css"; 
link.rel = "stylesheet";
link.href = url;

// MAGIC 
// call CSSDone() when CSS arrives
head.appendChild(link);

マジックパーツのオプション。簡単なものからばかげたものに並べ替えられています。

  1. link.onloadをリッスンします
  2. link.addEventListener（ 'load'）をリッスンします
  3. link.onreadystatechangeを聞く
  4. setTimeout、document.styleSheetsの変更を確認
  5. setTimeoutを使用して、作成した特定の要素のスタイルの変更をチェックしますが、新しいCSSでスタイルを設定します

5番目のオプションはクレイジーすぎて、CSSのコンテンツを制御できると想定しているので、忘れてください。さらに、タイムアウトで現在のスタイルをチェックします。つまり、リフローキューがフラッシュされ、速度が遅くなる可能性があります。 CSSの到着が遅いほど、リフローが多くなります。だから、本当に、それを忘れてください。

では、魔法を実装するのはどうですか？

// MAGIC 

// #1   
link.onload = function () {
    CSSDone('onload listener');
};   

// #2   
if (link.addEventListener) {
    link.addEventListener('load', function() {
        CSSDone("DOM's load event");
    }, false);   
};   

// #3   
link.onreadystatechange = function() {
    var state = link.readyState;
    if (state === 'loaded' || state === 'complete') {
        link.onreadystatechange = null;
        CSSDone("onreadystatechange");
    }   
};

// #4   
var cssnum = document.styleSheets.length;
var ti = setInterval(function() {
    if (document.styleSheets.length > cssnum) {
        // needs more work when you load a bunch of CSS files quickly
        // e.g. loop from cssnum to the new length, looking
        // for the document.styleSheets[n].href === url
        // ...

        // FF changes the length prematurely :(
        CSSDone('listening to styleSheets.length change');
        clearInterval(ti);
    }   
}, 10);

// MAGIC ends
25
ShadowScripter

@ShadowScripterによって書かれた記事に更新がありました。新しいメソッドは、すべてのブラウザで機能するとされていますFFを含みます。

var style = document.createElement('style');
style.textContent = '@import "' + url + '"';

var fi = setInterval(function() {
  try {
    style.sheet.cssRules; // <--- MAGIC: only populated when file is loaded
    CSSDone('listening to @import-ed cssRules');
    clearInterval(fi);
  } catch (e){}
}, 10);  

document.getElementsByTagName('head')[0].appendChild(style);
8
JohnSz

ページを読み込んだ後、いくつかの要素のスタイルを次のように確認できます。

var style = browser.Div(Find.ByClass("class")).Style;
Assert.That(Style.Display, Is.StringContaining("none"));
Assert.That(Style.FontSize, Is.EqualTo("10px"));

や。。など...

2
alonp

ブラウザーの互換性は変わる可能性があり、新しい将来のブラウザー標準は変更される可能性があるため、単一のHTML要素を使用している場合にHTML要素のz-indexが変更されたときにリッスンできるように、onloadリスナーとCSSをスタイルシートに追加することをお勧めします。スタイルシート。それ以外の場合は、スタイルごとに新しいメタタグを指定して以下の関数を使用します。

ロードするCSSファイルに以下を追加します。

#*(insert a unique id for he current link tag)* {
    z-index: 0
}

スクリプトに以下を追加します。

function whencsslinkloads(csslink, whenload ){
    var intervalID = setInterval(
        function(){
            if (getComputedStyle(csslink).zIndex !== '0') return;
            clearInterval(intervalID);
            csslink.onload = null;
            whenload();
        },
        125 // check for if it has loaded 8 times a second
    );
    csslink.onload = function(){
        clearInterval(intervalID);
        csslink.onload = null;
        whenload();
    }
}

例

index.html：

<!doctype html>
<html>
    <head>
        <link rel=stylesheet id="EpicStyleID" href="the_style.css" />
        <script async href="script.js"></script>
    </head>
    <body>
        CSS Loaded: <span id=result>no</span>
    </body>
</html>

script.js：

function whencsslinkloads(csslink, whenload ){
    var intervalID = setInterval(
        function(){
            if (getComputedStyle(csslink).zIndex !== '0') return;
            clearInterval(intervalID);
            csslink.onload = null;
            whenload();
        },
        125 // check for if it has loaded 8 times a second
    );
    csslink.onload = function(){
        clearInterval(intervalID);
        csslink.onload = null;
        whenload();
    }
}
/*************************************/
whencsslinkloads(
    document.getElementById('EpicStyleID'),
    function(){
        document.getElementById('result').innerHTML = '<font color=green></font>'
    }
)

the_style.css

#EpicStyleID {
    z-index: 0
}

しないでくださいリンクのonloadイベントをキャプチャできるように、スクリプトを同期的に（async属性なしで）ロードします。上記の方法のようなより良い方法があります。

1
Jack Giffin