I'm a bit confused by how the width/height attributes of the img element are interpreted. CSS-Tricks says
Those attributes are sometimes referred to as presentational attributes. The thing to know about them is that they are overridden by any other styling information whatsoever. That makes them ideal as a fallback.
but I did some experiments, and it seems that those attributes can indeed prevent a layout shift, even when the CSS styles set some width (e.g. 100%). Also MDN states
Including height and width enables the aspect ratio of the image to be calculated by the browser prior to the image being loaded. This aspect ratio is used to reserve the space needed to display the image, reducing or even preventing a layout shift when the image is downloaded and painted to the screen.
which confirms my observations.
But then I usually put * { all: unset; display: revert; } in my CSS (inspiried by the New CSS Reset) and with this addition, layout shifts seem to came back. I also used https://pagespeed.web.dev/ to verify this. Any idea what property I'm unsetting here which shouldn't be unset? It is not width and height, i.e. adding img { width: revert; height: revert; } did not solve this. Even img { all: revert; } didn't help, so it seems that it's not about the image's properties.
Related
I work on a school project that has a website. The website is made by other graduated students and I have almost no HTML or CSS knowledge.
I want the website to be more mobile friendly, meaning that every frame and object gets resized according to what display size you have. Now there is text outside the display, iframes being too big, e.t.c. I have tried to fix this for hours by searching online without any major results.
The thing I've discovered is that changing from overflow-x: auto to overflow-x: hidden (in a CSS file) can help to remove overflow/bleed.
If you have any tips on how I can improve this page it would be strongly appreciated. Feel free to inspect the code using browser tools (CTRL+SHIFT+I).
How do I resize iframes, text, images, e.t.c. according to the width and height of the display?
Why is the footer text outside of the screen, and how can I fix it?
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
read this, you can also use bootstrap grid to make things easier
For skips the most of overlaps that could occur in the page, try to use the configuation below:
html, body {
// reset the browser config
margin: 0;
padding: 0;
}
* {
box-sizing: border-box; // padding and border will not be added to width and height calc
}
img {
max-width: 100%; // protect from images be more large than the container
}
// https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
box-sizing: border-box; will help you in mostly cases, but in some cases, after you inspect the element with overlap width, will can use the calc() to fix it, like:
element {
width: calc(100% - 30px);
}
In you case at https://aqpi.se/karta.html the problem is you setting a fixed width on the iframe element.
With overlap
Without overlap
Responsive web sites are created with media queries: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp.
I have a semantic ui site that I need to scale down, it all seems too zoomed in. I would like everything to be proportionally smaller, from fonts to containers and segments.
I have tried some css approaches such as zoom: 80%; but this does not work on firefox, even though it is exactly what I was looking for when testing it in google chrome.
I then tried using transform scale:
html {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
The problem with this approach is that the header and footer that were supposed to have 100% width no longer do.
Is there a semantic ui way of doing this? I have used site.variables to change the color of some predefined color variables, but I don't know if I can do it to change default size for things, decreasing px or em for every element proportionally.
Is there a CSS or Semantic UI way of doing this?
UPDATE:
As an example, when opening the site with my resolution, segments get a width of 1135px, applied by a media css when resolution is above 1200px. I would like this width either to be applied only for resolutions above 1300 or 1400px, or instead have the width of the segments to be 1000px with 1200px resolution. I would however prefer this to be set for all components in a standard way, instead of needing to write custom css for all elements to override default behaviour.
This is the current style that is being applied to each container:
#media only screen and (min-width: 1200px)
.ui.container {
width: 1135px;
margin-left: auto !important;
margin-right: auto !important;
}
Is there a better way of doing this, instead of overruling every size related style, for all width specifications? I find the site too big when I open it in a screen with a width near but above 1200.
Semantic UI uses Gulp to compile the CSS and Javascript for use in your project. You need the change the base font-size to make your components smaller. The thing is, you need to override this value before compiling. I'm afraid that that's why the solution of Barry127 won't work as expected, since the sizes for several components have already been calculated at this point.
Change the base size in {theme}/globals/site.variables:
/*-------------------
Base Sizes
--------------------*/
/* This is the single variable that controls them all */
#emSize : 14px;
/* The size of page text */
#fontSize : 14px;
Now compile everything by running gulp build. If you don't want to use the build tools shipped with Semantic UI, use your own (custom) gulp functions. Read more about theming here.
Never up- or downscale the whole document, this is not a good practice. There are still browsers out there that don't support the transform property. Also, this may cause text and borders to appear blurry.
I found a solution for this, so I am sharing it with the audience, in case someone else stumbles upon this issue.
I didn't want to simply override CSS rules as that seems a lot hard to maintain, so I wanted to have it done in a standard semantic ui way.
I ended up changing src/site/elements/container.variables, and changing the default width of the large monitor, which defaulted to 1200px:
#largeMonitorBreakpoint:1000px;
This way I guarantee that the breakpoint for large monitors is 1000px instead of 1200px, and so the width of the containers is based on this value, so every container will take up to 935px.
I think Semantic UI uses relative sizes for all elements so setting the font-size like this should do the trick:
html, body {
font-size: 14px;
}
The default value is mostly 16px
I am studying the Introduction to Linux as edX. The study page has a menu with 14px font size, and the actual content has 12px font size. I would like to reduce the font size of menu so that it takes less space. Simply making the div thinner is not a solution , it needs a smaller font size.
What CSS rule could I add to the menu's top-most div to affect all child divs' font sizes? I tried style="font-size:0.5em", style="font-size:50%", and style="font-size:8px" however none of these were able to overcome the CSS defined for the inner divs.
I stress that this question pertains to a website that I do not control, rather, I am trying to add a rule using the Firefox Inspect Element feature.
Not very pretty, but
.menu * { font-size: 11px !important; }
could be what you are looking for. Or,
.menu { transform: scale(0.8); }
although that could affect other things in undesirable ways.
You could also try using the non-standard:
.menu { zoom: 80%; }
Setting a font size of 0.5em on the parent element only works if the children also use em units. On the page in question, it seems that other units are used (px, probably). In this case, you can use the font-size-adjust property on the parent element to reduce the font size of all children. font-size-adjust is normally used to define the font size in terms of "x-height", so you should try values around 0.5.
Edit: As #Jackson pointed out, font-size-adjust only works on Firefox, but maybe that's good enough for you.
I recall it was long ago best practice to hardcode width and height for any image (generally so it allocated appropriate amount of space while loading), but now with most people on high speed and things generally more dynamic, what is the best practice for this? Is it still preferred that any content image have inline size set with html?
It doesn't matter if you set the size using HTML attributes or in a stylesheet, but you should still specify the size for images.
Eventhough images are loaded a lot faster nowadays, there is still a noticable delay between the page being displayed and the images pop up. It's still irritating when the layout of a page changes while the images are loading.
Yes, it is still preferred.
Plenty of people are not on high speed connections, and mobile is becoming more common.
It doesn't have to be inline - you can do it in external CSS. Some older browsers, if you don't specify the size, will just treat it as 0px;
Its always best to use CSS
You could hardcode the image height and width like this
.myimg img {
width: 10px;
height: 10px;
}
your image file itself should be the size you want it to display as, for the most part, if your concerned about slow loading especially! if you've got a 500X800 px image, that you only want to show as 100X200, scale it down! the file size will be much smaller so it will load faster :)
I would say yes if you want to make sure the white space is included in case of the image does not load or during document load. But no if you're scaling/resizing the image with those attributes, as its unnecessary load on the browser and causes image distortion.
If you are designing for cross browser compatibility, then you should at the very least specify the height and width in your CSS for the image itself. I have found inconsistency between FireFox, IE, Opera, etc if sizes are not specified specifically for the image. Due to the fact that each browser, not to mention different versions, handle adherence to HTML Standards differently. I have found that some browsers will do its best to extrapolate the HTML designers intent, while others just croak on the first error. I would also recommend em sizes, rather than pixel or %'s if you intend for the website to be viewed from a mobile device such as a tablet. I will say, however I have just started playing with HTML5 so I don't of the difference in HTML5 with respect to images.
I just answered a similar question on Wordpress Stack Exchange and also on Webmaster Stack. I am posting it here intending to clarify and help more people. (admins/moderators: if this isn't allowed, let me know the proper way to help).
doesn't really means you need to specify width and height in the html. What it means is that is you gotta reserve te proper space and when the image is loaded, the browser doens't have to reflow and repaint the page.
Besides, if you hardcode the dimensions, it kinds of defeats responsive behaviour. If your layout is not responsive, it's ok, but if you want to keep some responsiveness, you could use only CSS to achieve the results.
Most of time, using both width and max-width:100 will do the work, but this post from Smashing Magazine has an interesting technique: instead of using max-width:100%, you can use The Padding-Bottom Hack :
"With the technique, we define the height as a measure relative to the width. Padding and margin have such intrinsic properties, and we can use them to create aspect ratios for elements that do not have any content in them.
Because padding has this capability, we can set padding-bottom to be relative to the width of an element. If we also set height to be 0, we’ll get what we want. [...]
The next step is to place an image inside the container and make sure it fills up the container. To do this, we need to position the image absolutely inside the container, like so:"
.img-container {
padding-bottom: 56.25%; /* 16:9 ratio */
height: 0;
background-color: black;
}
.img-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I've learnt from somewhere a long time ago that specifying width and height for <img> elements in an HTML document speeds up and improves the page loading experience, and have generally kept to this practice:
<img src="" width="100" height="100" />
I'm now faced with a situation where I have a very large number of images on a single page, and I'd prefer to set the dimensions via CSS for both easier control and less repetitive HTML code:
.whatever img {width: 100px; height: 100px;}
Although this isn't a hugely serious issue, I'm wondering whether declaring the dimensions in CSS will have the same benefits as declaring the dimensions in HTML, or whether it ought to just be done in HTML directly?
Any insight would be welcome.
Thanks
I guess if the style sheet is available immediately, the image dimensions will immediately apply to the layout, which is the whole point of the exercise.
That guess is supported by Google's pagespeed rules. They seem to be fine with specifying images that way (emphasis mine):
Specifying a width and height for all images allows for faster rendering by eliminating the need for unnecessary reflows and repaints.
When the browser lays out the page, it needs to be able to flow around replaceable elements such as images. It can begin to render a page even before images are downloaded, provided that it knows the dimensions to wrap non-replaceable elements around. If no dimensions are specified in the containing document, or if the dimensions specified don't match those of the actual images, the browser will require a reflow and repaint once the images are downloaded. To prevent reflows, specify the width and height of all images, either in the HTML <img> tag, or in CSS.
The crucial difference between defining width and height in an attribute (as opposed to in CSS) is that it then becomes data, not a presentation parameter. Just imagine managing a following stylesheet
img[src='/images/tree.jpeg'] {
width: 100px;
height: 100px;
}
This needlessly entangles CSS with images. It also restricts adaptive layout, i.e. you can no longer have not-yet-loaded images take up correct space when one of their dimensions is inferred (e.g. width: 100%).
Also, consider CSS rules such as object-fit. Confusion about what width and heigth style properties then mean may arise.