FLUID-4181: Update approach to fl-offScreen-hidden to not use negative text-indent

Description

Hiding content off-screen by a negative text-indent is not the best solution, esp with CSS3's ability to rotate content, etc. jQuery UI and Gary's portal stylesheets have other ways of doing this. We should check them out and probably update our styles.

Attachments

• hide-test.html

Comments

• heidi valles commented 2011-04-12T15:41:23.356-0400

  From Gary's portlet styles contribution in FLUID-41024, fss-layout-portlet.css:

  /* Hiding Stuff */
  /* Thanks to the Awesome HTML5 Boilerplate for compiling this great stuff: http://html5boilerplate.com/ */
  /* Hide for both screenreaders and browsers:

  • css-discuss.incutio.com/wiki/Screenreader_Visibility */
    .hidden { display: none; visibility: hidden; }

  /* Hide only visually, but have it available for screenreaders: by Jon Neal.

  • www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */
    .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
    /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
    .visuallyhidden.focusable:active,
    .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

  
  /* Hide visually and from screenreaders, but maintain layout */
  .invisible { visibility: hidden; }

• heidi valles commented 2011-04-12T16:40:59.448-0400

  jQuery UI's hidden classes:

  .ui-helper-hidden { display: none; }
  .ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }

• heidi valles commented 2011-04-13T14:30:30.493-0400

  hey Justin, can you look this over? The new fss-layout.css styles are in my github at https://github.com/heidiv/infusion/tree/FLUID-4181 and the attached test file can be put in demos/fss/

• Justin Obara commented 2011-04-18T13:15:39.603-0400

  I've cherry-picked the relevant commits from heidi's branch, modified the comments and release notes about the css from HTML5 Boilerplate and pushed it up to the project repo at 114c347fed569e601455dfaa90eb750d1ac020819