开发者

Is there a way to have a CSS selector apply to a specific host? (For my custom browser stylesheet.)

开发者 https://www.devze.com 2023-02-17 19:34 出处:网络
I want to apply styles (edit:in my browser\'s user-defined stylesheet, a local file on my machine that let\'s me customize how other people\'s websites render for me) to a specific site, but the selec

I want to apply styles (edit:in my browser's user-defined stylesheet, a local file on my machine that let's me customize how other people's websites render for me) to a specific site, but the selectors on many web pages are often generic (and obviously out of my control, since they're not my websites.)

If I have to use very general se开发者_JAVA技巧lectors (eg. #box) to customize a given website, that style might unintentionally affect other websites that have that same generic selector. Is there a way to specify a domain with a selector so I can my custom styles for each website separate?

I also found @-moz-document which looks good, but is Mozilla-specific and I use a WebKit browser. Is there an equivalent?

@-moz-document url(https://www.example.com/decrypt.php) {


Is the CSS hosted on a server that also allows you to script? Have you tried writing a server-side script to generate the correct CSS rules depending on the host that's serving the page?

Edit added March 30 2010:

You might be better off using the Greasemonkey extension to do this. It's far more powerful than user-defined stylesheets since you can use JavaScript, and adding domain or page-specific rules is as easy as adding special tags to the comments in the header. Greasemonkey was made specifically for handling your type of problem, and while you need a plugin to run Greasemonkey scripts in Firefox, Chrome ships with Greasemonkey support built-in.


If you can modify the HTML using javascript, there would be a way. It could go something like this (using JQuery):

var hostId = // detect the id of the host
var highLevelElement = $("body");  // or a different element that holds everything
highLevelElement.attr("id", hostId);

Then, in your CSS, you can do this:

#Mozilla div.Whatever { background-color: orange; }
#IE6 div.Whatever { background-color: red; }
#IE9 div.Whatever { background-color: green; }
// etc.


Consider installing an ad blocker such as uBlockOrigin, then writing some custom filters. You can add these custom filters in Settings -> My Filters.

examplewebsite.com###ExampleId, .ExampleClass:style(background-color: yellow !important;)


Uhm, I think php would be the most rational solution, and actually very easy. Use php to decide what/when to do and echo certain css files in certain cases.

If you need more help, tell us more about your problem and I'll write the complete solution for you.

0

精彩评论

暂无评论...
验证码 换一张
取 消