replace-text-pe mixin - text showing in IE9

[gmclelland]

Hi Snugug,
I've been using the @mixin replace-text-pe, but then I noticed that in IE9 it shows the text on top of the image.

I noticed that h5bp changed their image replacement technique h5bp/html5-boilerplate@aa0396e to use http://nicolasgallagher.com/another-css-image-replacement-technique/

So I thought maybe I could try that new technique after seeing https://github.com/Snugug/toolkit/blob/master/compass/stylesheets/toolkit/_pe.scss#L235, but I don't know how to extend those mixins.

Could you show me an example of how to extend those mixins to use a different image-replacement technique? I'm referring to %replace-text-pe-squish and %replace-text-pe-hide

Thank you

[Snugug]

Do you know which extendable is being called? %replace-text-pe-squish or %replace-text-pe-hide and do you know if you're using the right one? If it's an inline element, you should be including $inline-element: true in the mixin call, and that should use the method you pointed to to squish the text into oblivion, although in theory that should work regardless of it's an inline element.

[gmclelland]

Hi Snugug, here is the code I'm using. Perhaps I'm doing it wrong? It's a svg with png fallback that should display the h1#site-name inline.

$global: 'global';
@include sprite-map-generator($global);

#site-name {
  margin:1.6rem auto 0;
  text-align:center;
  @include replace-text-pe($global, 'logo-color');

  // opera repeats svg even with this declared
  background-repeat:no-repeat;

  @include breakpoint($medium, $no-query: '.lt-ie9') {
    float:left;
    margin:1.6rem 1.4rem 0 0;
    text-align:left;
  }
}

I guess I really don't understand how the extendables work. Are they used so that someone like me can redeclare those mixins using my own text-replacement methonds instead of using the compass text replacement?

[Snugug]

The extendables are there in an effort for the output of the mixin to be as DRY as possible, no end user stuff needed. If you'd prefer to use the squish text method, do the following:

@include replace-text-pe($global, 'logo-color', $inline-element: true);

For sake of better namespacing, I'm going to change $inline-element to something like $replacement: 'hide' or '$replacement: 'squish'` in the next release, but this should work for now.

Additionally, your LTIE9 isn't going to work. REM units aren't supported in LTIE9:

[gmclelland]

Thanks, that worked. I also had to do @include squish-text on the anchor
that is inside the H1 because any time I hover the H1#site-name it showed
some text-decoration.

Thanks for the heads up on the rems, I was hoping to replace all instances
of rem with a rem mixin that should handle the LTIE9s.
https://github.com/ry5n/rem

On Fri, Nov 2, 2012 at 8:13 AM, Snugug notifications@github.com wrote:

The extendables are there in an effort for the output of the mixin to be
as DRY as possible, no end user stuff needed. If you'd prefer to use the
squish text method, do the following:

@include replace-text-pe($global, 'logo-color', $inline-element: true);

For sake of better namespacing, I'm going to change $inline-element to
something like $replacement: 'hide' or '$replacement: 'squish'` in the
next release, but this should work for now.

Additionally, your LTIE9 isn't going to work. REM units aren't supported
in LTIE9 http://caniuse.com/rem:

—
Reply to this email directly or view it on GitHubhttps://github.com/Snugug/toolkit/issues/4#issuecomment-10013815.

[Snugug]

I was going to add a similar rem mixin to Toolkit, now I may just include that one. Good to know that already exists.

Either way, you just said something that makes this all make much more sense, and I can explain exactly what was wrong before for you. So. while you were doing a replace text on the h1, which is a block element, the actual text lives inside the a tag in the h1, so that's the tag you need to be doing the text replacement on. Anchor elements are inline elements, so you need to use the $inline-element: true option for the replace-text-pe mixin. This will then use the squish text replacement method, thus making your life happy. Make sense?

Also, I'm going to close this now that you've got this working.

[gmclelland]

Yes, that make sense. I will try that.

Here is some similar alternatives to that rem mixin if your interested:

• rem mixin at http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/
• http://stitchcss.com/#relative_size
• scss-toolkit uses a version from stichcss.com see https://github.com/davidrapson/scss-toolkit/blob/master/style/scss/functions/_relative-size.scss
• http://seesparkbox.com/foundry/scss_rem_mixin_now_with_a_better_fallback
• https://github.com/bitmanic/rem
  Thanks again

[gmclelland]

FYI.. I ended up using https://github.com/SimonWpt/rem which is a fork of https://github.com/bitmanic/rem that adds support for strings and colors.

I couldn't understand how to configure https://github.com/ry5n/rem when using the 10px increments trick:

html{
  font-size:62.5%;
}

body{
  @include rem(font-size, 14px);
}

should output the following but didn't:

html{
  font-size:62.5%;
}

body{
  font-size:14px;
  font-size:1.4rem;
}

Let me know if you come across something better.