Hidden Features of CSS

Hidden Features/Properties/Attribute/Tags of CSS3 and HTML

For me one area of HTML and CSS that most people don’t discover is the extensive internationalisation support, with HTML elements like <ruby>, attributes like hreflang="", and CSS like {list-style-type: cjk-ideographic;}. Admittedly while I’ve used all of these, the vast majority of people won’t ever need to.

To answer your second (woops, updated) question, browsers are implementing different parts of the HTML5 and CSS3 specifications, and at differing rates. Generally Webkit browsers (Safari, Mobile Safari, Crome) and FireFox are implementing the fastest, Opera is doing a good job, and Internet Explorer is drunk in the corner. @Kobi’s answer has some links to what browsers support what.

Regarding when you can rely on these new specifications for a business site, that entirely depends on your users and what browsers they use. If your site is targeting iPhone users you can use a lot already. However this isn’t the best way to think about the issue. Most of the CSS3 properties that have been implemented, such as rounded corners, drop shadows, and CSS gradients, actually degrade really nicely so you can use them to reward users with good browsers right now. This idea is called progressive enhancement.

As for HTML5, it’s 90% HTML4 with defined error handling, so changing to HTML5 is as easy as changing your doctype—no other changes required. If you don’t use the new semantic elements then IE has no problem with HTML5. The benefits of the HTML5 doctype are a far better spec to refer to, two validators with more informative error messages (I think @Marius means HTML5 forms validation), and the ability to use ARIA roles. I wrote an article on changing from HTML4/XHTML1 to HTML5, and cover the benefits in doing so.

HTH

css property behaving weirdly -- hidding html element but leaving a big blank space element occuping the same space of the hidden element in website

Use display:none;
instead of visiblity:hidden

visibility:hidden in firefox how to?

you can always try setting font-size:0 while this is not fully supported.

.module::first-letter{

    font-size:0

}

<div class="module">Hide Letter H  </div>

CSS hide elements behind logo

You can check out the Line-On-Sides Headers CSS Trick.

Something like this:

body {

  background-color: black;

  color: white;

}

.fancy {

  line-height: 0.10;

  text-align: center;

  font-size: 81px;

  margin-top: 20px;

}

.fancy span {

  display: inline-block;

  position: relative;

}

.fancy span:before,

.fancy span:after {

  content: "";

  position: absolute;

  height: 5px;

  border-top: 1px solid white;

  top: 0;

  width: 200px;

}

.fancy span:before {

  right: 100%;

  margin-right: 15px;

}

.fancy span:after {

  left: 100%;

  margin-left: 15px;

}

<div class="fancy"><span class="fancy">LOGO</span>

</div>

Does an elements with the attribute aria-hidden and css visibility:hidden get read by screen readers?

Your question is difficult to answer because each screen reader (like each browser) will be implemented with different features. Your best bet is to choose which screen readers you want to specifically support and then read their documentation to ensure that your website will work as expected. Even then, you'll probably need to do some actual testing.

According to WebAIM (as of January, 2014):

• JAWS is the most common primary screen reader
• VoiceOver and NVDA were also commonly used (over 33%)

---

UPDATE: According to WebAim User Survey #8 (2019):

• NVDA and JAWS are neck-and-neck for the primary screen reader, commanding over 80% of market share between them. VoiceOver is in third place with about 13% of market share
• Narrator is also commonly used (over 30%)

---

According to http://webaim.org/techniques/css/invisiblecontent/:

visibility: hidden; and/or display:none;

These styles will hide text from all users. The text is removed from the visual flow of the page and is ignored by screen readers. Do not use this CSS if you want the content to be read by a screen reader. But DO use it for content you don't want read by screen readers.

width:0px, height:0px or other 0 pixel sizing techniques

As above, because an element with no height or width is removed from the flow of the page, most screen readers will ignore this content. HTML width and height may give the same result. Do not size content to 0 pixels if you want the content to be read by a screen reader. Content styled with font-size:0px or line-height:0 may work, though the elements would still take horizontal space on the screen. All of these techniques may result in search engine penalties as they may interpreted to be malicious.

text-indent: -10000px;

This approach moves the content to the left 10000 pixels - thus off the visible screen. The actual value matters little, so long as it is positioned off-screen. Screen readers will still read text with this style. However, if a link or form element is given this style, it may result in a focus indicator (the dotted lines or 'marching ants' that surround a focused link) that extends from where the element should be located in the page to the place it is actually located (way to the left). This is not very pretty. This approach also causes issues in right-to-left langauges. As such, this approach may be a viable option if the element does not contain navigable elements, though better techniques are available.

CSS clip

position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);

A fairly modern technique of using CSS to hide or clip content that does not fit into a 1 pixel visible area will essentially hide the content visibly, but still allow it to be read by modern screen readers.

Absolutely positioning content off-screen

Using CSS to move hidden elements to a position off-screen is generally accepted as the most useful and accessible method of hiding content visually.

According to http://www.456bereastreet.com/archive/201205/hiding_visible_content_from_screen_readers_with_aria-hidden/:

There is a problem though (isn’t there always...). I made a very simple test page, and found that browser and screen reader support is still a bit lacking. Of the screen readers I have at my disposal, only VoiceOver and ChromeVox ignore content hidden with aria-hidden. JAWS does support it though (when used with Firefox), as is shown by the much more detailed testing done by John Foliot in HTML5 Accessibility: aria-hidden and role="presentation" and by Steve Faulkner in HTML5 Accessibility Chops: hidden and aria-hidden. (Both John and Steve go into more detail about related attributes, so I encourage you to read both articles.)

In the code why does removing overflow:hidden; from ul in css style, hides the menu?

Your menu didn't disappear, it is still there! You can inspect it like @Fran suggested or simply roll-over your mouse over it's area and you will see it getting highlighted. The behavior you are experiencing is because overflow: hidden; causes a new formatting to your block, that means that without it each element will follow it's own formatting and displays with the normal flow. Checkout this link for more details on block formatting context.

---

Related Topics