How to lock so that CSS does not change beyond Footer and Header

Question

How to lock so that CSS does not change beyond Footer and Header

Navigation

#1 by (1 votes)

2

I wanted to know if I can lock CSS to a specific location.

See the following:
I have created a system where each user will define his own Header and Footer (consequently his own css). However I would like that when reading the CSSs my client's file would have no effect on mine. Example, If it copies some HTML element and you want to change, it could not.

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

Note: I have tried to use iframe , but it is not feasible, because our system is responsive, I can not make iframe track the size of header or footer which decreases every time you give resize to the screen.

Thank you

php html css

asked by anonymous 19.01.2016 / 13:11

1 answer

Display message for validation of a form instead of alert What's the difference between Sessions Beans and Message DriveBeans?

score 1 · Answer 1

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

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

Your code takes these rules and turns them into

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

If the user places a selector like header h1 { you remove the header first.

As this strategy you ensure that the user's CSS will not affect anything outside the places you allow as there are no parent selectors in CSS.

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