css: Rahmen innerhalb Tabelle

[Pit]

Hallo,

ich würde gerne einen oder mehrere Tabellenzellen "umrahmen", weiß aber nicht genau, ob oder wie man das anstellen kann.

Bsp: Wenn ich in Zeile 3 den 02.1.2018 andersfarbig oder fett umrahmen will, wie würde man das machen

Pit

[Gunnar Bittersmann]

@@Pit

ich würde gerne einen oder mehrere Tabellenzellen "umrahmen", weiß aber nicht genau, ob oder wie man das anstellen kann.

Du selektierst die entsprechende(n) Zelle(n) anhand ihrer Merkmale, bspw. ID, und weist die gewünschten Stile zu.

Bsp: Wenn ich in Zeile 3 den 02.1.2018 andersfarbig oder fett umrahmen will, wie würde man das machen

Also das Element mit der ID 5_02_01_2018.

Aber Achtung: #5_02_01_2018 funktioniert nicht. Bezeichner dürfen in CSS nicht mit einer Ziffer beginnen. Die 5 muss escapet werden. 5 hat in Unicode den Codepoint U+0035, also \35 . (Beachten Sie die Lücke!)

#\35 _02_01_2018 { border: thick solid rebeccapurple }

Um das Escapen zu umgehen, kann man auch den Attributselektor [id='5_02_01_2018'] verwenden. Du hast aber schon eine Regel mit spezifischerem Selektor. Also entweder !important oder den Selektor spezifischer machen.

LLAP 🖖

PS: Kaputte Syntax-Highlighter sind kaputt.

[Gunnar Bittersmann]

@@Gunnar Bittersmann

muss escapet werden

Könnte sich der verdammte Übersetzer mal um den verdammten gelben Kasten kümmern? Danke.

LLAP 🖖

[Pit]

Hallo Gunnar,

Du selektierst die entsprechende(n) Zelle(n) anhand ihrer Merkmale, bspw. ID, und weist die gewünschten Stile zu.

…

Aber Achtung: #5_02_01_2018 funktioniert nicht. Bezeichner dürfen in CSS nicht mit einer Ziffer beginnen. Die 5 muss escapet werden. 5 hat in Unicode den Codepoint U+0035, also \35 . (Beachten Sie die Lücke!)

#\35 _02_01_2018 { border: thick solid rebeccapurple }

Wow, klasse. Genau das habe ich gesucht und gebraucht. Vielen Dank und schönen Sonntag,

Pit

[Gunnar Bittersmann]

@@Gunnar Bittersmann

(Beachten Sie die Lücke!)

#\35 _02_01_2018 { border: thick solid rebeccapurple }

Wohlgemerkt: Das Leerzeichen im Selektor ist kein Nachfahrenkombinator, sondern das Ende des Escapes.

Das macht sowas wie foo #\35 bar baz besonders gut lesbar. Nicht.

Leerzeichen als Ende von Escapes in CSS zu verwenden war wohl so’ne mittelgute Idee.

Ohne Leerzeichen geht’s, wenn der Codepoint sechstellig angegeben wird:
foo #\000035bar baz. Im konkreten Fall:

#\000035_02_01_2018 { border: thick solid rebeccapurple }

LLAP 🖖

PS: Bei der ID 5_02_01_2018 ginge es auch ohne Leerzeichen #\35_02_01_2018. Käme aber nach der 5 in der ID eine weitere (Hexadezimal-)Ziffer – also 0–9, a–f oder A–F –, dann ginge es nicht ohne (außer wenn der Codepoint sechstellig angegeben wird).

PPS: Deshalb meine Empfehlung in der Anmerkung des Übersetzers.

[Pit]

Hallo Gunnar,

Käme aber nach der 5 in der ID eine weitere (Hexadezimal-)Ziffer – also 0–9, a–f oder A–F –, dann ginge es nicht ohne (außer wenn der Codepoint sechstellig angegeben wird).

Das kann passieren. Prinzipiell sind Zahlen von 1-n möglich.

Weitere Frage: Gibt es (vorzugsweise in php, ansonsten in JS) eine Funktion, die mir eine beliebige Zahl in Unicode konvertiert?

Anmerkung: Ich werde nie wieder eine ID mit einer Ziffer beginnen, es wäre viel einfacher, wenn ich einen x-beliebigen Buchstaben vorangestellt hätte, ich wills nur jetzt nicht zwingend ändern…

