Wussten Sie schon, dass Style- und Script-Tags auf display: block gesetzt werden können?

Letzte Nacht erwähnte Amit Patel, dass man Script-Tags in HTML mit CSS auf display: block setzen und dann diesen Code mit dem Attribut contentEditable inline bearbeiten kann. Das bedeutet, dass Sie ihn live im Browser aktualisiert sehen können, während Sie tippen. Kurz darauf antwortete Marius Gundersen, dass dies auch mit dem Style-Tag möglich ist.

Das alles ist für mich ein so seltsames Konzept, dass ich einfach eine Demo erstellen musste, um zu sehen, ob es funktioniert

style {
  display: block;
}

Warum sollten wir das tun wollen? Nun, ich bin mir nicht ganz sicher. Aber es ist sicherlich eine nette Demo. Das erinnert mich auch an die immer-so-bizarr und brillante Demo, die Jake Albaugh vor einiger Zeit gemacht hat, die zufällig einer meiner Lieblingseinträge aller Zeiten ist

Kommentare

Anup

# 24. Juli 2018

Man kann das auch für Dinge im Head-Tag machen. Z.B. das Titel-Element….

Charles Robertson

# 25. Juli 2018

Das ist sehr interessant!

Shahar

# 25. Juli 2018

Erstaunlich – toller neuer Blickwinkel auf die HTML-Steuerelemente und deren Styling

Santosh

# 25. Juli 2018

Großartig. Solche tollen Tipps

William Leffert

# 25. Juli 2018

.. Oh Mann, ich hatte vor vielen, vielen Jahren eine Idee, so etwas Ähnliches zu tun (als CSS noch jung war). Es ist verblüffend und kaum praktikabel, aber sehr cool.

dusuarez

# 25. Juli 2018

Man kann auch das <title>-Tag auf display:block setzen

Howard Brown

# 25. Juli 2018

Meiner Meinung nach schafft das ein Sicherheitsproblem, bei dem ein Codeblock von einem Benutzer geändert werden könnte, nachdem er eine Seite mit einem modifizierbaren Skript geladen hat.

Schade, denn ich konnte mir vorstellen, wie dies verwendet werden könnte, um Inline-Skriptblöcke ausführbar zu machen, wenn sie als Teil eines gemischten HTML- und JavaScript-Seitenabschnitts im Antworttext über den Ajax-Erfolgs-Handler empfangen werden.

water.and.sand

Permalink zum Kommentar# 25. Juli 2018

Nichts am Frontend ist sicher. Benutzer, die JavaScript, HTML oder CSS ändern wollen, können beliebige Dateien per Proxy einschleusen. Soweit ich weiß, gibt es keine Möglichkeit, sie daran zu hindern.

Siehe
– Charles für MacOS
– Fiddler für Windows
– Resource Override für Chrome
Brandon (Brandito Designs)

Permalink zum Kommentar# 26. Juli 2018

Sie sagen das, als ob Folgendes wahr wäre
1) Es ist eine neue Funktion, obwohl diese Funktion schon seit einiger Zeit existiert.
2) Es ist etwas, das der Endbenutzer nicht bereits tun kann, ohne sogar display: block hinzuzufügen.

CAS FEE

# 26. Juli 2018

Hilfreicher Schnipsel, um jede Seite ihre Skripte und CSS anzeigen zu lassen
document.body.insertAdjacentHTML(“beforeend”, “script, style {display: block; background-color: lightskyblue; font-family: monospace; white-space: pre;} style{background-color: lightpink}”);

Azragh

# 26. Juli 2018

Endlich hatte ich etwas Zeit, mich damit zu beschäftigen. Mir ist aufgefallen, dass Browser divs in den Style-Block einfügen, wenn Enter gedrückt wird, was das CSS kaputt macht. Wenn man Enter hält und Shift drückt, wird der Code zwar ausgeführt, aber anstelle von unerwünschten divs gibt es jetzt <br/>-Tags am Ende jeder Zeile. Das Einrücken von Code ist unmöglich, da Mehrfachleerzeichen nicht interpretiert werden.

Durch die Änderung von display: block; zu

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

ist es möglich, Code richtig zu formatieren/einzurücken.

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

Robert

# 26. Juli 2018

Ich habe ein Entwicklungs-Stylesheet, das das von BrowserSync hinzugefügte Skript-Tag modifiziert. Da wir dieses Skript-Tag nur in einer Entwicklungsumgebung verwenden, wird die Regel nur dort angewendet. Es ist auch möglich, :before und :after-Elemente hinzuzufügen. Auf diese Weise können Sie den aktuellen Bootstrap-Breakpoint anzeigen oder die Bootstrap-Containerbreite anzeigen

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

Dieser Kommentarbereich ist geschlossen. Wenn Sie wichtige Informationen teilen möchten, kontaktieren Sie uns bitte.