Conditional body class instead of conditional stylesheet

[Noel_g]

have you guys seen this

http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

what are your opinions?

I am a compass n00b, but was wondering how I could do this with
compass + blueprint

[Chris Eppstein]

That's pretty clever. Sass is well suited to such an approach, because it's so easy to scope selectors.

If you wanted to that with blueprint via compass you could do something like this:

http://gist.github.com/128478

Chris

[Andrew Vit]

It's a clever idea and a good trick to know, but I think I would still
prefer keeping the browser-specific hacks separate. I also wonder how
ugly this would be to implement the opening tag markup in haml...

Andrew Vit

On Jun 11, 7:29 pm, Noel_g <wwydi...@gmail.com> wrote:
> have you guys seen this
>

> http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer...

[Chris Eppstein]

You'd pretty much have to do it in an erb layout -- but that's not really relevant to this mailing list ;-)

There one thing I like about this approach is that it keeps styles together if you take advantage of the parent reference functionality of sass:

=mixin-with-ie-hack

  font-weight: 300

  body.ie &

    font-weight: bold

(not meant to imply that font-weight: 300 doesn't work)

I don't see compass or blueprint going down this path, but I think it's reasonable for someone's own mixins or framework to do it.

Chris

[G. D. Speer]

Noel -

I love that it's a non-JS solution to solve CSS issues and remains
hack-free.
I too like the idea of having the ie exceptions appear right next to the
rules that are
being modified so I don't forget that there's an ie exception to be managed
when a
change is made. And eliminating an http request - one less file to wait for
on first click!

Since I am designing CSS to match Joomla CMS produced highly semantic
markup,
this plus compass is a wonderful combination.
Thanks for sharing!

Duke

--------------------------------------------------------------------------------



No virus found in this incoming message.
Checked by AVG - www.avg.com
Version: 8.5.339 / Virus Database: 270.12.65/2171 - Release Date: 06/12/09
05:55:00

[Noel]

Thanks, I thought it made sense when I read this a few weeks ago.

One thing that would be nice to have is the ability to see the IE
rules right next to the other rules. When doing this:

+blueprint
+blueprint-ie("body.ie")

all the IE stuff is put at the end instead of right after the "normal" rule.

[G. D. Speer]

As Andrew pointed out, it's not assured that blueprint and therefore
compass's
shared implementation of blueprint will adopt this. It certainly wouldn't
hurt
to post your same link and note to the BlueprintCSS group and see if there's
interest.

Until it is adopted, the answer is to do your own copying of each line
inside +blueprint-ie
to it's respective line in +blueprint to produce +blueprintboth and, if you
are inclined to
share it, put up a fork or post a link here.

The best for long term maintainability is to build it with code that merges
the source files
coming from blueprint so they can be re-merged as new source files are
released.
Perhaps Chris can illuminate the process he goes through each time there is
a new
blueprint release to create the replacement sass files. If this can be one
more flavor,
like liquid, I think that could be a huge asset for the compass community.

[Chris Eppstein]

Well that's because these mixins don't assume that you're going to use this approach. In fact it was just and accident that it works --I expected folks would only want to use blueprint on certain pages and so I added the ability to scope them according to body class.

Most of the ie hacks in blueprint are for typography and I'm not too worried about the source order, to be honest. The exception is that the container must be text-align left in ie. This introduces all kinds of annoyances as evidenced by the weird code smell that is this comment in the blueprint grid module:

// Note: If you use this mixin without the class and want to support ie6

//       you must set text-align left on your container element in an IE stylesheet.

=container

  :width = !blueprint_container_size

  :margin 0 auto

  +clearfix

We've discussed on the haml mailing list that there could be a way to direct sass into multiple css files from the same sass code by introducing a new selector syntax. Maybe:

>>suffix

So if you were in foo.sass:

.foo

  font-weight: 300

  >>ie

    font-weight: bold

Would generate:

foo.css:

  .foo { font-weight: 300;}

foo_ie.css

  .foo { font-weight: bold;}

And then you'd be responsible for importing them using conditional comments.

The nice thing about this is that we could then set an ie selector constant in the blueprint framework:

!blueprint_ie_selector ||= ">>ie"

And if you wanted, you could override this in your base.sass:

!blueprint_ie_selector = "body.ie &"

Then the blueprint container mixin could have a single implementation:

=container(!ie_selector = !blueprint_ie_selector)

  :width = !blueprint_container_size

  :margin 0 auto

  +clearfix

  #{!ie_selector}

    :text-align left

So the thought experiment seems like a success... We'll see what sass 2.4 holds. Until then, sass has all the power you'd need to build your own stylesheets and mixins however you see fit -- it's just us framework designers that have to make tough decisions for now.

Chris

[Chris Eppstein]

When there is a new blueprint release, I pull the change history for blueprint and look at each changeset until I understand it, then I make changes to the port as appropriate, adding sassiness as I see fit. There's nothing automated about it... The other direction could be automated, of course, and so I'd love to see compass and sass become the implementation language of blueprint someday.

If there's a refactoring of the blueprint mixins that allows them to be assembled such that both approaches are viable by using different imports and/or different top-level mixins, I'd be willing to accept a patch that accomplishes that.

Chris

[Noel]

I was looking at the Sass documentation and found this:

---------------------
It also allows you to add selectors at the base of the hierarchy,
which can be useuful for targeting certain styles to certain browsers:

#main
:width 90%
#sidebar
:float left
:margin-left 20%
.ie6 &
:margin-left 40%
---------------------

Seems like the body class idea is present within the community/

-Noel

[Nathan Weizenbaum]

When I wrote that, I was only thinking of adding the body class with Javascript... it hadn't occurred to me to do it with conditional comments.

[Wolf]

Oh, I didn't know you could use & like that. I always assumed that if
you used it -had- to be the first character of the line.

That opens some doors, I also like to keep IE specific CSS in-context.

On Jun 13, 7:52 am, Nathan Weizenbaum <nex...@gmail.com> wrote:
> When I wrote that, I was only thinking of adding the body class with
> Javascript... it hadn't occurred to me to do it with conditional comments.
>