spaceninja + picture   7

Reducing motion with the picture element
hm… I wonder if you could use `picture` + `prefers-reduced-motion`? I copied the code, dropped it into a post of mine, created a static image of an animated GIF, and turned on the “reduce motion” preference (System Preferences > Accessibility > Display). And then BOOM. Just worked. In real time!
fridayfrontend  accessibility  reduced-motion  picture  images  gifs 
11 weeks ago by spaceninja
10 HTML Elements You Didn't Know You Needed
today we’ll discover ten HTML elements you might not have known existed in the hopes that you can create more accessible, and structurally-sound web applications.
fridayfrontend  cssbasics  html  audio  blockquote  output  picture  progress  meter  template  time  video  wbr 
march 2019 by spaceninja
Don’t use <picture> (most of the time)
For most responsive images, you shouldn’t use the <picture> element. You should use srcset and/or sizes.
css  html  responsive  images  picture  srcset  sizes 
december 2017 by spaceninja
The simplest way I’ve found (so far) to distill/explain `srcset` and `sizes`
The simplest way I’ve found (so far) to distill/explain `srcset` and `sizes`:
html  responsive  rwd  images  srcset  sizes  picture 
june 2017 by spaceninja
Intrinsic Placeholders with the Picture Element
"I built out a little 'Intrinsic' Sass component that draws intrinsic ratio box to match your image’s aspect ratio."
css  intrinsic  placeholders  picture  html  performance 
february 2016 by spaceninja
Responsive Images: Use Cases and Documented Code Snippets to Get You Started
The new <picture> element can be verbose and confusing, because it solves a range of use cases. To help you match your requirements to the responsive image syntax, we’ve prepared this article full of examples.
html  picture  responsive  css  images 
august 2014 by spaceninja
Picturefill - A Responsive Image Polyfill
Picturefill is a JavaScript file (or a polyfill to be more specific) that enables support for the picture element and associated features in browsers that do not yet support them, so you can start using them today!
javascript  html  polyfills  picture  responsive  images 
august 2014 by spaceninja

Copy this bookmark:



description:


tags: