Basic Less CSS code works fine when run from local file system:
<link rel="stylesheet/less" href="style.less" type="text/css" />
<script src="less-1.0.21.min.js"></script>
But once I move my code to a HTTP server, Less CSS becomes unable to find the stylesheet file and all the styling gets broken. The server (App Engine) returns *.less as "octetstream" actually. I tried to copy "style.less" to "style.txt" but with no success.
What does Less CSS needs to work on servers?
That depends heavily on your http server. But you can map in most webservers suffixes to mime types per configuration.
In apache something like this could be a solution
AddType text/css .less
See mod_mime
Related
I use this line to import a css style from a cdn.
#import url('https://external-website.com/style.css');
I found sometimes it happens that this cdn url returns a 404 (very rarely, but it still happens).
Is there any way to code the css so that if the request returns 404, then it should load the css from a local directory?
In short, no. CSS doesn't have the ability to intercept status codes for #import statements. You'd have to look at using javascript (if suitable to your project).
Something like:
<link rel="stylesheet" href="https://external-website.com/style.css" onerror="this.onerror=null;this.href='local.css';" />
The onerror will catch 404 status codes and change its href attribute to your local backup css file!
I have a web-page that works correctly when its URL either starts with http:// or defaults to the http protocol when the protocol isn't specified, but errors with a message saying that the main.css file can't be found when the web-page's URL starts with https://.
The latest version of Chrome's browser inspect console shows that the error occurs in the line that specifies the main.css stylesheet file:
<link rel="stylesheet" type="text/css" media="screen" href="/Resources/public/css/main.css" />
Using the Chrome inpect tool I found that two lines in the main.css file that import fonts from fonts.googleapis.com seem to be the issue because to their URLs start with http:// and cause Mixed Content errors so the browser blocks the main.css file. Here are the lines:
#import url(http://fonts.googleapis.com/css?family=Roboto|Alex+Brush);
#import url(http://fonts.googleapis.com/css?family=Asul);
When I change these two URLs to start with https:// the all of the errors go away when the page's URL starts with https:// or http://.
Question:
Since my page is intended to be used in either protocol is there a way inside of the main.css file to use a script or some css mechanism to switch between https and http protocols based on the protocol used by the page that links the main.css stylesheet? Say something like following pseudo-code:
*IF protocol is https then*
#import url(https://fonts.googleapis.com/css?family=Roboto|Alex+Brush);
#import url(http**s**://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 say inside because I don't want to create two versions of the main.css file, one for each protocol, nor do I want to break out these lines into separate stylesheet files and somehow link those too.
I'm not sure why you want to load the fonts via http when https is available but simply emitting the protocol will work for you, as such just update to:
#import url(//fonts.googleapis.com/css?family=Roboto|Alex+Brush);
#import url(//fonts.googleapis.com/css?family=Asul);
I am using Roboto from googlefonts.
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
After adding HTML5 Application Cache chrome blocks the request for the css file.
Without using Application Cache (simply removing manifest="myApp.appcache") everything is fine.
Could anybody explain me why this happens and how to fix this?
Note: The CSS-file is not added to the application cache manifest file.
I believe any resources not included in the .appcache file are blocked.
Occasionally on my websites, I notice an external file won't be loaded. If I rename it and point to the new name it works fine. The old name refuses to work ever again.
Usually this happens with images, but today it happened to a css file. It happens spontaneously and unpredictably. When it happens to images they won't load by themselves in a browser window either. The css will load by itself, but won't be loaded by the page linking to it.
Here are 2 pages which are exactly the same, except they link to 2 differently named css files. The css files are identical, except for their names.
working - http://internetfind.com.au/test2.html
not-working - http://internetfind.com.au/test1.html
The web server is Apache.
Why does this happen and how can I prevent it?
i see on test1 the css file is not loaded as text/css but text/html. I also notice that you are running 2 different domains both running Apache. any chance you have 2 different .htaccess files? I am just speculating here as I dont have all the information but my guess would be the root directory running the test1 domain has a htaccess file where the MIME type are not defined right.
here is a link to a sample .htaccess file that comes with the html5 boilerplate distro. https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess
Another error is that Mordernizr is not defined which probably means that you have not linked the mordernizr library.
My Firefox console reports this:
The stylesheet http://www.agedcarefind.com.au/styles/styles-church.css was not loaded because its MIME type, "text/html", is not "text/css".
This suggests that your server isn't configured correctly and is serving the CSS with the wrong mimetype.
I can confirm the Firefox is requesting the file correctly, and it's being delivered - just not actioned.
test1.html is looking for this CSS
<link href="http://www.agedcarefind.com.au/styles/styles-church.css" type="text/css" rel="stylesheet">
This CSS file is ending with
#prev{position:absolute;z-index:101;height:100%;…
Somwthing is wrong with the file, try to edit it and it should work fine
e.g:
#prev{position:absolute;z-index:101;height:100%;}}
First of all, incorrect content-type for css files Resource interpreted as Stylesheet but transferred with MIME type text/html
Second - Uncaught ReferenceError: Modernizr is not defined
Content-type affects visualization of styles. May be you have some front-end server that changes content-type. Or your files are returned by server-side script - not enough details to answer clearly.
Based on the content of .css files I would say that you have some css compressor (removes white-spaces, new lines, reducing the size of .css file) running on server and may be it affects the content-type header.
I have a webpage that is transferring A stylesheet as a text/plain MIME type. what are the possible reasons for this to occur and any tips on how to resolve that problem.
im linking the css like this
<link href="/css/app.css" rel="stylesheet" type='text/css'>
Server misconfiguration. This could depend on an overall configuration error, or on something more limited, like a badly written .htaccess file in the css directory, if the server is running Apache.