Preview URLs

• /en-US/docs/Web/API/File_API/Using_files_from_web_applications

(comment last updated: 2024-09-20 18:34:27)

I guess I was over ambitious by taking up this task 😞 . I hope I understood the context better this time. I am still not very confident with CSS styling.

Perhaps @estelle could say more about best practices here.

So I tested both stylings, the one in the MDN docs and other from the A11Y project. They both seem to have the same output but both of them use clip feature.

So next, I went to the clip doc on MDN to see any suggestions are made on how to replace clip. This suggested to use the new clip-path property, which is mentioned in the A11Y project and the comment in the issue.

So I then tested the code removing clip but keeping the clip-path: inset(50%); property, and the outcome seems to be same as with clip property.

So I went and changed the CSS styling by completely removing clip property and keeping the clip-path: inset(50%) property. The output was still same as with clip, which is expected as clip-path is replacing the deprecated clip property.

However, doing all these tests got me curious as to why there is a need to use any clip property at all. Because when I removed both clip and clip-path from styling, the outcome was still the same. There was no difference at all 🤔 .

Here are the screenshots.

With clip as in MDN docs:

with new clip-path

Without both clip and clip-path

Please let me know if I am missing anything in my understanding. I am still not great with CSS and all its complexities 🙈 .