One of the HTML elements that frequently comes into collision with CSS is the img element. As we learned in Request Metrics’ Fixing Cumulative Layout Shift Problems on DavidWalshBlog article, providing image dimensions within the image tag will help to improve your website’s score. But in a world where responsive design is king, we need CSS and HTML to work together.
Most responsive design style adjustments are done via max-width values, but when you provide a height value to your image, you can get a distorted image. The goal should always be a display images in relative dimensions. So how do we ensure the height attribute doesn’t conflict with max-width values?
The answer is as easy as height: auto!
/* assuming any media query */
img {
/* Ensure the image doesn't go offscreen */
max-width: 500px;
/* Ensure the image height is responsive regardless of HTML attribute */
height: auto;
}
The dance to please users and search engines is always a fun balance. CSS and HTML were never meant to conflict but in some cases they do. Use this code to optimize for both users and search engines!
Page Visibility API
One event that’s always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?
Being a Dev Dad
I get asked loads of questions every day but I’m always surprised that they’re rarely questions about code or even tech — many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes…
Implementing Basic and Fancy Show/Hide in MooTools 1.2
One of the great parts of MooTools is that the library itself allows for maximum flexibility within its provided classes. You can see evidence of this in the “Class” class’ implement method. Using the implement method, you can add your own methods to…
Link Nudging with CSS3 Animations
One of the more popular and simple effects I’ve featured on this blog over the past year has been linking nudging. I’ve created this effect with three flavors of JavaScript: MooTools, jQuery, and even the Dojo Toolkit. Luckily CSS3 (almost) allows us to ditch…
Source link
