Requirements: Required CSS is inserted AFTER any MS Conditional Comments

45 views
Skip to first unread message

DesignCity

unread,
Dec 6, 2007, 10:49:51 PM12/6/07
to SilverStripe Development
I found this out while going through a theme and getting it to work
with IE 5.5. It seems that when you include CSS via the following
method (et al.) ...

function init() {
parent::init();
Requirements::themedCSS("layout");
Requirements::themedCSS("typography");
Requirements::themedCSS("form");
}

... It is inserted immediately before the close of the <head> tag.
This is a problem with using MS Conditional Comments (MSCC) to feed IE
different CSS - becuase of the way CSS is designed to cascade and the
order of the CSS, the styles within the MSCC will be overridden by the
main CSS file, making them useless.

Perhaps by default there should be a $Requirements variable that lets
you specify where the Requirements are inserted into the document.
Otherwise we're going to find a lot themes are not going to be able to
be customised to IE - and people are going to be wasting time trying
to make rules for IE. This already affects the Black Candy theme.

Thoughts?

Will Rossiter

unread,
Dec 7, 2007, 7:34:30 PM12/7/07
to SilverStripe Development
One really simple way to get round this is to have body or html in
front of each of the styles in the ie stylesheet. As the element
should always be in the body and because 'body #SomeDiv{}' is greater
then '#SomeDiv{}' it should work. Not a amazingly awesome solution but
works none the less :P

Matt Peel

unread,
Dec 7, 2007, 7:38:21 PM12/7/07
to silverst...@googlegroups.com
Hey man,

Have you tried using Requirements::customCSS()? I'm not sure if it
inserts after the Requirements::css() lines, but it might. (It takes a
string of CSS instead of a file - not sure if it'll do the if
conditional for IE6/7 or not though, I don't think it does).

Matt.

Nicolaas Thiemen Francken

unread,
Dec 7, 2007, 9:31:00 PM12/7/07
to silverst...@googlegroups.com


Most of the time, I actually manual code layout.css and typography.css in my
templates. In this case, they can come before the MSCC. Having said that,
my css developer pointed out that it is easier just to include the same IE
fixes in the main css, using some "hack" to apply them to IE6 or IE7 only

> >
> No virus found in this incoming message.
> Checked by AVG Free Edition.
> Version: 7.5.503 / Virus Database: 269.16.15/1174 - Release
> Date: 12/6/2007 10:11 AM
>
>

No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.5.503 / Virus Database: 269.16.17/1177 - Release Date: 12/7/2007
1:11 PM

Sam Minnee

unread,
Dec 7, 2007, 10:17:17 PM12/7/07
to SilverStripe Development
Manually coding the CSS includes in a template makes it harder for
someone to use a theme to only replace the CSS and keep the HTML the
same. So, it's not so good a solution for core core.

Similarly, you can put appropriate CSS selectors in your IE-only
stylesheet to make it ignored by non-IE browser, but then FireFox is
still wasting time downloading the compatibility stylesheet.

Having a $Requirements variable is a potential solution, but the issue
here seems to really be that half of the CSS files are included with
Requirements, and half of them are included another way. Why don't we
allow for conditional stylesheets to be included with Requirements?
That way you could have themable conditional stylesheets as well.

The most convenient way of doing this would be to specify an argument
to Requirements::themedCSS() that let you define which systems you
wanted to support.

Requirements::themedCSS("LayoutIE", "lte IE 6");
Requirements::themedCSS("LayoutIE5", "lte IE 5");

In additional to conditional comments, we could potentially implement
other ways of including conditional stylesheets. For instance you
could use @import url("style.css")_; to implement a call to:

Requirements::themedCSS("LayoutFF", "firefox");

DesignCity

unread,
Dec 19, 2007, 3:37:29 AM12/19/07
to SilverStripe Development
What I think we sould be aiming for is a reobust solution that
actually works for production sites with as many coding styles as
possible. Sure it's possible in a number of ways to get around the
current problems, but as Sam notes there are alternate problems with
these.

Sam - I think putting selectors in an ie only stylesheet defeats the
purpose of an ie only stylesheet. You may as well just include them in
the main stylesheet and reduce the number of concurrent downloads for
a page.

However, I think your idea of allowing an arguement for
Requirements::CSS would be excellent. If you're recommending a method
for people to incorporate compatibility stylesheets, we should be
steering them away from using hacks and 'selectors' (let's face it,
hacks again) to target a specific browser. Yes they will work, but for
how long? I don't want to get into a debate over whether hacks are
better than conditional comments, suffice to say that I think MS
conditional comments are a cleaner solution to the problem and
represent a 'best practice' senario. I'm unsure why you would ever
need to have a Firefox only stylesheet - most non-IE browsers do a
really good job of sticking to the W3C specs, so I think this would be
inviting poor CSS practices. And yet, I'm sure there are people around
who do use said methods (bizarrely). So perhaps using $Requirements as
well as allowing arguements for Requirements::CSS would be the best
holistic solution?


Here's a big question - if you do allow arguements to
Requirements::CSS, there are going to have to be a few different
options, so how will SS handle them? Eg:
* IE 5, IE 5.5000, IE 6, IE 7, IE 8 - all the different IE versions
* lt IE 7 - the 'LESS THAN' operator
* gt IE 6 - the 'GREATER THAN' operator
* lte IE 6 - the 'LESS THAN OR EQUAL TO' operator
* gte IE 6 - the 'GREATER THAN OR EQUAL TO' operator
* !(IE7) - the 'NOT' Operator
* (gt IE 5)&(lt IE 7) - the 'AND' operator
* (IE 6)|(IE 7) - the 'OR' operator
* <!--[if expression]> HTML <![endif]--> - the DOWNLEVEL HIDDEN
comment
* <![if expression]> HTML <![endif]> - the DOWNLEVEL REVEALED
comment

Will these need to be hard coded, or will SS just insert the exact
arguement as written into the MSCC? How will SS handle downlevel
hidden vs revealed? So many questions.... :)

Michael
Reply all
Reply to author
Forward
0 new messages