Building a Balance Sheet: Step 31

HTML-CSS
1

Hello. I have a question regarding the CSS code for Step 31 of “Learn More About CSS Pseudo Selectors By Building A Balance Sheet.”

We are trying to access elements of the sr-only class to make them invisible to sighted users, while allowing the screen reader to access it for those hard of seeing or blind.

Below is the HTML code for sr-only class span elements:

<thead>
  <tr>
    <td></td>
    <th><span class="sr-only year">2019</span></th>
    <th><span class="sr-only year">2020</span></th>
    <th class="current"><span class="sr-only year">2021</span></th>
  </tr>
</thead>

There are other parts of the code that contain sr-only class elements, but since they all work the same way, I just brought one part of the code.

Below is the CSS code that targets the sr-only class:

span[class~="sr-only"] {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  -webkit-clip-path: inset(50%);
}

Q1. Why is clip: rect(1px, 1px, 1px, 1px); included?

According to clip - CSS: Cascading Style Sheets | MDN, the clip property only applies to absolutely positioned elements (position:fixed or position:absolute). However, by default, the position property for all HTML elements in CSS is static. Thus, the clip: rect(1px, 1px, 1px, 1px); doesn’t have any effect on the elements.

I’d assume that if we wanted to use the clip property, we would do this:

span[class~="sr-only"] {
  border: 0;
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
}

Q2. What is -webkit-clip-path and how is it different from clip-path?

I have tried searching Google, but I keep getting the message that it doesn’t match any documents.

Q3. Why not only use clip-path: inset(50%)?

I don’t see any difference in results from only using clip-path: inset(50%). Is there anything going on behind the scenes by using clip and -webkit-clip-path?

Q4. Why do we set border: 0? What effect does it have?

2

You are correct that clip can only be use with absolutely positioned elements. Good eye! You will add that property in step 34. The course is just having you add a few things at time so it’s not so overwhelming on one step.

Q2. What is -webkit-clip-path and how is it different from clip-path?

When new CSS properties are first introduced by a browser and aren’t supported by other browsers yet then the browser will add a unique prefix to the property name to indicate that it is only supported in that browser. In this case the prefix is -webkit-, which is the prefix used by Chrome and Safari browsers. Then, as the property becomes supported by all of the other browsers the prefix can be dropped. But there still may be some older browsers out there that only recognize the prefixed version and so you include it just in case. It does no harm.

I trust the explanation above answers this.

The properties used to visually hide something on the page but still make it accessible to screen reader users have been tested over the years and refined as bugs are found. I can’t tell you exactly why border: 0 is used but there was most likely an issue with some combination of screen reader and browser that was fixed by adding it.

1 Like
3

Thank you so much for answering all my questions! It all makes better sense now.

I should probably go through all the steps before asking immediately, so that I don’t ask redundant questions:) I have a tendency of getting caught up in one step without moving on if I don’t understand it haha.

Thank you again for the help. Hope you have a great day!

1 Like
4

Actually, I think this is perfect and you shouldn’t stop at all. It shows that you’ve been paying attention and really understand what you’re doing. Perhaps wait a few steps next time just to make sure, but never stop questioning things that don’t quite make sense and looking for their answers. If you ask me, curiosity is one of the most important traits a programmer can have and it seems like you have that in spades.

5

Thank you for your advice and encouragement! Will definitely do that.

6

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