这个CSS文件来自哪里？

Question

Repro steps:

1. Open this link
2. Inspect Element on the magnifying glass to the right of the search bar
3. See that some properties are inherited from a stylesheet named default.css
4. View Source on the page
5. ctrl+F "deafult.css"
6. Phrase not found
7. Open every JavaScript file to look for it (You don't have to bother doing this. Trust me that I already did it.)

Where is default.css? I know it's found here , but where is it being referenced on RMC's site?

Answer 1

Looking at the code I see the class name .gsc-search-box then i did a google search for that class name and found this SO question . That lead me to find the Google custom search box which you can read more about here: https://www.google.com/cse/

Answer 2

It is from Googles Custom Search Engine CSS .

The description of this product is located here

Answer 3

The short answer:

It comes from this javascript file .

The longer answer:

If you look at your Google Chrome developer tools you'll see the following "initiator" column:

If you hover over the URL, you'll see the following:

google.(anonymous function).d   @    jsapi?autoload={"modules"%3A[{"name"%3A"search"%2C"version"%3A"1.0"%2C"callback"%3A"__gcse.scb"%2C"…:21
(anonymous function)            @    ?file=search&v=1.0&hl=en&async=2&style=https%3A%2F%2Fwww.google.com%2Fcse%2Fstyle%2Flook%2Fv2%2Fdef…:10

So essentially it's loaded by Google CSE's d function.

If we look closer at that we'll see:

google[z].d = function(a, b, c) {
            if (c) {
                var e;
                "script" == a ? (e = h.createElement("script"), e.type = "text/javascript", e.src = b) : "css" == a && (e = h.createElement("link"), e.type = "text/css", e.href = b, e.rel = "stylesheet");
                (a = h.getElementsByTagName("head")[0]) || (a = h.body.parentNode.appendChild(h.createElement("head")));
                a.appendChild(e)
            } else
                "script" == a ? h.write('<script src="' + b + '" type="text/javascript">\x3c/script>') : "css" == a && h.write('<link href="' + b + '" type="text/css" rel="stylesheet"></link>')
        };

Where it adds it to the header.

If we look at the (anonymous function) we'll find the following:

google.loader.writeLoadTag("css", "https://www.google.com/cse/style/look/v2/default.css", true);

Which is where it's coming from.

But where is CSE added?!

Right on the source of the HTML page you were looking at:

<script>
  (function() {
    var cx = '018180480343835782597:0w0lu0vrv_i';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>