Pit

[Gunnar Bittersmann]

@@Pit

Weitere Frage: Gibt es (vorzugsweise in php, ansonsten in JS) eine Funktion, die mir eine beliebige Zahl in Unicode konvertiert?

?? Die Zeichen 0 bis 9 haben die Codepoints U+0030 bis U+0039. In CSS also die Escapes \30 bis \39 (bzw. \000030 bis \000039).

Das verrät dir auch die Zeichentabelle deines Betriebssystems:

Und du willst keine „beliebigen Zahlen in Unicode konvertieren“, sondern den Codepoint des Zeichens für die erste Ziffer wissen.

Anmerkung: Ich werde nie wieder eine ID mit einer Ziffer beginnen, es wäre viel einfacher, wenn ich einen x-beliebigen Buchstaben vorangestellt hätte, ich wills nur jetzt nicht zwingend ändern…

Anmerkung: Wie ich schon sagte, muss beim Attributselektor nicht escapet werden. Das ist die ID kein Bezeichner, sonder einfach nur ein Wert.

LLAP 🖖

[beatovich]

hallo

Ein paar Anmerkungen

Wenn man nicht zu einem bestimmten Element navigieren muss, gibt es keinen Grund id-Attribute anzuwenden.

statt dessen bieten sich data-Attribute an.

also

• data-date="2018-04-16"
• data-weekday="fr"

Je nach Funktion wäre auch das zu überlegen

• class="date yesterday"
• class="date today"
• class="date tomorrow"

[Gunnar Bittersmann]

@@beatovich

Wenn man nicht zu einem bestimmten Element navigieren muss, gibt es keinen Grund id-Attribute anzuwenden.

Elemente, die dokumentweit einmalig sind, sind prädestiniert, eine ID zu tragen.

Das hat nichts damit zu tun, ob mal zu diesen Elementen navigieren will. Oder ob die ID für andere Zwecke verwendet wird. Oder (gegenwärtig) auch gar nicht.

statt dessen bieten sich data-Attribute an.

• data-date="2018-04-16"

Welchen Unterschied macht das gegenüber id="2018-04-16"?

• data-weekday="fr"

Dafür bietet sich auch eine Klasse an: class="fr".

• class="date today"

Dafür bietet sich aria-current="date" an.

LLAP 🖖

[beatovich]

hallo

@@beatovich

Wenn man nicht zu einem bestimmten Element navigieren muss, gibt es keinen Grund id-Attribute anzuwenden.

Elemente, die dokumentweit einmalig sind, sind prädestiniert, eine ID zu tragen.

Prädestinert oder nicht, wenn es keinen Grund gibt eine id zu verwenden, dann soll man's auch nicht tun. CSS allein ist ein schlechter Grund.

Und ja, natürlich brauchen manchmal einzigartige Elemente wie <main> ein id-Attribut.

Das hat nichts damit zu tun, ob mal zu diesen Elementen navigieren will. Oder ob die ID für andere Zwecke verwendet wird. Oder (gegenwärtig) auch gar nicht.

Sorry aber ich muss ganz schnell an die Tür, es klingelt.

statt dessen bieten sich data-Attribute an.

• data-date="2018-04-16"

Welchen Unterschied macht das gegenüber id="2018-04-16"?

• Kein Syntax-Schrott.
• Darf mehrfach vorkommen.

• data-weekday="fr"

Dafür bietet sich auch eine Klasse an: class="fr".

von mir aus, obwohl du wahrscheinlich nicht weisst, wofür das fr im Code jetzt steht.

• class="date today"

Dafür bietet sich aria-current="date" an.

Danke, werd ich mir merken.

[Gunnar Bittersmann]

@@beatovich

Prädestinert oder nicht, wenn es keinen Grund gibt eine id zu verwenden, dann soll man's auch nicht tun. CSS allein ist ein schlechter Grund.

Ein Grund könnte sein, dass IDs für automatisierte Tests nützlich sind.

• data-date="2018-04-16"

Welchen Unterschied macht das gegenüber id="2018-04-16"?

• Kein Syntax-Schrott.

Du meinst im CSS bei ID-Selektoren? Dafür kann HTML nichts.

Aber nehmen wir ruhig id="date-2018-04-16".

Und class="weekday-fr". Das löst auch das von dir angesprochene Problem:

• data-weekday="fr"

Dafür bietet sich auch eine Klasse an: class="fr".

von mir aus, obwohl du wahrscheinlich nicht weisst, wofür das fr im Code jetzt steht.

LLAP 🖖

[beatovich]

hallo

@@beatovich

Prädestinert oder nicht, wenn es keinen Grund gibt eine id zu verwenden, dann soll man's auch nicht tun. CSS allein ist ein schlechter Grund.

Ein Grund könnte sein, dass sich IDs für automatisierte Tests nützlich sind.

• data-date="2018-04-16"

Welchen Unterschied macht das gegenüber id="2018-04-16"?

• Kein Syntax-Schrott.

Du meinst im CSS bei ID-Selektoren? Dafür kann HTML nichts.

Aber nehmen wir ruhig id="date-2018-04-16".

Und warum nicht #calendar_1 .date-2018-04-16

Bereits die Annahme, dass im gleichen Dokument ein Datumsfeld einmalig ist, könnte sich sehr schnell als falsch erweisen.

Will man dieses Feld ( nicht nur mit el.focus() ) navigieren können, dann natürlich: id="calendar_1_2018-04-16"

und im CSS eventuell eher [id$="2018-04-16"]

Frage hier auch, warum soll ich eigentlich immer die höchste Präferenz des id-Selectors anzapfen?

[Gunnar Bittersmann]

@@beatovich

Und warum nicht #calendar_1 .date-2018-04-16

Bereits die Annahme, dass im gleichen Dokument ein Datumsfeld einmalig ist, könnte sich sehr schnell als falsch erweisen.

Ja.

und im CSS eventuell eher [id$="2018-04-16"]

Frage hier auch, warum soll ich eigentlich immer die höchste Präferenz des id-Selectors anzapfen?

Tust du doch gar nicht. Das ist ein Attributselektor. Dieselbe Spezifität wie ein Klassenselektor.

Davon abgesehen: wenn man gezielt ein bestimmtes Element stylen will, spricht nichts gegen einen Selektor höherer Spezifität.

LLAP 🖖

[marctrix]

Hej @@beatovich

Sorry aber ich muss ganz schnell an die Tür, es klingelt.

Danke für den Hinweis, habe mich schon über die lange Tipp-Pause gewundert. 😂

Marc

[Pit]

Hallo Gunnar,

?? Die Zeichen 0 bis 9 haben die Codepoints U+0030 bis U+0039. In CSS also die Escapes \30 bis \39 (bzw. \000030 bis \000039).

...

Und du willst keine „beliebigen Zahlen in Unicode konvertieren“, sondern den Codepoint des Zeichens für die erste Ziffer wissen.

Achja, stimmt. Muß ich sofort ausprbieren gehen, danke.

Pit

[Pit]

Hallo Gunnar,

kann es sein, dass, wenn ich per jquery dem Element eine Klasse zuweisen will, ich nicht escapen muß?

Sämtliche Escapeversuche sind misslungen, aber einfach ohne escapen funktionierts.

echo ("$('#".$myCell."').addClass('RahmenZelle');\r\n");

Pit

[Gunnar Bittersmann]

@@Gunnar Bittersmann

(Beachten Sie die Lücke!) Wohlgemerkt: Das Leerzeichen im Selektor ist kein Nachfahrenkombinator, sondern das Ende des Escapes.

Leerzeichen als Ende von Escapes in CSS zu verwenden war wohl so’ne mittelgute Idee.

Um lesbaren Code zu haben, kommentieren:

/* foo .0815 bar */
foo .\30 815 bar
{
	color: #0815;
}

/* baz #42 quz */
baz #\34 2 quz
{
	max-width: 42em;
}

Oder Attributselektoren verwenden:

foo [class~="0815"] bar
{
	color: #0815;
}

(was völlig äquivalent zu oben ist^[1])

baz [id="42"] quz
{
	max-width: 42em;
}

(was nicht äquivalent ist, da geringere Spezifität des Selektors)

LLAP 🖖

---

1. Zumindest aus Sicht von CSS. Browser könnten für Klassenselektoren Optimierungen haben, die sie performanter machen als Attributselektoren. Aber: selector performance is not a thing, und wenn doch, dann macht man grundsätzlich was falsch.) ↩︎