Regard @media rules in css stylesheets. #2386

Merged
merged 2 commits into from Aug 8, 2012

Projects

None yet

2 participants

@tristanlins
Contributor

The current Fx.CSS.search function does not work when @media rules are used inside of the css stylesheet.
You can see this behaviour here http://jsfiddle.net/k4YJU/
The css class morph will not work until you remove the @media block.

I changed the search logic recursively to regard @media rules, you can see it here: http://jsfiddle.net/MaysE/1/

@arian arian commented on an outdated diff Aug 7, 2012
Source/Fx/Fx.CSS.js
@@ -100,11 +100,13 @@ Fx.CSS = new Class({
search: function(selector){
if (Fx.CSS.Cache[selector]) return Fx.CSS.Cache[selector];
var to = {}, selectorTest = new RegExp('^' + selector.escapeRegExp() + '$');
- Array.each(document.styleSheets, function(sheet, j){
- var href = sheet.href;
- if (href && href.contains('://') && !href.contains(document.domain)) return;
- var rules = sheet.rules || sheet.cssRules;
+
+ var searchStyles = function(rules) {
@arian
arian Aug 7, 2012 Member

could you remove the space between ) and { so it matches the code style?

@arian
Member
arian commented Aug 7, 2012

It isn't very clever yet that it actually matches the @media rules, however search isn't very clever or bullet proof either, so I think that'll be ok for now. If you fix that one little code style thing i'll merge this.

Tristan Lins Fix code style. 3a5e03d
@tristanlins
Contributor

I fixed the code style.
Maybe for the future, a genericfunction for searching styles by selector is the best way.

@arian arian merged commit 1866012 into mootools:master Aug 8, 2012
@arian
Member
arian commented Aug 8, 2012

@tristanlins thanks! Do you know anything about #2345? It seems in that case rule.rules || rule.cssRules results in null...

@tristanlins
Contributor

I did not know anythink about the problem described in #2345. I think I never reached this myself.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment