I have added a minifed css to my website for better speed and performance. However, When i look into the browsers developer tools, the css sources for any elements are coming from nomal theme.css file, instead of theme.min.css.
I dont know wheather my minified css files is being used or not? Anyone please guide.
Also, I have theme.min.css.map file. When its being used?
If you see the minified CSS file path in your tags, it's being used. If Chrome developer tools show the original file in italic, it's being referenced by the map. Like this:
Image taken from: Why does Chrome devtools show these folders in orange and in italics?
Did you give the correct file name? it should be theme.min.css instead of theme.css
Double confirm you have given the right file name ,you might have not or
It might be that the content are loaded from cache clear your cache or try with hard refresh pressing Ctrl+f5 if you are in Mozilla firefox browser.
Related
I'm developing a basic web page with css file on my local machine and testing by opening the html file in the browser straight from the filesystem.
This works, but now since using the Chrome developer tools to play around with different styles by editing the css file under the Sources tab, whenever I refresh the page none of the CSS loads until I again edit it in the sources tab - just adding a return to the end is enough to load all the CSS.
Also, occasionally when refreshing the page, the Sources tab shows the contents of the css file as corrupt (a load of random characters)
I've run the css through a validator and that says it is all fine and there is no javascript on the page
I'm not a web developer so probably missing something obvious...
This is happening because you are editing css inside the Inspect Element (Chrome developer tools).
This is because the css literally lives on a webpage and it is pulled from your actual css file on your desktop (css file from the folder of your website).
Because of this, you are never actually changing an actual css on your computer, just in the browser, and that is temporary, because the same old css from your computer will load everytime you reload the page (untill you modify the css on your computer).
You should edit your changes in your actual css file on your computer inside your text editor (notepad++, visual studio code, atom, sublime text, etc ...).
That way, it is going to work as you want ! Hope you understood what I meant, if not, just tell me, so I can clarify again :)
Add this to the nginx configuration:
http {
include /etc/nginx/mime.types;
....
}
this solved it for me.
Thanks
My CSS file is being loaded by the browser. I can see it in the list of network resources in developer tools, and if I visit the CSS file directly, I can see the file. It appears to have the correct type (stylesheet).
But, despite everything being downloaded correctly, the browser doesn't render the content according to the rules in this CSS file.
I have no idea what's causing this.
My link from the head section:
<link rel="stylesheet" href="/static/css/components.css">
It's being served by nginx.
Thanks!
Did you double-check you have the right selectors? Maybe typos?
Did you double-check you're not overriding something? Maybe with inline styles?
Did you double-check the CSS properties you are using are supported by the browser on which you do the test?
Those are the 3 things that I can think of for now. You can try to be more specific for a better answer.
Carried on looking. Although developer console reported the type as 'stylesheet', the mime-type was coming as text/plain. I've fixed my server configuration and now get the CSS rendered.
Thanks for the suggestions.
I am working on a site using the one of the twitter bootstrap templates and my JavaScript console is complaining that it is missing:
favicon.ico
ie-emulation-modes-warning.js
I downloaded all of the Bootstrap files from the Bootstrap website. What are these files and do I need them?
If so, where can I get them?
Edit: Thanks guys! Looked into Favicons and didn't realize that is what they are! So simple! lol
By default, browsers look for favicons in your site's root directory. You can use favicon generators online, which (by standard) create 16x16 pixel png-like objects that are used as your site's icon on a browser tab, etc. Just make one of those and drop it in your root directory.
If that doesn't work, you may want to use your inspector (assuming you're using chrome), right click > inspect element > console (or network), and look there to see where your template is looking for the favicon. Just drop the generated .ico file in that folder.
For the JS file, you may be able to find it online, download it, use the inspector again, and drop it wherever your browser is looking for it. This is good for performance—missing files slow roundtrip requests down.
It's something browsers look for by default. Nothing to do with Bootstrap
http://en.wikipedia.org/wiki/Favicon
I have noticed that HTML5 Boilerplate and dev websites like css-tricks.com use only apple-touch-icon as any reference to favicon, and that image is indeed displayed in a browser. I was not following this topic for a while and am confused to how this works. Is it safe to now only include a touch-icon and will it be displayed in various browsers?
A favicon.ico file is used by the browser automatically if it's in the root directly of your page/app.
If you want to add a favicon in a different format (e.g. png), of you want to add it from another source (e.g. a subdirectory like /img) or if you want to make the browser load a new version of the file (e.g. favicon.ico?v=2) you use the link tag.
More info here:
Necessary to add link tag for favicon.ico?
I use workspaces and sourcemapping to live-edit my SCSS files in Chrome with live reload functionality.
However the live-reload part breaks if I add a version to the stylesheet that is being generated by the SCSS. The stylesheet is still saved and changed in the background, but Chrome does not inject the changes.
eg. <link rel="stylesheet href="style.css?v=255"/>
Any ideas on how to work around this?
This appears to be a current limitation on Chromes part and does also apply to plain CSS files. As a simple workaround you can execute this bookmarklet before attempting to change your source file:
javascript:(function(){var s=document.getElementsByTagName('link');for(var i=0;i<s.length;++i){var q=s[i].href.indexOf('?');if(q!==-1)s[i].href=s[i].href.substr(0,q)}})()
(What it does is look for <link> tags with an href containing a query string, and removes the latter if found).