Hiding JSON-formatted data in the DOM with CSP enabled

[Gunnar Bittersmann]

Durch einen Tweet von Jake Archibald bin ich auf den Artikel Hiding JSON-formatted data in the DOM with CSP enabled von Mathias Bynens gestoßen. Dachte, der könnte für die eine oder den anderen nützlich sein.

(In Sachen hidden-Attribut gehe ich nicht mit Mathias mit, “or that it is being used to declare content to be reused by other parts of the page as opposed to being directly accessed by the user” [Spec] sollte das abdecken.)

LLAP 🖖

[dedlfix]

Tach!

(In Sachen hidden-Attribut gehe ich nicht mit Mathias mit, “or that it is being used to declare content to be reused by other parts of the page as opposed to being directly accessed by the user” [Spec] sollte das abdecken.)

Das was du da zitierst ist die Spec und nicht Mathias' Aussage. Was genau ist denn nun deine Meinung dazu?

Ich hab mit dem hidden-Attribut keine besonders guten Erfahrungen im Zusammenhang mit Angular 2 gesammelt. In Angular 1 gab es ng-show und ng-hide zum Anzeigen und Verstecken von Content (zusätzlich zu ng-if, welches die Existenz im DOM beeinflusste). Das hatte immer funktioniert. Angular 2 hat ng-show/hide zugunsten von hidden gestrichen und es klappt damit meist nicht wie gewünscht, weil sich das durch einfaches display:nicht-none; wirkungslos machen lässt und man dafür zusätzliche Verrenkungen im CSS benötigt.

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

(In Sachen hidden-Attribut gehe ich nicht mit Mathias mit, “or that it is being used to declare content to be reused by other parts of the page as opposed to being directly accessed by the user” [Spec] sollte das abdecken.)

Das was du da zitierst ist die Spec und nicht Mathias' Aussage. Was genau ist denn nun deine Meinung dazu?

Wie immer: Dinge mit der passenden Technologie umsetzen, mit der einfachsten. Das ist hier HMTL.

Wenn das Nichtanzeigen etwas Funktionales und nicht bloß was Stylisches ist, gehört das mit HTML umgesetzt. Die Seite soll ja auch funktionieren, wenn das Stylesheet nicht geladen wird (sei es durch Verlust der Netzwerkverbindung oder durch Abschalten von CSS vom Nutzer oder vom Seitenbetreiber am CSS Naked Day).

Angular 2 hat ng-show/hide zugunsten von hidden gestrichen und es klappt damit meist nicht wie gewünscht, weil sich das durch einfaches display:nicht-none; wirkungslos machen lässt und man dafür zusätzliche Verrenkungen im CSS benötigt.

[hidden]
{
  display: initial;
  opacity: 0.1;
}

Was ist daran „Verrenkung“? (CodePen)

LLAP 🖖

[dedlfix]

Tach!

Angular 2 hat ng-show/hide zugunsten von hidden gestrichen und es klappt damit meist nicht wie gewünscht, weil sich das durch einfaches display:nicht-none; wirkungslos machen lässt und man dafür zusätzliche Verrenkungen im CSS benötigt.

[hidden]
{
  display: initial;
  opacity: 0.1;
}

Was ist daran „Verrenkung“? (CodePen)

Die Verrenkung fängt dann an, wenn eine Regel mit Klassenselektor das display (und in deinem Fall noch das opacity) anders setzt. Der überschreibt schon mal ganz locker den Attributselektor. Dann fängt der K(r)ampf mit dem Finden eines spezifischeren Selektors an. Besonders dann, wenn man nicht nur selbst geschriebenes CSS im Projekt hat. (Und opacity ist nicht die Lösung, denn damit bleibt der Platz belegt.)

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

Die Verrenkung fängt dann an, wenn eine Regel mit Klassenselektor das display (und in deinem Fall noch das opacity) anders setzt. Der überschreibt schon mal ganz locker den Attributselektor. Dann fängt der K(r)ampf mit dem Finden eines spezifischeren Selektors an.

Bei dieser Regel ist !important angebracht. Hätte ich auch gleich reinschreiben können. Hab den Pen angepasst.

(Und opacity ist nicht die Lösung, denn damit bleibt der Platz belegt.)

War ja nur ein Beispiel.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Wie immer: Dinge mit der passenden Technologie umsetzen, mit der einfachsten. Das ist hier HMTL.

Wenn das Nichtanzeigen etwas Funktionales und nicht bloß was Stylisches ist, gehört das mit HTML umgesetzt. Die Seite soll ja auch funktionieren, wenn das Stylesheet nicht geladen wird (sei es durch Verlust der Netzwerkverbindung oder durch Abschalten von CSS vom Nutzer oder vom Seitenbetreiber am CSS Naked Day).

Hinzu kommt, dass IE nur per CSS versteckten Inhalt nicht aus dem accessibility tree herausnimmt. [HTML5 Accessibility Chops: hidden and aria-hidden]

“Recommendations:
Hiding content from all users
If you want to hide content from all users, use the HTML5 hidden attribute (along with CSS display:none for browsers that do not yet support hidden) There is no need to use aria-hidden.”

LLAP 🖖