I control styles for a set of pages in a common utility method. What i would like to do is check the .css file to see if a css class exists; if it does then pick it, else pick the default.
say PageA.aspx and PageB.aspx both use styles.css that contains .default{...}
if i wanted PageA.aspx to be styled differently, i would just add another entry in styles.css .PageA{....} etc. At runtime, it will search for a css class named PageB, since it does not find it, it will default to the default class.
Question is how do i check the .css file to find out if a particular css class exists in the code-behind.
Thanks
The simple way would be to apply the default style, and then the pageA style. The browser should ignore the pageA declaration if it doesn't exist.
However I think the Right Thing™ would be to handle this in ASP or use separate files as Seb suggests.
Many questions in SO ask for a particular solution but don't state the real problem behind, so it's difficult to answer properly.
But I suspect what you're asking could be achieved far easier by splitting styles in 3 different files and including just what you need:
styles.css: common styles for PageA and PageB
styleA.css: rules applying only for PageA
styleB.css: rules applying only for PabeB, but with the same name used in styleA.css
Then, you include styleA.css or styleB.css depending on which page you're showing and that's it.
If this doesn't answer your question, then you might post what's your real problem instead of the solution you're trying to code - which might not be the best solution.
BTW: I don't think there's a way to know which CSS classes are defined; you just set and unset them.
You could load the css file using a StreamReader (since it is a text file) and search it line-by-line using the String.IndexOf() method, but that wouldn't be very efficient for every page load.
Your question doesn't make a lot of sense, but since CSS is not a programming language, if you want to know what's in another file, you're going to have to do it somewhere else.
Related
I am working on service which allows third parties to upload HTML snippets. In some of these snippets there may be links to CSS files or inline CSS. The service has it's own CSS files.
Is there any way, besides iFrames, which would allow me to indicate that specific CSS files are only to be applied to the specific HTML elements and not the whole page?
I guess you could download the CSS-files, prepend some #unique-container-identifier to all rules within it and just embed the markup into your page, inside a container with the ID previously assigned.
That'll leave you with a problem of your own, "real rules", ruining things inside those boxes though...
Unfortunately no solution I've found on the interwebs seems to work for me, so I just had to scrap the idea of using scoped CSS.
I am building an app on top of webkit, I need to modify a CSS file (edit a selector), which I can do once the page is loaded using Javascript. In my particular scenario I may load the page many times and I would like to mutate the CSS in the cache (using Javascript, as opposed to hacking webkit). Any ideas?
Without entirely understanding your use case I see at least three cheap and fast methods to override some styles:
use one of the many bookmarklets out there (e.g. this one by Paul Irish) to play around injecting styles or
use a short snippet of javascript ondomready to inject a stylesheet with selectors and styles into the head of the document (similar to the bookmarklet above) or
define a specific enough CSS selector and simply include an inline style element in your document (which I would not suggest)
All three methods are basically the same. Depending on what you have, are able to edit or want to achieve either method may be more suitable.
User stylesheets or extensions like Stylebot for Google Chrome may be another possibility to look into.
Weird stuff like loading referenced stylesheets via javascript's XHR, get the content of the file, modify or inject stuff and reapply the styles to the current document are possible as well but probably not what you're looking for.
i would like to make 'skinnable' a web site written in asp.net...
I explain: for example, i have a 'div' element, and i would like to define a background-color using a variable, not a fixed value.
How can i do ?
Css ? Or other tecniques ?
Thanks
CSS is exactly what your are looking for.
Keep in mind that when writing your classes and ids you should refer to the element semantically. It means you should NOT choose your names depending on the visual representation of the element.
Wrongs:
.blue
boxOnLeft
Goods:
.comments
related
To be able to skin your page, you'll just need to change your css.
Almost all is possible using CSS.
ASP.NET has built-in functionality for Themeing and Skinning:
ASP.NET Themes and Skins - MSDN
You could always roll your own as well. The general idea is that you have a seperate set of CSS for each Theme/Skin and then generate the references dynamically based on what Theme/Skin the user selects.
You might look at .Less and t4 template package for it:
http://haacked.com/archive/2009/12/02/t4-template-for-less-css.aspx
A lot of good notes in the comments of that link as well, including a visual studio addin.
CSS doesn't have programming variable capabilities that you hope to achieve.
However, there is a way to do this with PHP (I know you're looking for .NET solution here, but bear with me)
Basically, you add a line of header text "", save the css with .php extension, and then load the .php in html as css (""). Then you can manipulate variables with PHP.
I don't know anything about .NET, but I believe it should be possible in a similar manner.
I'd been reading up on themes in my ASP.NET book and thought that it could be a very handy solution, then I met some problems.
The theme picks up every single CSS file in the folder
If you want to use reset styles (where ordering is important) the order of imported stylesheets is not guaranteed
Your master page would not explicitly indicate what style is being used, only the rendered page can tell you that unless you dig into your web.config
Styling web controls using the theme file is... well... stupid? You can simply do this in your stylesheet. Granular control should be at the HTML level, should it not?
How do you specify print stylesheets without having all styles in a single stylesheet?
I'm wondering as to whether they're actually worth using at all. Is there any benefit? Are there any major sites using them?
EDIT
Just to clarify slolife's last point. If I had two stylesheets, one called print.css and one called main.css and I used ASP.NET themes, how would it know that print.css was a print stylesheet? In regular HTML you use the media type in the tag itself (i.e. <link rel= ...>) but the themes wouldn't know this, so it would just get included as a regular stylesheet.
I like using themes, but as Raj pointed out in his answer, URL rewriting can cause problems. My search for some solutions to that is what led me to your question. But I'll add my opinions in anyway.
I'll address some of your bullets from above as to why I think themes are good:
- The theme picks up every single CSS file in the folder
I guess you are looking to apply only certain stylesheet files to certain pages. Yes, themes takes the shotgun approach here, so that's a problem. But you don't have to put all stylesheets in the the theme folder. Put your specialized ones outside of it and they won't be included automatically. But I think it is nice feature to have the common/site wide ones included automagically.
- If you want to use reset styles (where ordering is important) the order of imported stylesheets is not guaranteed
I think you can guarantee the order by the way you name the files, so they are numerically and alphabetically ordered. Maybe not an elegant solution, but not horrible.
Personally, I have a build step that combines and compresses all of the *.css files in my theme folder into one single style.css file, and since I control that build step and the order that the files are combined, that doesn't affect me.
- Your master page would not explicitly indicate what style is being used, only the rendered page can tell you that unless you dig into your web.config
You can change the theme via code and in the <%#Page directive
- Styling web controls using the theme file is... well... stupid? You can simply do this in your stylesheet. Granular control should be at the HTML level, should it not?
I agree that applying style attributes to controls via the theme doesn't seem to be a best practice. But I love the fact that I can define image skins in the theme's skin files and don't have to cut and paste Width,Height,AlternativeText,Align attributes for common images that I use lots of places throughout the site. And if I ever change one of those images, I can fix the attributes in one place, rather than all over. I also can created skinned controls with a certain list of css classes applied, which seems handy to me.
- How do you specify print stylesheets without having all styles in a single stylesheet?
I have a Print.css file that starts with #media print and that defines print styles for my site. Why do you need to put them in one stylesheet?
IMHO, asp.net themes are absolutely USELESS
try implementing url rewriting with an app which uses themes and see them break straight away
basically, you can achieve the same thing writing few lines of code in asp.net and multiple css folders. i am yet to come across any developer / company who has been using themes
when asp.net 2.0 was launched, there was a big hype around themes but my personal opinion is its simply not worth it :-)
Use themes to change control attributes ONLY.
They were bad designed for working with css.
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.