CSS using import and link for same files

I was analyzing the HTML and CSS of the Google recaptcha site.

I found it interesting that in the HTML file, they use tags for fonts and css file and then also call those same named files via @import in the last css file called in a tag in the HTML file.
I can’t find any reason why other than the “Flash of Unstyled Content” fix.

I’m thinking this site is a relatively new and I’m curious why Google devs would use this.
I diff’d the two main css files and there are some minimal differences.
The HTML5 Rocks site says,

The browser’s network stack automatically de-dupes all requests from the same URL. This means that imports that reference the same URL are only retrieved once. No matter how many times an import at the same location is loaded, it only executes once.

I’m not sure if this applies to links and imports calling the same file.

Here’s the two calls:
HTML Page

<link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" rel="stylesheet">
<link href="//www.google.com/css/maia.css" rel="stylesheet">
...
...
<link href="styles/default.css" rel="stylesheet">

Then in the default.css file:

@import"//fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,600,700";
@import"//www.google.com/css/maia.css";

So,… why are they doing this?

Throughout their website, not every page seems to have a default.css in place.

I’m guessing that it’s there to make sure the file gets loaded just in case. I would assume they don’t custom build pages and whatnot. They don’t care about being perfect in their code. There isn’t really a need for calling it twice IMHO so it’s probably just laziness on their part.

Yes, Google may be tops as a search engine, but having valid semantic best-practice code NOT

Bigger companies don’t need to :slight_smile: . They are already recognized. Benefit of being on the top I presume.

Thanks for the replies. I guess I’d assume they’d do better in trying to write sexy code. My default was to try and figure out what benefit was gained instead of = lazy.

  • D

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.