Did you know that style and script tags can be set to display: block?

The other night, Amit Patel mentioned that you can set script tags in HTML to display: block with CSS and then edit that code inline with the contentEditable attribute. This means that you can then see it all update live in the browser as you type. Shortly after, Marius Gundersen replied that you can do this with the style tag as well.

All of this is such a weird concept to me that I just had to make a demo to see if it worked:

style {
  display: block;
}

Why would we want to do this? Well, I’m not entirely sure. But it is certainly a neat demo. This also reminds me of the ever-so bizarre and brilliant demo Jake Albaugh made a while back, which just happens to be one of my favorite pens of all time:

Comments

Anup

# July 24, 2018

You can also do it on stuff in the head tag too. E.g. the title element….

Charles Robertson

# July 25, 2018

This is very interesting!

Shahar

# July 25, 2018

Amazing – great new point of view on the html controls and styling of them

Santosh

# July 25, 2018

Awesome. Like this cool tips

William Leffert

# July 25, 2018

.. Oh man, I had an idea to do something similar to this many, many years ago (back when CSS was still young). Its mind-blowing and hardly practical, but so very cool.

dusuarez

# July 25, 2018

You can also set the <title> tag to display:block

Howard Brown

# July 25, 2018

Seems to me that this creates a security concern where a chuck of code could be changed by a user after they load a page with a content modifiable script.

Too bad, because I could see how this might be used to make inline script blocks executable when received as part of a mixed html and javascript page segment update in the response text using the ajax success handler.

water.and.sand

Permalink to comment# July 25, 2018

Nothing on the front end is secure. Users that want to change JavaScript, HTML, or CSS can proxy in whatever files they want. As far as I know, there’s no means to prevent them from doing that.

See:
– Charles for MacOS
– Fiddler for Windows
– Resource Override for Chrome
Brandon (Brandito Designs)

Permalink to comment# July 26, 2018

You’re saying this as if the following is true:
1) It’s a new feature when infact this feature has been around for awhile now.
2) It’s something the end-user can’t do already without even adding display: block.

CAS FEE

# July 26, 2018

Helpful snippet to make any page reveal its scripts and css:
document.body.insertAdjacentHTML(“beforeend”, “script, style {display: block; background-color: lightskyblue; font-family: monospace; white-space: pre;} style{background-color: lightpink}”);

Azragh

# July 26, 2018

Finally found a little time to play around with this one. I recognized that browsers insert div’s in the style block when hitting enter, which breaks the CSS. When hitting enter while holding shift the code gets executed well, but instead of unwanted div’s there are now <br/> tags at the end of each line. Indenting code is impossible, because multiple whitespaces won’t get interpreted.

So by changing display: block; to

display: inline-block;
width: 100%;
white-space: pre-wrap

it’s possible to format/indent code properly.

Example: https://codepen.io/Azragh/pen/LBLXGW

Robert

# July 26, 2018

I’ve got a Dev-Stylesheet, which modifies the Script-Tag added from BrowserSync. As we only use this Script-Tag in a dev-environment, the rule only gets applied there. It’s also possible to add :before and :after elements. That way you can should the current bootstrap breakpoint or show the bootstrap container width:

script[src*="browser-sync"] {
    pointer-events: none;
    z-index: 1000000;
    position: relative;
    display: block;

    @media print {
        display: none;
    }

    .no-csspointerevents & {
        display: none !important;
    }

    &:before {
        // info about current breakpoint
        position: fixed;
        bottom: 10px;
        left: 10px;
        padding: 3px 10px;
        background: rgba(#fff, .5);
        box-shadow: 0 0 4px rgba(#000, .5);

        @each $breakpoint in map-keys($grid-breakpoints) {
            @include media-breakpoint-only($breakpoint) {
                $min: breakpoint-min($breakpoint);
                $max: breakpoint-max($breakpoint);
                $range: '';
                @if $min and $max {
                    $range: '(#{$min} - #{$max})';
                } @else if $max {
                    $range: '(< #{$max})';
                } @else {
                    $range: '(> #{$min})';
                }
                content: '#{$breakpoint} #{$range}';
            }
        }
    }

    $grid-color: rgba(theme-color('primary'), .3);

    &:after {
        // show a grid
        content: '';
        position: fixed;
        top: 0;
        bottom: 0;
        border: 0 solid $grid-color;
        border-width: 0 1px;
        outline: 1px solid $grid-color;

        @include media-breakpoint-down(xs) {
            outline: none;
            left: $grid-gutter-width / 2;
            right: $grid-gutter-width / 2;
        }

        @each $breakpoint, $container-width in $container-max-widths {
            @include media-breakpoint-only($breakpoint) {
                left: $grid-gutter-width / 2;
                right: $grid-gutter-width / 2;
                outline-offset: $grid-gutter-width / 2;
                margin: auto;
                width: $container-width - $grid-gutter-width;
            }
        }
    }
}

This comment thread is closed. If you have important information to share, please contact us.