Different CSS based on URL

Question

I have to domains with the same name, one ending with .nl and one with .be. For example domain.nl and domain.be. They follow both the same general styling, but I wan't some elements have a different styling based on if it is .nl and .be. How can I achieve this without loading in additional css files?

Serve up a different stylesheet on both (the common parts can be in a separate file). Or serve up different HTML, for example with a class="domain-nl" or class="domain-be" on the body. Or if you hate your users, use JavaScript to check the URL domain and dynamically load a style sheet ;) — Thomas
– Thomas, Commented Jun 2, 2022 at 8:07

sid · Accepted Answer · 2022-06-02 08:20:15Z

3

If you're using plain Javascript, I'd suggest creating different CSS files for domains; adding just the differences in 2 different files, one for be and one for nl.

somefilename_be.css

{
    body: 'green';
}

somefilename_nl.css

{
    body: 'red';
}

All same styling should go in a common file like common.css.

Then you can load CSS file conditionally based on the domain.

if (window.location.host.split('.')[1] === "be")
    document.write('<link rel="stylesheet" href="somefilename_be.css" />');
else 
    document.write('<link rel="stylesheet" href="somefilename_nl.css" />');

Using JS Frameworks (React, Angular, Vue, Next, Svelte)

if (window.location.host.split('.')[1] === "be")
    import('somefilename_be.css'));    
else 
    import('somefilename_nl.css'));

edited Jun 2, 2022 at 8:20

answered Jun 2, 2022 at 8:10

sid

2,10710 silver badges11 bronze badges

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

6 Comments

sid Over a year ago

you can additonal differences of CSS in additonal files, that will work

DJS Over a year ago

I wan't to do it with Javascript and without loading in additional files. Is that possible?

DJS Over a year ago

Thanks, but it is not so handy because the differents in the styling will be minimal, so it is really necasarry not to make two different stylesheets for small differentses

Noam Over a year ago

CSS itself is not aware of the URL of the page, so it is not possible with only CSS - you need some script either on server side or client side. I suggest referring to different classes of some high-level element and set the proper class with JavaScript.

DJS Over a year ago

@Noam Thanks, how can you check the url for that?

|

Noam · Accepted Answer · 2022-06-02 09:12:23Z

2

If the differences are small, you can rely on a class on the root element, controlled with JavaScript. For example:

if (/\.be$/.test(window.location.host)) {
  document.documentElement.classList.add('variant-be');
}

.variant-text {
  background: yellow;
}

.variant-be .variant-text {
  background: lime;
}

<div class="variant-text">A text with two possible backgrounds</div>

answered Jun 2, 2022 at 9:12

Noam

1,6348 silver badges20 bronze badges

5 Comments

DJS Over a year ago

Thanks! But what does that first part in the if-statement mean? (/\.be$/)

Noam Over a year ago

It's a regular expression matching a string that ends with ".be". It's not the only way to analyze the string but it's a useful one.

sid Over a year ago

Convienent if its just one class to add. Likely to get dirty if I have multiple elements to add classes.

Noam Over a year ago

@sid you can make as many changes as you wish depend on a single class. You only need additional classes if you have additional conditions.

DJS Over a year ago

@Noam Thanks for the help. I have combined Sid's solution with yours and now m problem is solved!

Collectives™ on Stack Overflow

Different CSS based on URL

2 Answers 2

6 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related