I don't understand what overflow do

HTML-CSS
1

Hello,
Make Elements Only Visible to a Screen Reader by Using Custom CSS
About this code:

.sr-only {
   position: absolute;
   left: -10000px;
    width: 1px;
    height: 1px;
    top: auto;
    overflow: hidden;
  }

position: absolute; OK
left: -10000px; OK. He hidden .
But for: width: 1px; I don’t understand what it done. The table change litle bit but his with isn’t 1px :thinking: Is it normal ?
Then height: 1px; nothing change. Weird ??
Then top: auto; What is it for to say “keep your natural position” ? If I delete it nothing change anyway.
And then overflow: hidden; if I delete it nothing chage as well. Why ?

2

There are many versions of a screen reader only class. A description of this particular one can be found on WebAIM. They also have a version that uses CSS clip.

The overflow: hidden property tells the browser to hide any content that overflows the element’s size. Since the element is sized to 1px for both width and height, then unless your content is a 1px square image it is going to overflow the element and thus the browser will hide all of that overflow so you never see it on the screen. I’m guessing this is in place just in case the element that has this class has position set to something other than absolute because another style rule is overriding this one. In that case, you may see a 1px dot on the page.

3

Ok but If Ido that:

.sr-only {
    position: ;
    left: ;
    width: 1px;
    height: 1px;
    top: auto;
    overflow: hidden;
  }

This change nothing. :face_with_thermometer:

And what about top: auto; ?

4

I think the default display type of table is causing the element not to collapse. If you set display: block; on the class you should see the height and width have an effect.

Not sure, it should be the default value for top anyway. You can check the default computed values in the browser (check the “Show all” checkbox).

5

Is it due to the web browser ?
With display: block that’s work in Chrome but not in Firefox.
I’m desapoited, I hope it’s not the same think pour all css properties :smirk:

Do you have a clear explanation ? How I have to do that’s work in this two web brosers ?

6

Sorry, I made a mistake. That’s work with Firefox and display: block.
In Chrome tool the display was “table” before I set it to “block”.
How to know what is the solution in this kind of problem, when I will be alone ?

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.