Add CSS Reset #27518
Closed
Add CSS Reset #27518
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
scruffian
requested review from
ajitbohra,
chrisvanpatten,
mkaz and
talldan
as code owners
|
Size Change: +91 B (0%) Total Size: 1.19 MB
ℹ️ View Unchanged
|
scruffian
force-pushed
the
add/css-reset
branch
from
a258b69 to
ab6a43f
Compare
aristath
reviewed
Dec 7, 2020
|
|
||
| // This resets the WordPress default | ||
| img { | ||
| height: auto; |
There was a problem hiding this comment.
Just a note for the height:auto here.
In the twentytwentyone theme this was causing a layout shift while the page was loading on slow connections. In order to fix that we had to add inline styles for the featured images (see https://github.com/WordPress/twentytwentyone/pull/692/files).
There was a problem hiding this comment.
@aristath Should that fix be baked into core then, and not just into this CSS reset?
If I recall correctly, this rule only became necessary after lazy loading images launched.
There was a problem hiding this comment.
Yeah, it became an issue after lazy-loading.
That function does the following:
- Gets the image width & height
- Calculates the aspect-ratio
- Adds
width:100%;height:X%(X calculated from the aspect-ratio) to the image inline.
If width:100% is OK for all themes, then we can definitely port the fix to core, but I don't think all themes will want that...
There was a problem hiding this comment.
Ah ok, I see what you mean — a 100% width would probably cause its own set of problems in some themes. 😄
But a global fix of some kind seems to be a good idea.
|
Closing in favour of #30092 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Adds some CSS reset code to minimize boilerplate code needed to build a theme.
Fixes #27116
How has this been tested?
Tested in TT1 blocks
Types of changes
Bug fix (non-breaking change which fixes an issue)
Checklist: