CSS kopieren

[JürgenB]

Hallo,

ich möchte alle css-Eigenschaften eines Elements auf ein anderes übertragen. Gibt es da einen einfachen Weg? ich habe bisher nur den Weg gefunden, über getComputedStyle alles einzeln zu übertragen.

Zum Hintergrund: Ich möchte ein Element (th) klickbar machen. Dazu erzeuge ich im th einen button und kopiere den Inhalt über innerHTML um. Statt die css-Eigenschaften einzeln zu setzen und dabei einige zu vergessen, möchte ich alle css-Eigenschaften vom th auf den button übertragen.

Gruß
Jürgen

[Auge]

Hallo

ich möchte alle css-Eigenschaften eines Elements auf ein anderes übertragen. Gibt es da einen einfachen Weg?

Zum Hintergrund: Ich möchte ein Element (th) klickbar machen. Dazu erzeuge ich im th einen button und kopiere den Inhalt über innerHTML um. Statt die css-Eigenschaften einzeln zu setzen und dabei einige zu vergessen, möchte ich alle css-Eigenschaften vom th auf den button übertragen.

Der kürzeste Weg dürfte sein, die Definitionen für th auch für Buttons in th gelten zu lassen (th, th button {}).

Tschö, Auge

[JürgenB]

Hallo Auge,

Der kürzeste Weg dürfte sein, die Definitionen für th auch für Buttons in th gelten zu lassen (th, th button {}).

danke für den Tipp. Die Benutzer des Scriptes wissen aber nichts von einem nachträglich per JS eingefügten Button. Oft wird auch das Default-CSS verwendet.

Gruß
Jürgen

[Auge]

Hallo

Der kürzeste Weg dürfte sein, die Definitionen für th auch für Buttons in th gelten zu lassen (th, th button {}).

danke für den Tipp. Die Benutzer des Scriptes wissen aber nichts von einem nachträglich per JS eingefügten Button. Oft wird auch das Default-CSS verwendet.

Benutzen diese Clients nicht das Default-CSS und hast du dieses nicht unter deiner Kontrolle?

Tschö, Auge

[JürgenB]

Hallo,

Benutzen diese Clients nicht das Default-CSS und hast du dieses nicht unter deiner Kontrolle?

ich habe überhaupt keine Kontrolle über die Seite. Der Benutzer meines Scriptes bindet dieses ein und setzt ein class-Attribut. Das war's.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

ich habe überhaupt keine Kontrolle über die Seite. Der Benutzer meines Scriptes bindet dieses ein und setzt ein class-Attribut. Das war's.

Zwei Möglichkeiten:

• Der Nutzer muss zusätzlich zu dem Script auch das zur Bibliothek gehörige Stylesheet einbinden

oder:

• Du sorgst dafür, dass dein Script die zwei nötigen Regeln selbst zum Stylesheet hinzufügt.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

Zwei Möglichkeiten:

• Der Nutzer muss zusätzlich zu dem Script auch das zur Bibliothek gehörige Stylesheet einbinden

das gibt es hier nicht.

oder:

• Du sorgst dafür, dass dein Script die zwei nötigen Regeln selbst zum Stylesheet hinzufügt.

in einem anderen Script mache ich das schon so, aber es ist doch recht aufwändig, da man ja alles doppelt machen muss. Daher meine Suche nach so etwas wie a.css = b.css.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

• Der Nutzer muss zusätzlich zu dem Script auch das zur Bibliothek gehörige Stylesheet einbinden

das gibt es hier nicht.

Das liegt doch an dir.

• Du sorgst dafür, dass dein Script die zwei nötigen Regeln selbst zum Stylesheet hinzufügt.

in einem anderen Script mache ich das schon so, aber es ist doch recht aufwändig, da man ja alles doppelt machen muss.

Wieso doppelt? Wieso aufwändig?

Aber nochmal nachgedacht: Anstatt dich in ein Stylesheet einzuhängen erzeugst du einfach ein neues style-Element:

var sortierbarStyle = document.createElement('style');
sortierbarStyle.innerText = '.sortierbar > thead th > button { border: none; background-color: transparent; font: inherit; padding: 0 } .sortierbar > thead th > button::-moz-focus-inner { margin: -1px; border-width: 1px; padding: 0; }';
document.head.appendChild(sortierbarStyle);

Die Selektoren hab ich so spezifisch gemacht, damit sie womöglich andere in der Tabelle vorkommende Buttons nicht anfassen. Es ist aber vielleicht besser, deinen buttons etwas mitzugeben (Klasse?), was sie eindeutig selektierbar macht.

Daher meine Suche nach so etwas wie a.css = b.css.

for each (property in window.getComputedStyle(document.querySelector('.sortierbar > thead th')))
{
  …
}

Das willst du nicht wirklich.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

• Der Nutzer muss zusätzlich zu dem Script auch das zur Bibliothek gehörige Stylesheet einbinden

das gibt es hier nicht.

Das liegt doch an dir.

ja, und ich bin ein Freund von Scripten, die einfach zu nutzen sind.

Wieso doppelt? Wieso aufwändig?

wegen insertRule und addRule

Aber nochmal nachgedacht: Anstatt dich in ein Stylesheet einzuhängen erzeugst du einfach ein neues style-Element:

var sortierbarStyle = document.createElement('style');
sortierbarStyle.innerText = '.sortierbar > thead th > button { border: none; background-color: transparent; font: inherit; padding: 0 } .sortierbar > thead th > button::-moz-focus-inner { margin: -1px; border-width: 1px; padding: 0; }';
document.head.appendChild(sortierbarStyle);

gute Idee, an innerText habe ich jetzt garnicht gedacht.

Daher meine Suche nach so etwas wie a.css = b.css.

for each (property in window.getComputedStyle(document.querySelector('.sortierbar > thead th')))
{
  …
}

Das willst du nicht wirklich.

ganz bestimmt nicht! Aber genau so etwas habe ich als erstes gefunden.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

Der Benutzer meines Scriptes bindet dieses ein und setzt ein class-Attribut. Das war's.

Du willst das Ding überarbeiten? Mit dem Ziel, dass „Beachten Sie, dass dieser Sortierer nicht barrierefrei ist“ dann raus kann? Gut so. Andernfalls wäre an der Stelle „… und deshalb wertlos ist“ zu ergänzen.

Sortierbare Tabellen sind/waren in HTML bereits vorgesehen: per booleschem Attribut sortable fürs table-Element und sorted für die Kopfzelle der entsprechenden Spalte. Im aktuellen Draft von HTML 5.1 ist das allerdings nicht mehr enthalten. Aber vielleicht kommt es in einer späteren Version.

Da ist es vielleicht sinnvoll, das Ding als Polyfill dafür zu schreiben, also nicht für <table class="sortierbar">, sondern für <table sortable>

Oder als Web Component. Ich hab das mal gemacht:

• Web components: sortable table
• Web components: sortable table (w/ templates)

Siehe auch den Vortrag dazu ab Folie 67

LLAP 🖖

[JürgenB]

Hallo Gunnar,

Da ist es vielleicht sinnvoll, das Ding als Polyfill dafür zu schreiben, also nicht für <table class="sortierbar">, sondern für <table sortable>

das ist beim Wiki-Sortieret sicher möglich, bei meinem kann ich das aus Kompatibilitätsgründen nur zusätzlich anbieten.

Oder als Web Component. Ich hab das mal gemacht:

ein interessanter Ansatz. Die Custom Elements habe ich mir für ein anderes Script schon mal angesehen. Aber sowohl ich als auch diverse Browser benötigen da noch diverse Updates.

Gruß
Jürgen

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Sortierbare Tabellen sind/waren in HTML bereits vorgesehen: per booleschem Attribut

Da ist es vielleicht sinnvoll, das Ding […] für <table sortable> [zu schreiben]

„Ich sehe immer noch Vorteile darin, polyglottes HTML (also XML-Syntax) zu schreiben. Also Attribute (auch boolesche) immer mit Wert.“ (Gunnar Bittersmann)

SCNR 🖖
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

„Ich sehe immer noch Vorteile darin, polyglottes HTML (also XML-Syntax) zu schreiben. Also Attribute (auch boolesche) immer mit Wert.“ (Gunnar Bittersmann)

„Was kümmert mich mein Geschwätz von gestern?“ (Konrad Adenauer)

LLAP 🖖

[JürgenB]

Hallo Gunnar,

Da ist es vielleicht sinnvoll, das Ding als Polyfill dafür zu schreiben, also nicht für <table class="sortierbar">, sondern für <table sortable>

leider wird dadurch die Seite dann invalide. Mir ist klar, dass dieser Fehler keine Probleme bereitet, aber sollte man invalide Seiten im Wiki als Beispiel anbieten?

Gruß
Jürgen

[Gunnar Bittersmann]

@@Auge

Der kürzeste Weg dürfte sein, die Definitionen für th auch für Buttons in th gelten zu lassen (th, th button {}).

Nö. Üblicherweise wird man für th bspw. keine Schriftart/-größe explizit angeben; sondern diese erben lassen.

LLAP 🖖

[Auge]

Hallo

@@Auge

Der kürzeste Weg dürfte sein, die Definitionen für th auch für Buttons in th gelten zu lassen (th, th button {}).

Nö. Üblicherweise wird man für th bspw. keine Schriftart/-größe explizit angeben; sondern diese erben lassen.

Das ist hier unerheblich.

Wenn Jürgen im Eröffnungsposting sagt …

Statt die css-Eigenschaften einzeln zu setzen und dabei einige zu vergessen, möchte ich alle css-Eigenschaften vom th auf den button übertragen.

… gehe ich davon aus, dass er für th eben doch Eigenschaften definiert hat. Auch wenn nicht, erben ja nicht nur die th, sondern auch die button von ihren Elternelementen. Ausgenommen davon sind natürlich jene, die nur für sie selbst gelten (border, etc. pp.).

Tschö, Auge

[JürgenB]

Hallo Auge,

… Ausgenommen davon sind natürlich jene, die nur für sie selbst gelten (border, etc. pp.).

und um die (etc. pp.) geht es mir.

Gruß
Jürgen

[Auge]

Hallo

… Ausgenommen davon sind natürlich jene, die nur für sie selbst gelten (border, etc. pp.).

und um die (etc. pp.) geht es mir.

Naja, aber genau die übernimmst du ja nicht von anderen Elementen, sondern sie sind (typischerweise) Teil des Browser-CSS, die du deaktivieren musst/willst. Da scheint mir Gunnars Weg am erfolgversprechendsten, da button in anderen Kontexten unbeeinflusst bleiben.

Tschö, Auge

[Gunnar Bittersmann]

@@JürgenB

Zum Hintergrund: Ich möchte ein Element (th) klickbar machen. Dazu erzeuge ich im th einen button und kopiere den Inhalt über innerHTML um.

Statt die css-Eigenschaften einzeln zu setzen und dabei einige zu vergessen, möchte ich alle css-Eigenschaften vom th auf den button übertragen.

?? Wozu?

Was genau stört dich an der Formatierung des Buttons?

Der Rahmen? Weg damit:
th > button { border: none }

Die Hintergrundfarbe? Weg damit:
th > button { background-color: transparent }

Die Schrift? Vom Elternelement vererben:
th > button { font: inherit }

Das Padding? Weg damit:
th > button { padding: 0 }

Für Firefox außerdem:
th > button::-moz-focus-inner { margin: -1px; border-width: 1px; padding: 0; }

Noch was?

LLAP 🖖

[JürgenB]

Hallo Gunnar,

Was genau stört dich an der Formatierung des Buttons?

Der Rahmen? Weg damit:
th > button { border: none }

Die Hintergrundfarbe? Weg damit:
th > button { background-color: transparent }

Die Schrift? Vom Elternelement vererben:
th > button { font: inherit }

Das Padding? Weg damit:
th > button { padding: 0 }

ich habe auch noch ein
th > button { color: inherit }
eingefügt. Und mit
th > button { width: 100%; height: 100% }
wird die klickbare Fläche so groß wie das th.

Für Firefox außerdem:
th > button::-moz-focus-inner { margin: -1px; border-width: 1px; padding: 0; }

das habe ich in th > button::-moz-focus-inner { border-width: 0; padding: 0; } geändert.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

Für Firefox außerdem:
th > button::-moz-focus-inner { margin: -1px; border-width: 1px; padding: 0; }

das habe ich in th > button::-moz-focus-inner { border-width: 0; padding: 0; } geändert.

Der Sinn des 1px breiten Rahmens ist, dass bei :focus die gestrichelte Linie ringsrum noch zu erkennen ist.

Wenn du den :focus-Status anderweitig kenntlich machst, go ahead. Aber denk dran, ihn irgendwie kenntlichzumachen.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

Der Sinn des 1px breiten Rahmens ist, dass bei :focus die gestrichelte Linie ringsrum noch zu erkennen ist.

das war mir garnicht aufgefallen. Danke für deine Hilfe.

Gruß
Jürgen