Isolate styling of injected content from page CSS

I have a JavaScript plugin that injects some HTML & CSS code into webpages. Some of the injected code is from a 3rd party package which I have limited ability to modify.

Given that the styling on the host page is unpredictable (since I cannot predict which sites the user will run the plugin on), how can I design the injected code (HTML + CSS) to be impervious to the external styling and only use the styling included by the plugin.

For instance, if the host page has a style for DIV elements, I would like to ensure this styling is not applied to any of the DIVs in the injected code

edited Nov 23 '18 at 3:11

asked Nov 23 '18 at 1:37

takinola

1,080719

You can inspect the webpage and look for a class being used on elements to style a theme... You could use that same class name on your elements so the same style properties will be applied. Without a working example it is impossible to give you a solid solution. If you can give an example of the javascript you are using and a domain name/URL to a page that you are working with might help myself and other offer you something more than suggestions. How to create a Minimal, Complete, and Verifiable example

– NewToJS
Nov 23 '18 at 1:40

add a comment |

I have a JavaScript plugin that injects some HTML & CSS code into webpages. Some of the injected code is from a 3rd party package which I have limited ability to modify.

For instance, if the host page has a style for DIV elements, I would like to ensure this styling is not applied to any of the DIVs in the injected code

edited Nov 23 '18 at 3:11

asked Nov 23 '18 at 1:37

takinola

1,080719

You can inspect the webpage and look for a class being used on elements to style a theme... You could use that same class name on your elements so the same style properties will be applied. Without a working example it is impossible to give you a solid solution. If you can give an example of the javascript you are using and a domain name/URL to a page that you are working with might help myself and other offer you something more than suggestions. How to create a Minimal, Complete, and Verifiable example

– NewToJS
Nov 23 '18 at 1:40

add a comment |

I have a JavaScript plugin that injects some HTML & CSS code into webpages. Some of the injected code is from a 3rd party package which I have limited ability to modify.

For instance, if the host page has a style for DIV elements, I would like to ensure this styling is not applied to any of the DIVs in the injected code

edited Nov 23 '18 at 3:11

asked Nov 23 '18 at 1:37

takinola

1,080719

I have a JavaScript plugin that injects some HTML & CSS code into webpages. Some of the injected code is from a 3rd party package which I have limited ability to modify.

For instance, if the host page has a style for DIV elements, I would like to ensure this styling is not applied to any of the DIVs in the injected code

javascript html css iframe

edited Nov 23 '18 at 3:11

asked Nov 23 '18 at 1:37

takinola

1,080719

edited Nov 23 '18 at 3:11

asked Nov 23 '18 at 1:37

takinola

1,080719

edited Nov 23 '18 at 3:11

asked Nov 23 '18 at 1:37

takinola

1,080719

asked Nov 23 '18 at 1:37

takinola

1,080719

asked Nov 23 '18 at 1:37

takinola

1,080719

You can inspect the webpage and look for a class being used on elements to style a theme... You could use that same class name on your elements so the same style properties will be applied. Without a working example it is impossible to give you a solid solution. If you can give an example of the javascript you are using and a domain name/URL to a page that you are working with might help myself and other offer you something more than suggestions. How to create a Minimal, Complete, and Verifiable example

– NewToJS
Nov 23 '18 at 1:40

add a comment |

You can inspect the webpage and look for a class being used on elements to style a theme... You could use that same class name on your elements so the same style properties will be applied. Without a working example it is impossible to give you a solid solution. If you can give an example of the javascript you are using and a domain name/URL to a page that you are working with might help myself and other offer you something more than suggestions. How to create a Minimal, Complete, and Verifiable example

– NewToJS
Nov 23 '18 at 1:40

You can inspect the webpage and look for a class being used on elements to style a theme... You could use that same class name on your elements so the same style properties will be applied. Without a working example it is impossible to give you a solid solution. If you can give an example of the javascript you are using and a domain name/URL to a page that you are working with might help myself and other offer you something more than suggestions. How to create a Minimal, Complete, and Verifiable example

– NewToJS
Nov 23 '18 at 1:40

add a comment |

2 Answers
2

active

oldest

votes

If I understand correctly, there are two approaches:

Using dynamic css class. You can use some bundle tools, like grunt, gulp, .. to generate the dynamic css class when building the release for production.

On development mode:

<div class="box"></div>

css:

box{

  .red{}

}

On production mode:

<div class="d2fdcdf_dfdafdaf"></div>

css:

.d2fdcdf_dfdafdaf{

  .red{}

}

Using inline style or important! directive

answered Nov 23 '18 at 2:52

Nhut Dinh Ba

add a comment |

You'll have to maintain a clear CSS rule naming convention that would be impervious to naming collisions -- much the same way CSS frameworks like Bootstrap, Grid or Foundation do.

There are some nice models you can use to outline a convention that works best for your brain. For example, the Block Element Modifier model (BEM):

.block {}

.block__element {}

.block--modifier {}

.block__element--modifier {}

For example

.stick-man {}



.stick-man__head {}

.stick-man__head--small {}

.stick-man__head--big {}



.stick-man__arms {}

.stick-man__feet {}



.stick-man--blue {}

.stick-man--red {}

Other ideas surrounding this are:

SMACSS—Scalable and Modular Architecture for CSS (SMACSS)

Object Oriented CSS (OOCSS)

Atomic CSS (ACSS)

answered Nov 23 '18 at 3:10

bob

3,6532328

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53439716%2fisolate-styling-of-injected-content-from-page-css%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

If I understand correctly, there are two approaches:

