- From: Alan Gresley <alan@css-class.com>
- Date: Thu, 24 Mar 2011 05:11:56 +1100
- To: Shane Stephens <shans@google.com>
- CC: Sylvain Galineau <sylvaing@microsoft.com>, "Tab Atkins Jr." <jackalmage@gmail.com>, www-style list <www-style@w3.org>, Nathan Weizenbaum <nweiz@google.com>, Chris Eppstein <chris@eppsteins.net>
On 23/03/2011 10:38 AM, Shane Stephens wrote:
> Hi list,
>
> I tested the following 3 patterns for using @mixin declarations with
> fallback in a number of browsers:
>
> .finalPosition {
> background: green;
> color: white;
> @mixin includeMe(foo, bar);
> }
>
> This style rule tests whether a mixin declaration at the end of a block
> affects the rest of the properties in that block.
>
> .nonFinalPosition {
> background: green;
> @mixin includeMe(foo, bar);
> color: white;
> }
>
> This style rule tests whether a mixin declaration in the middle of a block
> affects the rest of the properties in that block.
>
> .artificialFinalPosition {
> background: green;
> @mixin includeMe(foo, bar);
> }
>
> .artificialFinalPosition {
> color: white;
> }
>
> This style rule tests whether a mixin declaration at the end of a block
> affects properties declared in subsequent blocks.
>
> I'm happy to report that on every browser I could get my hands on, all three
> classes result in a green background with white text when applied to a div.
> I tested the following browsers:
> * Internet Explorer 6
> * Internet Explorer 7
> * Internet Explorer 8
> * Internet Explorer 9 beta
> * Safari 3
> * Safari 5
> * Firefox 2
> * Firefox 3
> * Firefox 3.6
> * Firefox 4
> * Chrome 9
> * Chrome 10
> * Opera 11
>
> I think it's clear that using an @-rule in this manner is safe on pretty
> much every browser likely to be currently in use, or at least the vast
> majority.
>
> Cheers,
> -Shane
If this is true, why do browsers disagree here?
<http://css-class.com/test/temp/at-rules1.htm>
Opera 11, Firefox 3.6, IE8, IE9 will only drop the fourth and fifth
test. This is the CSS.
#four {
{background: yellow;}
background: navy;
@mixin foo;
}
#five {
@mixin foo;
{background: yellow;}
background: lime;
}
Chrome and Safari 5 drops all but the first.
IE7 shows yellow on all test.
The reason that we see differences is due to the different nature of
IDENT and ATKEYWORD and how they are parsed.
Questions:
1. Does the nesting of declaration blocks only happen in a .scss file?
2. Does SASS require JavaScript to be enabled?
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
Received on Wednesday, 23 March 2011 18:12:32 UTC