I have a master page which contains the header and footer for all pages.
It invokes a css file ( master.css) which contains styles for pages : page1.aspx, page2.aspx, page3.aspx.
However, I now have another css file ( firstpage.css) for the page1.aspx alone. This must override the styles of the page1.aspx in the master.css (chaos!!)
Is there a tool that does this comparison for me? - search for the similar tags in the given 2 pages and merges them
Can I call the master.css for all other pages besides page1.aspx?
If you include the firstpage.css after master.css, and your css is well structured, the contents of firstpage.css will override those of master.css.
If you have very specific rules in master.css you need to ensure a higher selector specificity value for the same rule in firstpage.css. You can read more here:
http://www.w3.org/TR/css3-selectors/#specificity
http://css-tricks.com/specifics-on-css-specificity/
As a last resort you can use !important in your page specific rules. However, this is probably going to cause you even more pain in the future.
If there aren't many pages on your site, you could define a content area for css files and specify on each page which styles to reference. If you have 100 pages this could be tedious though.
If this page is very different, you may consider not using master page.
Also, take into account that styles can be overwritten so having both css files on the same page could provide desired result if styles are defined properly.
Cascading stylesheets are designed to work in a cascading manner. However, you can create a content placeholder with default content in master page. This can contain master.css that you can override in your page with firstpage.css. Personally I would design a common css file for all pages within a site and then have one or more "page specific" css files that can override and add new styles.
You could do it this way if you don't want to use any of the styles from site.css. In Site.master where you have your current site.css reference, replace that with: (You'll need to change about.aspx)
NOTE - this is potentially bad because you might end up with CSS duplication if you completely remove the reference to site.css and then decide you need some of the styles, and have to add them to the new stylesheet.
<%
string sPagePath = System.Web.HttpContext.Current.Request.Url.AbsolutePath;
System.IO.FileInfo oFileInfo = new System.IO.FileInfo(sPagePath);
string sPageName = oFileInfo.Name.ToLower();
if (sPageName == "about.aspx") { %>
<link href="~/Styles/about.css" rel="stylesheet" type="text/css" />
<% } else { %>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<% } %>
Getting the current page name code from - https://stackoverflow.com/a/1833313/2470724
EDIT
It also depends on what kind of styles you want to override, if it's text etc, then you could just add a class to your body content, and then style each page accordingly.
You have the following options:
The best way to do it would be to pull out the style definitions from the master css which you want to be duplicated and put them in a seperate stylesheet. Then you can do conditional statements in the head to apply the relevant stylesheet for the appropriate page.
You could also put the duplicate sylesheet that you want to apply after the master css in the head or on the page itself (which would obviously be after the head), this way the styles would be overridden. You should note that this might not work well across all browsers specially IE.
You could have !important next to every style you wish to override but this would be a lot of work and again you might run into some cross-browser compatibilty (read IE) issues.
The last option you have is to apply styles to the elements using javascript/jquery after the document is loaded. This will definitely work but this would again be a lot of work.
Read option 1.
"StyleSheetTheme" is what you are looking for. Take advantage of the Theming support of ASP.Net instead of applying stylesheets separately to all pages. If there is a page you want to be styled differently, then disable "theme" in its page declaration.
EnableTheming="true" / "false" in the page declaration
and styleSheetTheme="theme_folder_name" inside "pages" element of web.config
Related
I have a 3 step process:
Insert widget's HTML into the page.
Insert widget's style into the page.
Read some CSS properties from some elements, and based on values set some other properties.
And everything works fine. Except in some rare cases at step 3 the styles (inserted at step 2) may not be applied yet. This usually happens when a lot of stuff loading and gets initialized on the page in parallel with my code.
I can't extract a simple reproducing example (codebase is very very complex).
My question is: is it guaranteed that after styles are inserted they are immediately applied? If not, are there any APIs that would allow me to run some code after styles applied?
I couldn't find anything about this online. So I would very appreciate if someone could direct me to anything on the subject.
The style insertion looks something like this:
var style = document.createElement('style');
style.setAttribute('type', 'text/css');
style.appendChild(document.createTextNode(css));
document.getElementsByTagName('head')[0].appendChild(style);
Seems like <style> content is not applied until every <link rel="stylesheet" /> before it in DOM is loaded.
It may work in this way because styles are dependent and rely on order (if there are several rules with the same selector). According to that - browser developers may execute styles in their order in DOM.
Try to wait before adding your style tag:
till window.load event (for testing)
till all stylesheets are loaded (in production to reduce delay) like here How to determine if CSS has been loaded?
P.S. I haven't tested that
Like any other dependencies, CSS files needs to be fetched/parsed/painted. It's difficult to really know exactly when it's going to be downloaded and used.
I think your edge-cases are when it hasn't downloaded fast enough. Would it be possible for you to have the CSS ready to go and use a class on the body to apply the CSS when needed?
So on my websites I need to make sure that everything still works even when JavaScript is being blocked, which means that things that I want to hide until someone clicks on something have to be shown with CSS and then hidden with JS, which makes it look glitchy when the page is loading because the JS files are always loaded after the CSS stylesheets.
Is there a way for JS style changes to happen before CSS is loaded? Like, stop the CSS from loading with JS, make the necessary changes, and then continue loading the other files, maybe?
If you really want to load your css-file after some code of your javascript:
1. Don't specify a href attribute of you css:
<link rel="stylesheet" href="" type="text/css" media="screen" id="my-style">
Add this in your code (may be the last line of your javascript):
$('#my-style').attr('href','style.css');
And your css-file will be loaded only after that line of javascript
Try adding a .js-enabled class to HTML the tag with an inline script at the top of the head tag. You can then have CSS hide the scripted stuff for you while the rest of the scripts load.
Updated answer (see comment below):
If JS is blocked, you need to either choose to detect this and serve content based on that, meaning backend code, or make use of another strategy such as <noscript>.
Original answer:
which means that things that I want to hide until someone clicks on something have to be shown with CSS and then hidden with JS,
I would always start with display:none or visibility:hidden (see elsewhere for difference between the two) in the css, and use the JS to reveal the element.
There are several ways to solve your problem. What you need to know is the difference between blocking and non-blocking content. Every script and css (media=screen) is immediately invoked. So if you put some css in there in your head, and append something with JavaScript later on, you indeed might seen it shortly in a 'non javascript' way.
To combat this you could have the objects initial state represent the html/css as if the JavaScript has been loaded. (Most ideally you would have serverside rendering, but for simpler sites thing isn't always needed). The downside of this method is that if you have an JavaScript error which prevents further execution, you have a broken state. And if you also neglect the few people that have JS disabled, you're save and rendering looks fine again. Furthermore! You can improve on your sites performance by loading the scripts asynchronously.
If you want a different approach, you can add a className to your html eg <html class="noscript">. Then when all your JavaScript has been loaded, you remove the className. This way you only have one redraw, and it looks progressive. There is a downside to this approach though, since bad performance becomes increasingly visible (since the first time your browser rendered and the time the JavaScript is done could take a while). So ussually this method is not preferred (though looks better than the first for non-js/js disabled browsers).
Basically what i want to do is grab all CSS that is referenced in an external stylesheet e.g <link rel="stylesheet" href="css/General.css"> and append it to any existing styling for each HTML element in my page. (make all CSS inline)
The reason for this is because i need to call .html() to grab a div and send to server to be made into a PDF. The downside with this tool is that it only recognises inline CSS.
Are there any ways to do this?
Edit: the question that was linked to mine as a "possible duplicate" spoke only of putting everything in the <style> tag. while that may be useful, im mainly concerned with loading into the style="" html atribute
In the past I've used window.getComputedStyle(element); for this purpose. It will return a map of all styles applied to the element, which you can then loop across and apply as an inline style. I wouldn't apply them to the actual DOM if you can avoid it (just create a document fragment / concat it in the style of the string you're sending up). It will be a performance nightmare to actually apply that many inline styles to an element.
Using computed styles still might not be enough, as there are vendor prefixed styles in the user agent stylesheet. If you send up markup from Firefox to PhantomJS(webkit), you will obviously not get the same looking element.
I have an entire page that will be PHP included onto an already established website. The website will include my site after the <body> tag on their own site. I do not have access to the <head> section of the page. I am including my <link> and <script> tags in my page (so after the <body> of the parent page). I can change the title dynamically with javascript after the fact.
However, the CSS from the parent page is causing some interference with some of my elements that aren't explicitly styled. I would like a blanket way to stop CSS from cascading to my own elements without using an iframe. Is there a CSS reset that will work? How about a javascript solution? Would HTML5 scoped styles fix this issue eventually?
I can't give you a good answer. The closest I can think of is to take one of the CSS Reset scripts and apply them to your root <div>.
It's still a long list of things you're cancelling but at least it's maintained by someone else...
You can try by wrapping content and appending CSS rules only to wrapped content, for example.
CSS
#wrapper1 .className{/* RULES */}
#wrapper1 div{/* RULES */}
#wrapper2 .className{/* OTHER RULES */}
#wrapper2 div{/* OTHER RULES */}
HTML
<div id="wrapper1">content 1</div>
<div id="wrapper2">content 2</div><!-- CONTENT YOU APPEND LATER -->
Another solution, not the best1 is maybe to use jQuery and replace all class-es or ID-s in body when content is changed, here again you should define CSS before.
There is one thing I must note, in my experience appending HTML as pure text (like innerHtml='html') get right CSS rules in Google Chrome and Mozilla, but on IE you need to use proper JS and append content differently to get those CSS rules used. By different I mean like creating element should really be creating new element with JS function.. that was before I am not sure anymore if this thing is changed.
Is there any way to add separate CSS and Javascript files those work for only particular section of a page and don't affect any other part of the page?
I am attempting to add the following to my web page:
http://codecanyon.net/item/sliderjs-js-framework-for-slider-development/full_screen_preview/1617841
When I used it, the CSS and JS files affect my whole web page.
I don't want this to be happened. I want to add a slider without changing my site totally.
Is there any way to get it working without adding all of the slider's CSS and JS code to my webpage?
Its possible to do this using an iframe as a sort of sandbox. But it begs the question, what are you trying to "protect" the page from? If you have name conflicts, you're best fixing those rather than sandboxing the slider.
If you want to have JS and CSS specific to a certain part of a page, and you don't know JS and CSS, the only way is through iframes.
If you've made the CSS yourself, you can just add a prefix to apply it to on certain sections. Not like this:
p {color:pink}
instead, add a prefix, like this:
#menu p {color:pink}
#content p {color:black}
Your JS should only apply to elements based on id, unless your using something like jQuery. If you're using jQuery you can apply changes only to certain elements in the same way as CSS. eg.
Not like this:
jQuery('p').slider();
instead, add a prefix, like this:
jQuery('#content p').slider();
You can use iframes for this. Create a new page with your CSS and JS file included in it and call that page from iframe.