你知道 style 和 script 标签可以设置为 display: block 吗？

前几天晚上，Amit Patel 提到，您可以使用 CSS 将 HTML 中的 script 标签设置为 display: block，然后使用 contentEditable 属性在行内编辑该代码。这意味着您可以在键入时实时看到所有更新在浏览器中显示。不久之后，Marius Gundersen 回复说，您也可以对 style 标签执行此操作。

所有这些对我来说都是一个奇怪的概念，所以我不得不做个演示来看看它是否有效

style {
  display: block;
}

我们为什么要这样做？好吧，我不太确定。但这绝对是一个很酷的演示。这也让我想起了 Jake Albaugh 很久以前做过的那个非常奇怪且精彩的演示，它恰好是我最喜欢的笔之一

Anup

# 2018 年 7 月 24 日

您也可以对 head 标签中的内容执行此操作。例如，title 元素。

Charles Robertson

# 2018 年 7 月 25 日

这很有趣！

Shahar

# 2018 年 7 月 25 日

太棒了 - 对 html 控件及其样式的全新视角

Santosh

# 2018 年 7 月 25 日

太棒了。喜欢这样的酷技巧

William Leffert

# 2018 年 7 月 25 日

.. 哦，天哪，很多年前（那时 CSS 还很年轻），我曾经想过要实现类似的东西。它令人难以置信，几乎没有实用价值，但非常酷。

dusuarez

# 2018 年 7 月 25 日

您也可以将 <title> 标签设置为 display:block

Howard Brown

# 2018 年 7 月 25 日

在我看来，这会产生安全隐患，因为用户可以在加载包含可编辑内容的脚本的页面后更改代码块。

太可惜了，因为我可以看到它如何用于使内联脚本块在接收为混合 html 和 javascript 页面段更新的响应文本（使用 ajax success 处理程序）时可执行。

water.and.sand

评论永久链接# 2018 年 7 月 25 日

前端没有什么是安全的。想要更改 JavaScript、HTML 或 CSS 的用户可以代理任何他们想要的的文件。据我所知，没有办法阻止他们这样做。

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

评论永久链接# 2018 年 7 月 26 日

您好像是在说以下内容是正确的
1) 这是一个新功能，实际上这个功能已经存在一段时间了。
2) 这是最终用户在不添加 display: block 的情况下也无法做到的。

CAS FEE

# 2018 年 7 月 26 日

有助于使任何页面显示其脚本和 css 的代码片段
document.body.insertAdjacentHTML(“beforeend”, “script, style {display: block; background-color: lightskyblue; font-family: monospace; white-space: pre;} style{background-color: lightpink}”);

Azragh

# 2018 年 7 月 26 日

终于找到了一点时间来玩这个。我发现浏览器在 style 块中按下回车键时会插入 div，这会破坏 CSS。按住 Shift 键并按下回车键时，代码会很好地执行，但不会出现不需要的 div，而是在每行末尾出现 <br/> 标签。无法缩进代码，因为多个空格不会被解释。

因此，将 display: block; 更改为

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

可以正确地格式化/缩进代码。

示例：https://codepen.io/Azragh/pen/LBLXGW

Robert

# 2018 年 7 月 26 日

我有一个 Dev-Stylesheet，它修改了从 BrowserSync 添加的 Script-Tag。由于我们只在开发环境中使用这个 Script-Tag，因此规则只会在那里应用。也可以添加 :before 和 :after 元素。这样，您就可以显示当前的 bootstrap 断点，或者显示 bootstrap 容器宽度

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;
            }
        }
    }
}

此评论线程已关闭。如果您有重要信息要分享，请联系我们。