Member Avatar for asif49

Hi.

I have some css that needs to go into a large amount of websites. It generally contains very simple like all new elements with very unique names that will not be matched by anything these websites currently contain.

The problem I am having is that some of these sites contain default settings in the parent divs I.E. it may say

body {
font-size:12px; 
}

or

.wrapper {
text-decoration:underline;
}

This will be my new div (an example), which is inserted somewhere into the page.

.my_newdiv
{
height:400px; 
width:200px;
padding:10px;
line-height:5px;
}

Unfortunately when this goes somewhere within the body or the wrapper or whichever class it goes into, the parent elements' defined attributes will be inherited into my new divs. There is only one brute way I can imagine which is to specify every type of css styling and set each of them. This is not feasible due to the amount of new divs which are being added. So any ideas?

  • 3 Contributors
  • 8 Replies
  • 223 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

A practical, modern fix for an embeddable component that must live inside arbitrary sites is to clear the cascade at the component root rather than trying to override every possible inherited rule. The CSS all shorthand can reset virtually every property at once; revert or initial/unset choose how that reset behaves, but the important part is to then re-declare the few layout defaults the component needs (for example display, box-sizing, etc.). Example pattern:

.my_widget_root {
  all: revert;
  display: block;         /* re-assert the layout role */
  box-sizing: border-box; /* defensive default */
  /* component-only rules follow */
}
@supports not (all: initial) {
  /* older browsers: explicitly set the same defaults here */
  .my_widget_root { display:block; box-sizing:border-box; }
}

all and the keywords (initial, unset, revert) behave differently (e.g. unset falls back to inherited values for inheritable properties; initial uses spec initial values — which can make elements behave like inline — while revert rolls back to the user-agent/user layer). Test which keyword suits the goal and always explicitly set any properties that matter for layout after the reset. (devdoc.net)

If true encapsulation is required (no risk of host-site CSS ever touching the component), use Shadow DOM / Web Components: a shadow root creates a style boundary so the host page’s CSS cannot leak in. That gives a cleaner API than lots of resets and avoids iframes’ integration headaches; it does require JS and slightly newer browser support. For very old-IE targets, an iframe still works but carries cross-origin, sizing and integration tradeoffs (that is the approach suggested). (developer.mozilla.org)

Notes tied to earlier replies: ’s “reset the element” idea is on the right track — all: is the concise, built-in way to do that today — but beware which global keyword to choose and remember to reapply a few safe defaults so layout doesn’t collapse. Check browser support before relying on all: in environments that must include IE11; otherwise provide the explicit-property fallback shown above. (caniuse.com)

Recommended Answers

All 8 Replies

Member Avatar for Member #46692

Sounds like poor design.

Member Avatar for asif49

Explain.

Member Avatar for Member #46692

It's simple really, if you have 100 divs inside a main wrapper and you set the main wrapper to have an underline property but you want 90% of the other divs inside to NOT have the underline property.

It would be easier to set those 10% as underline and have the wrapper div to be normal.

This is a design issue, although in some cases there are exceptions.

The other question is are you creating this dynamically with PHP or is this pure HTML?

Member Avatar for almostbob

I'll try,
poor design:: anything that depends on another developer or a user, behaving in a particular manner.

styles that are inserted in other code bases should be absolutely device independent.

PX are pretty much useless as a layout tool,
on a crt a px is 1/96inch,
or lcd 1/132 inch,
on led 1/235 inch,
on telephone & Ieverything ~ 1/400 inch.
12px begins as 1/8 inch and finishes as 1/50 inch tall, unreadable.

ideally relative dimension should allow the site developer to set standards for the layout of the page,
yet the interloper designer can ensure that the inserted elements are relatively larger or smaller, more or less emphasised.

layout relative dimensions em or % based around 1em or 100% and the text will always scale around the settings of any parent element
a relative dimension 150% or 1.5 em will always be 1.5 times larger than surrounding text. a div 40% wide will always be 40% of parent element

Edited by almostbob
Member Avatar for almostbob

bugger, took me too long to type the my answer

Member Avatar for asif49

It's actually not poor design. The explanation I've given is kind of an analogy to explain the issue I'm having - it's not that exact issue, what I've said about multiple websites is just to get the problem across.

An actual answer will be appreciated :)

Member Avatar for Member #46692

Hmmm, I honestly wouldn't know what the best practice is for something like that.

My quick thoughts would be to maybe consider using the !important keyword which should override default styles but this is not 100% foolproof. I'm not even sure it would work.

My other idea which sounds okayish in principle would be to create these divs as iframes, but with that comes other issues, speed of loading /passing info to and from parts of the original website/domain - if you need to. Iframes would take take of the css issues for sure.

IMO I'd opt for the iframe if you've hundreds of websites to consider, but would mean you'd need your own hosting.

Wonder what everyone else thinks?

Perhaps you could call an element reset on any div you intend to insert:

http://snipplr.com/view/7438/element-specific-css-reset/

Then, at the end overide it with your specific styles?

Edited by Member #46692
Member Avatar for almostbob

Previous answer was tring to define "Poor Design", not able to answer the Q, have better idea now what is going on behind the scenes
have had acceptible results with http://code.google.com/p/div-src/ a script that allows you to do what I think the question was

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.