Hide Element visually, keep it for screen readers.

[Capi Etheriel]

So, Drupal solves it like this

https://github.com/drupal/drupal/blob/7.x/modules/system/system.base.css#L228-232

.element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

it works fine, but as you might imagine, focusable elements will confuse users (particularly keyboard usesr who like to tab around as a crazy rabbit). Drupal solves it like this:

https://github.com/drupal/drupal/blob/7.x/modules/system/system.base.css#L238-242

.element-invisible.element-focusable:active,
.element-invisible.element-focusable:focus {
  position: static !important;
  clip: auto;
}

I like the solution, although i don't like non-semantic classes and I definitely hate !important declarations. I thought this would be nice to port to Compass. Feedback?

[John Albin Wilkins]

Hi Capi!

I dislike !important too. However, in this case, it is being used correctly. We want an "invisible" element to have absolute positioning no matter what CSS is applied to that same element in different rules. Since ".element-invisible" has a very low specificity, almost any CSS rule setting position on that element will break the invisibility.

Also, "element-invisible" _is_ semantic. We're trying to make an HTML element invisible to sighted users, but not make it inaccessible. What would you suggest as a better name?

Also +1 for suggesting this as a feature to Compass. I believe the HTML5 Boilerplate already copied this method into its CSS. (Though they renamed it to ".visuallyhidden".) https://github.com/h5bp/html5-boilerplate/blob/master/css/style.css

 - John

--
You received this message because you are subscribed to the Google Groups "Compass" group.
To view this discussion on the web visit https://groups.google.com/d/msg/compass-users/-/Dw6JeF_NKRAJ.
To post to this group, send email to compas...@googlegroups.com.
To unsubscribe from this group, send email to compass-user...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/compass-users?hl=en.

[Roy Tomeij]

I agree this should be in Compass; I keep ending up copy/pasting the
same mixin to all our projects.

!important would definitely be wise to include, specially for those
who have to "fix" legacy projects in which they have little control
over other selectors used. It isn't pretty, but it gets the job done
in a way that "just works". We don't have to care about semantics for
class names: if the mixin is called "hide" (like we have "hide-text")
that's within Compass' naming pattern and you can include it in any
class name you want.


On Feb 3, 12:25 pm, John Albin Wilkins <johnalbinwilk...@gmail.com>
wrote:

> Hi Capi!
>
> I dislike !important too. However, in this case, it is being used correctly. We want an "invisible" element to have absolute positioning no matter what CSS is applied to that same element in different rules. Since ".element-invisible" has a very low specificity, almost any CSS rule setting position on that element will break the invisibility.
>
> Also, "element-invisible" _is_ semantic. We're trying to make an HTML element invisible to sighted users, but not make it inaccessible. What would you suggest as a better name?
>

> Also +1 for suggesting this as a feature to Compass. I believe the HTML5 Boilerplate already copied this method into its CSS. (Though they renamed it to ".visuallyhidden".)https://github.com/h5bp/html5-boilerplate/blob/master/css/style.css

>
>  - John
>
> On Feb 1, 2012, at 7:58 AM, Capi Etheriel wrote:
>
>
>
>
>
>
>
> > So, Drupal solves it like this
>

> >https://github.com/drupal/drupal/blob/7.x/modules/system/system.base....

>
> > .element-invisible {
> >   position: absolute !important;
> >   clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
> >   clip: rect(1px, 1px, 1px, 1px);
> > }
>
> > it works fine, but as you might imagine, focusable elements will confuse users (particularly keyboard usesr who like to tab around as a crazy rabbit). Drupal solves it like this:
>

> >https://github.com/drupal/drupal/blob/7.x/modules/system/system.base....

>
> > .element-invisible.element-focusable:active,
> > .element-invisible.element-focusable:focus {
> >   position: static !important;
> >   clip: auto;
> > }
>
> > I like the solution, although i don't like non-semantic classes and I definitely hate !important declarations. I thought this would be nice to port to Compass. Feedback?
>
> > --
> > You received this message because you are subscribed to the Google Groups "Compass" group.

> > To view this discussion on the web visithttps://groups.google.com/d/msg/compass-users/-/Dw6JeF_NKRAJ.

[Chris Eppstein]

Can someone make up a pull request with tests and docs?

http://compass-style.org/help/tutorials/contributing/

chris

[Mario "Kuroir" Ricalde]

Please if you're working on the pull request post it here to avoid
duplicated effort.

2012/2/10, Chris Eppstein <ch...@eppsteins.net>:

--
Enviado desde mi dispositivo móvil

*
*
*█ Mario "Kuroir" Ricalde*
*█ **Front-end Engineer *
*█ **kuroir@twitter*
*█ *+1 ‪(415) 800-415-4‬

[Capi Etheriel]

The point, John, is not whether it is a semantic classes, but if it is semantic to use a class at all.
I can use a dummy selector to hold my 'hide-element' properties:

.-drupal-hide-element {

}

And then whenever I need to hide an element, I'd just extend that class:

nav .title {
  @extend .-drupal-hide-element;
}

Of course, there is a reason Drupal uses a class: to allow PHP developers to hide elements.
It is handy, although non semantic. And Compass users shouldn't deal with the class, just with the mixins :)

[Capi Etheriel]

silly me, forgot to copy the .-drupal-hide-element class properties:

.-drupal-element-invisible {
  position: absolute;

  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px); }

.-drupal-element-focusable {
  @extend .-drupal-element-invisible;
  &:active, &:focus {
    position: static;
    clip: auto; } }