¿Agregar un include sin que este aplique los estilos css?

B

[Borrado] #1 Sep '20

Buenas noches, tengo la necesidad de utilizar un include el cual utiliza boostrap pero necesito que no se le apliquen los styles del boostrap a la página en donde pongo el include, únicamente a la pagina a incluir

¿Me explico?

Por ejemplo:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">h1 { color: red; } </style>
</head>
<body>
	<?php include 'colores.php'; ?>
	<h1>Texto prueba (necesitaría que sea rojo)</h1>

</body>
</html>



DENTRO DEL INCLUDE COLORES.PHP HABRÍA UN ESTILO QUE DIRÍA H1 COLOR BLUE (es un simple ejemplo)

#Este sería el include php
<!DOCTYPE html>
<html>
<head>
	<style type="text/css">h1 { color: blue } </style>
</head>
<body>
	<?php 

	echo '<h1>Acá el h1 sería azul</h1>';

?>
</body>
</html>

Entonces el código necesito que quede así

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">h1 { color: red; } </style>
</head>
<body>
	<?php include 'colores.php'; ?>
	<h1>Acá el h1 sería azul</h1> (H1 que se imprime por el include, color azul porque usa los css del include)
	<h1>Texto prueba (necesitaría que sea rojo)</h1> (H1 color rojo porque aunque este abajo del include no usa los css del include)

</body>
</html>

¿Esto es posible?

KaLaTa #2 Sep '20

No es posible, al menos no de la manera que lo estás haciendo. Cuando tu metes un CSS en un HTML este afectará a toda la página, sin importar en que sitio de la página lo introduciste.

Soluciones que se me ocurren:

Una posibilidad sería utilizar un iframe donde tienes el include, los estilos definidos dentro de un iframe no afectan al HTML que está fuera de éste.
Otra posibilidad sería modificar el CSS de bootstrap a mano para que sólo afectase a elementos dentro de una clase o un ID específico.
Una tercera alternativa sería copiar únicamente los estilos que necesites renderizar dentro del include y definirlos por tu cuenta en tus propios ficheros CSS para que únicamente afecten a los elementos que te interesen, si no son muchos puede resultar no sólo viable si no mucho más eficiente que meter el CSS entero de bootstrap cuando no lo necesitas.

1 respuesta

B

[Borrado] #3 Sep '20

#2 Con un iframe no podrá ser porque necesito que porque el contenido del include va a utilizar variables de la pagina, posiblemente modifique boostrap

isvidal #4 Sep '20

No se si es que no entiendo muy bien, pero no te vale con un !important?

O abusando de la jerarquia? html body h1 { blablabla } o tambien .clase.clase.clase {blablabla} de tal forma que tus estilos toman prioridad por encima de bootstrap?

1 respuesta

JuAn4k4 #5 Sep '20

¿Pero qué estas haciendo? Por lo que comentas, algo raro raro estás haciendo.

Que si vars globales en js, css que modificas todos los h1.

No te voy a explicar shadow dom, y voy a ir a lo mas sencillo:

¿ No puedes hacer algo asi ?

.red { color: red }
.blue { color: blue }

<h1 class="blue">Azul</h1>
<h1 class="red">Rojo</h1>

No me lio tampoco con BEM, ni semantic css, ni nada, solo te pongo lo más básico porque creo que te fallan conceptos básicos, y ponerte aquí cosas más avanzadas sería contraproducente.

1 respuesta

B

[Borrado] #6 Sep '20

#4 #5 Lo del h1 era un ejemplo, pero resumiendo tengo una web con sus estilos css y tengo que agregar un include a esa web que posee sus propios css (que son de boostrap) pero necesito que los css del include no afecten a los css de la web

1 respuesta

X-Crim #7 Sep '20 Moderador Mario Kart

Al final que era lo de tu web que te dirigía a otra?

1 respuesta

JuAn4k4 #8 Sep '20

#6 Vale entiendo, solo se me ocurre con shadow dom: https://developer.mozilla.org/es/docs/Web/Web_Components/Using_shadow_DOM

Necesitarás JS eso si, con esto consigues dos cosas: que los estilos dentro de un shadow tree no afecten hacia fuera, y que los estilos de fuera no entren dentro.

1 respuesta

B

[Borrado] #9 Sep '20

#7 No, esto es para otra web, lo de la web que dirigía a otra era un virus en el chrome (que aún no saqué porque no reinstalé el chrome)

#8 Muchas gracias, lo voy a probar

¿Agregar un include sin que este aplique los estilos css?

Usuarios habituales

Tags