Is there a way to wipe out all CSS rules once style sheets have already been loaded?
I have to use a proprietary JavaScript library (ESRI's ArcGIS Server API) which is built on top of Dojo. I make extensive use of Dojo's widgets and would like to use Dojo's claro theme but unfortunately the ESRI library mungs up the CSS by loading in off-site CSS files (and probably CSS rules hard-coded in the JS). This ends up mangling the Claro theme.
So many Dojo widget CSS classes get rewritten and new rules get created that just wiping out all CSS and reloading the standard Dojo stylesheets seems easier/safer.
Something like the following would be nice:
* {none}
but I figure I'll have to end up using either Dojo or jQuery to accomplish this.
check out this bookmarklet called RefreshCSS by Paul Irish:
javascript:(function(){var h,a,f;a=document.getElementsByTagName('link');for(h=0;h<a.length;h++){f=a[h];if(f.rel.toLowerCase().match(/stylesheet/)&&f.href){var g=f.href.replace(/(&|%5C?)forceReload=\d+/,'');f.href=g+(g.match(/\?/)?'&':'?')+'forceReload='+(new Date().valueOf())}}})()
It refreshes the CSS stylesheets on a page, without refreshing the page itself.
I think you could do some alterations to it and get it to do what you want?
Another approach using jQuery that might work is to run this once the page has loaded:
$('head link, head style').remove();
Nope. Sadly, such a thing does not exist.
The answers to these related questions give pretty much the rundown on what is possible in terms of workarounds.
Is there a way to “sandbox” an html block away from its page's CSS without using iframes?
Reset CSS for a certain area of the page?
prevent meyer reset css to mess with dynamic content
How to reset css in middle of html document ?
There is always document.head.innerHTML = ""; But it really cleans house so you have to store away any scripts,metatags, titles or whatever you want to save and add them again.
Related
I want to create a site like any other. I want the "thing" at the top (home downloads and stuff) to be on all my pages. Do I need to copy and paste the same code over and over again?
put the common part in your header/some specific file and use ,since you will be using header/some specific file on all pages so the desired content will also be loaded.
Learn Psd to html conversion For batter understanding the divs and styles modification and customization.. your divs and tags can be easily maintained with your stylesheet by giving id and classes you can also give one dive multiple classes and ids,
you are talking about master page i think
that is one in style and in that page you're showing other page, likely we can say one template page and many functionality see this and
see this
As far as I'm concerned pretty much all the intelligent options for solving this problem are mentioned in this question
Use a server-side template (e.g.php), use a client-side template (e.g. handlebars), use javascript, or you could use a static site generator like Jekyll.
I am using a python library to convert HTML page into PDF.
It does it correctly, except it only handles inline styling. It does not reflect the styling applied to DOM elements using external style sheets.
So, as a solution I am thinking of adding those CSS styling from all the external CSS stylesheets into the head tag of the html file and then send it to get converted into pdf.
But, I am not sure how? Can anyone give me any ideas or atleast suggestion on how to go around fixing that? Or, if they know a better solution.
Much appreciate
Is the python running outside or client-side? You can examine the solution here # http://www.xportability.com/XEPOnline/FOTestSuite.html. While this does a lot more, you can reach through that page to the included Javascript. Look for flattenstyle.js for inspiration.
Because our handling is different, we actually copy a selected div element to another hidden div and "flatten" the style by extracting styles we want. What you could do is run such a javascript on page load and save out the div and not destroy it, then you have most all the print styling in the HTML.
The tutorial "Creating a custom widget" proposes a directory structure for a dijit widget, that includes 'css' directory. Everything else in the example is dymanicly loaded using AMD, but not CSS. The authors write:
Now, with that in place, we just need to add the CSS to our head on
our page, and we have a nicer looking author list!
However, does Dojo/Dijit has any mechanism that doesn't required putting all possible CSS stuff in HTML HEAD or some aggregating CSS (imports)?
It is possible to simply add the section to the header, but it requires checking first, if it was already loaded, and probably waiting for CSS to load. Is there some build-in solution for making that things?
See http://davidwalsh.name/amd-xstyle and https://github.com/kriszyp/xstyle#amd-plugin-loader
A brief example of usage, straight from the docs:
define(["xstyle!./path/to/file.css"], function(){
// module starts after css is loaded
});
There have been some issues in the past when combining this with Dojo builds. However, it appears #kriszyp has now documented this stuff fairly well - https://github.com/kriszyp/xstyle#building-with-amd-plugin
Google PageSpeed Insights is flagging this as something I should fix - I've read the guidance on Optimising CSS Delivery at https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery but I'm confused at what the best practice is, and also on which resources are render blocking and which aren't?
Is Google suggesting removing stylesheet links from the page head and replacing with inline styles to make something render, then using Javascript to trigger an external stylesheet to load when window.onload fires? Won't this just delay process of arriving at the 'correctly rendered' page - isn't it better for the browser to start downloading the CSS as soon as possible?
Yes, that's pretty much what the page you reference is recommending. Put the minimal amount of CSS (as long as it's a small amount) directly in the HTML markup within a <style> tag. Then include the complete set of styles at the end of the document. (In the example, it's not actually loaded via JavaScript per se; rather, the link to the external style sheet is placed in a <noscript> tag. That's a bit of a hack, but it gets the job done. You could also request the stylesheet via AJAX and inject it using JavaScript directly.)
This approach only works if you can isolate the minimal CSS needed for your page and that amount of CSS is reasonably small. If, for example, you're building a single page web app, then many of your CSS rules might be for parts of the app other than the initial view. In that case, those extra rules can be put in the external style sheet. Or maybe you have a set of rules strictly for pop-up dialog boxes. Those rules can be postponed as well.
If you can't really separate your rules into those that are needed initially and those that aren't, and if your minimal rule set is large, you can't take advantage of this approach.
Just created a javascript widget that injects the content on the 3rd party site using DOM. I include a css file with the widget. However, I keep running into instances where the external pages css will interfere with the widget css and add something weird like a background image or border too my widget elements that I don't have defined in my css. Any easy way to go around this? I've already added
!important
to all the css rules. Thanks!!
As in my opinion, I, with no doubt, say that in the external css, not the widget css, have added something that would add the border or background to ALL divs. You might want to check that out.