0

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?

Improve this question

1 Answer 1

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks for the suggestions, the first two are just variants of what i already am doing, and three will not work since i do not control the original css.
You could always load the contents of the external CSS file via XMLHTTPRequest, parse that text or add selectors and then reinsert that content into the head into a style element. It's a bit different though in browsers. There are addRule and removeRule methods for stylesheets available. See e.g. stackoverflow.com/questions/2041495/… as a starting point.
My concern here is preserving the urls in the css, I am unaware of the logical equivalent of base for css files.
Via addRule or removeRule methods this should not pose a problem as you are using the browser builtin stuff.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.