Trying to use CSS3 selectors, especially in IE

[David Oliver]

Hi,

eCSStender looks very interesting and promising, but it seems rather
inaccessible to non-programmers. I'm a (X)HTML/CSS kind of guy, and am
having trouble getting the CSS3 selectors extension to work, and am
testing in IE 8 for now.

Here's my test page:

http://project-start.doliver.co.uk/

In head section:

<script src="js/eCSStender.min.js" type="text/javascript"></script>
<script src="js/sizzle.js" type="text/javascript"></script>
<script type="text/javascript">eCSStender.addMethod
('findBySelector',Sizzle);</script>
<script src="js/ecsstender.css3-selectors.min.js" type="text/
javascript"></script>

(not sure if sizzle.js is required)

My CSS:

@media screen {
p:nth-child(odd) {
color: red;
}
}

What am I doing wrong?

Many thanks.

David

[Aaron Gustafson]

On 24 Jan 2010, at 10:16 AM, David Oliver wrote:

> eCSStender looks very interesting and promising, but it seems rather
> inaccessible to non-programmers. I'm a (X)HTML/CSS kind of guy, and am
> having trouble getting the CSS3 selectors extension to work, and am
> testing in IE 8 for now.
>
> Here's my test page:
>
> http://project-start.doliver.co.uk/
>
> In head section:
>
> <script src="js/eCSStender.min.js" type="text/javascript"></script>
> <script src="js/sizzle.js" type="text/javascript"></script>
> <script type="text/javascript">eCSStender.addMethod
> ('findBySelector',Sizzle);</script>
> <script src="js/ecsstender.css3-selectors.min.js" type="text/
> javascript"></script>
>
> (not sure if sizzle.js is required)

Sizzle (or another selector engine) is required.

> My CSS:
>
> @media screen {
> p:nth-child(odd) {
> color: red;
> }
> }
>
> What am I doing wrong?

It seems to be working for me all the way back to IE6. There are two JS errors being thrown, but I am not sure if they are eCSStender or not. I will investigate.

[David Oliver]

Thanks a lot - appreciate your time.

Here is a JS error as reported by IE8:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/
4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR
3.5.30729; .NET CLR 3.0.30729)
Timestamp: Tue, 26 Jan 2010 15:41:59 UTC

Message: An internal error occurred in the Microsoft Internet
extensions

Line: 9
Char: 10058
Code: 0
URI: http://project-start.doliver.co.uk/js/eCSStender.min.js

On Jan 26, 4:40 pm, Aaron Gustafson <aaron.easydesi...@gmail.com>
wrote:

[David Oliver]

After getting someone else to test my eCSStender test page, and having
found other strange issues with my IE, I'm pretty sure something is
borked with my Windows/IE. I'm going to reinstall and will post an
update here.

[David Oliver]

Hi Aaron,

I've since set up a very simple test page, with its only JS being
eCSStender. I'm finding that upon the first page load, my CSS3
selector and styling is being applied in IE8. But every refresh/page-
load after that results in a lack of the CSS3 selected styling. I have
to delete IE8's cache and reload to get it working again.

My test page: http://dev-project-start/ecsstender-css3-test.htm

Any ideas?

Thanks.

On Jan 26, 4:40 pm, Aaron Gustafson <aaron.easydesi...@gmail.com>
wrote:

[David Oliver]

Correction to the test page url:

http://project-start.doliver.co.uk/ecsstender-css3-test.htm

Every other paragraph should be red, due to the nth-child

--
Nassaustrasse 93
51105 Cologne
Germany

Tel (UK): 0131 208 2309
http://doliver.co.uk

[Aaron Gustafson]

On 23 Feb 2010, at 10:07 AM, David Oliver wrote:

> I've since set up a very simple test page, with its only JS being
> eCSStender. I'm finding that upon the first page load, my CSS3
> selector and styling is being applied in IE8. But every refresh/page-
> load after that results in a lack of the CSS3 selected styling. I have
> to delete IE8's cache and reload to get it working again.
>
> My test page: http://dev-project-start/ecsstender-css3-test.htm
>
> Any ideas?

Sounds like a bug in eCSStender's internal caching mechanism. Try running eCSStender.disableCache() and let me know if that solves it.

[David Oliver]

I now have this in my test page head - is this correct?

<script src="js/eCSStender.js" type="text/javascript"></script>
<script type="text/javascript">eCSStender.disableCache</script>

<script src="js/sizzle.js" type="text/javascript"></script>
<script

type="text/javascript">eCSStender.addMethod('findBySelector',Sizzle);</script>

<script src="js/ecsstender.css3-selectors.min.js"
type="text/javascript"></script>

I'm still getting the same behaviour.

I have to clear the cache and restart IE8 (Vista) to get it to work, and
then it only works on the first page load.

[Aaron Gustafson]

On 24 Feb 2010, at 2:15 AM, David Oliver wrote:

> I now have this in my test page head - is this correct?
>
> <script src="js/eCSStender.js" type="text/javascript"></script>
> <script type="text/javascript">eCSStender.disableCache</script>
> <script src="js/sizzle.js" type="text/javascript"></script>
> <script type="text/javascript">eCSStender.addMethod('findBySelector',Sizzle);</script>
> <script src="js/ecsstender.css3-selectors.min.js" type="text/javascript"></script>
>
> I'm still getting the same behaviour.
>
> I have to clear the cache and restart IE8 (Vista) to get it to work, and then it only works on the first page load.

eCSStender.disableCache() is a method (not a property). Add the parentheses at the end and let me know if that solves the issue for you.

[David Oliver]

D'oh! Thanks for the correction.

It does indeed work as expected now, in IE 6-8, regardless of page
refreshing.

I presume you'll figure out the bug at some stage, but would using
eCCStender without caching be an option for a site with no extra special
demands of performance?

[Aaron Gustafson]

On 24 Feb 2010, at 11:17 AM, David Oliver wrote:

> D'oh! Thanks for the correction.
>
> It does indeed work as expected now, in IE 6-8, regardless of page refreshing.

Great.

> I presume you'll figure out the bug at some stage, but would using eCCStender without caching be an option for a site with no extra special demands of performance?

Performance is mainly impacted by the size of your CSS file and the number of files you use. You can exclude certain CSS files too. Just check the documentation for info on how to tune. You can also check out the presentation I gave at An Event Apart, which talks about performance stuff.