My website functions correctly when accessed through URLs that start with either http:// or default to the http protocol if not specified. However, an error occurs stating that the main.css file cannot be found when the URL begins with https://.
The latest version of Chrome's browser inspect console indicates that the error is linked to the line specifying the main.css stylesheet file:
<link rel="stylesheet" type="text/css" media="screen" href="/Resources/public/css/main.css" />
In investigating using the Chrome inspect tool, I discovered two lines in the main.css file causing problems as they import fonts from fonts.googleapis.com with URLs starting with http:// which triggers Mixed Content errors resulting in the browser blocking the main.css file. These are the troublesome lines:
@import url(http://fonts.googleapis.com/css?family=Roboto|Alex+Brush);
@import url(http://fonts.googleapis.com/css?family=Asul);
By altering these two URLs to begin with https://, all errors cease when accessing the page's URL starting with either https:// or http://.
Question: Considering my page should cater to both protocols, is there a way within the main.css file to employ a script or CSS mechanism that can dynamically switch between http and https protocols based on the linking page's protocol? For instance, pseudo-code like the following:
*IF protocol is https then*
@import url(https://fonts.googleapis.com/css?family=Roboto|Alex+Brush);
@import url(https://fonts.googleapis.com/css?family=Asul);
*ELSE*
@import url(http://fonts.googleapis.com/css?family=Roboto|Alex+Brush);
@import url(http://fonts.googleapis.com/css?family=Asul);
*ENDIF*
I prefer handling this inside the main.css file without creating separate versions for each protocol or breaking out the lines into distinct stylesheet files for linking.