I am working on changing the styling of pages within a learning platform. The platform allows for the user (me) to use my own CSS to change the styling of pages I myself have created. The problem is that the platform uses som predefined (and unknown to me) CSS before appending their CSS with my CSS. I don't have access to the actual HTML.
Here is the problem: I would like to use web fonts in my CSS. I have therefore been trying to use #import at the start of my CSS. My CSS is appended too late to the predefined CSS for #import to take effect. The only code I can give the system is my own CSS so I can't directly edit the html head to link to the web fonts.
Is there any other way to add web fonts to my CSS with said CSS being the only code I can write? Is it possible within CSS to append links to the html head? The support team of the platform consider this is a bug but don't offer a workaround. It would be nice not to have to wait for an update if possible.
I was hoping to import other css files from withing the Chrome's custom stylesheet C:\Users\*\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css but it doesn't seem to be working. I have a stylish.1misc.css and a stylish.2img.css inside the same dir as above. Also with symlinks I've set them up on my localserver as http://localhost/.my/stylish.2img.css but none of the #import rules seem to be working
#import "stylish.1misc.css";
#import url("stylish.1misc.css");
#import url("http://localhost/.my/stylish.2img.css");
#import url("file:///D:/.localhost/.my/stylish.1misc.css");
Why wont it import?
related
Although I am having the same issue with Chrome as well, but the statement concerning inclusion of local stylesheets in case of every browser with the exception of IE lacks merit. Opera, Firefox, and Safari all allow inclusion of local stylesheets. Safari and Opera even allow users to use stylesheets which are located anywhere on their hard disks. As the process of instructing a web browser to use a local stylesheet requires a local user's involvement, hence the chances of violating the security remain minimal to almost non existent.
As CSS files have to conform to strict rules, hence that probably provides another reason for making it possible for users to choose local CSS files from any directory on the hard disk, as browsers simply stop parsing the file in case it does not conform to predefined rules and standards.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Difference between #import and link in CSS
I've read about CSS #import as a bad practice, and was wondering about the methods I'm using.
I'm currently building a website using WordPress, which imports each plugin's stylesheets by link references, and the main stylesheet is linked in the same manner, however, the main stylesheet currently contains several #import declarations, which I believe I should be moving into the header or into the appropriate pages that they're used in (having two of them are only used on certain pages).
Are my concerns justified, and what are the implications of using those #import declarations?
The web provides a lot of information about this topic, I suggest reading:
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
#import vs link
#import or <link> for importing stylesheets?
I think you should use LINK for simplicity—you have to remember to put #import at the top of the style block or else it won’t work. It turns out that avoiding #import is better for performance.
link
Linking is the first method for including an external style sheet on your Web pages. It is intended to link together your Web page with your style sheet.
import
Importing allows you to import one style sheet into another. This is slightly different than the link scenario, because you can import style sheets inside a linked style sheet.
The most common reason given for using #import instead is because older browsers didn't recognize #import, so you could hide styles from them.
This link will solve your all queries
What's the Difference Between #import and link for CSS?
Using the import rule is not bad practice in itself. You just have to keep in mind that imports are only handled after the file including them has been downloaded. So if you have a bunch of files with these statements it can take rather long for your audience to see the css applied.
Each #import statement creates a new http request since it happens client side. So from this perspective you are hurting visitors with slow connections like mobile visitors on Edge or 3G.
A rule of thumb I hear a lot is to merge all CSS that you need instantly and only use #import for things you need later on.
It is best to NOT use #import to include CSS in a page for speed reasons.
importing allows you to import one style sheet into another. This is slightly different than the link scenario, because you can import style sheets inside a linked style sheet. Older browsers didn't recognize #import, so you could hide styles from them, It is the reason for #import.
check this:
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
css #import
What I would like to do is apply a system-wide CSS reset. How can I do this?
Here's a little bit of information about what is meant by a CSS reset.
The goal of a reset stylesheet is to
reduce browser inconsistencies in
things like default line heights,
margins and font sizes of headings,
and so on.
http://meyerweb.com/eric/tools/css/reset/
We do this by linking a reset.css in our host html page, as you normally would. It works like you would expect. You can also link reset.css into your module file, but it seems more appropriate in the host page.
What you might not expect is that GWT's default css will be injected afterwards, even if you don't link it in, if you're inheriting the default theme in the module.xml file. You can affect that behavior. Read http://code.google.com/webtoolkit/doc/latest/DevGuideUiCss.html for more information about the details of CSS and GWT.
Can someone explain what are the benefits of using the #import syntax comparing to just including css using the standard link method?
As the answerer said, it lets you split your CSS into multiple files whilst only linking to one in the browser.
That said, it's still wasteful to have multiple CSS files downloading on high-traffic websites. Our build script actually "compiles" our CSS when building in release mode by doing the following:
All CSS files are minified (extra whitespace and comments removed)
We have a "core.css" file that's just a list of #import statements; during compilation, each of these is replaced by the minified CSS of that file
Thus we end up with a single, minified CSS file in production, whilst in development mode we have the separate files to make debugging easier.
If you use <link>s in your HTML files, all those files have to keep track of all the CSS files. This obviously makes changes and additions (both for CSS and HTML files) harder.
Using #import, you reduce a theoretically infinite number of changes down to one.
#import allows you have an extensible styesheet without having to change the html. You can link once to your main sheet and then if you want to add or remove additional sheets your html doesn't change.
Also, more smaller files help the browser do better caching. If you make a change in one part of a large sheet, the entire sheet must be downloaded again for every user. If the styles are separated into logical areas among a few sheets, only the file containing the part that changed needs to be downloaded. Of course, this comes at the cost of additional http requests.
One other handy bit, although pretty outdated, is that Netscape 4 couldn't handle #import, so it is a good way of serving a stylesheet to NS4, then having another stylesheet for more modern browsers that was imported in a standards compliant way.
#import is CSS code. <link> is HTML code. So, if you want to include stylesheets in other stylesheets (or if you can’t change HTML), #import is the way to go.
According to the CSS spec, all #import declarations must appear before any style rules in your stylesheet. In other words, all at the top of your stylesheet
Any #import declarations that appear after style rules should be ignored. Internet Explorer has never respected this; I believe other browsers do. This makes #import a bit less useful, because rules in a stylesheet that’s imported will be overriden by rules of equal specificity in the importing stylesheet.
It allows you to keep your logic CSS file spread over multiple physical files. Helps in team development, for example. Also useful when you have a lot of CSS files that you want to separate by functional areas (one for grids, one for lists, etc), let have accessible in the same logical file.
Say you work for Massive Dynamics, Corp.. It has a Widgets division. The Widgets division has an Accounts department. Accounts is divided into Accounts Payable and Accounts Receivable.
Using #include, you start the website with one top-level global.css stylesheet, which applies to everything.
Then you create a second stylesheet, widgets.css for the Widgets division. It #includes the global one, and its own styles (which can over-ride the global styles if needed, because of the Cascade). Then you create a third accounts.css for Accounts. It #includes widgets.css, which means it also includes global.css. Lather, rinse, repeat.