Tag: css

<picture>: The Picture element (MDN Web Docs)

The HTML picture element serves as a container for zero or more source elements and one img element to provide versions of an image for different display device scenarios.

"The HTML <picture> element serves as a container for zero or more <source> elements and one <img> element to provide versions of an image for different display device scenarios."
A Complete Guide to SVG Fallbacks | CSS-Tricks by Amelia Bellamy-Royds (CSS-Tricks)

The following is a guest post by Amelia Bellamy-Royds and me. Amelia and I recently presented at the same conference together. We both covered SVG, yet

"Image fallback. This is what most people think of as an SVG fallback: a PNG or GIF image that represents the same graphic, just with a larger file size and poorer resolution."
CSS Grid Responsive Layout | Responsive Web Design (Responsive Web Design)

A three line approach to creating a responsive grid system. .container { display: grid; /* Display as a Grid */ grid-template-columns: repeat(auto-fit,


.container {
display: grid;
/* Display as a Grid */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* repeat = as many times as you can fit */
/* auto-fit = fit as many items on the line as possible, go bigger if you need to */
/*minmax = (min size, max size) = the minimum size the column should be is 200px, but if there's space then give them all 1fr of that width. */
grid-gap: 10px;
}