Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revisit text-hide mixin #24890

Closed
XhmikosR opened this issue Nov 27, 2017 · 8 comments
Closed

Revisit text-hide mixin #24890

XhmikosR opened this issue Nov 27, 2017 · 8 comments
Labels

Comments

@XhmikosR
Copy link
Member

XhmikosR commented Nov 27, 2017

This helper comes from html5 Boilerplate. It was removed in 2013 in this PR.

We should revisit it or remove it too.

/CC @mdo

@moso
Copy link

moso commented Nov 28, 2017

Isn't text-hide sort of reduntant now that we have display utilities, which are even responsive?

One could easily use <p class="d-sm-none">Text</p> if one wants to hide text responsively (I know I have done the same in the past where I hide the text in a button and only show its icon on small devices). If it's for screenreaders only, then we have utilities for that aswell.

@mdo
Copy link
Member

mdo commented Nov 28, 2017

@moso The goal of text hiding is to visually hide the text while still rendering the element's overall size and shape, often with a background-image to show something else. Display utilities wouldn't accomplish that, nor would visibility utilities.

@mdo
Copy link
Member

mdo commented Nov 28, 2017

That said, it is an old technique :).

@mdo
Copy link
Member

mdo commented Dec 31, 2017

We're kinda stuck with this now that we're heading to v4 stable. We could drop it, but it'd technically be a breaking change. Thoughts?

@moso
Copy link

moso commented Dec 31, 2017

Leave it in, and maybe do a $enable-text-hide-variable so people can disable it?

@patrickhlauke
Copy link
Member

i'd say remove the whole image replacement thing in 4.1 (or do an unscheduled breaking change, nobody would die from that presumably). maybe replace with more modern approaches (e.g. using sr-only to include actual text in html). generally (from my experience anyway) authors will set a custom width/height when doing IR, so the fact that text-hide maintains the size etc is mostly pointless, i'd say.

@mdo
Copy link
Member

mdo commented Jan 4, 2018

Let's deprecate for 4.1 or 4.2 if we can.

@martinbean
Copy link
Contributor

martinbean commented Dec 13, 2018

@mdo What is the rationale behind removing this helper? As I still regularly use it for logos in website headers, i.e.

<a class="header-logo" href="/">
  <span class="header-logo-text">Website Name</span>
</a>
.header-logo-text {
  @​include text-hide();
  width: 200px;
  height: 100px;
  background: url(../img/logo.png);
}

Is there an alternative to this technique that I should be using…?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants