How to block CSS from changing beyond Footer and Header

Asked

Viewed 283 times

2

I was wondering if I can lock the CSS for a specific location.

Look at the following:
I created a system where each user will define their own Header and Footer (consequently your own css). However, I would like my client’s file to have no effect on mine when reading the Csss. Example, if it copies some HTML element and wants to change, it could not.

I know this is possible, because in Wordpress can do. But I do not know how to do this.

Obs.: I tried to use the iframe, but it’s unfeasible, because our system is responsive, I can’t do the iframe track the size of header or footer that keeps decreasing every time you give a resize onscreen.

Thank you

php html css
  • 2

    Load the user’s before yours, define classes and ids with very characteristic prefixes, and use ! Important in your things (it’s still a scam). If your CSS comes after your CSS, and your directives have specificity bigger, their will be worth.

  • Doesn’t it pay to create a cookie to store customer’s css settings? avoids this kind of problem and makes the system more customizable.

  • Thanks Bacco, but even so, if he uses an attribute that in mine has not defined his will be worth. Then the gambiarra does not avenge...

  • I don’t know about Cookie Gabriel, I’ll look it up. Thank you

1 answer

1

The easiest way is to take the user-defined CSS and encapsulate it with the header|footer selector (if these are exactly the ones you’re using) through your own code. So if you have a structure <header id="header">...</header><qualquercoisa>...</qualquercoisa><footer id="footer">...</footer> and the user defines a series of Rules, say in a textarea for the header:

color: red;
position: fixed;
h1 {
    rules...;
}

your code gets these rules and turns into 

header#header {
  color: red;
  position: fixed;
}
header#header h1 {
    rules...;
}

If the user puts some selector as header h1 { you remove "header" before.

As this strategy you ensure that the user’s CSS will not affect anything outside the locations you allow as there are no Parent selectors (selectors to point to an element levels above in DOM) in CSS.

Note: If you want to consider CSS4, which is still a standard in creation, you would have to deal with the new selectors of Parent Elements, in this case you would need to remove all of them from the user-defined CSS to prevent it from having access to your entire DOM.

Browser other questions tagged php html css

You are not signed in. Login or sign up in order to post.