Actually we have one global.css style sheet in which we are using #import url("http://fonts.net/sample.css?type=cssandid=123") for fonts.
But it's creating issues in Bundling & minification so I got following solutions:
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
and I replace #import with element
<link rel='stylesheet' type='text/css' href='http://fonts.net/sample.css?type=cssandid=123'>
even after this I'm getting CSS errors as I checked in CSS Lint(http://csslint.net/) and not getting real UI effect as with #import.
Do we have any other solutions for this?
Environment: VS2015 , MVC 5.2 , sitecore 8.1
Thanks
Hope you found the solution since you posted this question
What you can do, to avoid the #import url('yourCssUrlHere') is simply copy/paste the URL on your browser and then copy/past the CSS that is displayed.
And then simply replace the #import by the CSS you just copied.
Most of the time if the import is a font, there will be other references to .woff or .woff2 files.
Just download them and store those files somewhere on your project folder and just add their absolute link on all the url() fields.
That way, you use external fonts or stylesheets, but internally, without request them outside of your website.
Related
iam using font-awesome (sass version - Link) in my asp.net site.
i have the problem that all fonts is rendered as ?
i have chek many times font path and css class but all seem correct
this is my html: <i class="fa fa-magic"></i>
inspecting the page with firebug i see fontawesome-webfont.woff correctly loaded
folder structure is complex since i use bundleTransformer to render all sass files
i have
Style
- fonts
- font-awesome
- Sass
- External
- font-awesome
- font-awesome
bottom level font-awesome folder contains all font-awesome .scss files
this is the path in _variables.scss:
$fa-font-path: if($fa-sass-asset-helper, "font-awesome/", "fonts/font-awesome/") !default;
upper font-awesome folder contains _font-awesome.scss that import all .scss
external folder contains __external.scss
with this code: #import "font-awesome/font-awesome";
in sass folder i have my application.scss file:
#import "Base/placeholders";
#import "Base/mixins";
#import "Pages/__pages";
#import "Modules/__modules";
#import "External/__external";
finally style is rendered with this boundle:
var commonStylesBundle = new CustomStyleBundle("~/Style/tema");
commonStylesBundle.Include("~/Style/Sass/application.scss");
commonStylesBundle.Orderer = nullOrderer;
commonStylesBundle.Transforms.Add(new CssMinify());
bundles.Add(commonStylesBundle);
and added in this way to masterpage `head:
<%# Styles.Render("~/Style/tema") %>
The page looks for file in this path:
/Style/fonts/font-awesome/fontawesome-webfont.woff
and finds it
i have try BootstrapCDN by MaxCDN and it works fine but i can't use it since our user can browse only in local network and can't use internet resources
looking deeper in solution i found that an edit made for AjaxControlToolkit MaskedEdit by other developer altered the standard encoding.
setting it back to UTF-8 solved this problem.
thanks to #cimmanon for link where i read about char encoding
I'm diving into Bootstrap, and I'm beginning with the simplest example possible. In my HTML file there's only one line regarding style sheet:
<link href="css/bootstrap.css" rel="stylesheet">
In the css folder I've deleted all other css files (minified and css map) except bootstrap.css and bootstrap-theme.css - and now the HTML file lookes screwed up.
But when I copy back the minified css in the directory, the HTML renders fine - despite no link to it in the HTML. How is that possible?
You may have some #import statements in the stylesheet you are declaring in your HTML. That means that your stylesheet makes use of another stylesheet.
After upgrading to the release version of Divshot, I've noticed that CSS #import rules aren't being loaded in the preview panel.
For example:
#import url("http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css");
#import url("styles.css");
does nothing.
I have tried different syntax and it didn't seem to help. I can put them in the head of the HTML page instead of calling them in a CSS file, but that only works for straight CSS. Font Awesome and Google font libraries rely on #import rules to work.
Any help would be appreciated.
Because Divshot runs everything secured via SSL, you will need to use the https versions of any CSS imports, or use // to make it work both ways.
I am developing a large-scale RIA application using Ext JS 4. Inside my index.html I've the following definitions:
<link rel="stylesheet" href="ext/resources/css/ext-all.css">
<link rel="stylesheet" href="ext/src/ux/grid/css/GridFilters.css">
<link rel="stylesheet" href="ext/src/ux/grid/css/RangeMenu.css">
<link rel="stylesheet" href="resources/css/default/index.css">
<link rel="stylesheet" href="resources/css/default/profile/user.css">
<link rel="stylesheet" href="resources/css/default/profile/documents.css">
The problem
In provided code only index.css is present, but each view in my application will have its own CSS stylesheet, which will use its own sprites/images (I've added user.css and documents.css in provided code as example). That all will grow into a huge amount of not minified CSS files, which will slow down application loading time significantly.
Also, some styles of Ext JS 'ux' components are not included in ext-all.css (GridFilters.css and RangeMenu.css in provided code).
I can write down a script, which will compress all these CSS files into one file, but ...
The question
Which is the correct way for styling Ext JS 4 applications? Maybe one should create SCSS files and do all styling there, and compile each time with compass compile to create CSS files and do development?
Is there any way to include styles for 'ux' components which comes in standard Ext JS 4 distribution? Some thing like ext-all.css for 'ux components (something like ext-ux-all.css)
I hope many people are using Ext JS to create great applications and they've thought about or solved such problems for themselves. I'll be grateful for any share of knowledge regarding this topic.
I have a similar situation to yours.
What I do is to first include the ext css file:
<link rel="stylesheet" type="text/css" href="resources/css/ext-all-gray.css">
Then all my app css is generated using compass. So there are a multitude of scss files that are compiled into a single css file. You can use compass watch so your css is compiled whenever a scss file changes.
I have to say that once you get used to compass and sass/scss, it's very hard to justify plain css files - compass and sass generate better cross-browser css and the scss files are far easier to maintain and customise compared to plain css.
As for the ux css. I wouldn't worry about it too much, but you have two options:
simply import your ux css files in your main scss file (see this answer);
use one of a multitude of css unifiers/mergers/minifiers out there.
Creating your theme is the only way you can keep your code well and is a good way to deploy optimized css.
Using secnha's mixins ( now partially documented in docs) you can create multiple looks for your buttons, pannels,etc. You might have some hard time to figure out how it works, but is the only way to do things well.
You will find good resources on their docs ( guides and video). Also their scss sources are a good source.
I have a style sheet file which imports three other css files:
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
style.css contains:
#import url("../ins/style.css");
#import url("commerce/css/style.css");
#import url("../in/custom.css");
I would like to improve the loading time and reduce the number of requests, so I want to combine the three css files into one in the same order as they are imported. but problem arise that all layout is messed up. I am really wondering why this is happening since import css file is the same as inlcuding them. any ideas? thanks for taking time to read.
If commerce/css/style.css is the CSS file that holds the layout, it could be that that path is not correct for all pages. I would ensure that all paths are relative to root to ensure that they are correct across the site. This includes the original href url for your combination css file.
I'm also not so sure if putting three imports in one css is less time for loading as opposed to linking them in the html. If you want to reduce load time you need to reduce number of loads somehow such as only loading internet explorer css when the browser is internet explorer etc.
Let me know of anymore developments.
You can try SSI includes, H5BP ant build script or even borschik to combine your CSS.