Svelte Element Queries

@leveluptuts/svelte-element-query

Demo

Demo

Why Element / Container Queries

https://css-tricks.com/a-cornucopia-of-container-queries/

Usage

<script>
    import { container } from '@leveluptuts/svelte-element-query'
</script>

<div class="contain" use:container={{small: 0, medium: 200, large: 500}}>
    <h1>Hello</h1>
</div>

<style>
    .contain {
        border: dashed 5px var(--borderColor, #333);
    }

    :global(.medium) {
        --borderColor: red;
    }

    :global(.large) {
        --borderColor: blue;
    }
</style>

Sponsors

Level Up Tutorials

https://www.leveluptutorials.com

Cutting-edge, focused & high quality video tutorials for web developers and designers Syntax

Learn Svelte!

https://syntax.fm/

A Tasty Treats Podcast for Web Developers. Ft Wes Bos & Scott Tolinski

Thank you!