Skip to content

Conversation

@jvoisin
Copy link
Collaborator

@jvoisin jvoisin commented Aug 14, 2025

There is no need to repeat width="16" height="16" for every single externalIcon in the HTML, when we can specify this in the CSS instead.

There is no need to repeat `width="16" height="16"` for every single
externalIcon in the HTML, when we can specify this in the CSS instead.
@fguillot
Copy link
Member

I believe it was done this way to prevent layout shift on slow connections. When the width/height attributes are defined directly in HTML, the browser knows the size before the image and stylesheet loads, so it can reserve space in the layout. If you only use CSS, the browser may not reserve the correct space until the CSS is parsed.

@fguillot
Copy link
Member

https://developer.mozilla.org/en-US/docs/Glossary/CLS (web.dev may have a better doc)

Layout shifts may be caused, for example, by or elements that are not given width and height attributes, so the browser doesn't know how much space they will occupy until they are loaded.

@jvoisin
Copy link
Collaborator Author

jvoisin commented Aug 15, 2025

Even by using the GPRS setting in the devtools of Firefox (50 Kbps download/20 Kbps upload/500ms lattency minimum), I don't notice any layout shift.

dsh2dsh added a commit to dsh2dsh/miniflux that referenced this pull request Aug 15, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

2 participants