Tengo dos dominios con el mismo nombre, uno que termina en .nl y otro en .be . Por ejemplo, domain.nl y domain.be . Ambos siguen el mismo estilo general, pero no quiero que algunos elementos tengan un estilo diferente en función de si es .nl y .be . ¿Cómo puedo lograr esto sin cargar archivos css adicionales?
Si está utilizando Javascript simple, le sugiero que cree diferentes archivos CSS para los dominios; agregando solo las diferencias en 2 archivos diferentes, uno para be y otro para nl .
somefilename_be.css
{ body: 'green'; } somefilename_nl.css
{ body: 'red'; } Todos los mismos estilos deben ir en un archivo común como common.css .
Luego puede cargar el archivo CSS condicionalmente según el dominio.
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" />');Uso de JS Frameworks (React, Angular, Vue, Next, Svelte)
if (window.location.host.split('.')[1] === "be") import('somefilename_be.css')); else import('somefilename_nl.css'));Si las diferencias son pequeñas, puede confiar en una clase en el elemento raíz, controlada con JavaScript. Por ejemplo:
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>