We're writing a Chrome extension that creates information pop-ups. We would like to be able to toggle the font-size at the user's request at runtime.
The strange thing is, the stylesheet, which is included in the Chrome extension manifest, does not show up in the page head list of stylesheets.
I presume the stylesheet must be referenced using a chrome.extension.getStylesheet or some such operator.
Once we have an object pointer to the relevant stylesheet, it is our intent to adjust the font-size of the corresponding element.
Any help?
Sam
The stylesheet injected through the manifest file cannot be edited via an API.
If you want to dynamically change the value, use chrome.tabs.insertCSS (see optionally inject content scripts for a breakdown of the several ways to call insertCSS in time) or chrome.declarativeContent.RequestContentScript. The latter does not accept arbitrary code yet. Luckily, the number of sensible font sizes are limited, so you could hard-code different stylesheets for (e.g.) font sizes 7 up to 40 and be done.
If the stylesheet is only useful for a few pages, and the value is dynamically calculated in a content script, then creating and injecting a <style> is also a good option.
If you use exactly the same CSS selector, then the last stylesheet will always take precedence over the previous one (if the selectors are different, then CSS specificity will determine what happens).
Related
Also what is the best way to hide the elements from the DOM so that the attacker won't be able to change the css property or html attribute in order to access the element. I know we can use React or Angular to develop website and it is easier to hide or display elements. But I want to know in pure HTML & JS what is the best way?
Anyone can just use the browser console and find all elements with for example:
document.querySelectorAll('*');
It does not matter if elements are hidden with CSS.
Even if you encrypt your HTML you will have to decrypt it to show it to the browser. Then the above code still finds all the elements.
Any code you have can be deactivated by setting a breakpoint and rewriting it in-browser using the developer tools.
Even if you replace document.querySelectorAll and all like them with an empty function, developers can still just add jQuery or any DOM querying engine and find your elements that way.
Any code you can use to hide or show elements can just be executed using the browser console if someone spends the time understanding your code.
How else would you debug or test it?
Angular, Vue etc. does remove elements from the DOM but you should never expect this to be a security feature! A hacker can easily set a breakpoint anywhere in your code, inspect API results from the Network panel, go into the components' code to find out what HTML they would be rendering and much more I haven't started to mention.
To implement security you want to only have in the browser what the user needs to see.
There is no way around it.
DOM, stylings, scripts, assets, etc. can always be accessed using developer tools.
As for the question in your question title:
style attribute styles have a higher specificity than CSS from file (or style tags)
CSS from file (or style tags) with !important has higher specificity than styles from the style attribute
style attribute styles with !important have the highest specificty
So !important just overrides specificity if you want to look at it that way. Other than that you should read about CSS Specificity.
Both are same. If you store your value from html hidden or css hide. Anyone can find out them.
So if you are using html , js & css and want to pass value as hidden than disable developer tool and shortkey to open it by this way you can protect your data or else use any encryption method for that.
I am dynamically building style tags which have classes and css data inside of them. It seems after looking at it, that IE will not rerender items with those style classes. Inline still works, but going to a class, and changing values inside of those classes does not update all tags WITH that class
I was curious if there is a javascript command i can use in IE to refresh/rerender the page based on the current style tags on the page?
It works in chrome, but it seems that IE doesnt do this rerender.
This is a big issue since the users can define their own styles on a page i created, so there are 2 concepts at hand: On load: loading the last set of style tags (during js runtime) and the edit / save of the ones created in this session.
After looking into it with IE, it seems that adding style tags with Rules in it, does not mean that these rules are going to applied to the document.styleSheets run-time CSS.
On the contrary, it seems that the css is scraped first. so when it is loading controls, has something to look at for rendering.
To Get around this, I have not seen any "repaint" functions in JavaScript as of yet, but i did notice that you can actually change the rules of the CSS in the run-time, by looking at document.styleSheets object
You can add rules dynamically via JavaScript which will take effect immediately.
With that said, it might be smart to create a setter/getter for this so everything is smooth and simple to understand. The reason for setters and getters is that you can easily find the objects that you added (Just in case you needed to remove, modify, or append to them later.
The MS page i found is: http://msdn.microsoft.com/en-us/library/ms533039(v=vs.85).aspx
Although is it archived as of 2011, i felt it relevant.
If anyone has more up to date information, i would appreciate it, but that is what was found on my end.
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
Initial Research
I am aware of using .css() to get and set the CSS rules of a particular element. I have seen a website with this CSS:
body, table td, select {
font-family: Arial Unicode MS, Arial, sans-serif;
font-size: small;
}
I never liked Arial Unicode as a font. Well, that was my personal feel. So, I would use Chrome's Style Inspector to edit the Arial Unicode MS to Segoe UI or something which I like. Is there anyway, other than using the following to achieve the same?
Case I
$("body, table td, select").css("font-family", "Segoe UI");
Recursive, performance intensive.
Doesn't work when things are loaded on the fly.
Case II
$('<style>body, table td, select {font-famnily: "Segoe UI";}</style>')
.appendTo("head");
Any other better method than this?
Creates a lot of <style> tags!
Ok, if:
Personal Preference
Then use user styles CSS. According to priority, user styles takes precedence above all other styles. Next comes inline-styles, then !important styles, then specificity, then default browser styles. If it's just for personal preference, pack-up a custom CSS with you and a browser that supports it.
You are the developer
Then don't do this in JavaScript or user scripts. Go down to the problem and change those styles! You are just making the browser work more by actually making it parse stuff you don't want. Since you have access to the code, change the styles instead.
However, since your site could be a public site, style it like genericly for everyone. It's not only you that's viewing the site.
Not the developer:
The best way I can think of (and already did this before*) is to remove external stylesheets from the page and replace them with modded versions of your own liking. That is taking a copy of the original CSS file, change what needs to be changed, and then load it via JS by creating a <link> to that external file, or load the contents via AJAX and put them in a <style>. However, this approach is riddled with obstacles. <link> does not have an onload event so you won't know the external CSS was loaded (there are crafty workarounds though) and AJAXing CSS contents imply that your CSS is in the same domain or the browser and server supports CORS.
Another way you can do it is to have JS peek into loaded stylesheets and modify their contents. This is a more JS intensive work since JS looks for your definition to change in a pile of CSS declarations. This is a safer bet, however, I believe not all browsers can traverse CSS styles or at least do it differently across browsers. Also, if you got a large stylesheet, you'd be parsing it every time.
As you said, .css() would be recursive. True, because it applies inline styles to each affected element. This is good in a sense that inline styles are higher up in the priority so whatever is placed using .css(), you are almost sure that they will take effect. However, it's more work intensive since it involves the DOM now.
* The library I created does not remove existing styles, it just loads and unloads predefined styles declared using it's API
Have a look at:
Quirksmode: Change CSS
Totally Pwn CSS with Javascript
Is the only way to change a style to do it per-element in JavaScript? (possible duplicate)
I'm afraid there is no library for that, I really would like to see one...
Is it possible to embed some code in Javascript or CSS for a particular webpage to disable (not load) the user agent style sheet that comes with the browser? I know that I can override it by CSS, but that creates lots of overriden specifications, and that seems to highly affect the CPU usage when browsing the page. Especially, I did something like *{margin:0; padding: 0}, which seems to be expensive for rendering (particularly the * selector is expensive). So, I do not want to heavily override the user agent style sheet but rather disable that in the first place if possible. Is this possible? If so, how? I am especially using Google Chrome, but would expect a cross browser way if possible.
I wonder whether there is a way to disable user agent style sheet directly in JavaScript. There does not seem to be any direct way, since document.styleSheets does not contain the user agent style sheet. On the other hand, Firefox Web Developer Extension has, in the CSS menu, an option for disabling Browser Default Stylesheet.
Anyway, there is a markup way, though I’m not sure whether you like its implications. To start with, it does not work on IE 8 and earlier (they’ll show just XML markup, not the formatted content). But modern browsers can handle this:
Use XHTML markup but do not include the xmlns attribute in the html tag.
Serve the document as application/xml.
For elements that should be handled with their HTML semantics (e.g., input creates an input box), use the xmlns="http://www.w3.org/1999/xhtml" attribute on the element or an enclosing element.
Simple demo.
This means that outside the effect of xmlns attributes, all markup is taken as constituting pure, meaning-free, formatting-free (all elements are inline) elements. They can be styled in your stylesheet, though.
But this way, you cannot both keep the HTML cake and eat it. That is, you cannot get HTML functionality (for form fields, links, etc.) without having user agent stylesheet being applied to them.
Use a "reset stylesheet" - this one is good: http://html5boilerplate.com/
It's not possible. Just create a css file called by most of the people 'reset.css' which includes all the css code used to override user agent's styles
You can use something like reset css (http://www.cssreset.com/) to reset all browser styles..
or, what i prefer, use normalize css (http://necolas.github.com/normalize.css/) that normalizes the css without resetting all styles like list styles on ul, li etc. (reset.css would do that)