Here is a list of case examples that you may explore to learn and adapt to your requirements.
- Accessible Gallery: Very simple to use. Technology stack: HTML, CSS, TypeScript.
- Supported mime-type by media audio or video: Check which MIME types specified by your browser that should be able to successfully play the audio and video.
- CSS background lazy loading: Can you lazy load CSS background images? It isn’t available out of the box, but it can be done using
- CSS content hidden from the screen reader: Test hiding CSS
contentvalue from the assistive technologies like screen reader.
- Improved lazy loading for video, audio, and image: Use this solution for lazy loading of video, audio or image files, but only when item is in the viewport within certain amount of time.
- Supported mime-type returned by MediaRecorder.isTypeSupported: Check, which mime-type is returned by MediaRecorder.isTypeSupported in your browser.
- Optimize image on the client side: Play with png and jpg image optimization on the client side only.
- Page To Speechalpha: Play with reading aloud text using the browser SpeechSynthesis interface of the Web Speech API.
- Accessibility and tooltip example: Tooltip variants with Anchor Positioning API and Popover API.
- Responsive images – live example: See how srcset and sizes are really working in a wild.
- All Google Docs URL parameters, functions, and commands: Try out all undocumented URL parameters for Google Docs Viewer live.
- What is my viewport size and other details: Determine viewport size, screen size, is touch device, orientation and scale text and pinch zoom factor.