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&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?