Blueprint and IE compatibility css file

[Cristian Bichis]

Hi,

I am working by more than one year with BluePrint.

I am having two problems related to the same BluePrint way to work.

The ie.css file has to be included separated (as stated from Quick
tutorial):

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css"
media="screen, projection">
<!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css"
type="text/css" media="screen, projection"><![endif]-->

This is rising couple of problems to overcome:
- it's more recommended to have all the css side included on only one
file, rather than split on 2 files. This leads to slower loading + if
you take a look on SE tools like Google Webmaster Tools all recommend
having only one file in place

- i am not sure how we going to use BluePrint ie.css component for the
case of html based emails (emails with html multipart)...

There are ways to simplify the css loading to actually have only one
file loaded for the same media ? As far as i checked the other css
framework doesn't include separated files for IE.

Cristian

[Christian Montoya]

On Sat, Jul 3, 2010 at 8:22 AM, Cristian Bichis <cbi...@gmail.com> wrote:

> - it's more recommended to have all the css side included on only one file,
> rather than split on 2 files. This leads to slower loading + if you take a
> look on SE tools like Google Webmaster Tools all recommend having only one
> file in place

This leads to slower loading *IN IE ONLY*. Also, you don't have to use
ie.css if you don't want.

> - i am not sure how we going to use BluePrint ie.css component for the case
> of html based emails (emails with html multipart)...

Blueprint is not for emails. Emails require a very different approach.

> There are ways to simplify the css loading to actually have only one file
> loaded for the same media ? As far as i checked the other css framework
> doesn't include separated files for IE.

Which CSS frameworks did you check? Are they any good?

To be honest, you could take all the rules in ie.css and put them in
screen.css, using IE hacks to hide them from other browsers... but the
developers of Blueprint insisted on ensuring that Blueprint would be
as standards compliant as possible, so they used a conditional
comment. It also means that the core files are not littered with ugly
IE hacks and ie.css can be maintained, updated, etc. without affecting
other files.

--
--
Christian Montoya
mappdev.com :: christianmontoya.net

[Sam Sherlock]

to avoid the additional css for ie you could use ieconditionals and apply a class to the body tag and then

target each specifically

eg

.ie7 img { -ms-interpolation-mode: bicubic; }

for more information see 

http://github.com/paulirish/frontend-pro-template/blob/master/index.html

- S

--
You received this message because you are subscribed to the Google Groups "Blueprint CSS" group.
To post to this group, send email to bluepr...@googlegroups.com.
To unsubscribe from this group, send email to blueprintcss...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/blueprintcss?hl=en.

[Cristian Bichis]

Nice approach...

Cristian

[Cristian Bichis]

>> - i am not sure how we going to use BluePrint ie.css component for the case
>> of html based emails (emails with html multipart)...
>>
> Blueprint is not for emails. Emails require a very different approach.
>

What would be the approach for emails ?

>> There are ways to simplify the css loading to actually have only one file
>> loaded for the same media ? As far as i checked the other css framework
>> doesn't include separated files for IE.
>>
> Which CSS frameworks did you check? Are they any good?
>

By example YUI i saw doesn't have any IE conditionals. Haven't had much
experience with YUI anyway...

Box model is fixed without the ie.css ?

> To be honest, you could take all the rules in ie.css and put them in
> screen.css, using IE hacks to hide them from other browsers... but the
> developers of Blueprint insisted on ensuring that Blueprint would be
> as standards compliant as possible, so they used a conditional
> comment. It also means that the core files are not littered with ugly
> IE hacks and ie.css can be maintained, updated, etc. without affecting
> other files.
>

Yes, is deffinetly better to keep them separated...

Cristian

[Sam Sherlock]

What would be the approach for emails ?

I would keep everything really simple for email formatting, too many email clients out there and all manor of aspects - further info would be way off topic for blueprint

http://www.smashingmagazine.com/2010/01/19/design-and-build-an-email-newsletter-without-losing-your-mind/

that could lead you on to more sources of info; 

--

as for ie some say it is not that hard - it has some weird concepts eg hasLayout float/margin bugs

css mastery is a great source of info

- S

[Christian Montoya]

On Sat, Jul 3, 2010 at 2:18 PM, Cristian Bichis <cbi...@gmail.com> wrote:
>
>>> - i am not sure how we going to use BluePrint ie.css component for the
>>> case
>>> of html based emails (emails with html multipart)...
>>>
>>
>> Blueprint is not for emails. Emails require a very different approach.
>>
>
> What would be the approach for emails ?

I would not use float-based layouts for emails. Email design with CSS
is very off-topic for this list but there are resources on the web
that explain all the details.

[Cristian Bichis]

Thanks to all for your comments.

Cristian

[garethjmsaunders]

As Christian has already said, it would only be slower for Internet
Explorer versions lower than IE8. But in reality it wouldn't be
*that* much slower. You're talking about one extra HTTP request to
pull in a 2 KB text file.

Yahoo! recommends as few HTTP requests as possible:
http://developer.yahoo.com/performance/rules.html#num_http

and placing the CSS files at the top
http://developer.yahoo.com/performance/rules.html#css_top

If you were to follow those pieces of advice then it wouldn't be a
huge performance hit.

If you really wanted serve up only one CSS file then you could use
something like PHP to detect the browser and serve up the default
screen.css file to all non-IE browsers or a new combined screen.css +
ie.css file. Just a thought.

Gareth