I am writing an ASP.NET server control that will live in its own assembly. It's a refactoring of something already in the app, which uses CSS background images.
I don't want to require the user of the assembly to have to install a separate images folder, so -- if it's possible -- I'd like to store the images as resources in the server control's assembly. But I'd still like to use CSS to set them as background images. Unless I'm mistaken, CSS is my only option for setting background images.
Is this possible? I've seen some markup in places that suggests it might be, notably this, this, and this, but nothing sufficiently specific to CSS background images that I could be confident it would work: most articles that deal with this assume you are loading either script or CSS files.
I found the answer! The answer is: YES, you can do it! And here's how: this and this.
Related
I have an app which needs to work in several languages, and several different color schemes and I would rather not load all the CSS every time since a large amount of it is not necessary or relavant (rtl css for example) but meteor automaticaly loads all CSS files he can find.
is there a way to selectively load CSS files?
Thanks.
If you place a CSS file within the reach of Meteor compiler, it's merged into the main app and in the current release there's nothing you can do about this.
You can however put the file in /public directory. Meteor won't touch it there, and you will be able to load it at will by adding <link/> tag to your page head.
Please have a look at https://stackoverflow.com/a/26694517/1523072 which seems a quite elegant way to do this and also explains why you shouldn't do it.
One of my apps currently loads 2.6MB compressed Javascript and 300KB compressed CSS, which seems like a lot. However, after the first visit all the resources are cached by my browser, which means the only thing that is transferred between browser and server after that is pure data.
Following is an extract from Requirejs documentation :
Ideally RequireJS could load CSS files as dependencies. However, there are issues knowing when a CSS file has been loaded, particularly in Gecko/Firefox when the file is loaded from another domain. Some history can be found in this Dojo ticket.
Can anyone please explain what is happening in Gecko/Firefox??? it says they load files from another domain??what does it mean???
please help
thanks
I believe they are just referring to when sites use cdns to host static content. Using a different usually cookie less domain to host their css, images and js files. Not that Gecko/Firefox is doing something to all css, images and js files. I'm not sure why Gecko is different from other browsers during these conditions they describe however.
In my asp.net mvc application, I'm using bundling for css. When I created a new css stylesheet and used the same id names as another page in the application, the styles on the first page were messed up.
I must be doing something wrong as I know that the same id can be used on different pages, but I don't find others having this problem when I searched the web on the subject.
Please help. Thanks.
The two CSS files are styling with the same ID (yet intended to style different pages) are bundled together and causing styling problems on those IDs.
This is because the page is loading the bundled CSS file then all the styles (from both CSS files) are applied to that ID regardless of page. The solution is to only load the relevant CSS file (and not bundle) or of course use different IDs.
id re-use throughout an application is unusual and often overcome by using class instead.
^^ summarized from comment discussion
You should be able to look in your developer tools (firebug, chrome devtools) and see which styles from which stylesheets are messing things up. Or am I misunderstanding the problem?
I'm not a desktop applications developer so I was wondering if someone heard about an extension that actually writes on the file system. it would be great if you open firebug like extension and do some modifications e.g. adding CSS rules and they will be added automatically in the CSS file. how hard would it be to build such an extension?
The closest I've found is XRefresh which actively monitors files for changes, then automatically refreshes Firefox. It feels very similar to editing live with FireBug.
I think an extension like this would be possible, but it would be pretty hard to map DOM changes to a specific stylesheet.
You can could use the Web Developer Toolbar for this.
The changes you make in its CSS editor (CSS > Edit CSS) are applied to the page immediately (without saving to file), but it also has a Save... option, so you can overwrite the existing CSS file with it.
It's a pretty basic text field, though, that just displays the plain CSS file. It doesn't have any syntax highlighting nor organize the CSS rules according to the cascade etc. like Firebug does.
Also see this related question:
Why can’t I save CSS changes in FireBug?
Use Backfire. It's an open source solution I wrote that sends CSS changes back to the server and saves them. It has a working .NET server implementation example that is easily portable to any other platform.
http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/
I'm making a website that will have to render correctly on FF/IE6/IE7/Opera/Safari. IE6 came as a late requirement (when I had done all the other browsers) and it just has to be useable, not necessarily the same as on the other browsers. Now I'm tweaking it so that it's useable on IE6 as well.
To this end I've created another stylesheet in my theme called IE6_override.css. As you might have guessed, I want it to be applied only when the browser is IE6. Conditional comments would perfect for this.
The only problem is - ASP.NET renders a <link> tag for every CSS file that is in the theme's folder, thus including this file unconditionally on all browsers.
I would like to stick to themes because it's completely feasible that we might create more skins for our application later (if the customers desire that).
Is there any way how I can make ASP.NET exclude this specific .CSS file from its auto-including?
Added: Thank you for your answers! In the end I found a workaround. Due to some other styling problems I've asked about earlier, I'm forced to have a IE6-workaround Javascript as well. Thus I prefixed all my IE6-specific rules with a .ie6_dummy class selector and then removed it in JS upon page loading. :)
Yes you can... You can just remove the specific page header control in code behind. The css files are added automatically through theming, but u can remove them again after. Like for example u can put in the page load of your master file:
Page.Header.Controls.Remove(YourCssFile);
Or if you wanna have all the css files removed at the same time:
var themePath = string.Format("~/App_Themes/{0}", Page.Theme);
var removeCandidate = Page.Header.Controls.OfType<HtmlLink>().Where(link => link.Href.StartsWith(themePath)).ToList();
removeCandidate.ForEach(Page.Header.Controls.Remove);
I don't think you can. We stopped using the App_Themes folder for exactly that reason. This also saved us having to prefix every css file with a number so they load in the right order.
Indeed it's not possible to exclude a specific CSS file. However, there seem to be several workarounds located here. I'd suggest reading through those and choosing an appropriate solution (if any).
There are a couple of posts out on the web which seem to address your problem - looking for "Conditional comments in asp.net themes" I came across these which look like they may help:
How to take control of style sheets in ASP.NET Themes with the StylePlaceholder and Style control
Conditional stylesheets in Themes
The first one will also address the media issue with theme stylesheets as well.