Embedded

µEmbedded describes the styling of embedded content in µCSS: images (<img>), videos (<video>), audio (<audio>), SVG, and canvas.

Usage

Images are responsive by default:

<img src="photo.jpg" alt="Description de la photo">

Images receive max-width: 100% and height: auto, making them responsive without any additional class:

<img src="large-photo.jpg" alt="Photo responsive">

The image never exceeds the width of its container and maintains its aspect ratio.

The <video> and <audio> elements are displayed as inline-block:

<video controls>
    <source src="video.mp4" type="video/mp4">
</video>

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
</audio>

An <audio> element without the controls attribute is hidden (display: none).

SVGs inherit the text color via fill: currentColor, making them automatically theme-aware:

<svg width="24" height="24" viewBox="0 0 24 24">
    <path d="M12 2L2 22h20L12 2z"/>
</svg>

The SVG will adapt to the surrounding text color, including when toggling between light and dark modes.

The <canvas> element is displayed as inline-block:

<canvas width="300" height="150"></canvas>

Combine embedded content with <figure> to add a caption:

<figure>
    <img src="photo.jpg" alt="Paysage">
    <figcaption>Un paysage de montagne</figcaption>
</figure>

See µFigure for more details.

Always provide a descriptive alt attribute on <img> elements. Use alt="" for decorative images.
Add subtitles (<track>) to <video> elements.
The controls attribute on <audio> and <video> is essential for accessibility.
Inline SVGs should have a role="img" and an aria-label or an internal <title>.