shiba. Posts - Answer Overflow

shiba.

Posts Comments

KPCKevin Powell - Community

•Created by shiba. on 4/15/2024 in #resources

Vanilla CSS mixins alternative using @layer

https://kizu.dev/layered-toggles/

1 replies

KPCKevin Powell - Community

•Created by shiba. on 3/27/2024 in #resources

HTML and CSS is getting crazy

<div class="shadow-root-example">
    <strong>Shadow Root Example</strong>
    <div class="isolated">
        World
        <template shadowrootmode="open">
            Hello
            <div><slot>Default</slot></div>
            <span class="blue">Blue</span>

            <style>
                :host {
                    color: red;
                }

                div {
                    color: green;
                }
            </style>
        </template>
    </div>
</div>

<div class="style-scope-example">
    <strong>Style @scope Example</strong>
    <div class="scoped">
        Hello
        <div>World</div>
        <span class="blue">Blue</span>

        <style>
            @scope {
                :scope {
                    color: red
                }

                div {
                    color: green
                }
            }
        </style>
    </div>
</div>

<style>
    :root {
        color-scheme: dark;
    }

    .blue {
        color: blue;
    }
    
    body {
        display: grid;
        place-content: center;
        gap: 1em;
    }
</style>

<div class="shadow-root-example">
    <strong>Shadow Root Example</strong>
    <div class="isolated">
        World
        <template shadowrootmode="open">
            Hello
            <div><slot>Default</slot></div>
            <span class="blue">Blue</span>

            <style>
                :host {
                    color: red;
                }

                div {
                    color: green;
                }
            </style>
        </template>
    </div>
</div>

<div class="style-scope-example">
    <strong>Style @scope Example</strong>
    <div class="scoped">
        Hello
        <div>World</div>
        <span class="blue">Blue</span>

        <style>
            @scope {
                :scope {
                    color: red
                }

                div {
                    color: green
                }
            }
        </style>
    </div>
</div>

<style>
    :root {
        color-scheme: dark;
    }

    .blue {
        color: blue;
    }
    
    body {
        display: grid;
        place-content: center;
        gap: 1em;
    }
</style>

Thanks to "Declarative Shadow Root" we can now create shadow roots without JS. And Thanks to CSS @scope we can scope CSS into an element. Shadow Root isolating styles (with some exceptions like color, font and etc..) also has its own use cases. For example you mostly design your site with layouts like an app. And probably have CSS defaults that helps you build layouts. But for an article or blog post, you might want different defaults, like instead of making margin: 0 on everything, you might wanna use default margins, and you might want default font-sizes for the headings, and default look for the <ul> or <ol> and etc... So you can just create a Shadow Root in those cases. Being able to create an isolated space with its own defaults without any conflicts is great.

2 replies

KPCKevin Powell - Community

•Created by shiba. on 5/6/2023 in #front-end

Is it possible to add margin to the scroll that happens when you type.

In HTML when you type something, browser scrolls you to the place you are typing to if its not in the screen. How do I add margin to that scroll? It scrolls to the place you are typing at, not to do element you are typing to. So for example if you have a textarea bigger than the screen height it will still scroll to the place that you are typing the text to. I tried scroll-margin but didn't work. I have a textarea that can go bigger than the screen height

1 replies

Gaming

Programming