PDA

View Full Version : Scoped CSS Code



akash_fil
2 Jan 2013, 3:05 AM
Hi,

I am using ext-all-scoped.css & my scss contains $scope-reset-css: true; (attached the scss). But the generated scoped css contains still some code which overrdies the site css. The code is:

.x-reset html, .x-reset body, .x-reset div, .x-reset dl, .x-reset dt, .x-reset dd, .x-reset ul, .x-reset ol, .x-reset li, .x-reset h1, .x-reset h2, .x-reset h3, .x-reset h4, .x-reset h5, .x-reset h6, .x-reset pre, .x-reset code, .x-reset form, .x-reset fieldset, .x-reset legend, .x-reset input, .x-reset textarea, .x-reset p, .x-reset blockquote, .x-reset th, .x-reset td {
margin: 0;
padding: 0
}
.x-reset address, .x-reset caption, .x-reset cite, .x-reset code, .x-reset dfn, .x-reset em, .x-reset strong, .x-reset th, .x-reset var {
font-style: normal;
font-weight: normal
}
.x-reset h1, .x-reset h2, .x-reset h3, .x-reset h4, .x-reset h5, .x-reset h6 {
font-size: 100%
}


is there any other variable through which we can restrict the generation of these css classes?

skirtle
2 Jan 2013, 5:51 AM
Have you set scopeResetCSS?

http://docs.sencha.com/ext-js/4-1/#!/api/Ext-property-scopeResetCSS

It still won't be perfect, I always have to tweak the scoped CSS file to get some bits to work but it should get pretty close.

slemmon
2 Jan 2013, 7:19 AM
Any chance skirtlesden will have an upcoming article on the use o scoped CSS? :D

Jangla
21 Mar 2013, 1:20 PM
I've just come up against this. I completely understand why ext4 works this way and what we need to do to scope it correctly, but why on earth does ext-all-scoped.css have an x-body declaration in it? it's not scoped and will always affect the entire document. Can't see the justification of this tbh.

skirtle
21 Mar 2013, 8:02 PM
I believe 4.2 has taken a different approach to this. There's no CSS reset so scoping is no longer an issue.