Using dynamic css class. You can use some bundle tools, like grunt, gulp, .. to generate the dynamic css class when building the release for production.

On development mode:

<div class="box"></div>

css:

box{

  .red{}

}

On production mode:

<div class="d2fdcdf_dfdafdaf"></div>

css:

.d2fdcdf_dfdafdaf{

  .red{}

}

Using inline style or important! directive

answered Nov 23 '18 at 2:52

Nhut Dinh Ba

add a comment |

If I understand correctly, there are two approaches:

Using dynamic css class. You can use some bundle tools, like grunt, gulp, .. to generate the dynamic css class when building the release for production.

On development mode:

<div class="box"></div>

css:

box{

  .red{}

}

On production mode:

<div class="d2fdcdf_dfdafdaf"></div>

css:

.d2fdcdf_dfdafdaf{

  .red{}

}

Using inline style or important! directive

answered Nov 23 '18 at 2:52

Nhut Dinh Ba

add a comment |

If I understand correctly, there are two approaches:

Using dynamic css class. You can use some bundle tools, like grunt, gulp, .. to generate the dynamic css class when building the release for production.

On development mode:

<div class="box"></div>

css:

box{

  .red{}

}

On production mode:

<div class="d2fdcdf_dfdafdaf"></div>

css:

.d2fdcdf_dfdafdaf{

  .red{}

}

Using inline style or important! directive

answered Nov 23 '18 at 2:52

Nhut Dinh Ba

If I understand correctly, there are two approaches:

Using dynamic css class. You can use some bundle tools, like grunt, gulp, .. to generate the dynamic css class when building the release for production.

On development mode:

<div class="box"></div>

css:

box{

  .red{}

}

On production mode:

<div class="d2fdcdf_dfdafdaf"></div>

css:

.d2fdcdf_dfdafdaf{

  .red{}

}

Using inline style or important! directive

answered Nov 23 '18 at 2:52

Nhut Dinh Ba

answered Nov 23 '18 at 2:52

Nhut Dinh Ba

answered Nov 23 '18 at 2:52

Nhut Dinh Ba

answered Nov 23 '18 at 2:52

Nhut Dinh Ba

add a comment |

You'll have to maintain a clear CSS rule naming convention that would be impervious to naming collisions -- much the same way CSS frameworks like Bootstrap, Grid or Foundation do.

There are some nice models you can use to outline a convention that works best for your brain. For example, the Block Element Modifier model (BEM):

.block {}

.block__element {}

.block--modifier {}

.block__element--modifier {}

For example

.stick-man {}



.stick-man__head {}

.stick-man__head--small {}

.stick-man__head--big {}



.stick-man__arms {}

.stick-man__feet {}



.stick-man--blue {}

.stick-man--red {}

Other ideas surrounding this are:

SMACSS—Scalable and Modular Architecture for CSS (SMACSS)

Object Oriented CSS (OOCSS)

Atomic CSS (ACSS)

answered Nov 23 '18 at 3:10

bob

3,6532328

add a comment |

You'll have to maintain a clear CSS rule naming convention that would be impervious to naming collisions -- much the same way CSS frameworks like Bootstrap, Grid or Foundation do.

There are some nice models you can use to outline a convention that works best for your brain. For example, the Block Element Modifier model (BEM):

.block {}

.block__element {}

.block--modifier {}

.block__element--modifier {}

For example

.stick-man {}



.stick-man__head {}

.stick-man__head--small {}

.stick-man__head--big {}



.stick-man__arms {}

.stick-man__feet {}



.stick-man--blue {}

.stick-man--red {}

Other ideas surrounding this are:

SMACSS—Scalable and Modular Architecture for CSS (SMACSS)

Object Oriented CSS (OOCSS)

Atomic CSS (ACSS)

answered Nov 23 '18 at 3:10

bob

3,6532328

add a comment |

You'll have to maintain a clear CSS rule naming convention that would be impervious to naming collisions -- much the same way CSS frameworks like Bootstrap, Grid or Foundation do.

There are some nice models you can use to outline a convention that works best for your brain. For example, the Block Element Modifier model (BEM):

.block {}

.block__element {}

.block--modifier {}

.block__element--modifier {}

For example

.stick-man {}



.stick-man__head {}

.stick-man__head--small {}

.stick-man__head--big {}



.stick-man__arms {}

.stick-man__feet {}



.stick-man--blue {}

.stick-man--red {}

Other ideas surrounding this are:

SMACSS—Scalable and Modular Architecture for CSS (SMACSS)

Object Oriented CSS (OOCSS)

Atomic CSS (ACSS)

answered Nov 23 '18 at 3:10

bob

3,6532328

You'll have to maintain a clear CSS rule naming convention that would be impervious to naming collisions -- much the same way CSS frameworks like Bootstrap, Grid or Foundation do.

There are some nice models you can use to outline a convention that works best for your brain. For example, the Block Element Modifier model (BEM):

.block {}

.block__element {}

.block--modifier {}

.block__element--modifier {}

For example

.stick-man {}



.stick-man__head {}

.stick-man__head--small {}

.stick-man__head--big {}



.stick-man__arms {}

.stick-man__feet {}



.stick-man--blue {}

.stick-man--red {}

Other ideas surrounding this are:

SMACSS—Scalable and Modular Architecture for CSS (SMACSS)

Object Oriented CSS (OOCSS)

Atomic CSS (ACSS)

answered Nov 23 '18 at 3:10

bob

3,6532328

answered Nov 23 '18 at 3:10

bob

3,6532328

answered Nov 23 '18 at 3:10

bob

3,6532328

answered Nov 23 '18 at 3:10

bob

3,6532328

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg