6 Simple Typography Tips to More Professional Looking Websites
Do This to Improve Image Loading on Your Website
In the video embedded below, Jen Simmons explains how to improve image loading by using width and height attributes. The issue is that there’s a lot of jank when an image is first loaded because an img will naturally have a height of 0 before the image asset has been successfully downloaded by the browser. Then it needs to repaint the page after that which pushes all the content around. I’ve definitely seen this problem a lot on big news websites.
Anyway, Jen is recommending that we should add height and width attributes to images like so:
<img src="dog.png" height="400" width="1000" alt="A cool dog" />This is because Firefox & Chrome will now take those values into consideration and remove all the jank before the image has loaded, even when you override those values in CSS with a fluid width and thus unknown height. That means content will always stay in the same position, even if the image hasn’t loaded yet. In the past, I’ve worked on a bunch of projects where I’ve placed images lower down the page simply because I want to prevent this sort of jank. I reckon this fixes that problem quite nicely.
Direct Link to Article — Permalink
The post Do This to Improve Image Loading on Your Website appeared first on CSS-Tricks.
Editor Activity Indicator
You might notice a smidge of extra visual activity happening down in the Pen Editor footer lately. We're trying to show you a bit more information about what the Pen Editor is actually doing.
Here's an example (5 second video) where I'm editing some HTML to include an <em> tag or not, and the editor is doing stuff to make that happen for me:
The idea is to show you (and us!) what is happening in the Pen Editor as we do it. Like sometimes code needs to get processed. Sometimes the preview needs to get rebuilt. Sometimes your code is off being linted or formatted. There is a bunch of stuff that might be going on in the editor, and we wanted a dedicated place to be clear about that rather than having it be a silent mystery.
The post Editor Activity Indicator appeared first on CodePen Blog.
Google Introduces New Video Features to Ad Manager API
Google recently introduced new video ad features in the v202002 release of Google Ad Manager API. The most significant improvements include enhancements to historical reports, the association between video creative and ad registries, and metadata additions. A complete list of changes can be found in the release notes.
Google Completing Accelerated Budget Delivery Sunset
Google has announced the complete sunset of accelerated budget delivery. Last October, Google sunsetted its use with search campaigns, shopping campaigns, and shared budgets. Now, Google is beginning to sunset its use with other campaign types (this includes both shared and non-shared budgets). Such apps include Display, App, video campaigns and more.
What’s the Difference Between Width/Height in CSS and Width/Height HTML attributes?
Some HTML elements accept width and height as attributes. Some do not. For example:
<!-- valid, works, is a good idea -->
<img width="500" height="400" src="..." alt="...">
<iframe width="600" height="400" src="..."></iframe>
<svg width="20" height="20"></svg>
<!-- not valid, doesn't work, not a good idea -->
<div width="40" height="40"></div>
<span width="100" height="10"></span>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.
So, if CSS loads and has a declaration like:
img {
width: 400px;
}...that is going to override the width="500" on the <img> tag above. Presentational attributes are the weakest kind of styling, so they are overridden by any CSS, even selectors with very low specificity.
What might be a smidge confusing is that presentational attributes seem like they would have high specificity. These inline styles, for instance, are very strong:
<img style="width: 500px; height: 400px;" src="..." alt="...">Using an inline style (which works on any element, not a select few), we've moved from the weakest way to apply width and height to one of the strongest. Regular CSS will not override this, with a selector of any specificity strength. If we need to override them from CSS, we'll need !important rules.
img {
width: 400px !important;
}To reiterate, presentational attributes on elements that accept them (e.g. <img>, <iframe>, <canvas>, <svg>, <video>) are a good idea. They are fallback sizing and sizing information as the page is loading. They are particularly useful on <svg>, which may size themselves enormously in an awkward way if they have a viewBox and lack width and height attributes. Browsers even do special magic with images, where the width and height are used to reserve the correct aspect-ratio derived space in a situation with fluid images, which is great for a smooth page loading experience.
But presentational attributes are also weak and are usually overridden in the CSS.
The post What’s the Difference Between Width/Height in CSS and Width/Height HTML attributes? appeared first on CSS-Tricks.