Add !important to CSS attributes of .element-invisible in system-behavior.css

We decided to leave !importants out of core, you can add them in your theme.

It needs unix style endings your patch, if you are working on windows, download notepad++ and choose unix style.

Crosslinking: #730754: CSS coding standards: No !important in core/contrib modules, ONLY IN THEMES

I'll ask sun to jump in, he started the discusion ;)

Hmmm… I'd almost consider this an exception to the "no !important in core" rule.

I actually think the "position" property is more likely to be accidentally overriden then the height property. But if you override any of the three properties, you're going to get some visible artifacts showing.

We're actually seeing this issue in Bartik if its used during installation. See screenshot in comment #8 of #790556: Make the Maintenance Page Kick Ass

I'm RTBCing this, but I'm going to ping Sun and Jacine to get their input.

Can't find them in IRC. Pinged them in twitter. Setting back to "Needs review" until I hear from them.

Why only for .element-invisible? What about the other generic classes? i.e. at least .element-hidden (but possibly also .js-hide, .js-show)?

I'm equally against !important, but this usage here seems to make sense.

I agree that .element-invisible qualifies as an exception here. I don't think .js-hide, .js-show or .element-hidden fall into this category, because they are only dealing with showing/hiding which isn't likely to break anything.

I also think that since it is such a special case, it would also be worth adding more aggressive "reset" properties because it is far too fragile right now. All you have to do is add a background, border, padding or margins to .block h2, all of which is very common, and you break it. Normally, I would be very against something like this in core, but in this case, I think it makes perfect sense.

I'm slightly confused. The statement in #19 applies to all, margin, padding, border, background, etc., since the element is no longer part of the rendered/aligned DOM tree.

Why aren't we using display: none; ?

This means we should add left: -999em;, so as to actually position the element invisible?

The left solution gives possible promblems in RTL, consider that while choosing for a solution. The current toolbar skip link uses left:-999px to hide the text but it causes a huge horizontal scrollbar in RTL (in IE6 and IE7). Will this approach fix that?

Counter-recommendation: Just use left: -999em; along with corresponding RTL styles (left: auto; right: -999em;).

+++ modules/system/system-behavior.css	Wed May 19 18:28:17 2010
@@ -296,10 +296,11 @@
- * causes issues for keyboard only or voice recognition users.
+ * causes issues for keyboard only or voice recognition users. To prevent that
+ * these properties get unintentionally overriden by themers they are enforced
+ * by "!important".

"!important" is used to prevent unintentional overrides.

+++ modules/system/system-behavior.css	Wed May 19 18:28:17 2010
@@ -296,10 +296,11 @@
-  position: absolute;
+  position:absolute !important;

Missing space between colon and value.

+++ modules/system/system-behavior-rtl.css	Wed May 19 18:26:33 2010
@@ -82,3 +82,20 @@
+ *
+ * Used for information required for screen-reader users to understand and use
+ * the site where visual display is undesirable. Information provided in this
+ * manner should be kept concise, to avoid unnecessary burden on the user. Must
+ * not be used for focusable elements (such as links and form elements) as this
+ * causes issues for keyboard only or voice recognition users. To prevent that
+ * these properties get unintentionally overriden by themers they are enforced
+ * by "!important".

We can remove the description (not the summary) in the RTL styles.

+++ modules/system/system-behavior-rtl.css	Wed May 19 18:26:33 2010
@@ -82,3 +82,20 @@
+.element-invisible {
+  position:absolute !important;

No need to repeat position: absolute; in RTL.

78 critical left. Go review some!

This should get be reviewed by someone with expert knowledge in this area.

counter-recommendation: Just use left: -999em; along with corresponding RTL styles (left: auto; right: -999em;).

@sun
Your suggestion doesn't always work in IE7 and IE6, thats why we are stuck with the rtl toolbar patch.
This blog (about drupal) is saying the same thing: http://www.held.org.il/blog/?p=260

But maybe we just have to css hack rtl if this is the best solution. :(

Suggest that the discussion about modifying .element-invisible, other than !important, be moved to #718922: system class: .element-invisible does not work with VoiceOver on OS X Snow Leopard, as a discussion is already going on there regarding how to rework .element-invisible.

1. display: none, does not work, screen-readers respect this and don't provide access to the element. This is expected and appropriate behavior.

2. Pushing the element above the top of the page can cause screen jumping if anything focusable is hidden. I don't personally have a problem with this since nothing focusable should * ever * be hidden with .element-invisible.

3. Hiding to left / right have the problems already discussed here.

4. That is why we went with the current approach, which AFAIK, was working well until VoiceOver on Snow Leopard stopped recognizing it.

Thanks.

This should be added to the theming docs & maybe the upgrade page -> http://drupal.org/node/254940#element-hidden

I think the !important needs to be applied. Without the !important in the core css, everyone is going to have to either override the core .element-invisible rule with one with higher specificity or use another convention; this all defeats the purpose of a shared convention like this.

For example, the element-invisible functionality is broken in "seven" theme. You can add the class=element-invisible attribute in the page preprocess function and it is applied correctly, but seven's css:

#branding h1.page-title {
  color: #000;
  margin: 0;
  padding-bottom: 10px;
  font-size: 18px;
  font-weight: normal;
  float: left;
}

has more specificity and breaks the h1 heading of form:

<h1 class="element-invisible page-title">hide this title with element-invisible</h1>

And it ends up with the bottom 2/3 of the title hidden; a definate unexpected mix of css rules.

#718922: system class: .element-invisible does not work with VoiceOver on OS X Snow Leopard will fix that one johnbarclay

And ya, it uses !important pretty darn extensively - http://drupal.org/node/718922#comment-2995514

marking as duplicate since http://drupal.org/node/718922 addresses same exact code and would lead to conflict if both are accepted.

718922 is related to accessibility, which seems to trump in importance, plus it is also Reviewed & Tested by the community.

( found as part of #LADrupal code sprint while working on critical UI issues / new Barktik theme )