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.
Related
The browser I'm using, qutebrowser, allows me to set a CSS file that applies those styles to every web site (but doesn't allow you to set it per page/domain, as far as I can tell), so I downloaded a dark theme CSS stylesheet from solarized-everything-css, but it seems the result on some website is unsatisfactory.
Therefore, I'd like to know if CSS offers a way to not apply a sequence of rulesets (in my case it'd be the whole stylesheet) on some domains. Something long the lines of
#this-web-site-is-NOT-in-the-black-list-in("list.txt") {
/* the content of the dark theme CSS goes here*/
}
If it was possible, then I would add each problematic site to that sort of blacklist.
CSS itself cannot do this, because CSS is designed to apply only to a site from which it is loaded within the browser environment. Normally this happens by looking at resources listed in an HTML file's <head>, but can also happen from JavaScript injection via userscripts/addons/extensions a user has installed in their web browser.
So you need to use a 'user' style for this, which means you need to use a web browser that supports this. If the browser you're using (qutebrowser) does not allow you to set specific domains/URLs, then this will not be possible for you without creating your own user script (written in JavaScript, presumably) to apply this functionality on top of what the browser supports natively.
For an organization I work for, there is a common stylesheet that all web applications are supposed to use.
For example, they expect some elements to be in thead.table-sortable th.table-sortable-sorted-down a:after to add a sorting icon. Now, in an Angular application, I use a component library (primeng) that has a simple element that just has the class .pi-sort-up for the same thing.
How can I map / copy /use part of the organization css into my application's css, to just copy the interesting stuff without requiring the complicated nesting on component (which I have no real control on anyway)?
We could use css, sass, or even dynamically generate css rules in javascript. I'd prefer avoiding changing the DOM at runtime for all matching components, as it could be quite dynamic.
EDIT: A build-time solution (e.g. with sass) isn't the preferred way, but could be acceptable if nothing else.
If the company style sheet is readonly for you, there is not much you can do at all. You will have to load the whole document wherever you need some parts of it. A possible "workaround" to avoid that would be to write a backend program (in PHP or node.js) which opens the company style document and looks only for a specific CSS rule which it then copies and pastes to some other style document.
However, this approach would be very dynamic as well and you needed to execute the backend script with each request, for the original company style sheet could change always... If your company could agree, you should use a preprocessor like SASS or LESS and define a structure for the company style, dividing it into several documents that can be loaded on purpose.
So I've recently started making more use of EJS templates in my website and so I've done things like broken out the top nav bar and other things into their own template. Is there a standard practice for how to organize CSS (or more specifically SCSS) with that? Should I just make a matching SCSS for each template with just the styles for that template and add the <link/> in each page that uses the template? Or just I just add <style/> tags to the template itself with the CSS in there. Is there a standard pattern for this?
Good question. I think the answer is "no", there is no universally best or accepted standard.
The advice my "work-mentor" always gives me is good advice: he says "do what will be the easiest to maintain". This would depend on your project. I can think of a couple general strategies:
One stylesheet per template
That is, in a way, the simplest suggestion. Probably the easiest to develop, and each page will bring the minimum needed styles.
However, this makes reusing styles pretty impossible. You won't be able to plunk in a <button class="myclass"> into any template without reincluding the styles for .myclass in every sheet you need them in. Also, if you ever want to automate your style sheets (minifying or concatenating them for production, etc) as is common practice, it won't be very possible from here.
One more downside, you might get some unexpected ordering effects. Like if your "widget.css" ends up being added to the DOM after your "article.css" it may override styles in a different way than it would have if it had appeared earlier in the DOM.
All styles on every page
Again, this is nice and simple. Every page has all stylesheets (or maybe just one giant sheet) included. You can link to it once in your outer layout template. It will be easy to automate minification, etc, and there will never be any surprises related to the order stylesheets are added in.
The obvious downside is lots of unused styles brought to each page. But css is pretty "cheap" in terms of size, so this may not be such a bad downside.
Somewhere in between
Include some styles on every page, and make some either page-specific or template-specific. Realistically, this is probably what most apps end up doing.
You can universally include utility styles meant to be reused (ex button.bigred, form.orderform, etc), as well as dependencies like bootstrap or whatever. I'd also advise including any styles you will need on more than half of your pages (ex styles for your navbar).
Other styles intended for one specific page can be added to that page directly via links.
last note
I try to avoid <style> tags in the html for a couple of reasons:
Lots of js libraries dynamically add or remove <style> tags to your DOM, so leaving that space clear for them avoids possible mistakes or overlaps.
They are a good way to add dynamic or user-managed styles to pages from within your templates. Keep styles that don't change in the stylesheets, to avoid possible mistakes or overlaps with yourself :)
I'm writing a Chrome extension that injects HTML into a displayed page. I want the injected HTML to have it's own style, protected from the CSS that may be present in the host page.
I've tried using conventional CSS, and still suffer from style corruption from the host page.
After watching the Polymer presentation from I/O 15, I was wondering if there are any new, Chrome-specific techniques that I can use to achieve this?
What you will want to look into is shadow-dom. This will enable you to create a widget/component (which would be your injected html). This would mean that the DOM tree for the widget/component is encapsulated and no external styles from the page will affect it. There is a good article on html5rocks covering this. You may also want to look into WebComponents. Bear in mind that this functionality is only available in the latest browser versions.
Two things that I currently use at my place of work are:
css-modules
react-css-modules
I use react at work, hence react-css-modules, but css-modules should work in your case. It's not Chrome specific, but we use them within the context of each component we build. Basically, like the docs state, a class of row would become something like table__row___2w27N. The breakdown of the built name is the filename of the CSS than the class name followed by a base64 hash of 5 char. I hope this helps.
One potential downside is Webpack would be required.
Here is an example of our component folder structure:
- component
- Component.jsx/js
- component.css/scss/sass
- component.test.js
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.